npm - @workday/canvas-kit-mcp - Versions diffs - 14.3.12 → 14.3.13 - Mend

@workday/canvas-kit-mcp 14.3.12 → 14.3.13

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

Files changed (5) hide show

package/dist/cli.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../lib/cli.ts", "../lib/index.ts", "../package.json", "../lib/config.json", "../lib/stories-config.json"],
-  "sourcesContent": ["#!/usr/bin/env node\n\nimport {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js';\nimport {getServer} from './index.js';\n\nexport async function main() {\n  const transport = new StdioServerTransport();\n  await getServer().connect(transport);\n}\n\nmain().catch((error: unknown) => {\n  console.error('Fatal error in main():', error);\n  process.exit(1);\n});\n", "// @ts-nocheck\nimport * as fs from 'node:fs';\nimport * as path from 'node:path';\nimport {fileURLToPath} from 'node:url';\n\nimport {z} from 'zod';\nimport packageJson from '../package.json';\nimport fileNames from './config.json';\nimport storiesConfig from './stories-config.json';\nimport {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js';\nimport {\n  registerAppTool,\n  registerAppResource,\n  RESOURCE_MIME_TYPE,\n} from '@modelcontextprotocol/ext-apps/server';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nexport function getServer() {\n  const mcpVersion = packageJson.version;\n  const mcpName = packageJson.name;\n\n  const server = new McpServer(\n    {\n      name: mcpName,\n      version: mcpVersion,\n    },\n    {\n      capabilities: {\n        tools: {},\n        resources: {},\n      },\n    }\n  );\n\n  /**\n   * Metadata for agents about the resource files.\n   */\n  function getUpgradeGuideResource(fileName: string) {\n    switch (fileName) {\n      case 'upgrade-guides/9.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 9.0 Upgrade Guide',\n          description: `# Canvas Kit 9.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v9.\n\nIn this release, we:\n- introduced new Table component\n- removed Drawer, Layout, Column, Stack, HStack, and VStack components\n- removed focusRing and composeModelHooks utilities\n- updated Button, Toast, and Collection components\n- added depth token updates`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/9.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/10.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 10.0 Upgrade Guide',\n          description: `# Canvas Kit 10.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v10.\n\nIn this release, we:\n- introduced new styling package @workday/canvas-kit-styling\n- removed CSS packages and useBanner\n- deprecated Input Icon Container, Select Preview, Space Numbers, and Table\n- updated space and depth tokens\n- updated Button, Popups, and Select components`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/10.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/11.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 11.0 Upgrade Guide',\n          description: `# Canvas Kit 11.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v11.\n\nIn this release, we:\n- transitioned to new CSS variable-based styling approach\n- introduced Canvas Tokens Web package for semantic tokens\n- introduced new styling API for component styling\n- deprecated Form Field Main, Label Text, Text Area Preview, Text Input Preview\n- updated components to use CSS tokens`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/11.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/12.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 12.0 Upgrade Guide',\n          description: `# Canvas Kit 12.0 Upgrade Guide\nCanvas Kit is transitioning into a new way of styling.\nTheming and building an in sync Canvas Kit CSS has been at the top of our minds.\nWe've started using our new Canvas Tokens Web package to take advantage of CSS variables and provide semantic tokens that can translate to theming components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/12.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/13.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 13.0 Upgrade Guide',\n          description: `# Canvas Kit 13.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v13.\n\nIn this release, we:\n- refactored components to use our Canvas tokens and styling API\n- made several accessibility improvements\n- updated our brand logos\n- improved our infrastructure`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/13.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'llm-style-props-migration.txt':\n        return {\n          title: 'Canvas Kit Style Props Migration Guide',\n          description: `# Canvas Kit Style Props Migration Guide\nGuide for migrating from Emotion's style props to @workday/canvas-kit-styling.\nThis migration improves performance, consistency, and maintainability by moving away from runtime styling to static CSS compilation.`,\n          mimeType: 'text/plain',\n          uri: 'docs://llm-style-props-migration',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/14.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 14.0 Upgrade Guide',\n          description: `# Canvas Kit 14.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v14.\n\nIn this release, we:\n- introduced Workday's new brand direction with a new color palette\n- made styling updates to our components\n- improved token system and theming capabilities`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/14.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'theming.md':\n        return {\n          title: 'Canvas Kit Theming Guide',\n          description: `# Canvas Kit Theming Guide\nComprehensive guide for theming Canvas Kit applications in v14.\n\nCovers:\n- Global theming with CSS variables at :root level (recommended approach)\n- Scoped theming with CanvasProvider for specific sections\n- CSS token structure: base tokens, brand tokens, and system tokens\n- Dark mode implementation\n- RTL support with CSS logical properties\n- Migration from JavaScript theme objects to CSS variables\n- Theming modals, dialogs, and popups\n- Best practices for semantic token usage and accessibility`,\n          mimeType: 'text/markdown',\n          uri: 'docs://theming',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      default:\n        throw new Error(`${fileName} is not a valid resource`);\n    }\n  }\n\n  fileNames.upgradeGuideFiles.forEach(fileName => {\n    const resource = getUpgradeGuideResource(fileName);\n    if (!resource || !resource.contents) {\n      throw new Error(`Resource ${fileName} not found`);\n    }\n    server.registerResource(\n      resource.title,\n      resource.uri,\n      {\n        title: resource.title,\n        description: resource.description,\n        mimeType: resource.mimeType,\n      },\n      async (uri: URL) => ({\n        contents: [\n          {\n            uri: uri.href,\n            text: resource.contents,\n          },\n        ],\n      })\n    );\n  });\n\n  server.registerTool(\n    'get-canvas-kit-upgrade-guides',\n    {\n      title: 'Get Canvas Kit Upgrade Guides',\n      description: 'Retrieve the Canvas Kit Upgrade Guide documentation.',\n      annotations: {\n        readOnlyHint: true,\n      },\n    },\n    async () => {\n      const output = {\n        count: fileNames.upgradeGuideFiles.length,\n        files: fileNames.upgradeGuideFiles.map(fileName => {\n          const resource = getUpgradeGuideResource(fileName);\n          if (!resource) {\n            throw new Error(`Resource ${fileName} not found`);\n          }\n          return {\n            name: resource.title,\n            uri: resource.uri,\n          };\n        }),\n      };\n      return {\n        content: [\n          {type: 'text', text: JSON.stringify(output)},\n          ...fileNames.upgradeGuideFiles.map(fileName => {\n            const resource = getUpgradeGuideResource(fileName);\n            if (!resource) {\n              throw new Error(`Resource ${fileName} not found`);\n            }\n            return {\n              type: 'resource_link' as const,\n              uri: resource.uri,\n              name: resource.title,\n              mimeType: resource.mimeType,\n              description: resource.description,\n              annotations: {\n                audience: ['user', 'assistant'] as ('user' | 'assistant')[],\n              },\n            };\n          }),\n        ],\n        structuredContent: output,\n      };\n    }\n  );\n  /**\n   * Metadata for agents about the token documentation files.\n   */\n  function getTokenResource(fileName: string) {\n    switch (fileName) {\n      case 'tokens/token-migration.md':\n        return {\n          title: 'Canvas Kit Token Migration v2 to v3',\n          description: `# Design Token Migration: v2 to v3\nComprehensive mapping of deprecated tokens to new values. Includes:\n- Old fruit-named palette tokens (cinnamon, cantaloupe, blueberry, etc.) mapped to new color family names (red, amber, blue, etc.)\n- System token replacements for semantic color usage (sys.color.bg.*, sys.color.fg.*, sys.color.border.*)\n- Migration phases: Assessment, Replacement, Testing, Documentation\n- Accessibility considerations for OKLCH color space changes`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/token-migration',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-palette.md':\n        return {\n          title: 'Canvas Kit Color Palette',\n          description: `# Canvas Kit Color Palette\nOverview of Workday's shared color palette. Includes:\n- Global palette with 11 colors and 2 neutrals (Slate, Neutral), each with 13 shades\n- OKLCH color space for perceptual balance\n- Accent colors, neutral colors, and alpha colors guidance\n- Token hierarchy: Base tokens (raw values), Brand tokens (tenant theming), System tokens (semantic roles)\n- Color roles mapping (primary, positive, caution, critical, etc.)`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-palette',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-tokens.md':\n        return {\n          title: 'Canvas Kit Color Tokens',\n          description: `# Canvas Kit Color Tokens\nDesign tokens naming system and usage guide. Includes:\n- Token naming pattern: [property].[role].[modifier]\n- Properties: bg, fg, text, border, icon, shadow, static\n- Roles: default, primary, positive, critical, caution, info, alt, muted, contrast, ai, focus, disabled, inverse, hint, input, container, divider, transparent, translucent, overlay\n- Modifiers: softest, softer, soft, default, strong, stronger, strongest\n- Theming and platform adaptation guidance`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-tokens',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-contrast.md':\n        return {\n          title: 'Canvas Kit Color Contrast',\n          description: `# Canvas Kit Color Contrast\nAccessibility contrast guidelines for color pairings. Includes:\n- WCAG 2.1 compliance requirements (4.5:1 for text, 3:1 for non-text, 7:1 for AAA)\n- Step difference framework: 500+ for AA text, 400+ for AA non-text, 700+ for AAA\n- Practical contrast tables for background/foreground combinations\n- High contrast (7:1+) guidelines for low vision support`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-contrast',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-roles.md':\n        return {\n          title: 'Canvas Kit Color Roles',\n          description: `# Canvas Kit Color Roles\nSemantic color role system for consistent UI styling. Includes:\n- Role categories: Interactive (primary, focus), Status (positive, caution, critical), Hierarchy (alt, muted, contrast), Functional (disabled, translucent, overlay)\n- Property types: bg, fg, text, icon, border, shadow, static, brand\n- Usage guidance with Do's and Don'ts for each role\n- Modifier scale: softest \u2192 softer \u2192 soft \u2192 default \u2192 strong \u2192 stronger \u2192 strongest`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-roles',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-scale.md':\n        return {\n          title: 'Canvas Kit Color Scale',\n          description: `# Canvas Kit Color Scale\nTonal scale system from 0 (lightest) to 1000 (darkest). Includes:\n- Step guidelines: 0 (page bg), 50-100 (subtle bg), 200-300 (borders), 400-500 (interactive), 600-700 (accents), 800-950 (text), 975-1000 (dark mode)\n- Perceptual uniformity across color families using OKLCH\n- Amber exception: chroma peaks at 300-400 instead of 500\n- Practical examples for each step range`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-scale',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'llm-token-migration-14.txt':\n        return {\n          title: 'Canvas Kit v14 Token Migration Guide',\n          description: `# Canvas Kit v14 Token Migration Guide\nComplete migration guide from @workday/canvas-kit-react/tokens to @workday/canvas-tokens-web. Includes:\n- Installation and CSS variable imports setup\n- Color token mapping tables (old fruit names \u2192 new base tokens \u2192 system tokens)\n- Brand color migration from Emotion theme to CSS variables\n- Spacing tokens (space.s \u2192 system.space.x4), shape tokens (borderRadius \u2192 system.shape)\n- Typography tokens (type.levels \u2192 system.type), depth tokens (depth \u2192 system.depth)\n- Complete before/after code examples for cards, forms, and buttons\n- Best practices and common pitfalls`,\n          mimeType: 'text/plain',\n          uri: 'docs://llm-token-migration-14',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/v4-token-migration.md':\n        return {\n          title: 'Canvas Kit v4 Token Migration Guide',\n          description: `# Canvas Kit v4 Token Migration Guide\nComplete migration guide from @workday/canvas-tokens-web v3 to v4. Includes:\n- Extended alpha scales across base color palettes (A25, A50, A100, A200) and extended alpha range (A0-A975) for slate, neutral, and white palettes\n- New magenta palette added to the color system\n- Brand token updates with numerical naming (25, 50, 100, 200...900, 950, 975) replacing descriptive names (darkest, darker, dark, base, light, lighter, lightest)\n- Brand common token updates: focus-outline \u2192 focus, error-inner \u2192 critical, alert-inner \u2192 caution.inner, alert-outer \u2192 caution.outer\n- Comprehensive surface token system (system.color.surface.*) replacing color.bg.surface.* tokens for better UI component support\n- New semantic tokens for size, space, shape, and breakpoints\n- Focus, accent, and semantic token additions\n- Complete deprecation mapping tables showing old tokens \u2192 new token replacements\n- Migration examples and best practices for updating code from v3 to v4`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/v4-token-migration',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/opacity.md':\n        return {\n          title: 'Canvas Kit v4 Opacity Token Migration Guide',\n          description: `# Canvas Kit v4 Opacity Token Migration Guide\nOpacity tokens control transparency values for UI elements. Use them to create visual hierarchy, indicate states, and guide user focus.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/opacity',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/shape.md':\n        return {\n          title: 'Canvas Kit v4 Shape Token Migration Guide',\n          description: `# Canvas Kit v4 Shape Token Migration Guide\nShape tokens control border radius values for UI elements. Use them to create consistent rounded corners across components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/shape',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/size.md':\n        return {\n          title: 'Canvas Kit v4 Size Token Migration Guide',\n          description: `# Canvas Kit v4 Size Token Migration Guide\nSize tokens control the size of UI elements. Use them to create consistent sizes across components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/size',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/space.md':\n        return {\n          title: 'Canvas Kit v4 Space Token Migration Guide',\n          description: `# Canvas Kit v4 Space Token Migration Guide\nSpace tokens control the spacing of UI elements. Use them to create consistent spacing across components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/space',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      default:\n        throw new Error(`${fileName} is not a valid token resource`);\n    }\n  }\n\n  fileNames.tokenFiles.forEach(fileName => {\n    const resource = getTokenResource(fileName);\n    if (!resource || !resource.contents) {\n      throw new Error(`Resource ${fileName} not found`);\n    }\n    server.registerResource(\n      resource.title,\n      resource.uri,\n      {\n        title: resource.title,\n        description: resource.description,\n        mimeType: resource.mimeType,\n      },\n      async (uri: URL) => ({\n        contents: [\n          {\n            uri: uri.href,\n            text: resource.contents,\n          },\n        ],\n      })\n    );\n  });\n\n  server.registerTool(\n    'get-canvas-kit-tokens',\n    {\n      title: 'Get Canvas Kit Tokens',\n      description: `Retrieve Canvas Kit design token documentation for migrating from old tokens to the new @workday/canvas-tokens-web system.\n\nUse this tool when:\n- Migrating from @workday/canvas-kit-react/tokens to @workday/canvas-tokens-web\n- Converting old fruit-named colors (cinnamon, blueberry, cantaloupe) to new token system\n- Understanding the token hierarchy: base tokens, system tokens, and brand tokens\n- Finding the correct system token replacement (sys.color.bg.*, sys.color.fg.*, sys.color.border.*)\n- Learning the token naming pattern: [property].[role].[modifier]\n- Understanding color roles (primary, positive, caution, critical, muted, etc.)\n- Migrating spacing (space.s \u2192 system.space.x4), shape, typography, or depth tokens\n- Ensuring WCAG accessibility compliance with color contrast requirements\n\nReturns links to token documentation resources including migration guides, color palettes, color roles, contrast guidelines, and complete v14 migration examples.`,\n      annotations: {\n        readOnlyHint: true,\n      },\n    },\n    async () => {\n      const output = {\n        count: fileNames.tokenFiles.length,\n        files: fileNames.tokenFiles.map(fileName => {\n          const resource = getTokenResource(fileName);\n          if (!resource) {\n            throw new Error(`Resource ${fileName} not found`);\n          }\n          return {\n            name: resource.title,\n            uri: resource.uri,\n          };\n        }),\n      };\n      return {\n        content: [\n          {type: 'text', text: JSON.stringify(output)},\n          ...fileNames.tokenFiles.map(fileName => {\n            const resource = getTokenResource(fileName);\n            if (!resource) {\n              throw new Error(`Resource ${fileName} not found`);\n            }\n            return {\n              type: 'resource_link' as const,\n              uri: resource.uri,\n              name: resource.title,\n              mimeType: resource.mimeType,\n              description: resource.description,\n              annotations: {\n                audience: ['user', 'assistant'],\n              },\n            };\n          }),\n        ],\n        structuredContent: output,\n      };\n    }\n  );\n\n  interface StoryConfig {\n    title: string;\n    storybookUrl: string;\n    mdxPath: string;\n    mdxProse: string;\n  }\n\n  const stories = storiesConfig.stories as Record<string, StoryConfig>;\n  const storySlugs: string[] = [];\n\n  for (const [slug, story] of Object.entries(stories)) {\n    const appPath = path.resolve(__dirname, 'apps', `${slug}.html`);\n    const appExists = fs.existsSync(appPath);\n\n    if (appExists) {\n      storySlugs.push(slug);\n      registerAppResource(\n        server,\n        story.title,\n        `ui://story/${slug}`,\n        {\n          description: `Interactive preview of the ${story.title} Canvas Kit component`,\n        },\n        async (uri: URL) => ({\n          contents: [\n            {\n              uri: uri.href,\n              text: fs.readFileSync(appPath, 'utf8'),\n              mimeType: RESOURCE_MIME_TYPE,\n              _meta: {\n                ui: {\n                  csp: {\n                    resourceDomains: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],\n                  },\n                },\n              },\n            },\n          ],\n        })\n      );\n    }\n\n    if (story.mdxProse) {\n      server.registerResource(\n        `${story.title} Documentation & Sample Code`,\n        `docs://examples/${slug}`,\n        {\n          title: `${story.title} Documentation & Sample Code`,\n          description: `Documentation and source code for all ${story.title} component examples.`,\n          mimeType: 'text/markdown',\n        },\n        async (uri: URL) => ({\n          contents: [\n            {\n              uri: uri.href,\n              text: story.mdxProse,\n            },\n          ],\n        })\n      );\n    }\n  }\n\n  const storyViewerPath = path.resolve(__dirname, 'apps', 'story-viewer.html');\n  if (storySlugs.length > 0 && fs.existsSync(storyViewerPath)) {\n    const slugEnum = storySlugs as [string, ...string[]];\n\n    registerAppResource(\n      server,\n      'Canvas Kit Story Viewer',\n      'ui://story-viewer',\n      {\n        description: 'Wrapper app that renders Canvas Kit component story previews.',\n      },\n      async (uri: URL) => ({\n        contents: [\n          {\n            uri: uri.href,\n            text: fs.readFileSync(storyViewerPath, 'utf8'),\n            mimeType: RESOURCE_MIME_TYPE,\n            _meta: {\n              ui: {\n                csp: {\n                  resourceDomains: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],\n                },\n              },\n            },\n          },\n        ],\n      })\n    );\n\n    const fetchStoryHandler = async ({story}: {story: string}) => {\n      const config = stories[story];\n      if (!config) {\n        throw new Error(`Unknown story \"${story}\". Valid stories: ${storySlugs.join(', ')}`);\n      }\n      const appPath = path.resolve(__dirname, 'apps', `${story}.html`);\n      const storyHtml = fs.readFileSync(appPath, 'utf8');\n      const hasDocs = !!config.mdxProse;\n      return {\n        content: [\n          {\n            type: 'text' as const,\n            text: JSON.stringify({\n              displayGuide:\n                'Present the Storybook URL as a markdown link. If you need code examples, read the resource_link.',\n              title: config.title,\n              storybookUrl: config.storybookUrl,\n            }),\n          },\n          ...(hasDocs\n            ? [\n                {\n                  type: 'resource_link' as const,\n                  uri: `docs://examples/${story}`,\n                  name: `${config.title} Documentation & Sample Code`,\n                  mimeType: 'text/markdown',\n                  description: `Documentation and code examples for ${config.title}. Read this if you need to write code.`,\n                },\n              ]\n            : []),\n        ],\n        structuredContent: {\n          storyHtml,\n        },\n      };\n    };\n\n    registerAppTool(\n      server,\n      'fetch-component-documentation-example',\n      {\n        title: 'Fetch Canvas Kit Component Documentation and Storybook example',\n        description:\n          'Renders an interactive Canvas Kit component story inline for the user to see.\\n\\n' +\n          'Before Calling:\\n' +\n          '1. Read the docs://examples/{story} resource for documentation and code examples\\n' +\n          '2. Only call this tool if the user needs to see the documentation or code examples\\n' +\n          '3. Do not call this tool just to learn about a component \u2014 read the resource instead',\n        inputSchema: {\n          story: z.enum(slugEnum).describe('The component story slug to preview'),\n        },\n        annotations: {\n          readOnlyHint: true,\n        },\n        _meta: {\n          ui: {resourceUri: 'ui://story-viewer'},\n        },\n      },\n      fetchStoryHandler\n    );\n  }\n\n  return server;\n}\n", "{\n  \"name\": \"@workday/canvas-kit-mcp\",\n  \"version\": \"14.3.12\",\n  \"description\": \"MCP package for Canvas Kit\",\n  \"author\": \"Workday, Inc. (https://www.workday.com)\",\n  \"license\": \"Apache-2.0\",\n  \"type\": \"module\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/Workday/canvas-kit.git\",\n    \"directory\": \"modules/mcp\"\n  },\n  \"bin\": {\n    \"canvas-kit-mcp\": \"./dist/cli.js\"\n  },\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/types/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./lib\": {\n      \"types\": \"./dist/types/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    }\n  },\n  \"main\": \"./dist/index.js\",\n  \"types\": \"./dist/types/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build:discover\": \"tsx ./build/discover-stories.ts\",\n    \"build:apps\": \"tsx ./build/build-story-apps.ts\",\n    \"build:copy\": \"tsx ./build/index.ts\",\n    \"build:types\": \"tsc --project tsconfig.build.json -d true --declarationDir dist/types --emitDeclarationOnly --pretty\",\n    \"build:mcp\": \"esbuild lib/index.ts --bundle --platform=node --packages=external --outfile=dist/index.js --format=esm --sourcemap && esbuild lib/cli.ts --bundle --platform=node --packages=external --outfile=dist/cli.js --format=esm --sourcemap\",\n    \"build\": \"npm-run-all build:discover build:apps build:copy build:types build:mcp\",\n    \"clean\": \"rimraf dist && rimraf .build-info && mkdirp dist\"\n  },\n  \"keywords\": [\n    \"canvas\",\n    \"canvas-kit\",\n    \"workday\",\n    \"mcp\"\n  ],\n  \"dependencies\": {\n    \"@modelcontextprotocol/ext-apps\": \"^1.3.2\",\n    \"@modelcontextprotocol/sdk\": \"^1.29.0\",\n    \"zod\": \"^4.3.6\"\n  },\n  \"devDependencies\": {\n    \"@mdx-js/react\": \"^3.1.0\",\n    \"@mdx-js/rollup\": \"^3.1.0\",\n    \"@types/node\": \"^22.0.0\",\n    \"@vitejs/plugin-react\": \"^4.3.0\",\n    \"esbuild\": \"^0.25.11\",\n    \"glob\": \"^10.5.0\",\n    \"mkdirp\": \"^1.0.3\",\n    \"remark-gfm\": \"^4.0.0\",\n    \"rimraf\": \"^5.0.0\",\n    \"tsx\": \"^4.7.0\",\n    \"typescript\": \"5.0\",\n    \"vite\": \"^5.0.0\",\n    \"vite-plugin-singlefile\": \"^2.0.0\"\n  }\n}\n", "{\n  \"upgradeGuideFiles\": [\n    \"upgrade-guides/9.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/10.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/11.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/12.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/13.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/14.0-UPGRADE-GUIDE.md\",\n    \"llm-style-props-migration.txt\",\n    \"theming.md\"\n  ],\n  \"tokenFiles\": [\n    \"tokens/token-migration.md\",\n    \"tokens/color-palette.md\",\n    \"tokens/color-tokens.md\",\n    \"tokens/color-contrast.md\",\n    \"tokens/color-roles.md\",\n    \"tokens/color-scale.md\",\n    \"llm-token-migration-14.txt\",\n    \"tokens/v4/v4-token-migration.md\",\n    \"tokens/v4/opacity.md\",\n    \"tokens/v4/shape.md\",\n    \"tokens/v4/size.md\",\n    \"tokens/v4/space.md\"\n  ]\n}\n", "{\n  \"stories\": {\n    \"tooltip\": {\n      \"title\": \"Components/Popups/Tooltip\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs\",\n      \"mdxPath\": \"modules/react/tooltip/stories/Tooltip.mdx\",\n      \"mdxProse\": \"# Canvas Kit React Tooltips\\n\\nA Tooltip component that renders information/text when the user hovers over an element. A tooltip is\\nused to label or describe an element. By default, a tooltip will label an element. This is useful\\nfor buttons with icons. A tooltip can also be used to describe additional information about an\\nelement\\n\\n[> Workday Design Reference](https://design.workday.com/components/popups/tooltips)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThis component follows the\\n[W3 Tooltip specification](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). Tooltips are used to\\nlabel buttons with icons and provide additional context to elements.\\n\\n### When to use tooltips\\n\\nUse a tooltip when you want to display additional information for users to better understand the\\npurpose, context, or interaction.\\n\\n### When not to use tooltips\\n\\nWhen the visual text will be the exact same as what is visually displayed to the user without the\\ntooltip being visible\\n\\n- Does this element need additional context or information?\\n  - No: Don't use a tooltip\\n  - Yes:\\n    - Is the tooltip text useful to screen reader users?\\n      - No: Use `type=\\\"muted\\\"` which will not make the tooltip visible to screen reader users\\n      - Yes:\\n        - Is the tooltip text different from the visual text displayed to users?\\n          - No text: Use `type=\\\"label\\\"` which will add `aria-label` like the icon example\\n          - Yes: Use `type=\\\"describe\\\"` which will add `aria-describedby`\\n          - No: Don't use a tooltip\\n\\n### Basic Example\\n\\nHere is a basic example of a `TertiaryButton` that renders an icon using a tooltip to label the\\nicon. This labels the button for both sighted users and screen readers. A tooltip provides an\\n`aria-label` to child elements for the accessibility tree and a visual tooltip during mouse hover\\nand focus events.\\n```tsx\\nimport {xIcon} from '@workday/canvas-system-icons-web';\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const Default = () => {\\n  return (\\n    <Tooltip title=\\\"Close\\\">\\n      <TertiaryButton icon={xIcon} aria-label=\\\"Close\\\" />\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Describing an Element\\n\\nThe default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to\\nprovide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`\\nto the target element. This will allow screen reader users to hear the name of the control that is\\nbeing focused and the ancillary tooltip information.\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const DescribeType = () => {\\n  return (\\n    <Tooltip type=\\\"describe\\\" title=\\\"The service will restart after this action\\\">\\n      <DeleteButton>Delete</DeleteButton>\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Description of an Element\\n\\nThe default mode for a tooltip is to assign a name to the target element with an `aria-label`\\nstring. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.\\nThis will add `aria-description` strings to the target element instead. This variant is useful on\\ntext buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible. \\n\\n> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.\\n>\\n> ```jsx\\n> // The text will be understood as: You must accept terms and conditions\\n> <Tooltip type=\\\"description\\\" title={<span>You<i>must</i> accept terms and conditions</span>}/>\\n>\\n> // This will render a string including the html and will not be properly understood by voice over.\\n> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>\\n> <Tool\\n```tsx\\nimport {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {chartConfigIcon} from '@workday/canvas-system-icons-web';\\n\\nexport const DescriptionType = () => {\\n  return (\\n    <Flex gap=\\\"s\\\">\\n      <Tooltip type=\\\"description\\\" title=\\\"Search using additional criteria\\\">\\n        <TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>\\n      </Tooltip>\\n      <Tooltip type=\\\"description\\\" title=\\\"Create saved search\\\">\\n        <SecondaryButton>Save</SecondaryButton>\\n      </Tooltip>\\n      <Tooltip type=\\\"description\\\" title=\\\"The service will restart after this action\\\">\\n        <DeleteButton>Delete</DeleteButton>\\n      </Tooltip>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Muted Tooltips\\n\\nIf a tooltip does not need to be visible to screen reader users, or you handle accessibility of the\\ntooltip yourself, you can set the `type` to `muted`. This will not add any special ARIA attributes\\nto the target element.\\n```tsx\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const Muted = () => {\\n  return (\\n    <Tooltip title=\\\"Visual-only Tooltip\\\" type=\\\"muted\\\">\\n      <span>Some text. The contents of the tooltip are invisible to screen reader users.</span>\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Custom Content\\n\\nA tooltip can contain HTML, but should not contain any focusable elements or semantically meaningful\\nformatting. The content will lose all semantic meaning when read by a screen reader. If complex\\ncontent or a focusable element is needed by your UI, a tooltip is not a good choice. Consider using\\na dialog instead.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const CustomContent = () => {\\n  return (\\n    <React.Fragment>\\n      <Tooltip\\n        type=\\\"describe\\\"\\n        title={\\n          <div>\\n            This is a <em>custom</em> tooltip with <strong>custom HTML</strong>\\n          </div>\\n        }\\n      >\\n        <SecondaryButton>Hover Me</SecondaryButton>\\n      </Tooltip>\\n    </React.Fragment>\\n  );\\n};\\n```\\n\\n### Delayed Tooltip\\n\\nThe default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can\\ncontrol the length of the delay by providing custom `showDelay` and `hideDelay` in ms.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const DelayedTooltip = () => {\\n  return (\\n    <React.Fragment>\\n      <Tooltip type=\\\"describe\\\" title=\\\"Tooltip Text\\\" showDelay={2000} hideDelay={1000}>\\n        <SecondaryButton>\\n          Tooltip appears after 2 seconds and disappears after 1 second\\n        </SecondaryButton>\\n      </Tooltip>\\n    </React.Fragment>\\n  );\\n};\\n```\\n\\n### Placements\\n\\nThe tooltip allows for a `placement` configuration. The tooltip uses\\n[PopperJS](https://popper.js.org/) to position tooltips, so any valid PopperJS placement is valid\\nfor tooltips.\\n```tsx\\nimport React from 'react';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Card} from '@workday/canvas-kit-react/card';\\nimport {Placement} from '@workday/canvas-kit-react/popup';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst placementCardStyles = createStyles({\\n  boxShadow: system.depth[2],\\n  display: 'flex',\\n  width: 100,\\n  height: 100,\\n  justifyContent: 'space-around',\\n  alignItems: 'center',\\n  padding: system.space.x1,\\n});\\n\\nexport const Placements = () => {\\n  const placementStyles = {\\n    display: 'flex',\\n    justifyContent: 'space-around',\\n  };\\n\\n  const createPlacement = (placement: string, index) => {\\n    return (\\n      <Tooltip title=\\\"Add\\\" placement={placement as Placement} key={index}>\\n        <Card cs={placementCardStyles}>\\n          <Card.Body>{placement}</Card.Body>\\n        </Card>\\n      </Tooltip>\\n    );\\n  };\\n\\n  return (\\n    <div\\n      style={{\\n        padding: 100, // give enough room for the tooltips to fit around their targets\\n        display: 'grid',\\n        gridTemplateColumns: '100px 320px 100px',\\n        gridTemplateRows: '100px 320px 100px',\\n      }}\\n    >\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'row'}}>\\n        {['top-start', 'top', 'top-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'column'}}>\\n        {['left-start', 'left', 'left-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'column'}}>\\n        {['right-start', 'right', 'right-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'row'}}>\\n        {['bottom-start', 'bottom', 'bottom-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n    </div>\\n  );\\n};\\n```\\n\\n### Tooltips on overflowing content\\n\\nThe `OverflowTooltip` component can be applied to any element that has some type of overflow\\napplied, or has a child element that has overflow applied. The most common and widely supported type\\nof truncation is the ellipsis.\\n\\n```css\\noverflow: hidden;\\ntext-overflow: ellipsis;\\nwhite-space: nowrap;\\n```\\n\\n**Note**: Text truncation should be avoided if possible. A user should not have to activate a\\ntooltip to access important content. If user-generated content is being truncated, the following\\nsituation might occur which is a bad user experience. Consider the following list:\\n\\n- Home Site A\\n- Home Site B\\n- Home Site C\\n\\nIf the list items get truncated via an ellipsis, this is what the user could see:\\n\\n- Home Sit...\\n- Home Sit...\\n- Home Sit...\\n\\nHere are suggestions to try to avoid truncation:\\n\\n- Allow content to wrap instead\\n- Limit character count in admin interfaces if possible to avoid need for truncation\\n- Avoid fixed container sizes if possible to allow content to flow naturally\\n\\nIf truncation is required, here are a few guidelines to insure minimal impact on users:\\n\\n- Only truncate text of elements that naturally receive focus.\\n  - Keyboard users can only activate tooltips with focus. Adding `tabindex=0` can give focus to\\n    non-focusable elements, but increase the amount of tab stops for keyboard users.\\n- Provide the full content elsewhere in the UI\\n\\nCanvas Kit Buttons have this style applied to the text inside them. `OverflowTooltip` in combination\\nwith a max-width can show a tooltip only when overflow is detected:\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\nimport {resetIcon} from '@workday/canvas-system-icons-web';\\n\\nconst CustomContent = ({...elemProps}) => (\\n  <button\\n    style={{\\n      marginTop: space.xs,\\n      maxWidth: 200,\\n      overflow: 'hidden',\\n      textOverflow: 'ellipsis',\\n      whiteSpace: 'nowrap',\\n    }}\\n    {...elemProps}\\n  >\\n    Super Mega Ultra Long Content With Max Width Custom\\n  </button>\\n);\\n\\nexport const Ellipsis = () => {\\n  return (\\n    <React.Fragment>\\n      <OverflowTooltip>\\n        <SecondaryButton>Short Content</SecondaryButton>\\n      </OverflowTooltip>{' '}\\n      <OverflowTooltip>\\n        <SecondaryButton style={{maxWidth: 200}}>\\n          Super Mega Ultra Long Content With Max Width On The Button\\n        </SecondaryButton>\\n      </OverflowTooltip>\\n      <OverflowTooltip>\\n        <SecondaryButton icon={resetIcon} style={{maxWidth: 200}}>\\n          Super Mega Ultra Long Content With Max Width On The Button with Icon\\n        </SecondaryButton>\\n      </OverflowTooltip>\\n      <OverflowTooltip>\\n        <button\\n          style={{\\n            marginTop: space.xs,\\n            maxWidth: 200,\\n            overflow: 'hidden',\\n            textOverflow: 'ellipsis',\\n            whiteSpace: 'nowrap',\\n          }}\\n        >\\n          Super Mega Ultra Long Content With Max Width\\n        </button>\\n      </OverflowTooltip>\\n      <OverflowTooltip>\\n        <CustomContent />\\n      </OverflowTooltip>\\n    </React.Fragment>\\n  );\\n};\\n```\\n\\n### Line Clamp\\n\\nThe `OverflowTooltip` can support various types of overflow. The component will first look for\\n`text-overflow: ellipsis` and `-webkit-line-clamp`, but will fall back to\\n`overflow: auto | scroll | clip | hidden`. These properties will be used to determine which\\n`element` is experiencing an overflow. Overflow detection is as follows where `element` is\\ndetermined by the above style properties:\\n\\n```js\\nelement.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;\\n```\\n\\nHere's an example using the `-webkit-line-clamp` property (multi-line ellipsis which works in all\\nbrowsers):\\n```tsx\\nimport React from 'react';\\n\\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const LineClamp = () => {\\n  return (\\n    <OverflowTooltip>\\n      <button>\\n        <span\\n          style={{\\n            display: '-webkit-box',\\n            overflow: 'hidden',\\n            maxWidth: 200,\\n            WebkitBoxOrient: 'vertical',\\n            WebkitLineClamp: 3,\\n          }}\\n        >\\n          Super Mega Ultra Long Content With Max Width. Super Mega Ultra Long Content With Max\\n          Width.\\n        </span>\\n      </button>\\n    </OverflowTooltip>\\n  );\\n};\\n```\\n\\nOther truncation techniques should be supported as well, even JavaScript ones as long as overflow is\\ntriggered somehow and detectable differences in scroll size and client size.\\n\\n### The UseTooltip Hook\\n\\nThe `Tooltip` component is a combination of the `TooltipContainer` (a styled element), `Popper`\\n(which uses PopperJS and the popup stack), the `useTooltip` hook and some behavior. If custom\\nbehavior is required, these sub-components can be composed in a custom container element. This\\nexample uses those parts directly while being functionally equivalent to the original basic example.\\n```tsx\\nimport React from 'react';\\n\\nimport {Popper} from '@workday/canvas-kit-react/popup';\\nimport {xIcon} from '@workday/canvas-system-icons-web';\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const UseTooltip = () => {\\n  const {targetProps, popperProps, tooltipProps} = useTooltip();\\n\\n  return (\\n    <>\\n      <TertiaryButton icon={xIcon} {...targetProps} aria-label=\\\"Close\\\" />\\n      <Popper placement=\\\"top\\\" {...popperProps}>\\n        <TooltipContainer {...tooltipProps}>Close</TooltipContainer>\\n      </Popper>\\n    </>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"toast\": {\n      \"title\": \"Components/Popups/Toast\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs\",\n      \"mdxPath\": \"modules/react/toast/stories/toast.mdx\",\n      \"mdxProse\": \"# Canvas Kit Toast\\n\\n`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nthat contains updates or messages about the status of an application's process.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,\\n`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.\\n\\n`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode\\nconveys a different purpose of the message and assigns the necessary ARIA attributes to support that\\npurpose and provide an accessible experience.\\n\\nBy default, `mode` is set to `status`, which indicates the message contains advisory information\\nsuch as a successful action.\\n```tsx\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\n\\nexport const Basic = () => {\\n  return (\\n    <Toast>\\n      <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n      <Toast.Body>\\n        <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n      </Toast.Body>\\n    </Toast>\\n  );\\n};\\n```\\n\\nA `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of\\n`status`.\\n\\nHere's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is\\npositioned using `Popper`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\nimport {Popper} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const WithPopper = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const containerRef = React.useRef(null);\\n\\n  const handleClose = () => {\\n    setOpen(false);\\n  };\\n\\n  const handleOpen = () => {\\n    setOpen(true);\\n  };\\n\\n  return (\\n    <div ref={containerRef}>\\n      <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>\\n      <Popper placement=\\\"bottom-end\\\" open={open} anchorElement={containerRef}>\\n        <Toast mode=\\\"dialog\\\" aria-label=\\\"notification\\\">\\n          <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n          <Toast.Body>\\n            <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n          </Toast.Body>\\n          <Toast.CloseIcon aria-label=\\\"Close notification\\\" onClick={handleClose} />\\n        </Toast>\\n      </Popper>\\n    </div>\\n  );\\n};\\n```\\n\\n### Alert\\n\\nSet the `mode` prop to `alert` to convey urgent and important information such as an error.\\n```tsx\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {exclamationCircleIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ToastAlert = () => (\\n  <Toast mode=\\\"alert\\\">\\n    <Toast.Icon icon={exclamationCircleIcon} color={colors.cinnamon500} />\\n    <Toast.Body>\\n      <Toast.Message>There was an error with your workbook.</Toast.Message>\\n    </Toast.Body>\\n  </Toast>\\n);\\n```\\n\\nAn `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of\\n`alert`.\\n\\n### Dialog\\n\\nSet the `mode` prop to `dialog` to convey the presence of a follow-up action. If you use this\\n`mode`, you need to add an `aria-label`. This `aria-label` should be additional information for the\\n`Toast` such as `notification`. The `Toast` will also add an `aria-describedby` that links the\\n`Toast` to `Toast.Message` so that it is read out to screen readers. The `aria-label` should be\\ndifferent that the contents of the `Toast` so there is no duplication being read out by screen\\nreaders.\\n```tsx\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\n\\nexport const ToastDialog = () => (\\n  <Toast mode=\\\"dialog\\\" aria-label=\\\"notification\\\">\\n    <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n    <Toast.Body>\\n      <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n      <Toast.Link href=\\\"#hreflink\\\">Custom Link</Toast.Link>\\n    </Toast.Body>\\n  </Toast>\\n);\\n```\\n\\nScreen readers will read the `Toast` out in the following order: \\\"Notification: Your workbook was\\nsuccessfully processed.\\\"\\n\\n> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`\\n> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to\\n> provide a specific `id` for the `Toast.Message`\\n\\n```tsx\\nexport const CustomIDToast = () => {\\n  const model = useToastModel({\\n    id: '12df5',\\n    mode: 'dialog',\\n  });\\n  return (\\n    <Toast model={model}>\\n      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />\\n      <Toast.Body>\\n        <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n        <Toast.Link href=\\\"#href\\\">View More Details</Toast.Link>\\n      </Toast.Body>\\n    </Toast>\\n  );\\n};\\n```\\n\\n`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action\\nlink and a close button.\\n```tsx\\nimport React from 'react';\\n\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const WithActionLinkAndCloseIcon = () => {\\n  const handleClose = () => console.log('close button clicked');\\n\\n  return (\\n    <Toast mode=\\\"dialog\\\" aria-label=\\\"notification\\\">\\n      <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n      <Toast.Body>\\n        <Toast.Message>Your workbook was successfully</Toast.Message>\\n        <Toast.Link href=\\\"#hyperlink\\\">Custom Link</Toast.Link>\\n      </Toast.Body>\\n      <Toast.CloseIcon aria-label=\\\"Close notification\\\" onClick={handleClose} />\\n    </Toast>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  const handleClose = () => console.log('close button clicked');\\n\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Toast>\\n        <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n        <Toast.Body>\\n          <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n        </Toast.Body>\\n        <Toast.CloseIcon aria-label=\\\"Close\\\" onClick={handleClose} />\\n      </Toast>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"text-input\": {\n      \"title\": \"Components/Inputs/Text Input\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs\",\n      \"mdxPath\": \"modules/react/text-input/stories/TextInput.mdx\",\n      \"mdxProse\": \"# Canvas Kit Text Input\\n\\nText Inputs allow users to enter words or characters without styling.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-input)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nText Input should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\\nproper label association and screen reader support.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Text Input to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} disabled onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Placeholder\\n\\nSet the `placeholder` prop of the Text Input to display a sample of its expected format or value\\nbefore a value has been provided.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Placeholder = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextInput}\\n          onChange={handleChange}\\n          placeholder=\\\"user@email.com\\\"\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\\n> placeholder text as the only label for an input. Placeholders can disappear or lack sufficient\\n> contrast. Use placeholders only for short format examples (e.g., \\\"name@example.com\\\"), and place\\n> detailed instructions or guidance in `FormField.Hint` instead of the placeholder.\\n\\n### Ref Forwarding\\n\\nText Input supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<input type=\\\"text\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} onChange={handleChange} ref={ref} value={value} />\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Grow\\n\\nSet the `grow` prop of the wrapping Form Field to `true` to configure the Text Input to expand to\\nthe width of its container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField grow>\\n      <FormField.Label>Street Address</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\nThe `grow` prop may also be applied directly to the Text Input if Form Field is not being used.\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n        <FormField.Hint>Add a valid email</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Icons\\n\\n`InputGroup` is available to add icons to the `TextInput`. Internally, a container `div` element is\\nused with relative position styling on the `div` and absolute position styling on the start and end\\nicons. `InputGroup.InnerStart` and `InputGroup.InnerEnd` are used to position elements at the start\\nand end of the input. \\\"start\\\" and \\\"end\\\" are used instead of \\\"left\\\" and \\\"right\\\" to match\\n[CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)\\nand will be semantically correct in left-to-right and right-to-left languages.\\n\\n`InputGroup.InnerStart` and `InputGroup.InnerEnd` subcomponents can handle any child elements, but\\nare built for icons. The default width is `40px`, which is perfect for icons. If you need to use\\nsomething else, be sure to set the `width` property of `InputGroup.InnerStart` or\\n`InputGroup.InnerEnd` to match the intended width of the element. Do not use the `cs` prop or any\\nmethod to change width. The `width` prop is used to correctly position other inner elements.\\n```tsx\\nimport React from 'react';\\n\\nimport {mailIcon} from '@workday/canvas-system-icons-web';\\nimport {\\n  FormField,\\n  useFormFieldModel,\\n  useFormFieldInput,\\n} from '@workday/canvas-kit-react/form-field';\\nimport {InputGroup} from '@workday/canvas-kit-react/text-input';\\nimport {SystemIcon} from '@workday/canvas-kit-react/icon';\\n\\n/**\\n * Using `as={InputGroup}` on `FormField.Input` will break the label associations necessary for accessibility.\\n * In this example, we've rendered `FormField.Field` as `InputGroup` and then hoisted the `id` of the input from the FormField model.\\n * This allows us to set the `id` of the `InputGroup.Input` correctly for proper label association.\\n */\\n\\nexport const Icons = () => {\\n  const model = useFormFieldModel();\\n  const {id: formFieldInputId} = useFormFieldInput(model);\\n\\n  return (\\n    <FormField model={model}>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field as={InputGroup}>\\n        <InputGroup.InnerStart>\\n          <SystemIcon icon={mailIcon} size=\\\"small\\\" />\\n        </InputGroup.InnerStart>\\n        <InputGroup.Input id={formFieldInputId} autoComplete=\\\"email\\\" />\\n        <InputGroup.InnerEnd>\\n          <InputGroup.ClearButton />\\n        </InputGroup.InnerEnd>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In this example, the mail icon is decorative and hidden from screen\\n> readers. If icons are used for conveying meaning in addition to the label text, a text alternative\\n> must be provided for screen readers.\\n\\n### Error States\\n\\nForm Field provides error and caution states for Text Input. Set the `error` prop on Form Field to\\n`\\\"error\\\"` or `\\\"caution\\\"` and use `FormField.Hint` to provide error messages. See\\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for examples and\\naccessibility guidance.\\n\\n## Accessibility\\n\\n`TextInput` should be used with [Form Field](/components/inputs/form-field/) to ensure proper\\nlabeling, error handling, and help text association. See\\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility) for\\ncomprehensive guidance on form accessibility best practices.\\n\\n### Autocomplete Attribute\\n\\n- Add appropriate `autoComplete` values to indicate the input's purpose (e.g., `\\\"email\\\"`, `\\\"name\\\"`,\\n  `\\\"street-address\\\"`, `\\\"tel\\\"`). Read more about\\n  [Identify Input Purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html).\\n- Autocomplete enables browser autofill and helps assistive technologies understand the field's\\n  purpose, benefiting users with cognitive disabilities and motor impairments.\\n- Autocomplete also helps password managers identify the correct fields.\\n\\n### Input Type for Mobile Keyboards\\n\\n`TextInput` defaults to `<input type=\\\"text\\\">`, but for better mobile keyboard support, use more\\nspecific `type` attributes (like `\\\"email\\\"`, `\\\"tel\\\"`, `\\\"url\\\"`, or `\\\"search\\\"`) as needed.\\n\\n### Screen Reader Experience\\n\\nWhen properly implemented with `FormField`, screen readers will announce:\\n\\n- The label text when the input receives focus.\\n- Required, disabled, or read-only status.\\n- Help text and error messages (via `aria-describedby`).\\n- The current value or \\\"blank\\\" if empty.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"textarea\": {\n      \"title\": \"Components/Inputs/TextArea\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs\",\n      \"mdxPath\": \"modules/react/text-area/stories/TextArea.mdx\",\n      \"mdxProse\": \"# Canvas Kit Text Area\\n\\nText Areas allow users to enter and edit multiple lines of text.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-area)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nText Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\\nproper label association and screen reader support.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Text Area to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Placeholder\\n\\nSet the `placeholder` prop of the Text Area to display a sample of its expected format or value\\nbefore a value has been provided.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Placeholder = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextArea}\\n          onChange={handleChange}\\n          placeholder=\\\"Let us know how we did!\\\"\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\\n> placeholder text as the only label for a text area. Placeholders can disappear or lack sufficient\\n> contrast. Use placeholders only for short format examples, and place detailed instructions or\\n> guidance in `FormField.Hint` instead of the placeholder.\\n\\n### Ref Forwarding\\n\\nText Area supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<textarea>` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Leave a Review</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Resize Constraints\\n\\nSet the `resize` prop of the Text Area to restrict resizing of it to certain dimensions. `resize`\\naccepts the following values:\\n\\n- `TextArea.ResizeDirection.Both` (Default)\\n- `TextArea.ResizeDirection.Horizontal`\\n- `TextArea.ResizeDirection.None`\\n- `TextArea.ResizeDirection.Vertical`\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const ResizeConstraints = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextArea}\\n          onChange={handleChange}\\n          resize={TextArea.ResizeDirection.Vertical}\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Allowing users to resize the text area (default `resize: both`) improves\\n> accessibility by letting them adjust it for comfort. Avoid disabling resizing (`resize: none`)\\n> unless necessary, and always ensure the initial size meets the needs of your content.\\n\\n### Grow\\n\\nSet the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of\\nits container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField grow>\\n      <FormField.Label>Leave a Review foo</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n        <FormField.Hint>Message must be under 200 characters</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nForm Field provides error and caution states for Text Area. Set the `error` prop on Form Field to\\n`\\\"error\\\"` or `\\\"caution\\\"` and use `FormField.Hint` to provide error messages. See\\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for\\nexamples and accessibility guidance.\\n\\n## Accessibility\\n\\n`TextArea` should be used with [Form Field](/components/inputs/form-field/) to\\nensure proper labeling, error handling, and help text association. See\\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility)\\nfor comprehensive guidance on form accessibility best practices.\\n\\n### Character Limits\\n\\nWhen limiting text area length:\\n\\n- Use the `maxLength` attribute to enforce the limit programmatically.\\n- For longer limits (100+ characters), consider adding character count information to\\n  `FormField.Hint`.\\n- Avoid announcing character counts after every keystroke, as this disrupts screen reader users.\\n  Check out\\n  [Debouncing an AriaLiveRegion: TextArea with character limit](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs#debouncing-an-arialiveregion-textarea-with-character-limit)\\n  for an example of how to wait for users to stop typing before announcing the character count to\\n  screen readers.\\n\\n### Screen Reader Experience\\n\\nWhen properly implemented with `FormField`, screen readers will announce:\\n\\n- The label text when the text area receives focus.\\n- Required, disabled, or read-only status.\\n- Help text and error messages (via `aria-describedby`).\\n- The current value or \\\"blank\\\" if empty.\\n- That it's a multi-line text input field.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"title\": {\n      \"title\": \"Components/Text/Title\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-title--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Title.mdx\",\n      \"mdxProse\": \"# Canvas Kit Title\\n\\n`Title` provides a simple way to render title-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Title` is a Type Level component (along with [`Heading`](/components/text/heading/),\\n[`BodyText`](/components/text/body-text/), and [`Subtext`](/components/text/subtext/)) built on top\\nof [`Text`](/components/text/text/) which provides a simple way to render title-level text according\\nto the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`Title` renders an `<h1>` element by default with styles equivalent to `type.levels.title[size]`.\\nYou may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nTitle supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"text\": {\n      \"title\": \"Components/Text/Text\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Text.mdx\",\n      \"mdxProse\": \"# Canvas Kit Text\\n\\n`Text` provides an ergonomic API for rendering text. It includes built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Text` is built on top of [`Box`](/components/layout/box/) and supports a multitude of\\n[style props](/get-started/for-developers/documentation/style-props/) including spacing props such\\nas `margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.\\n\\n`Text` renders a `<span>` element by default. You may override the rendered element using the `as`\\nprop.\\n\\n### Type Level and Variant\\n\\n`Text` includes built-in support for [Canvas type tokens](/tokens/type/) via the `typeLevel` and\\n`variant` props.\\n\\n`typeLevel` hooks into the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`variant` allows you to layer [additional styling](/tokens/type/#variants) to aid users'\\nunderstanding of the text being rendered.\\n\\n### Custom Styles\\n\\nText supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"subtext\": {\n      \"title\": \"Components/Text/Subtext\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-subtext--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Subtext.mdx\",\n      \"mdxProse\": \"# Canvas Kit Subtext\\n\\n`Subtext` provides a simple way to render subtext-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Subtext` is a Type Level component (along with [`Title`](/components/text/title/),\\n[`Heading`](/components/text/heading/), and [`BodyText`](/components/text/body-text/)) built on top\\nof [`Text`](/components/text/text/) which provides a simple way to render subtext-level text\\naccording to the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`Subtext` renders a `<p>` element by default with styles equivalent to `type.levels.subtext[size]`.\\nYou may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nSubtext supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"heading\": {\n      \"title\": \"Components/Text/Heading\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Heading.mdx\",\n      \"mdxProse\": \"# Canvas Kit Heading\\n\\n`Heading` provides a simple way to render heading-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Heading` is a Type Level component (along with [`Title`](/components/text/title/),\\n[`BodyText`](/components/text/body-text/), and [`Subtext`](/components/text/subtext/)) built on top\\nof [`Text`](/components/text/text/) which provides a simple way to render heading-level text\\naccording to the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`Heading` renders an `<h2>` element by default with styles equivalent to\\n`type.levels.heading[size]`. You may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nHeading supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"body-text\": {\n      \"title\": \"Components/Text/Body Text\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-body-text--docs\",\n      \"mdxPath\": \"modules/react/text/stories/BodyText.mdx\",\n      \"mdxProse\": \"# Canvas Kit Body Text\\n\\n`BodyText` provides a simple way to render body-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`BodyText` is a Type Level component (along with [`Title`](/components/text/title/),\\n[`Heading`](/components/text/heading/), and [`Subtext`](/components/text/subtext/)) built on top of\\n[`Text`](/components/text/text/) which provides a simple way to render body-level text according to\\nthe [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`BodyText` renders a `<p>` element by default with styles equivalent to `type.levels.body[size]`.\\nYou may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nBody Text supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"tabs\": {\n      \"title\": \"Components/Containers/Tabs\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-tabs--docs\",\n      \"mdxPath\": \"modules/react/tabs/stories/Tabs.mdx\",\n      \"mdxProse\": \"# Canvas Kit Tabs\\n\\n`Tabs` is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nthat allows users to navigate between related views of content while remaining in context of the\\npage.\\n\\n[> Workday Design Reference](https://design.workday.com/components/navigation/tabs)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Tabs` includes a container `Tabs` component and the following subcomponents which can be composed\\nin a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the\\n[W3 Tabs specification](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\\n\\nIn this example, we set up a basic `Tabs` component with five tabs. This example uses a static API\\nthat does not support overflow.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const Basic = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>First Tab</Tabs.Item>\\n        <Tabs.Item>Second Tab</Tabs.Item>\\n        <Tabs.Item>Third Tab</Tabs.Item>\\n        <Tabs.Item>Fourth Tab</Tabs.Item>\\n        <Tabs.Item>Fifth Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel>Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Fifth Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Overflow Tabs\\n\\nTabs is a responsive component based on the width of its container. If the rendered tabs exceed the\\nwidth of the `Tabs.List`, an overflow menu will be rendered. This only works against the dynamic API\\nwhere you give the `TabsModel` an array of items to be rendered. The dynamic API handles the React\\n`key` for you based on the item's identifier. The dynamic API requires either an `id` on each item\\nobject or a `getId` function that returns an identifier based on the item. The below example uses an\\n`id` property on each item.\\n\\nThe dynamic API takes in any object, but since nothing is known about your object, a\\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\\nshould render.\\n```tsx\\nimport React from 'react';\\n\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\n\\ntype MyTabItem = {\\n  id: string;\\n  text: React.ReactNode;\\n  contents: string;\\n};\\n\\nexport const OverflowTabs = () => {\\n  const [items] = React.useState<MyTabItem[]>([\\n    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},\\n    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},\\n    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},\\n    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},\\n    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},\\n    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},\\n    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},\\n  ]);\\n  const model = useTabsModel({\\n    items,\\n  });\\n  const [containerWidth, setContainerWidth] = React.useState('100%');\\n  return (\\n    <div>\\n      <Box width={containerWidth} marginBottom=\\\"xl\\\">\\n        <Tabs model={model}>\\n          <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>\\n            {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}\\n          </Tabs.List>\\n          <Tabs.Menu.Popper>\\n            <Tabs.Menu.Card maxWidth={300} maxHeight={200}>\\n              <Tabs.Menu.List>\\n                {(item: MyTabItem) => <Tabs.Menu.Item>{item.text}</Tabs.Menu.Item>}\\n              </Tabs.Menu.List>\\n            </Tabs.Menu.Card>\\n          </Tabs.Menu.Popper>\\n          <Tabs.Panels>\\n            {(item: MyTabItem) => <Tabs.Panel marginTop=\\\"m\\\">{item.contents}</Tabs.Panel>}\\n          </Tabs.Panels>\\n        </Tabs>\\n      </Box>\\n      <hr />\\n      <h4>Change Tabs container size</h4>\\n      <SegmentedControl onSelect={data => setContainerWidth(data.id)}>\\n        <SegmentedControl.List aria-label=\\\"container width control\\\">\\n          <SegmentedControl.Item data-id=\\\"100%\\\">100%</SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"500px\\\">500px</SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"360px\\\">360px</SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"150px\\\">150px</SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </div>\\n  );\\n};\\n```\\n\\n### Hoisted Model\\n\\nBy default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may\\nconfigure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This\\npattern is referred to as\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\\nand provides direct access to its `state` and `events` outside of the `Tabs` component.\\n\\nIn this example, we set up external observation of the model state and create an external button to\\ntrigger an event to change the active tab.\\n```tsx\\nimport React from 'react';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\n\\nexport const HoistedModel = () => {\\n  const model = useTabsModel({\\n    onSelect(data, prevState) {\\n      console.log('Selected Tab', data.id, prevState);\\n    },\\n  });\\n\\n  return (\\n    <>\\n      <Tabs model={model}>\\n        <Tabs.List>\\n          <Tabs.Item data-id=\\\"first\\\">First Tab</Tabs.Item>\\n          <Tabs.Item data-id=\\\"second\\\">Second Tab</Tabs.Item>\\n          <Tabs.Item data-id=\\\"third\\\">Third Tab</Tabs.Item>\\n        </Tabs.List>\\n        <div style={{marginTop: space.m}}>\\n          <Tabs.Panel data-id=\\\"first\\\">Contents of First Tab</Tabs.Panel>\\n          <Tabs.Panel data-id=\\\"second\\\">Contents of Second Tab</Tabs.Panel>\\n          <Tabs.Panel data-id=\\\"third\\\">Contents of Third Tab</Tabs.Panel>\\n        </div>\\n      </Tabs>\\n      <SecondaryButton\\n        onClick={() => {\\n          model.events.select({id: 'third'});\\n        }}\\n      >\\n        Select Third Tab\\n      </SecondaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Named Tabs\\n\\n`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the\\n`onActivate` callback. This example is identical to the Basic Example, but with tabs named using\\n`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const NamedTabs = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item data-id=\\\"first\\\">First Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"second\\\">Second Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"third\\\">Third Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"fourth\\\">Fourth Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"fifth\\\">Fifth Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel data-id=\\\"first\\\">Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"second\\\">Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"third\\\">Contents of Third Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"fourth\\\">Contents of Fourth Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"fifth\\\">Contents of Fifth Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Tabs` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const RightToLeft = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Tabs>\\n        <Tabs.List>\\n          <Tabs.Item>\u05E8\u05D0\u05E9\u05D5\u05DF</Tabs.Item>\\n          <Tabs.Item>\u05E9\u05C1\u05B0\u05E0\u05B4\u05D9\u05B8\u05D4</Tabs.Item>\\n          <Tabs.Item>\u05E9\u05C1\u05B0\u05DC\u05B4\u05D9\u05E9\u05C1\u05B4\u05D9</Tabs.Item>\\n          <Tabs.Item>\u05E8\u05D1\u05D9\u05E2\u05D9</Tabs.Item>\\n          <Tabs.Item>\u05D7\u05DE\u05D9\u05E9\u05D9</Tabs.Item>\\n        </Tabs.List>\\n        <div style={{marginTop: space.m}}>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E8\u05D0\u05E9\u05D5\u05DF</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E9\u05E0\u05D9</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E9\u05DC\u05D9\u05E9\u05D9</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E8\u05D1\u05D9\u05E2\u05D9</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05D7\u05DE\u05D9\u05E9\u05D9</Tabs.Panel>\\n        </div>\\n      </Tabs>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Disabled Tab\\n\\nSet the `disabled` prop of a `Tabs.Item` to `true` to disable it.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const DisabledTab = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>First Tab</Tabs.Item>\\n        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>\\n        <Tabs.Item>Third Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel>Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Disabled Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Tab Icons\\n\\nTabs can have icons. Use the `Icon` and `Text` subcomponents.\\n```tsx\\nimport React from 'react';\\n\\nimport {space} from '@workday/canvas-kit-react/tokens';\\nimport {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const Icons = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={starIcon} />\\n          <Tabs.Item.Text>First Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={searchIcon} />\\n          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={selectIcon} />\\n          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={shareIcon} />\\n          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel>Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Alternative Tab Stop\\n\\nBy default, tab panels are focusable for accessibility. If the contents of a tab panel have a\\nfocusable element, you may disable this default behavior by setting the `tabIndex` prop of\\n`Tabs.Panel` to `undefined`. This example has a tab panel with a focusable button.\\n```tsx\\nimport React from 'react';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const AlternativeTabStop = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>First Tab</Tabs.Item>\\n        <Tabs.Item>Second Tab</Tabs.Item>\\n        <Tabs.Item>Third Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel tabIndex={undefined}>\\n          <button>Focusable button</button>\\n          <br />\\n          Contents of First Tab. The tab panel is no longer focusable, but the button is. It may be\\n          desirable to disable focus on the tab panel and allow focus to flow into the tab panel to\\n          the first focusable element.\\n        </Tabs.Panel>\\n        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Single Tab Panel\\n\\nThe compound component pattern allows for advanced composition. For example, `Tabs` can be composed\\nto have only a single `Tabs.Panel` using attribute overrides and callbacks. More information about\\nattributes and callbacks can be found in the prop tables below for each subcomponent.\\n\\nIn this example, we use a hoisted model and the `activeTab` property of the state to show content\\nfrom the `contents` object.\\n```tsx\\nimport React from 'react';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\n\\nexport const SinglePanel = () => {\\n  const model = useTabsModel();\\n\\n  const message = (\\n    <p>\\n      This example shows how to use a single tab panel. You must manually set the{' '}\\n      <code>hidden</code>, <code>aria-controls</code>, and <code>id</code> attributes of Tab item\\n      and Tab panel components\\n    </p>\\n  );\\n\\n  const contents = {\\n    first: <div>Contents of First Tab {message}</div>,\\n    second: <div>Contents of Second Tab {message}</div>,\\n    third: <div>Contents of Third Tab {message}</div>,\\n  };\\n\\n  return (\\n    <Tabs model={model}>\\n      <Tabs.List>\\n        <Tabs.Item data-id=\\\"first\\\" aria-controls=\\\"mytab-panel\\\">\\n          First Tab\\n        </Tabs.Item>\\n        <Tabs.Item data-id=\\\"second\\\" aria-controls=\\\"mytab-panel\\\">\\n          Second Tab\\n        </Tabs.Item>\\n        <Tabs.Item data-id=\\\"third\\\" aria-controls=\\\"mytab-panel\\\">\\n          Third Tab\\n        </Tabs.Item>\\n      </Tabs.List>\\n      <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id=\\\"mytab-panel\\\">\\n        {contents[model.state.selectedIds[0]]}\\n      </Tabs.Panel>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Dynamic Tabs\\n\\nThe `Tabs.Item` component takes in an optional `index` property if you want to specify the position\\nof a tab. If not defined, by default it will append tabs to the end. In this example, our tabs are\\nstored as an array in the state, and we have a fixed tab at the end that can add new tabs to that\\narray.\\n```tsx\\nimport React from 'react';\\n\\nimport {slugify} from '@workday/canvas-kit-react/common';\\nimport {isCursor} from '@workday/canvas-kit-react/collection';\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\n\\ntype Tab = {\\n  tab: string;\\n  id: string;\\n};\\n\\nexport const DynamicTabs = () => {\\n  const [tabs, setTabs] = React.useState<Tab[]>([\\n    {tab: 'Tab 1', id: 'tab-1'},\\n    {tab: 'Tab 2', id: 'tab-2'},\\n    {tab: 'Tab 3', id: 'tab-3'},\\n    {tab: 'Add Tab', id: 'add'},\\n  ]);\\n  const addedRef = React.useRef(tabs.length - 1);\\n  const model = useTabsModel({\\n    items: tabs,\\n    shouldSelect: data => data.id !== 'add',\\n  });\\n\\n  // A ref of the model for the render functions to work around the caching done to lists\\n  const modelRef = React.useRef(model);\\n  modelRef.current = model;\\n\\n  /**\\n   * Helper function that should be called when an item is programmatically removed. The following\\n   * side effects depend on state of the model:\\n   * * **Item is focused**: Focus will be moved to next item in the list\\n   * * **Item is selected**: Selection will be moved to the next item in the list\\n   * @param id The id of the item that will be removed\\n   */\\n  const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {\\n    const index = model.state.items.findIndex(item => isCursor(model.state, item.id));\\n    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;\\n    const nextId = model.state.items[nextIndex].id;\\n    if (model.state.selectedIds[0] === id) {\\n      // We're removing the currently selected item. Select next item\\n      model.events.select({id: nextId});\\n    }\\n    if (isCursor(model.state, id)) {\\n      // We're removing the currently focused item. Focus next item\\n      model.events.goTo({id: nextId});\\n\\n      // wait for stabilization of state\\n      requestAnimationFrame(() => {\\n        document\\n          .querySelector<HTMLElement>(`[id=\\\"${slugify(`${model.state.id}-${nextId}`)}\\\"]`)\\n          ?.focus();\\n      });\\n    }\\n  };\\n\\n  const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {\\n    if ((e.key === 'Delete' || e.key === 'Backspace') && id !== 'add') {\\n      setTabs(tabs.filter(item => item.id !== id));\\n      const model = modelRef.current;\\n      removeItem(id, model);\\n    }\\n  };\\n\\n  const onClick = (id: string) => (e: React.MouseEvent) => {\\n    if (id === 'add') {\\n      addedRef.current += 1;\\n      setTabs(tabs => {\\n        const newTabs = tabs.slice(0, tabs.length - 1);\\n        const addTab = tabs.slice(-1);\\n        return newTabs.concat(\\n          {tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`},\\n          addTab\\n        );\\n      });\\n    }\\n  };\\n\\n  return (\\n    <Tabs model={model}>\\n      <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>\\n        {(item: Tab) => (\\n          <Tabs.Item onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>\\n            {item.tab}\\n          </Tabs.Item>\\n        )}\\n      </Tabs.List>\\n      <Tabs.Menu.Popper>\\n        <Tabs.Menu.Card maxWidth={300} maxHeight={200}>\\n          <Tabs.Menu.List>\\n            {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}\\n          </Tabs.Menu.List>\\n        </Tabs.Menu.Card>\\n      </Tabs.Menu.Popper>\\n      <Tabs.Panels>\\n        {(item: Tab) => <Tabs.Panel marginTop=\\\"m\\\">Contents of {item.tab}</Tabs.Panel>}\\n      </Tabs.Panels>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"table\": {\n      \"title\": \"Components/Containers/Table\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs\",\n      \"mdxPath\": \"modules/react/table/stories/Table.mdx\",\n      \"mdxProse\": \"# Canvas Kit Table\\n\\n`Table` is a simple styled compound component that renders a\\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to\\npresent information in a two-dimensional table comprised of rows and columns of cells containing\\ndata. `Table` is built off of `BaseTable` and is using\\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUsers may not want to use a `caption` so they can import\\n[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or\\n[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This\\nwill give the user more flexibility around the customization of the title/heading of their table.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  parentContainerStyles: createStyles({\\n    marginBottom: system.space.x4,\\n  }),\\n  tableHeaderStyles: createStyles({\\n    backgroundColor: system.color.bg.alt.softer,\\n  }),\\n};\\n\\nexport const BasicWithHeading = () => {\\n  const headingID = useUniqueId();\\n\\n  return (\\n    <>\\n      <Heading as=\\\"h3\\\" id={headingID} size=\\\"small\\\" cs={styleOverrides.parentContainerStyles}>\\n        Pizza Toppings\\n      </Heading>\\n      <Table aria-labelledby={headingID}>\\n        <Table.Head>\\n          <Table.Row>\\n            <Table.Header scope=\\\"col\\\" cs={styleOverrides.tableHeaderStyles}>\\n              Toppings\\n            </Table.Header>\\n            <Table.Header scope=\\\"col\\\" cs={styleOverrides.tableHeaderStyles}>\\n              Amount\\n            </Table.Header>\\n          </Table.Row>\\n        </Table.Head>\\n        <Table.Body>\\n          <Table.Row>\\n            <Table.Cell>Pepperoni</Table.Cell>\\n            <Table.Cell>2.5 oz</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>Mozzarella</Table.Cell>\\n            <Table.Cell>5 oz</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>Basil</Table.Cell>\\n            <Table.Cell>10 Leaves</Table.Cell>\\n          </Table.Row>\\n        </Table.Body>\\n      </Table>\\n    </>\\n  );\\n};\\n```\\n\\n### Right to Left\\n\\nTable supports right-to-left languages when specified in the CanvasProvider theme.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst tableHeaderStyles = createStyles({\\n  backgroundColor: system.color.bg.alt.softer,\\n});\\n\\nexport const RightToLeft = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Table>\\n        <Table.Caption>\u05DE\u05E9\u05E7\u05D0\u05D5\u05EA \u05E7\u05E4\u05D4 \u05D5\u05D2\u05D3\u05DC\u05D9\u05DD</Table.Caption>\\n        <Table.Head>\\n          <Table.Row>\\n            <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n              \u05DE\u05B7\u05E9\u05C1\u05E7\u05B6\u05D4\\n            </Table.Header>\\n            <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n              \u05D2\u05D5\u05D3\u05DC\\n            </Table.Header>\\n          </Table.Row>\\n        </Table.Head>\\n        <Table.Body>\\n          <Table.Row>\\n            <Table.Cell>\u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\\n            <Table.Cell>1 \u05D2\u05E8</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>\u05DE\u05E7\u05D9\u05D0\u05D8\u05D5</Table.Cell>\\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>\u05D2\u05D6\u05D9\u05E8\u05D4</Table.Cell>\\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5, 1 \u05D2\u05E8\u05DD \u05D7\u05DC\u05D1 \u05DE\u05D5\u05E7\u05E6\u05E3</Table.Cell>\\n          </Table.Row>\\n        </Table.Body>\\n      </Table>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Example with Caption\\n\\nUsers are free to use a `caption` instead of a heading. A `caption` is not required but it is good\\nfor\\n[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)\\npurposes.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst tableHeaderStyles = createStyles({\\n  backgroundColor: system.color.bg.alt.softer,\\n});\\n\\nexport const Basic = () => {\\n  return (\\n    <Table>\\n      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\\n      <Table.Head>\\n        <Table.Row>\\n          <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Drink\\n          </Table.Header>\\n          <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Size\\n          </Table.Header>\\n        </Table.Row>\\n      </Table.Head>\\n      <Table.Body>\\n        <Table.Row>\\n          <Table.Cell>Espresso</Table.Cell>\\n          <Table.Cell>1 oz</Table.Cell>\\n        </Table.Row>\\n        <Table.Row>\\n          <Table.Cell>Macchiato</Table.Cell>\\n          <Table.Cell>2 oz Espresso</Table.Cell>\\n        </Table.Row>\\n        <Table.Row>\\n          <Table.Cell>Cortado</Table.Cell>\\n          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>\\n        </Table.Row>\\n        <Table.Row></Table.Row>\\n        <Table.Row>\\n          <Table.Cell>Cappuccino</Table.Cell>\\n          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>\\n        </Table.Row>\\n      </Table.Body>\\n    </Table>\\n  );\\n};\\n```\\n\\n### Fixed Column\\n\\nUsers may add styles to the `Table.Header` to render a fixed column. The example below assigns a\\n`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the\\n`width` if you would only like the fixed column to be triggered if necessary.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  parentContainerStyles: createStyles({\\n    marginBottom: system.space.x4,\\n  }),\\n  tableStyles: createStyles({\\n    width: px2rem(690),\\n  }),\\n  tableHeaderStyles: createStyles({\\n    position: 'sticky',\\n    left: system.space.zero,\\n    backgroundColor: system.color.bg.alt.softer,\\n    borderRight: `2px solid ${system.color.border.divider}`,\\n  }),\\n};\\n\\nexport const FixedColumn = () => {\\n  const headingID = useUniqueId();\\n  const exampleData = [\\n    {\\n      make: 'Porsche',\\n      model: '992 911 GT3',\\n      year: '2022',\\n      price: 'Starts at $160,000',\\n      engine: '4.0L Flat 6',\\n      transmission: 'PDK or 7-Speed Manual',\\n      horsepower: '502hp',\\n      torque: '346 lb-ft',\\n      curbWeight: '3,164 lbs',\\n    },\\n    {\\n      make: 'BMW',\\n      model: 'M5 Competition',\\n      year: '2018',\\n      price: 'Starts at $105,000',\\n      engine: 'Twin-Turbo 4.4L V8',\\n      transmission: 'Automatic',\\n      horsepower: '627hp',\\n      torque: '553 lb-ft',\\n      curbWeight: '4,345 lbs',\\n    },\\n    {\\n      make: 'Alfa Romeo',\\n      model: '1750 GTV',\\n      year: '1970',\\n      price: '$30,000 - $55,000',\\n      engine: '1.75L Inline 4',\\n      transmission: 'Manual',\\n      horsepower: '122hp',\\n      torque: '137 lb-ft',\\n      curbWeight: '2,140 lbs',\\n    },\\n    {\\n      make: 'Lotus',\\n      model: 'Emira',\\n      year: '2023',\\n      price: 'Starts at $78,000',\\n      engine: 'Supercharged 3.5L V6',\\n      transmission: 'Automatic or 6-Speed Manual',\\n      horsepower: '400hp',\\n      torque: '317 lb-ft',\\n      curbWeight: '3520 lbs',\\n    },\\n    {\\n      make: 'Toyota',\\n      model: 'Supra',\\n      year: '1998',\\n      price: '$40,000 - $80,000',\\n      engine: '3.0L Inline 6',\\n      transmission: 'Automatic or 6-Speed Manual',\\n      horsepower: '320hp',\\n      torque: '315 lb-ft',\\n      curbWeight: '3,599 lbs',\\n    },\\n    {\\n      make: 'Nissan',\\n      model: 'Skyline GT-R',\\n      year: '1994',\\n      price: '$45,000 - $90,000',\\n      engine: '2.6L Twin-Turbo Inline 6',\\n      transmission: '5-Speed Manual',\\n      horsepower: '276hp',\\n      torque: '260 lb-ft',\\n      curbWeight: '3,153 lbs',\\n    },\\n  ];\\n  return (\\n    <>\\n      <Heading as=\\\"h3\\\" id={headingID} size=\\\"small\\\" cs={styleOverrides.parentContainerStyles}>\\n        Performance Car Specs\\n      </Heading>\\n      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>\\n        <Table.Head>\\n          <Table.Row>\\n            <Table.Header scope=\\\"col\\\" cs={styleOverrides.tableHeaderStyles}>\\n              Make\\n            </Table.Header>\\n            <Table.Header scope=\\\"col\\\">Model</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Year</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Price</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Engine</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Transmission</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Horsepower</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Torque</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Curb Weight</Table.Header>\\n          </Table.Row>\\n        </Table.Head>\\n        <Table.Body>\\n          {exampleData.map(item => (\\n            <>\\n              <Table.Row>\\n                <Table.Header scope=\\\"row\\\" cs={styleOverrides.tableHeaderStyles}>\\n                  {item.make}\\n                </Table.Header>\\n                <Table.Cell>{item.model}</Table.Cell>\\n                <Table.Cell>{item.year}</Table.Cell>\\n                <Table.Cell>{item.price}</Table.Cell>\\n                <Table.Cell>{item.engine}</Table.Cell>\\n                <Table.Cell>{item.transmission}</Table.Cell>\\n                <Table.Cell>{item.horsepower}</Table.Cell>\\n                <Table.Cell>{item.torque}</Table.Cell>\\n                <Table.Cell>{item.curbWeight}</Table.Cell>\\n              </Table.Row>\\n            </>\\n          ))}\\n        </Table.Body>\\n      </Table>\\n    </>\\n  );\\n};\\n```\\n\\n### Base Html Table Example\\n\\nIf a user needs a standard HTML\\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no\\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can\\nuse the `BaseTable` component.\\n```tsx\\nimport React from 'react';\\n\\nimport {BaseTable} from '@workday/canvas-kit-react/table';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst tableHeaderStyles = createStyles({\\n  backgroundColor: system.color.bg.alt.softer,\\n});\\n\\nexport const BaseHtmlTable = () => {\\n  return (\\n    <BaseTable>\\n      <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>\\n      <BaseTable.Head>\\n        <BaseTable.Row>\\n          <BaseTable.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Drink\\n          </BaseTable.Header>\\n          <BaseTable.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Size\\n          </BaseTable.Header>\\n        </BaseTable.Row>\\n      </BaseTable.Head>\\n      <BaseTable.Body>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Espresso</BaseTable.Cell>\\n          <BaseTable.Cell>1 oz</BaseTable.Cell>\\n        </BaseTable.Row>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Macchiato</BaseTable.Cell>\\n          <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>\\n        </BaseTable.Row>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Cortado</BaseTable.Cell>\\n          <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>\\n        </BaseTable.Row>\\n        <BaseTable.Row></BaseTable.Row>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Cappuccino</BaseTable.Cell>\\n          <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>\\n        </BaseTable.Row>\\n      </BaseTable.Body>\\n    </BaseTable>\\n  );\\n};\\n```\\n\\n### Which Component Should I Use?\\n\\n> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)\\n> features with their Table, then use the\\n> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)\\n> component.\\n\\n> If a user **does not** want\\n> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their\\n> Table, then use the\\n> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)\\n> component.\\n\\n### Advanced\\n\\nYou can also find several advanced Table examples in our Storybook Examples section.\\n\\n- [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#expandable-rows)\\n- [Selectable Rows ](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#selectable-rows)\\n- [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers)\\n- [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#sortable-column-headers)\\n\\n### Custom Styles\\n\\nTable and its subcomponents support custom styling via the `cs` prop. For more information, check\\nour\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"switch\": {\n      \"title\": \"Components/Inputs/Switch\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-switch--docs\",\n      \"mdxPath\": \"modules/react/switch/stories/Switch.mdx\",\n      \"mdxProse\": \"# Canvas Kit Switch\\n\\nSwitch is a selection control that is used to switch between two potential states.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/switch)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nSwitch should be used in tandem with [Form Field](/components/inputs/form-field/) to meet\\naccessibility standards.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Basic = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Switch to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Disabled = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input disabled as={Switch} checked={checked} onChange={handleChange} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nSwitch supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<input type=\\\"checkbox\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const RefForwarding = () => {\\n  const [checked, setChecked] = React.useState(false);\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Dark Mode</FormField.Label>\\n        <FormField>\\n          <FormField.Input as={Switch} checked={checked} ref={ref} onChange={handleChange} />\\n        </FormField>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Switch</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const LabelPosition = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping Form Field to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the Switch to the Caution or Error state, respectively. You will\\nalso need to set the `hintId` and `hintText` props on the Form Field to meet accessibility\\nstandards.\\n\\nThe `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Caution` or\\n`Switch.ErrorType.Error` if Form Field is not being used.\\n\\n#### Caution\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Caution = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"caution\\\">\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n#### Error\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Error = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"error\\\">\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nSwitch supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"skeleton\": {\n      \"title\": \"Components/Indicators/Skeleton\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-skeleton--docs\",\n      \"mdxPath\": \"modules/react/skeleton/stories/Skeleton.mdx\",\n      \"mdxProse\": \"# Canvas Kit Skeleton\\n\\nA Skeleton is a low-fidelity visual placeholder that represents the loading of interface elements\\nbefore they have displayed on the page. Appearing as a blank version of the incoming content, it\\nmitigates focus on the loading process and improves the user\u2019s perceived load time.\\n\\n[> Workday Design Reference](https://design.workday.com/components/indicators/skeleton-loader)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nSkeleton includes a container `Skeleton` component and the following subcomponents:\\n`Skeleton.Header`, `Skeleton.Text`, and `Skeleton.Shape`. Each subcomponent can be used as a\\nplaceholder for a particular type of content.\\n\\nHere's an example of how you might compose Skeleton components (along with non-Skeleton components\\nsuch as `Box` and `Flex`) to create a loading placeholder for a piece of content comprised of an\\nicon, a heading, and some text.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {borderRadius, space} from '@workday/canvas-kit-react/tokens';\\n\\nexport const Basic = () => {\\n  return (\\n    <Skeleton>\\n      <Flex alignItems=\\\"center\\\">\\n        <Skeleton.Shape width={space.xl} height={space.xl} borderRadius={borderRadius.circle} />\\n        <Box flex={1} marginLeft=\\\"xs\\\">\\n          <Skeleton.Header />\\n        </Box>\\n      </Flex>\\n      <Skeleton.Text />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\nAnd here's an example that simulates how that Skeleton might work in practice.\\n```tsx\\nimport React from 'react';\\nimport {keyframes} from '@emotion/react';\\n\\nimport {Card} from '@workday/canvas-kit-react/card';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {SystemIconCircle} from '@workday/canvas-kit-react/icon';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {borderRadius, space} from '@workday/canvas-kit-react/tokens';\\nimport {patternIcon} from '@workday/canvas-system-icons-web';\\nimport {styled, StyledType} from '@workday/canvas-kit-react/common';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\n\\nconst fadeOut = keyframes`\\n  from {\\n    opacity: 1;\\n  }\\n\\n  to {\\n    opacity: 0;\\n  }\\n`;\\n\\nconst StyledSimulation = styled(Box)<StyledType>({\\n  pointerEvents: 'none',\\n});\\n\\nexport const Simulation = () => {\\n  const [loading, setLoading] = React.useState(true);\\n  const [loadTime, setLoadTime] = React.useState('3000');\\n  const timer = React.useRef(0);\\n  const loadTimeValue = React.useRef(parseFloat(loadTime));\\n\\n  const resetTimeout = () => {\\n    setLoading(true);\\n    window.clearTimeout(timer.current);\\n    timer.current = window.setTimeout(() => {\\n      setLoading(false);\\n    }, loadTimeValue.current);\\n    return () => {\\n      window.clearTimeout(timer.current);\\n    };\\n  };\\n\\n  const onChangeLoading = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    window.clearTimeout(timer.current);\\n    setLoading(event.target.checked);\\n  };\\n\\n  const onChangeLoadTime = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setLoadTime(event.currentTarget.value);\\n    const value = parseInt(event.currentTarget.value, 10);\\n\\n    if (value) {\\n      loadTimeValue.current = value;\\n    }\\n  };\\n\\n  React.useEffect(resetTimeout, []);\\n\\n  return (\\n    <Box>\\n      <Box marginBottom=\\\"l\\\">\\n        <FormField orientation=\\\"horizontalStart\\\">\\n          <FormField.Label>Load Time</FormField.Label>\\n          <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />\\n        </FormField>\\n        <FormField orientation=\\\"horizontalStart\\\">\\n          <FormField.Label>Loading</FormField.Label>\\n          <FormField.Input as={Checkbox} checked={loading} onChange={onChangeLoading} />\\n        </FormField>\\n        <SecondaryButton onClick={resetTimeout}>Simulate Loading</SecondaryButton>\\n      </Box>\\n      <Card>\\n        <Card.Body>\\n          <Box minHeight={180} position=\\\"relative\\\">\\n            {loading ? (\\n              <StyledSimulation\\n                position=\\\"absolute\\\"\\n                top={0}\\n                left={0}\\n                width=\\\"100%\\\"\\n                animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}\\n              >\\n                <Skeleton>\\n                  <Flex alignItems=\\\"center\\\">\\n                    <Skeleton.Shape\\n                      width={space.xl}\\n                      height={space.xl}\\n                      borderRadius={borderRadius.circle}\\n                    />\\n                    <Box flex={1} marginLeft=\\\"xs\\\">\\n                      <Skeleton.Header />\\n                    </Box>\\n                  </Flex>\\n                  <Skeleton.Text lineCount={3} />\\n                </Skeleton>\\n              </StyledSimulation>\\n            ) : (\\n              <Box>\\n                <Flex alignItems=\\\"center\\\" display=\\\"inline-flex\\\" marginBottom=\\\"s\\\">\\n                  <SystemIconCircle icon={patternIcon} />\\n                  <Heading as=\\\"h3\\\" size=\\\"small\\\" margin={`0 0 0 ${space.xxs}`}>\\n                    Patterns\\n                  </Heading>\\n                </Flex>\\n                <p>\\n                  Canvas Patterns classify and document reusable solutions built to respond to\\n                  common user scenarios. Following these guidelines allows us to design experiences\\n                  that feel consistent and natural for users as they move between applications and\\n                  ensures that our approach aligns with industry standards.\\n                </p>\\n              </Box>\\n            )}\\n          </Box>\\n        </Card.Body>\\n      </Card>\\n    </Box>\\n  );\\n};\\n```\\n\\nPress the **Simulate Loading** button to simulate the loading of the content (customize the loading\\ntime using the **Load Time** field), or check the **Loading** check box to force the Skeleton to\\ndisplay.\\n\\n### Color\\n\\nAll Skeleton subcomponents accept a `backgroundColor` prop which can be used to specify the color of\\nthe subcomponent. This is generally only recommended to be used for dark or gray backgrounds to\\nensure the Skeleton components are visible.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';\\n\\nexport const Color = () => {\\n  return (\\n    <Skeleton>\\n      <Flex alignItems=\\\"center\\\">\\n        <Skeleton.Shape\\n          width={space.xl}\\n          height={space.xl}\\n          borderRadius={borderRadius.circle}\\n          backgroundColor={colors.berrySmoothie100}\\n        />\\n        <Box flex={1} marginLeft=\\\"xs\\\">\\n          <Skeleton.Header backgroundColor={colors.cantaloupe100} />\\n        </Box>\\n      </Flex>\\n      <div>\\n        <Skeleton.Text backgroundColor={colors.fruitPunch100} />\\n      </div>\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n### Text\\n\\n`Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder line has\\na width of `100%` and a fixed height of `21px`, with the last line having a width of `60%` if there\\nare multiple lines.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\n\\nexport const Text = () => {\\n  return (\\n    <Skeleton>\\n      <Skeleton.Text />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n### Header\\n\\n`Skeleton.Header` renders a placeholder for header content such as headings.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\n\\nexport const Header = () => {\\n  return (\\n    <Skeleton>\\n      <Skeleton.Header />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n### Shape\\n\\n`Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small images.\\nSet the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create various\\nrectangular and circular shapes.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {borderRadius, space} from '@workday/canvas-kit-react/tokens';\\n\\nexport const Shape = () => {\\n  return (\\n    <Skeleton>\\n      <Skeleton.Shape width={space.xxl} height={space.xxl} borderRadius={borderRadius.circle} />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"select\": {\n      \"title\": \"Components/Inputs/Select\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs\",\n      \"mdxPath\": \"modules/react/select/stories/Select.mdx\",\n      \"mdxProse\": \"# Canvas Kit Select\\n\\nSelect inputs allow users to choose one option from a list of items or type a matching option.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/select)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Select` supports a\\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you\\npass an array of items via the `items` prop and provide a render function to display the items. The\\nitems may be provided as an\\n[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an\\n[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).\\n\\n`Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\\n`Select` wraps the `FormField` element and the `FormField` element wraps the children of `Select` to\\nmeet accessibility standards. This ensures the `label` text from `FormField` is attached to the\\n`Select.Input` and read out as a group for voiceover.\\n\\n```tsx\\n<Select items={options}>\\n  <FormField label=\\\"Your Label\\\">\\n    <Select.Input onChange={e => handleChange(e)} id=\\\"contact-select\\\" />\\n    <Select.Popper>\\n      <Select.Card>\\n        <Select.List>{item => <Select.Item>{item.id}</Select.Item>}</Select.List>\\n      </Select.Card>\\n    </Select.Popper>\\n  </FormField>\\n</Select>\\n```\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n  'Thisisalongstringwithnobreaksandwillwrap',\\n];\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    console.log('change', event.currentTarget.value);\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} onChange={handleChange} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => {\\n                    return <Select.Item>{item}</Select.Item>;\\n                  }}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\nOur example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the\\nvalue of the `Select`.\\n\\n### Hoisted Model\\n\\nBy default, `Select` will create and use its own model internally. Alternatively, you may configure\\nyour own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is\\nreferred to as\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\\nand provides direct access to its `state` and `events` outside of the `Select` component.\\n\\nIn this example, we set up external observation of the model state and create an external button to\\ntrigger an event to change the selected item.\\n\\n**Note: If your array of objects uses an `id` property and a `text` property there is no need to use\\nthe helper functions of `getId` or `getTextValue`. The collection system and the `Select` use these\\nproperties by default for keyboard navigation and selected the `id` based on the item clicked.**\\n```tsx\\nimport React from 'react';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nconst options = [\\n  {text: 'E-mail', id: 'email-1'},\\n  {text: 'Phone', id: 'phone-2'},\\n  {text: 'Fax', id: 'fax-3'},\\n  {text: 'Mail', id: 'mail-4'},\\n  {text: 'Mobile Phone', id: 'mobile-phone-5'},\\n];\\n\\nexport const HoistedModel = () => {\\n  const model = useSelectModel({\\n    items: options,\\n    initialSelectedIds: ['fax-3'],\\n  });\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <BodyText size=\\\"small\\\">Selected Value: {model.state.selectedIds[0]}</BodyText>\\n      <SecondaryButton\\n        onClick={() => {\\n          model.events.select({id: 'phone-2'});\\n        }}\\n      >\\n        Select Phone Item\\n      </SecondaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const LabelPosition = () => {\\n  const model = useSelectModel({\\n    items: options,\\n  });\\n\\n  return (\\n    <Flex>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n            <FormField.Hint>Choose a form of contact</FormField.Hint>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping `FormField` to `true` to indicate that the field is\\nrequired. Labels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField isRequired>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of `Select.Input` to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax (disabled)',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Disabled = () => {\\n  const [_, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\\n            <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => (\\n                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\\n                      {item}\\n                    </Select.Item>\\n                  )}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Disabled Items\\n\\nIn order to disable items and prevent users from interacting with them:\\n\\n1.  Set the `nonInteractiveIds` prop of `Select` to an array of disabled item `id`s. If your items\\n    are an array of `strings` this will be just the text value. If your items are an array of\\n    `objects`, this will be that value of the `id` property. This will disable interaction for those\\n    items and exclude them from type-ahead.\\n\\n2.  Set the `aria-disabled` attribute of all disabled `Select.Item`s to `true`. This ensures the\\n    items are styled as disabled.\\n\\nThe following example adds the string value of the items we want disable to `nonInteractiveIds` and\\nsets `aria-disabled` for the disabled items.\\n\\n### With Icons\\n\\nUse `Select.Item.Icon` to render an icon for a `Select.Item`. The `icon` prop for `Select.Item.Icon`\\naccepts [system icons](/assets/system-icons/) from `@workday/canvas-system-icons-web`.\\n\\nIn order to render the icon for the selected item in the `Select.Input`:\\n\\n1.  Obtain a reference to the `model` by registering your `items` with `useSelectModel`.\\n2.  Get the selected item:\\n    `const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model)`\\n3.  Pass the icon for the selected item to the input:\\n    `<Select.Input inputStartIcon={selectedItem.value.icon}>`\\n\\n> **Note: `data-id` on `Select.Item` must match the `id` property in your array of objects. This\\n> ensures proper keyboard handling and type-ahead.**\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  activityStreamIcon,\\n  avatarIcon,\\n  uploadCloudIcon,\\n  userIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst styleOverrides = {\\n  formfieldInputStyles: createStyles({\\n    width: px2rem(300),\\n  }),\\n  selectCardStyles: createStyles({\\n    maxHeight: px2rem(200),\\n  }),\\n};\\n\\nconst customOptions = [\\n  {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},\\n  {text: 'Avatar', id: 'avatar', icon: avatarIcon},\\n  {text: 'Upload Cloud', id: 'upload-cloud', icon: uploadCloudIcon},\\n  {text: 'User', id: 'user', icon: userIcon},\\n];\\n\\nexport const WithIcons = () => {\\n  const model = useSelectModel({\\n    items: customOptions,\\n  });\\n  const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model);\\n  return (\\n    <Flex>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input\\n              as={Select.Input}\\n              cs={styleOverrides.formfieldInputStyles}\\n              inputStartIcon={selectedItem?.value.icon}\\n            />\\n            <Select.Popper>\\n              <Select.Card cs={styleOverrides.selectCardStyles}>\\n                {model.state.items.length > 0 && (\\n                  <Select.List>\\n                    {item => (\\n                      <Select.Item data-id={item.id}>\\n                        <Select.Item.Icon icon={item.icon} />\\n                        {item.text}\\n                      </Select.Item>\\n                    )}\\n                  </Select.List>\\n                )}\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n**Note: that `Select.Input` will only render an icon if an item is selected.**\\n\\n### Grow\\n\\nSet the `grow` prop of the wrapping `FormField` to `true` to configure the `Select.Input` to expand\\nto the width of its container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Grow = () => {\\n  const model = useSelectModel({\\n    items: options,\\n  });\\n\\n  return (\\n    <Flex>\\n      <FormField grow>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Menu Height\\n\\n`Select.Card` has a default maximum height of `300px` to restrict the height of the dropdown menu.\\nSet its `maxHeight` prop to override this value.\\n```tsx\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst selectCardStyles = createStyles({\\n  maxHeight: px2rem(200),\\n});\\n\\nconst cities = [\\n  'Atlanta (United States)',\\n  'Amsterdam (Europe)',\\n  'Austin (United States)',\\n  'Beaverton (United States)',\\n  'Belfast (Europe)',\\n  'Berlin (Europe)',\\n  'Boston (United States)',\\n  'Boulder (United States)',\\n  'Chicago (United States)',\\n  'Dallas (United States)',\\n  'Denver (United States)',\\n  'Dublin (Europe)',\\n  'Irvine (United States)',\\n  'Minneapolis (United States)',\\n  'New York (United States)',\\n  'Orlando (United States)',\\n  'Palo Alto (United States)',\\n  'Philadelphia (United States)',\\n  'Pleasanton (United States)',\\n  'Raleigh (United States)',\\n  'San Francisco (United States)',\\n  'San Mateo (United States)',\\n  'Stockholm (Europe)',\\n  'Toronto (Canada)',\\n  'Victoria (Canada)',\\n  'Vienna (Europe)',\\n  'Warsaw (Europe)',\\n  'Washington, DC (United States)',\\n  'Zurich (Europe)',\\n];\\n\\nexport const MenuHeight = () => {\\n  return (\\n    <Box>\\n      <FormField>\\n        <FormField.Label>Choose a City</FormField.Label>\\n        <FormField.Field>\\n          <Select items={cities}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card cs={selectCardStyles}>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Box>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\n`Select.Input` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\\nforward `ref` to its underlying `<input type=\\\"text\\\" role=\\\"combobox\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const RefForwarding = () => {\\n  // @ts-ignore\\n  const [value, setValue] = React.useState('medium');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    if (ref && ref.current) {\\n      console.log(ref);\\n      ref.current.focus();\\n    }\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping `FormField` to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the `Select` to the caution or error state, respectively. You will\\nalso need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility\\nstandards. You must set an `id` attribute on the `Select.Input` element that matches the value of\\n`inputId` set on the `FormField` element. These attributes ensure that the caution message is\\nassociated to the `Select` and read out by voiceover.\\n\\n**Note: The Select container component, `Select`, must wrap `FormField` to ensure `Select.Input` is\\nstyled correctly.**\\n\\n```tsx\\n<Select items={options}>\\n  <FormField label=\\\"Contact\\\" inputId=\\\"contact-id-formfield\\\">\\n    <Select.Input id=\\\"contact-id-formfield\\\" />\\n    ...\\n  </FormField>\\n</Select>\\n```\\n\\n#### Caution\\n\\nUse the alert state when a selection is valid but there is additional information.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField error=\\\"caution\\\">\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id=\\\"alert-select\\\" />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n            <FormField.Hint>Please choose a form of contact.</FormField.Hint>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n#### Error\\n\\nUse the error state when the selection is no longer valid.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax (disabled)',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField error=\\\"error\\\">\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => (\\n                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\\n                      {item}\\n                    </Select.Item>\\n                  )}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n            <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Initial Selected Item\\n\\nYou can set `initialSelectedIds` to the value that you want initially selected.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  {\\n    id: 'b310c757b2d341f99d40d76f4d563c5b',\\n    descriptor: 'Arabic',\\n    languageCode: 'ar',\\n    label: 'Arabic',\\n    nativeLanguageName: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629',\\n  },\\n  {\\n    id: 'a675a6b6e22d100017d7fe2a784d1255',\\n    descriptor: 'Bulgarian (Bulgaria)',\\n    languageCode: 'bg_BG',\\n    label: 'Bulgarian (Bulgaria)',\\n    nativeLanguageName: '\u0431\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438 (\u0420\u0435\u043F\u0443\u0431\u043B\u0438\u043A\u0430 \u0411\u044A\u043B\u0433\u0430\u0440\u0438\u044F)',\\n  },\\n  {\\n    id: 'da594226446c11de98360015c5e6daf6',\\n    descriptor: 'English (United States)',\\n    languageCode: 'en_US',\\n    label: 'English (United States)',\\n    nativeLanguageName: 'English',\\n  },\\n];\\n\\nexport const InitialSelectedItem = () => {\\n  const [value, setValue] = React.useState('English (United States)');\\n  const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setId(event.target.value);\\n    setValue(options.find(item => item.id === event.target.value).label);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select\\n            items={options}\\n            initialSelectedIds={['da594226446c11de98360015c5e6daf6']}\\n            getId={item => item.id}\\n            getTextValue={item => item.label}\\n          >\\n            <Select.Input onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <p>Id: {id}</p>\\n      <p>Value: {value}</p>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Placeholder\\n\\nYou can change the placeholder text by passing in a string value to the `placeholder` attribute on\\nthe `Select.Input`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Placeholder = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <Select.Input placeholder=\\\"Make a Selection\\\" onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => {\\n                    return <Select.Item>{item}</Select.Item>;\\n                  }}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Fetching Dynamic Items\\n\\nIt's common to load items from a server call. Hoisting the `model` and setting your items on state\\nallows you to pass those items to your `model`. You can leverage React state to set your items on\\nload as well as displaying a placeholder indicating when items are loaded.\\n\\n**Note: In this case we need to use `getId` and `getTextValue` because our data doesn't have the\\nproperties of `id` or `text`. Using these helper functions sets the `serverId` to be `id` and\\n`label` to be `text`.**\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {useMount} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n  maxWidth: px2rem(300),\\n});\\n\\nconst movieListItems = [\\n  {\\n    label: 'The Lion King',\\n    serverId: '123',\\n    Year: '2019',\\n    Runtime: '118 min',\\n  },\\n  {\\n    label: 'Mowgli: Legend of the Jungle',\\n    serverId: '234',\\n    Year: '2018',\\n    Runtime: '104 min',\\n  },\\n  {\\n    label: 'Doctor Strange',\\n    serverId: '345',\\n    Year: '2016',\\n    Runtime: '115 min',\\n  },\\n  {\\n    label: 'John Wick',\\n    Year: '2014',\\n    serverId: '456',\\n    Runtime: '101 min',\\n  },\\n  {\\n    label: 'The Notebook',\\n    serverId: '567',\\n    Year: '2004',\\n    Runtime: '123 min',\\n  },\\n];\\n\\nexport const FetchingDynamicItems = () => {\\n  const [id, setId] = React.useState('456');\\n  const [moviesLists, setMoviesList] = React.useState<typeof movieListItems>([]);\\n  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');\\n  const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();\\n\\n  const model = useSelectModel({\\n    items: moviesLists,\\n    getTextValue: item => item.label,\\n    getId: item => item.serverId,\\n    initialSelectedIds: [id],\\n  });\\n\\n  const stringValue = moviesLists.find(item => item.serverId === id)?.label || '';\\n\\n  function loadItems() {\\n    setLoadingStatus('loading');\\n    loadingRef.current = setTimeout(() => {\\n      setLoadingStatus('success');\\n      setMoviesList(movieListItems);\\n    }, 1500);\\n  }\\n\\n  useMount(() => {\\n    return () => {\\n      clearTimeout(loadingRef.current);\\n    };\\n  });\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Choose a Film</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input\\n              as={Select.Input}\\n              onChange={e => {\\n                setId(e.target.value);\\n              }}\\n              placeholder={loadingStatus}\\n            />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => {\\n                    return <Select.Item>{item.label}</Select.Item>;\\n                  }}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <div data-testid=\\\"selected-id\\\">Selected Id: {id}</div>\\n      <div data-testid=\\\"selected-value\\\">Selected value: {stringValue}</div>\\n      <PrimaryButton\\n        onClick={() => {\\n          loadItems();\\n        }}\\n      >\\n        Get Items\\n      </PrimaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Complex\\n\\nWhen registering items in an array of objects, it's common to have the text that is displayed to the\\nuser be different than an id. In this example, `serverId` and `label` properties need to be remapped\\nto `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties\\n`text` and `id`, there would be no need for this.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  {serverId: 'email', label: 'E-mail'},\\n  {serverId: 'phone', label: 'Phone'},\\n  {serverId: 'fax', label: 'Fax'},\\n  {serverId: 'mail', label: 'Mail'},\\n  {serverId: 'mobile', label: 'Mobile Phone'},\\n  {\\n    serverId: 'oasis',\\n    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n  },\\n];\\n\\nexport const Complex = () => {\\n  const [value, setValue] = React.useState('');\\n  const [id, setId] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setId(event.target.value);\\n    setValue(options.find(item => item.serverId === event.target.value)!.label);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <p>Id: {id}</p>\\n      <p>Value: {value}</p>\\n    </Flex>\\n  );\\n};\\n```\\n\\n**Note: By default, the identifier and text value are `id` and `text` properties respectively. If\\nyour data object for each item is different, provide a `getId` or `getTextValue` function to the\\nmodel config. For example:**\\n\\n```jsx\\nconst items = [\\n  {\\n    serverId: '1',\\n    label: 'First Option',\\n  },\\n];\\n\\n<Select items={items} getId={item => item.serverId} getTextValue={item => item.label}>\\n  {/* etc */}\\n</Select>;\\n```\\n\\n### Controlled\\n\\nThe Select can be a\\n[controlled input](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)\\ncomponent by passing the `value` and `onChange` to either the `<Select>` component or the\\n`<Select.Input>` component. Internally, the `Select.Input` watches for changes on the `value` React\\nprop as well as the `value` DOM property and will update the model accordingly.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  {serverId: 'email', label: 'E-mail'},\\n  {serverId: 'phone', label: 'Phone'},\\n  {serverId: 'fax', label: 'Fax'},\\n  {serverId: 'mail', label: 'Mail'},\\n  {serverId: 'mobile', label: 'Mobile Phone'},\\n  {\\n    serverId: 'oasis',\\n    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n  },\\n];\\n\\nexport const Controlled = () => {\\n  const [value, setValue] = React.useState('');\\n  const [label, setLabel] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.currentTarget.value);\\n    setLabel(options.find(item => item.serverId === event.currentTarget.value)?.label || '');\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\\n            <FormField.Input\\n              as={Select.Input}\\n              onChange={handleChange}\\n              value={value}\\n              name=\\\"contact\\\"\\n            />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <p>Id: {value}</p>\\n      <p>Label: {label}</p>\\n      <Flex gap=\\\"s\\\">\\n        <SecondaryButton\\n          onClick={e => {\\n            setValue('fax');\\n          }}\\n        >\\n          Set to \\\"Fax\\\"\\n        </SecondaryButton>\\n        <SecondaryButton\\n          onClick={e => {\\n            setValue('');\\n          }}\\n        >\\n          Clear\\n        </SecondaryButton>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### When to use `getId`, or `getTextValue`\\n\\n- `getId`: This is an optional function to return the id of an item. If not provided, the default\\n  function will return the `id` property from the object of each item. If you did not provide\\n  `items`, do not override this function. Instead provide static items via JSX. the list will create\\n  an internal array of items where `id` is the only property and the default `getId` will return the\\n  desired result. **Note: If your array of objects has a different property for `id`, like\\n  `serverId`, use this function to set the id.**\\n\\n  ```tsx\\n  const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]\\n  <Select items={options} getId={(item) => item.serverId}>\\n    <FormField label=\\\"Your Label\\\">\\n      <Select.Input onChange={e => handleChange(e)} id=\\\"contact-select\\\" />\\n      <Select.Popper>\\n        <Select.Card>\\n          <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\\n        </Select.Card>\\n      </Select.Popper>\\n    </FormField>\\n  </Select>\\n  ```\\n\\n- `getTextValue`: Optional function to return the text representation of an item. If not provided,\\n  the default function will return the `text` property of the object of each item or an empty string\\n  if there is no `text` property. If you did not provide `items`, do not override this function.\\n  **Note: If your array of objects has a different property for `text`, like `label`, use this\\n  function to set the text.**\\n\\n  ```tsx\\n  const options = [{label: 'Pizza', id: 'pizza-1'}, {label: 'Cheeseburger', id: 'cheeseburger'}]\\n  <Select items={options} getTextValue={(item) => item.label}>\\n    <FormField label=\\\"Your Label\\\">\\n      <Select.Input onChange={e => handleChange(e)} id=\\\"contact-select\\\" />\\n      <Select.Popper>\\n        <Select.Card>\\n          <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n        </Select.Card>\\n      </Select.Popper>\\n    </FormField>\\n  </Select>\\n  ```\\n\\n### Custom Styles\\n\\nSelect and its subcomponents support custom styling via the `cs` prop. For more information, check\\nour\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"popup\": {\n      \"title\": \"Components/Popups/Popup\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-popup--docs\",\n      \"mdxPath\": \"modules/react/popup/stories/Popup.mdx\",\n      \"mdxProse\": \"# Canvas Kit Popups\\n\\nA \\\"popup\\\" is a classification for a type of stacked UI element that appears \\\"on top\\\" of statically\\npositioned content. Tooltips, Modals, Dropdown menus, etc are all examples of \\\"popups\\\". Canvas Kit\\nhas a \\\"stack manager\\\" system for managing these popups. Different types of popups have different\\nrequirements of behavior for UX and accessibility - we can call them behaviors, capabilities, or\\ntraits. Canvas Kit comes with a number of [behavioral hooks](#hooks) in the form of React Hooks.\\n\\nYou should use the most semantic component for your use-case before using `Popup` directly, like\\n`Modal`, which already has the correct behaviors built-in. If no component already exists that\\nmatches your use case, you can use `Popup` and use our [hooks](#hooks). The `Popup` component comes\\nwith a `Popup.Popper` subcomponent that positions a popup using [PopperJS](https://popper.js.org/)\\nthat registers a popup with the `PopupStack` automatically and sets the popup model's `placement`\\nproperty. `Popup.Popper` component and hooks work with the stack management system for correct\\nrendering and accessibility behavior. If you cannot use `Popup.Popper`, use the\\n[usePopupStack](#usepoupstack) hook to properly register and deregister the popup at the correct\\ntime. If you cannot use our hooks, consider upgrading your component to use Hooks. If you cannot do\\nthat, you'll have to look up the `PopupStack` package for the direct API and have a look at the\\nsource code for our hooks into the `PopupStack` API.\\n\\nThis package comes with everything you need to build Popup UIs.\\n\\n[Buttons](/components/buttons/button)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThe `Popup` component is a generic\\n[Compound Component](/get-started/for-developers/documentation/compound-components/) that is used to\\nbuild popup UIs that are not already covered by Canvas Kit.\\n\\n### Basic Example\\n\\nThe Popup has no pre-defined behaviors built in, therefore the `usePopupModel` must always be used\\nto create a new `model`. This `model` is then used by all behavior hooks to apply additional popup\\nbehaviors to the compound component group. The following example creates a typical popup around a\\ntarget element and adds `useCloseOnOutsideClick`, `useCloseOnEscape`, `useInitialFocus`, and\\n`useReturnFocus` behaviors. You can read through the [hooks](#hooks) section to learn about all the\\npopup behaviors. For accessibility, these behaviors should be included most of the time.\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const Basic = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n      <Popup.Popper placement=\\\"top\\\">\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Delete Item</Popup.Heading>\\n          <Popup.Body>\\n            <Box as=\\\"p\\\" cs={bodyStyles}>\\n              Are you sure you'd like to delete the item titled 'My Item'?\\n            </Box>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n              Delete\\n            </Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n### Initial Focus\\n\\nIf you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`\\nof the model. This is useful for popups that don't have a Close icon button near the top right of\\nthe popup. In general, we recommend setting focus to the first interactive component inside the\\npopup that is the least destructive action.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  Popup,\\n  usePopupModel,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nconst columnStyles = createStyles({\\n  gap: system.space.x4,\\n  alignItems: 'flex-start',\\n});\\n\\nconst InitialFocusOnButton = () => {\\n  const messageId = useUniqueId();\\n  const initialFocusRef = React.useRef(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: OK button</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={messageId}>\\n          <Popup.Heading>Confirmation</Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles} id={messageId}>\\n              Your message has been sent!\\n            </Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>\\n              OK\\n            </Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnTextInput = () => {\\n  const descriptionId = useUniqueId();\\n  const initialFocusRef = React.useRef<HTMLInputElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: text input</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={descriptionId}>\\n          <Popup.Heading>Quick reply</Popup.Heading>\\n          <Popup.Body>\\n            <FormField>\\n              <FormField.Label>Message</FormField.Label>\\n              <FormField.Input as={TextInput} ref={initialFocusRef} />\\n            </FormField>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnHeading = () => {\\n  const headingFocusRef = React.useRef<HTMLHeadingElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef: headingFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: heading</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.Heading ref={headingFocusRef} tabIndex={-1}>\\n            Important notice\\n          </Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles}>Review the summary below before continuing.</Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const InitialFocus = () => {\\n  return (\\n    <Flex cs={columnStyles}>\\n      <InitialFocusOnButton />\\n      <InitialFocusOnTextInput />\\n      <InitialFocusOnHeading />\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When initial focus lands on a control **below** the title (such as the OK\\n> button in the example above), assign a unique `id` to supplementary text and pass\\n> `aria-describedby` on `Popup.Card`. This augments the included `aria-labelledby` reference to\\n> `Popup.Heading` so screen readers can announce both the heading and any supplementary text\\n> automatically. When initial focus is on the heading itself, add `tabIndex={-1}` to `Popup.Heading`\\n> so the title can receive programmatic focus. Choose where focus goes based on your product and\\n> accessibility requirements.\\n\\n### Focus Redirect\\n\\nFocus management is important to accessibility of popup contents. The following example shows\\n`useFocusRedirect` being used to manage focus in and out of a Popup. This is very useful for\\nnon-modal popups. Focus redirection tries to treat the Popup as if it were inline to the document.\\nTabbing out of the Popup will close the Popup and move focus to an adjacent focusable element.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const FocusRedirect = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = useUniqueId();\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible, popupId]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex cs={flexStyles}>\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}}></div>\\n        <Popup.Popper>\\n          <Popup.Card cs={cardStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" cs={bodyStyles}>\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex cs={flexStyles}>\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: The `useFocusRedirect` hook **will not** have any effect on the reading\\n> order of a screen reader. Screen reader users may get confused or disoriented when popups are\\n> portalled to the bottom of the document body. In this example, we're testing the use of\\n> `aria-owns` on a sibling `<div>` element pointing to the `Popup.Card` component. This remaps the\\n> hierarchy of the accessibility tree (in supported browsers) to address the reading order problem.\\n> For more information, see\\n> [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n### Focus Trapping\\n\\nFocus trapping is similar to the [Focus Redirect](#focus-redirect) example, but will trap focus\\ninside the popup instead of redirecting focus to adjacent focusable elements. This is necessary for\\nmodal dialogs where users must focus on the contents of the dialog before proceeding.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const FocusTrap = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = 'popup-test-id';\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex gap=\\\"s\\\">\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}} />\\n        <Popup.Popper>\\n          <Popup.Card width={400}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Focus trapping will not prevent mouse users from breaking out of a focus\\n> trap, nor will it prevent screen reader users from using virtual reading cursors from breaking\\n> out. Consider using [Modal](/components/popups/modal/) instead when you need to focus users'\\n> attention on a specific task inside of a popup..\\n\\n### Multiple Popups\\n\\nYou can render more than one `Popup` in the same view by giving each its own model. This example\\npairs `Popup` with `useDialogModel` and `useModalModel` so you can compare **focus redirection**\\n(Tab / Shift + Tab can move focus out of the first popup) and **focus trapping** (focus stays inside\\nthe second popup until it closes). Opening one does not close the other.\\n```tsx\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useDialogModel} from '@workday/canvas-kit-react/dialog';\\nimport {useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nconst popupStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nexport const MultiplePopups = () => {\\n  const dialogModel = useDialogModel();\\n  const modalModel = useModalModel();\\n\\n  return (\\n    <Flex cs={flexStyles}>\\n      <Popup model={dialogModel}>\\n        <Popup.Target>Focus Redirect Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Redirect Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the dialog model and will allow keyboard focus to escape when users\\n                press Tab or Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n      <Popup model={modalModel}>\\n        <Popup.Target>Focus Trap Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Trap Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the modal model and will trap keyboard focus when users press Tab or\\n                Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n            <Flex>\\n              <Popup.CloseButton>OK</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Nested Popups\\n\\nIf you need nested Popups within the same component, you can create multiple models and pass a\\nunique model to each Popup. Popup comes with a `Popup.CloseButton` that uses a `Button` and adds\\nprops via the `usePopupCloseButton` hook to ensure the popups hides and focus is returned. The `as`\\ncan be used in a powerful way to do this by using `<Popup.CloseButton as={Popup.CloseButton}>` which\\nwill mix in click handlers from both popups. This is not very intuitive, however. You can create\\nprops that merge a click handler for both Popups by using `usePopupCloseButton` directly. The second\\nparameter is props to be merged which will effectively hide both popups. Focus management is\\npreserved.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {\\n  Popup,\\n  useCloseOnOutsideClick,\\n  useCloseOnEscape,\\n  usePopupModel,\\n  usePopupCloseButton,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const NestedPopups = () => {\\n  const popup1 = usePopupModel();\\n  const popup2 = usePopupModel();\\n\\n  useCloseOnOutsideClick(popup1);\\n  useCloseOnEscape(popup1);\\n  useInitialFocus(popup1);\\n  useReturnFocus(popup1);\\n\\n  useCloseOnOutsideClick(popup2);\\n  useCloseOnEscape(popup2);\\n  useInitialFocus(popup2);\\n  useReturnFocus(popup2);\\n\\n  const closeBothProps = usePopupCloseButton(popup1, usePopupCloseButton(popup2));\\n\\n  return (\\n    <>\\n      <Popup model={popup1}>\\n        <Popup.Target>Open Popup 1</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card aria-label=\\\"Popup 1\\\">\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Body>\\n              <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup model={popup2}>\\n                <Popup.Target>Open Popup 2</Popup.Target>\\n                <Popup.Popper>\\n                  <Popup.Card aria-label=\\\"Popup 2\\\">\\n                    <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n                    <Popup.Body>\\n                      <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>\\n                    </Popup.Body>\\n                    <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n                      <Popup.CloseButton as={Popup.CloseButton} model={popup1}>\\n                        Close Both (as)\\n                      </Popup.CloseButton>\\n                      <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>\\n                    </Flex>\\n                  </Popup.Card>\\n                </Popup.Popper>\\n              </Popup>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In this example, observe how users can traverse both opened popups using\\n> the keyboard. This is likely to be a confusing experience for users and may necessitate focus\\n> trapping inside each popup with careful consideration for setting initial focus and returning\\n> focus.\\n\\n### Custom Target\\n\\nIt is common to have a custom target for your popup. Use the `as` prop to use your custom component.\\nThe `Popup.Target` element will add `onClick` and `ref` to the provided component. Your provided\\ntarget component must forward the `onClick` to an element for the Popup to open. The `as` will cause\\n`Popup.Target` to inherit the interface of your custom target component. This means any props your\\ntarget requires, `Popup.Target` now also requires. The example below has a `MyTarget` component that\\nrequires a `label` prop.\\n\\n> **Note**: If your application needs to programmatically open a Popup without the user interacting\\n> with the target button first, you'll also need to use `React.forwardRef` in your target component.\\n> Without this, the Popup will open at the top-left of the window instead of around the target.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\n\\ninterface MyTargetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  label: string;\\n}\\n\\nconst MyTarget = React.forwardRef<HTMLButtonElement, MyTargetProps>(({label, ...props}, ref) => {\\n  return (\\n    <button {...props} ref={ref}>\\n      {label}\\n    </button>\\n  );\\n});\\n\\nexport const CustomTarget = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={MyTarget} label=\\\"Open\\\" />\\n      <Popup.Popper>\\n        <Popup.Card>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Popup</Popup.Heading>\\n          <Popup.Body>Contents</Popup.Body>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be\\n> able to access the popup. Bear in mind that click handlers only work with the keyboard when\\n> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target\\n> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard\\n> event handlers for invoking the popup.\\n\\n### Full Screen API\\n\\nBy default, popups are created as children of the `document.body` element, but the `PopupStack`\\nsupports the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). When\\nfullscreen is entered, the `PopupStack` will automatically create a new stacking context for all\\nfuture popups. Any existing popups will disappear, but not be removed. They disappear because the\\nfullscreen API is only showing content within the fullscreen element. There are instances where a\\npopup may not close when fullscreen is exited:\\n\\n- The escape key is used to exit fullscreen\\n- There is a button to exit fullscreen, but the popup doesn't use `useCloseOnOutsideClick`\\n\\nIf fullscreen is exited, popups within the fullscreen stacking context are not removed or\\ntransferred automatically. If you do not handle this case, the popup may not render correctly. This\\nexample shows a popup that closes when fullscreen is entered/exited and another popup that transfers\\nthe popup's stack context when entering/exiting fullscreen.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n  useCloseOnFullscreenExit,\\n  useTransferOnFullscreenExit,\\n  useTransferOnFullscreenEnter,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useIsFullscreen} from '@workday/canvas-kit-react/common';\\nimport screenfull from 'screenfull';\\n\\nconst SelfClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useCloseOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Self-close Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Self-close Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useCloseOnFullscreenExit</code> hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst TransferClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useTransferOnFullscreenEnter(model);\\n  useTransferOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Transfer Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Transfer Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useTransferOnFullscreenExit</code>{' '}\\n              hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const FullScreen = () => {\\n  // you could make this a hook depending on which fullscreen library your application uses\\n  const fullscreenElementRef = React.useRef<HTMLDivElement>();\\n  const isFullscreen = useIsFullscreen();\\n\\n  const enterFullScreen = () => {\\n    screenfull.request(fullscreenElementRef.current);\\n  };\\n\\n  const exitFullscreen = () => {\\n    screenfull.exit();\\n  };\\n\\n  return (\\n    <>\\n      <SecondaryButton onClick={enterFullScreen}>Open Fullscreen</SecondaryButton>\\n      <Flex\\n        ref={fullscreenElementRef}\\n        alignItems=\\\"center\\\"\\n        justifyContent=\\\"center\\\"\\n        background=\\\"white\\\"\\n      >\\n        <Flex gap=\\\"s\\\">\\n          <SelfClosePopup />\\n          <TransferClosePopup />\\n          {isFullscreen ? (\\n            <SecondaryButton onClick={exitFullscreen}>Exit fullscreen</SecondaryButton>\\n          ) : null}\\n        </Flex>\\n      </Flex>\\n    </>\\n  );\\n};\\n```\\n\\n### Opening an External Window\\n\\nA popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent\\nis replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle\\nof the extenal window. Be sure to connect the `unload` event of both the parent `window` and the\\nexternal child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie\\nwindows.\\n```tsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {infoIcon} from '@workday/canvas-system-icons-web';\\n\\nimport {\\n  CanvasProvider,\\n  ContentDirection,\\n  createSubcomponent,\\n  PartialEmotionCanvasTheme,\\n  useMount,\\n  useTheme,\\n} from '@workday/canvas-kit-react/common';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nexport interface ExternalWindowPortalProps {\\n  /**\\n   * Child components of WindowPortal\\n   */\\n  children: React.ReactNode;\\n  /**\\n   * Callback to close the popup\\n   */\\n  onWindowClose?: () => void;\\n  /**\\n   * Width of the popup window\\n   */\\n  width?: number;\\n  /**\\n   * Height of the popup window\\n   */\\n  height?: number;\\n  /**\\n   * The name of the popup window. If another popup opens with the same name, that instance will\\n   * be reused. Use caution with setting this value\\n   */\\n  target?: string;\\n}\\n\\nasync function copyAssets(sourceDoc: Document, targetDoc: Document) {\\n  for (const font of (sourceDoc as any).fonts.values()) {\\n    (targetDoc as any).fonts.add(font);\\n\\n    font.load();\\n  }\\n\\n  await (targetDoc as any).fonts.ready;\\n\\n  // The current ES lib version doesn't include iterable interfaces, so we cast as an iterable\\n  for (const styleSheet of sourceDoc.styleSheets as StyleSheetList & Iterable<CSSStyleSheet>) {\\n    if (styleSheet.cssRules) {\\n      // text based styles\\n      const styleEl = targetDoc.createElement('style');\\n      for (const cssRule of styleSheet.cssRules as CSSRuleList & Iterable<CSSRule>) {\\n        styleEl.appendChild(targetDoc.createTextNode(cssRule.cssText));\\n      }\\n      targetDoc.head.appendChild(styleEl);\\n    } else if (styleSheet.href) {\\n      // link based styles\\n      const linkEl = targetDoc.createElement('link');\\n\\n      linkEl.rel = 'stylesheet';\\n      linkEl.href = styleSheet.href;\\n      targetDoc.head.appendChild(linkEl);\\n    }\\n  }\\n}\\n\\nconst ExternalWindowPortal = ({\\n  children,\\n  width = 300,\\n  height = 500,\\n  target = '',\\n  onWindowClose,\\n}: ExternalWindowPortalProps) => {\\n  const [portalElement, setPortalElement] = React.useState<HTMLDivElement | null>(null);\\n\\n  useMount(() => {\\n    const newWindow = window.open(\\n      '', // url\\n      target,\\n      `width=${width},height=${height},left=100,top=100,popup=true`\\n    );\\n\\n    if (newWindow) {\\n      // copy fonts and styles\\n      copyAssets(document, newWindow.document);\\n\\n      const element = newWindow.document.createElement('div');\\n      newWindow.document.body.appendChild(element);\\n      setPortalElement(element);\\n    } else {\\n      onWindowClose();\\n    }\\n\\n    const closeWindow = event => {\\n      onWindowClose();\\n    };\\n\\n    window.addEventListener('unload', closeWindow);\\n    newWindow?.addEventListener('unload', closeWindow);\\n\\n    return () => {\\n      window.removeEventListener('unload', closeWindow);\\n      newWindow?.removeEventListener('unload', closeWindow);\\n      newWindow?.close();\\n    };\\n  });\\n\\n  if (!portalElement) {\\n    return null;\\n  }\\n\\n  return ReactDOM.createPortal(<CanvasProvider>{children}</CanvasProvider>, portalElement);\\n};\\n\\nconst PopupExternalWindow = createSubcomponent()({\\n  displayName: 'Popup.ExternalWindow',\\n  modelHook: usePopupModel,\\n})<ExternalWindowPortalProps>(({children, ...elemProps}, Element, model) => {\\n  if (model.state.visibility === 'visible') {\\n    return (\\n      <ExternalWindowPortal onWindowClose={model.events.hide} {...elemProps}>\\n        {children}\\n      </ExternalWindowPortal>\\n    );\\n  }\\n\\n  return null;\\n});\\n\\nexport const ExternalWindow = () => {\\n  // useTheme is filling in the Canvas theme object if any keys are missing\\n  const canvasTheme: PartialEmotionCanvasTheme = useTheme({\\n    canvas: {\\n      // Switch to `ContentDirection.RTL` to change direction\\n      direction: ContentDirection.LTR,\\n    },\\n  });\\n\\n  const model = usePopupModel();\\n\\n  return (\\n    <CanvasProvider theme={canvasTheme}>\\n      <>\\n        <main className={mainContentStyles}>\\n          <p>Popup that opens a new Operating System Window</p>\\n          <Popup model={model}>\\n            <Tooltip title=\\\"Open External Window Tooltip\\\">\\n              <Popup.Target>Open External Window</Popup.Target>\\n            </Tooltip>\\n            <PopupExternalWindow>\\n              <p>External Window Contents! Mouse over the info icon to get a tooltip</p>\\n              <Flex gap=\\\"s\\\">\\n                <Tooltip title=\\\"More information\\\">\\n                  <SecondaryButton icon={infoIcon} />\\n                </Tooltip>\\n                <Popup.CloseButton>Close Window</Popup.CloseButton>\\n              </Flex>\\n            </PopupExternalWindow>\\n          </Popup>\\n          <p>Popup visibility: {model.state.visibility}</p>\\n        </main>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### RTL\\n\\nThe Popup component automatically handles right-to-left rendering.\\n\\n> **Note:** This example shows an inaccessible open card for demonstration purposes.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Popup.Card width={400}>\\n        <Popup.CloseIcon aria-label=\\\"\u05E1\u05D2\u05D5\u05E8\\\" />\\n        <Popup.Heading>\u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8</Popup.Heading>\\n        <Popup.Body>\\n          <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n            \u05D4\u05D0\u05DD \u05D1\u05E8\u05E6\u05D5\u05E0\u05DA \u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8 \u05D6\u05D4\\n          </Box>\\n        </Popup.Body>\\n        <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n          <DeleteButton>\u05DC\u05B4\u05DE\u05B0\u05D7\u05D5\u05B9\u05E7</DeleteButton>\\n          <SecondaryButton>\u05DC\u05B0\u05D1\u05B7\u05D8\u05B5\u05DC</SecondaryButton>\\n        </Flex>\\n      </Popup.Card>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nPopup content is usually portaled to the bottom of the `document.body`, which can affect **reading\\norder for screen readers** and **keyboard focus order**. For more information about Popup\\naccessibility, check out our documentation at\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n- For non-modal dialogs with `aria-owns` built-in to improve reading order for screen readers (that\\n  support it), check out the [**Dialog**](/components/popups/dialog/) component.\\n- For modal dialogs with built-in overlays and focus traps, check out the\\n  [**Modal**](/components/popups/modal/) component.\\n\\n## Component API\\n\\n<>\\n  \\n\\n  \\n</>\\n\\n## Hooks\\n\\n<>\\n  \\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n  \\n</>\\n\\n## Specifications\\n\\n\"\n    },\n    \"popper\": {\n      \"title\": \"Components/Popups/Popper\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-popper--docs\",\n      \"mdxPath\": \"modules/react/popup/stories/Popup.mdx\",\n      \"mdxProse\": \"# Canvas Kit Popups\\n\\nA \\\"popup\\\" is a classification for a type of stacked UI element that appears \\\"on top\\\" of statically\\npositioned content. Tooltips, Modals, Dropdown menus, etc are all examples of \\\"popups\\\". Canvas Kit\\nhas a \\\"stack manager\\\" system for managing these popups. Different types of popups have different\\nrequirements of behavior for UX and accessibility - we can call them behaviors, capabilities, or\\ntraits. Canvas Kit comes with a number of [behavioral hooks](#hooks) in the form of React Hooks.\\n\\nYou should use the most semantic component for your use-case before using `Popup` directly, like\\n`Modal`, which already has the correct behaviors built-in. If no component already exists that\\nmatches your use case, you can use `Popup` and use our [hooks](#hooks). The `Popup` component comes\\nwith a `Popup.Popper` subcomponent that positions a popup using [PopperJS](https://popper.js.org/)\\nthat registers a popup with the `PopupStack` automatically and sets the popup model's `placement`\\nproperty. `Popup.Popper` component and hooks work with the stack management system for correct\\nrendering and accessibility behavior. If you cannot use `Popup.Popper`, use the\\n[usePopupStack](#usepoupstack) hook to properly register and deregister the popup at the correct\\ntime. If you cannot use our hooks, consider upgrading your component to use Hooks. If you cannot do\\nthat, you'll have to look up the `PopupStack` package for the direct API and have a look at the\\nsource code for our hooks into the `PopupStack` API.\\n\\nThis package comes with everything you need to build Popup UIs.\\n\\n[Buttons](/components/buttons/button)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThe `Popup` component is a generic\\n[Compound Component](/get-started/for-developers/documentation/compound-components/) that is used to\\nbuild popup UIs that are not already covered by Canvas Kit.\\n\\n### Basic Example\\n\\nThe Popup has no pre-defined behaviors built in, therefore the `usePopupModel` must always be used\\nto create a new `model`. This `model` is then used by all behavior hooks to apply additional popup\\nbehaviors to the compound component group. The following example creates a typical popup around a\\ntarget element and adds `useCloseOnOutsideClick`, `useCloseOnEscape`, `useInitialFocus`, and\\n`useReturnFocus` behaviors. You can read through the [hooks](#hooks) section to learn about all the\\npopup behaviors. For accessibility, these behaviors should be included most of the time.\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const Basic = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n      <Popup.Popper placement=\\\"top\\\">\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Delete Item</Popup.Heading>\\n          <Popup.Body>\\n            <Box as=\\\"p\\\" cs={bodyStyles}>\\n              Are you sure you'd like to delete the item titled 'My Item'?\\n            </Box>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n              Delete\\n            </Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n### Initial Focus\\n\\nIf you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`\\nof the model. This is useful for popups that don't have a Close icon button near the top right of\\nthe popup. In general, we recommend setting focus to the first interactive component inside the\\npopup that is the least destructive action.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  Popup,\\n  usePopupModel,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nconst columnStyles = createStyles({\\n  gap: system.space.x4,\\n  alignItems: 'flex-start',\\n});\\n\\nconst InitialFocusOnButton = () => {\\n  const messageId = useUniqueId();\\n  const initialFocusRef = React.useRef(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: OK button</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={messageId}>\\n          <Popup.Heading>Confirmation</Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles} id={messageId}>\\n              Your message has been sent!\\n            </Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>\\n              OK\\n            </Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnTextInput = () => {\\n  const descriptionId = useUniqueId();\\n  const initialFocusRef = React.useRef<HTMLInputElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: text input</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={descriptionId}>\\n          <Popup.Heading>Quick reply</Popup.Heading>\\n          <Popup.Body>\\n            <FormField>\\n              <FormField.Label>Message</FormField.Label>\\n              <FormField.Input as={TextInput} ref={initialFocusRef} />\\n            </FormField>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnHeading = () => {\\n  const headingFocusRef = React.useRef<HTMLHeadingElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef: headingFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: heading</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.Heading ref={headingFocusRef} tabIndex={-1}>\\n            Important notice\\n          </Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles}>Review the summary below before continuing.</Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const InitialFocus = () => {\\n  return (\\n    <Flex cs={columnStyles}>\\n      <InitialFocusOnButton />\\n      <InitialFocusOnTextInput />\\n      <InitialFocusOnHeading />\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When initial focus lands on a control **below** the title (such as the OK\\n> button in the example above), assign a unique `id` to supplementary text and pass\\n> `aria-describedby` on `Popup.Card`. This augments the included `aria-labelledby` reference to\\n> `Popup.Heading` so screen readers can announce both the heading and any supplementary text\\n> automatically. When initial focus is on the heading itself, add `tabIndex={-1}` to `Popup.Heading`\\n> so the title can receive programmatic focus. Choose where focus goes based on your product and\\n> accessibility requirements.\\n\\n### Focus Redirect\\n\\nFocus management is important to accessibility of popup contents. The following example shows\\n`useFocusRedirect` being used to manage focus in and out of a Popup. This is very useful for\\nnon-modal popups. Focus redirection tries to treat the Popup as if it were inline to the document.\\nTabbing out of the Popup will close the Popup and move focus to an adjacent focusable element.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const FocusRedirect = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = useUniqueId();\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible, popupId]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex cs={flexStyles}>\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}}></div>\\n        <Popup.Popper>\\n          <Popup.Card cs={cardStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" cs={bodyStyles}>\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex cs={flexStyles}>\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: The `useFocusRedirect` hook **will not** have any effect on the reading\\n> order of a screen reader. Screen reader users may get confused or disoriented when popups are\\n> portalled to the bottom of the document body. In this example, we're testing the use of\\n> `aria-owns` on a sibling `<div>` element pointing to the `Popup.Card` component. This remaps the\\n> hierarchy of the accessibility tree (in supported browsers) to address the reading order problem.\\n> For more information, see\\n> [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n### Focus Trapping\\n\\nFocus trapping is similar to the [Focus Redirect](#focus-redirect) example, but will trap focus\\ninside the popup instead of redirecting focus to adjacent focusable elements. This is necessary for\\nmodal dialogs where users must focus on the contents of the dialog before proceeding.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const FocusTrap = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = 'popup-test-id';\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex gap=\\\"s\\\">\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}} />\\n        <Popup.Popper>\\n          <Popup.Card width={400}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Focus trapping will not prevent mouse users from breaking out of a focus\\n> trap, nor will it prevent screen reader users from using virtual reading cursors from breaking\\n> out. Consider using [Modal](/components/popups/modal/) instead when you need to focus users'\\n> attention on a specific task inside of a popup..\\n\\n### Multiple Popups\\n\\nYou can render more than one `Popup` in the same view by giving each its own model. This example\\npairs `Popup` with `useDialogModel` and `useModalModel` so you can compare **focus redirection**\\n(Tab / Shift + Tab can move focus out of the first popup) and **focus trapping** (focus stays inside\\nthe second popup until it closes). Opening one does not close the other.\\n```tsx\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useDialogModel} from '@workday/canvas-kit-react/dialog';\\nimport {useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nconst popupStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nexport const MultiplePopups = () => {\\n  const dialogModel = useDialogModel();\\n  const modalModel = useModalModel();\\n\\n  return (\\n    <Flex cs={flexStyles}>\\n      <Popup model={dialogModel}>\\n        <Popup.Target>Focus Redirect Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Redirect Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the dialog model and will allow keyboard focus to escape when users\\n                press Tab or Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n      <Popup model={modalModel}>\\n        <Popup.Target>Focus Trap Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Trap Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the modal model and will trap keyboard focus when users press Tab or\\n                Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n            <Flex>\\n              <Popup.CloseButton>OK</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Nested Popups\\n\\nIf you need nested Popups within the same component, you can create multiple models and pass a\\nunique model to each Popup. Popup comes with a `Popup.CloseButton` that uses a `Button` and adds\\nprops via the `usePopupCloseButton` hook to ensure the popups hides and focus is returned. The `as`\\ncan be used in a powerful way to do this by using `<Popup.CloseButton as={Popup.CloseButton}>` which\\nwill mix in click handlers from both popups. This is not very intuitive, however. You can create\\nprops that merge a click handler for both Popups by using `usePopupCloseButton` directly. The second\\nparameter is props to be merged which will effectively hide both popups. Focus management is\\npreserved.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {\\n  Popup,\\n  useCloseOnOutsideClick,\\n  useCloseOnEscape,\\n  usePopupModel,\\n  usePopupCloseButton,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const NestedPopups = () => {\\n  const popup1 = usePopupModel();\\n  const popup2 = usePopupModel();\\n\\n  useCloseOnOutsideClick(popup1);\\n  useCloseOnEscape(popup1);\\n  useInitialFocus(popup1);\\n  useReturnFocus(popup1);\\n\\n  useCloseOnOutsideClick(popup2);\\n  useCloseOnEscape(popup2);\\n  useInitialFocus(popup2);\\n  useReturnFocus(popup2);\\n\\n  const closeBothProps = usePopupCloseButton(popup1, usePopupCloseButton(popup2));\\n\\n  return (\\n    <>\\n      <Popup model={popup1}>\\n        <Popup.Target>Open Popup 1</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card aria-label=\\\"Popup 1\\\">\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Body>\\n              <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup model={popup2}>\\n                <Popup.Target>Open Popup 2</Popup.Target>\\n                <Popup.Popper>\\n                  <Popup.Card aria-label=\\\"Popup 2\\\">\\n                    <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n                    <Popup.Body>\\n                      <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>\\n                    </Popup.Body>\\n                    <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n                      <Popup.CloseButton as={Popup.CloseButton} model={popup1}>\\n                        Close Both (as)\\n                      </Popup.CloseButton>\\n                      <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>\\n                    </Flex>\\n                  </Popup.Card>\\n                </Popup.Popper>\\n              </Popup>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In this example, observe how users can traverse both opened popups using\\n> the keyboard. This is likely to be a confusing experience for users and may necessitate focus\\n> trapping inside each popup with careful consideration for setting initial focus and returning\\n> focus.\\n\\n### Custom Target\\n\\nIt is common to have a custom target for your popup. Use the `as` prop to use your custom component.\\nThe `Popup.Target` element will add `onClick` and `ref` to the provided component. Your provided\\ntarget component must forward the `onClick` to an element for the Popup to open. The `as` will cause\\n`Popup.Target` to inherit the interface of your custom target component. This means any props your\\ntarget requires, `Popup.Target` now also requires. The example below has a `MyTarget` component that\\nrequires a `label` prop.\\n\\n> **Note**: If your application needs to programmatically open a Popup without the user interacting\\n> with the target button first, you'll also need to use `React.forwardRef` in your target component.\\n> Without this, the Popup will open at the top-left of the window instead of around the target.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\n\\ninterface MyTargetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  label: string;\\n}\\n\\nconst MyTarget = React.forwardRef<HTMLButtonElement, MyTargetProps>(({label, ...props}, ref) => {\\n  return (\\n    <button {...props} ref={ref}>\\n      {label}\\n    </button>\\n  );\\n});\\n\\nexport const CustomTarget = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={MyTarget} label=\\\"Open\\\" />\\n      <Popup.Popper>\\n        <Popup.Card>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Popup</Popup.Heading>\\n          <Popup.Body>Contents</Popup.Body>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be\\n> able to access the popup. Bear in mind that click handlers only work with the keyboard when\\n> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target\\n> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard\\n> event handlers for invoking the popup.\\n\\n### Full Screen API\\n\\nBy default, popups are created as children of the `document.body` element, but the `PopupStack`\\nsupports the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). When\\nfullscreen is entered, the `PopupStack` will automatically create a new stacking context for all\\nfuture popups. Any existing popups will disappear, but not be removed. They disappear because the\\nfullscreen API is only showing content within the fullscreen element. There are instances where a\\npopup may not close when fullscreen is exited:\\n\\n- The escape key is used to exit fullscreen\\n- There is a button to exit fullscreen, but the popup doesn't use `useCloseOnOutsideClick`\\n\\nIf fullscreen is exited, popups within the fullscreen stacking context are not removed or\\ntransferred automatically. If you do not handle this case, the popup may not render correctly. This\\nexample shows a popup that closes when fullscreen is entered/exited and another popup that transfers\\nthe popup's stack context when entering/exiting fullscreen.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n  useCloseOnFullscreenExit,\\n  useTransferOnFullscreenExit,\\n  useTransferOnFullscreenEnter,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useIsFullscreen} from '@workday/canvas-kit-react/common';\\nimport screenfull from 'screenfull';\\n\\nconst SelfClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useCloseOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Self-close Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Self-close Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useCloseOnFullscreenExit</code> hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst TransferClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useTransferOnFullscreenEnter(model);\\n  useTransferOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Transfer Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Transfer Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useTransferOnFullscreenExit</code>{' '}\\n              hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const FullScreen = () => {\\n  // you could make this a hook depending on which fullscreen library your application uses\\n  const fullscreenElementRef = React.useRef<HTMLDivElement>();\\n  const isFullscreen = useIsFullscreen();\\n\\n  const enterFullScreen = () => {\\n    screenfull.request(fullscreenElementRef.current);\\n  };\\n\\n  const exitFullscreen = () => {\\n    screenfull.exit();\\n  };\\n\\n  return (\\n    <>\\n      <SecondaryButton onClick={enterFullScreen}>Open Fullscreen</SecondaryButton>\\n      <Flex\\n        ref={fullscreenElementRef}\\n        alignItems=\\\"center\\\"\\n        justifyContent=\\\"center\\\"\\n        background=\\\"white\\\"\\n      >\\n        <Flex gap=\\\"s\\\">\\n          <SelfClosePopup />\\n          <TransferClosePopup />\\n          {isFullscreen ? (\\n            <SecondaryButton onClick={exitFullscreen}>Exit fullscreen</SecondaryButton>\\n          ) : null}\\n        </Flex>\\n      </Flex>\\n    </>\\n  );\\n};\\n```\\n\\n### Opening an External Window\\n\\nA popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent\\nis replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle\\nof the extenal window. Be sure to connect the `unload` event of both the parent `window` and the\\nexternal child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie\\nwindows.\\n```tsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {infoIcon} from '@workday/canvas-system-icons-web';\\n\\nimport {\\n  CanvasProvider,\\n  ContentDirection,\\n  createSubcomponent,\\n  PartialEmotionCanvasTheme,\\n  useMount,\\n  useTheme,\\n} from '@workday/canvas-kit-react/common';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nexport interface ExternalWindowPortalProps {\\n  /**\\n   * Child components of WindowPortal\\n   */\\n  children: React.ReactNode;\\n  /**\\n   * Callback to close the popup\\n   */\\n  onWindowClose?: () => void;\\n  /**\\n   * Width of the popup window\\n   */\\n  width?: number;\\n  /**\\n   * Height of the popup window\\n   */\\n  height?: number;\\n  /**\\n   * The name of the popup window. If another popup opens with the same name, that instance will\\n   * be reused. Use caution with setting this value\\n   */\\n  target?: string;\\n}\\n\\nasync function copyAssets(sourceDoc: Document, targetDoc: Document) {\\n  for (const font of (sourceDoc as any).fonts.values()) {\\n    (targetDoc as any).fonts.add(font);\\n\\n    font.load();\\n  }\\n\\n  await (targetDoc as any).fonts.ready;\\n\\n  // The current ES lib version doesn't include iterable interfaces, so we cast as an iterable\\n  for (const styleSheet of sourceDoc.styleSheets as StyleSheetList & Iterable<CSSStyleSheet>) {\\n    if (styleSheet.cssRules) {\\n      // text based styles\\n      const styleEl = targetDoc.createElement('style');\\n      for (const cssRule of styleSheet.cssRules as CSSRuleList & Iterable<CSSRule>) {\\n        styleEl.appendChild(targetDoc.createTextNode(cssRule.cssText));\\n      }\\n      targetDoc.head.appendChild(styleEl);\\n    } else if (styleSheet.href) {\\n      // link based styles\\n      const linkEl = targetDoc.createElement('link');\\n\\n      linkEl.rel = 'stylesheet';\\n      linkEl.href = styleSheet.href;\\n      targetDoc.head.appendChild(linkEl);\\n    }\\n  }\\n}\\n\\nconst ExternalWindowPortal = ({\\n  children,\\n  width = 300,\\n  height = 500,\\n  target = '',\\n  onWindowClose,\\n}: ExternalWindowPortalProps) => {\\n  const [portalElement, setPortalElement] = React.useState<HTMLDivElement | null>(null);\\n\\n  useMount(() => {\\n    const newWindow = window.open(\\n      '', // url\\n      target,\\n      `width=${width},height=${height},left=100,top=100,popup=true`\\n    );\\n\\n    if (newWindow) {\\n      // copy fonts and styles\\n      copyAssets(document, newWindow.document);\\n\\n      const element = newWindow.document.createElement('div');\\n      newWindow.document.body.appendChild(element);\\n      setPortalElement(element);\\n    } else {\\n      onWindowClose();\\n    }\\n\\n    const closeWindow = event => {\\n      onWindowClose();\\n    };\\n\\n    window.addEventListener('unload', closeWindow);\\n    newWindow?.addEventListener('unload', closeWindow);\\n\\n    return () => {\\n      window.removeEventListener('unload', closeWindow);\\n      newWindow?.removeEventListener('unload', closeWindow);\\n      newWindow?.close();\\n    };\\n  });\\n\\n  if (!portalElement) {\\n    return null;\\n  }\\n\\n  return ReactDOM.createPortal(<CanvasProvider>{children}</CanvasProvider>, portalElement);\\n};\\n\\nconst PopupExternalWindow = createSubcomponent()({\\n  displayName: 'Popup.ExternalWindow',\\n  modelHook: usePopupModel,\\n})<ExternalWindowPortalProps>(({children, ...elemProps}, Element, model) => {\\n  if (model.state.visibility === 'visible') {\\n    return (\\n      <ExternalWindowPortal onWindowClose={model.events.hide} {...elemProps}>\\n        {children}\\n      </ExternalWindowPortal>\\n    );\\n  }\\n\\n  return null;\\n});\\n\\nexport const ExternalWindow = () => {\\n  // useTheme is filling in the Canvas theme object if any keys are missing\\n  const canvasTheme: PartialEmotionCanvasTheme = useTheme({\\n    canvas: {\\n      // Switch to `ContentDirection.RTL` to change direction\\n      direction: ContentDirection.LTR,\\n    },\\n  });\\n\\n  const model = usePopupModel();\\n\\n  return (\\n    <CanvasProvider theme={canvasTheme}>\\n      <>\\n        <main className={mainContentStyles}>\\n          <p>Popup that opens a new Operating System Window</p>\\n          <Popup model={model}>\\n            <Tooltip title=\\\"Open External Window Tooltip\\\">\\n              <Popup.Target>Open External Window</Popup.Target>\\n            </Tooltip>\\n            <PopupExternalWindow>\\n              <p>External Window Contents! Mouse over the info icon to get a tooltip</p>\\n              <Flex gap=\\\"s\\\">\\n                <Tooltip title=\\\"More information\\\">\\n                  <SecondaryButton icon={infoIcon} />\\n                </Tooltip>\\n                <Popup.CloseButton>Close Window</Popup.CloseButton>\\n              </Flex>\\n            </PopupExternalWindow>\\n          </Popup>\\n          <p>Popup visibility: {model.state.visibility}</p>\\n        </main>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### RTL\\n\\nThe Popup component automatically handles right-to-left rendering.\\n\\n> **Note:** This example shows an inaccessible open card for demonstration purposes.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Popup.Card width={400}>\\n        <Popup.CloseIcon aria-label=\\\"\u05E1\u05D2\u05D5\u05E8\\\" />\\n        <Popup.Heading>\u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8</Popup.Heading>\\n        <Popup.Body>\\n          <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n            \u05D4\u05D0\u05DD \u05D1\u05E8\u05E6\u05D5\u05E0\u05DA \u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8 \u05D6\u05D4\\n          </Box>\\n        </Popup.Body>\\n        <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n          <DeleteButton>\u05DC\u05B4\u05DE\u05B0\u05D7\u05D5\u05B9\u05E7</DeleteButton>\\n          <SecondaryButton>\u05DC\u05B0\u05D1\u05B7\u05D8\u05B5\u05DC</SecondaryButton>\\n        </Flex>\\n      </Popup.Card>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nPopup content is usually portaled to the bottom of the `document.body`, which can affect **reading\\norder for screen readers** and **keyboard focus order**. For more information about Popup\\naccessibility, check out our documentation at\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n- For non-modal dialogs with `aria-owns` built-in to improve reading order for screen readers (that\\n  support it), check out the [**Dialog**](/components/popups/dialog/) component.\\n- For modal dialogs with built-in overlays and focus traps, check out the\\n  [**Modal**](/components/popups/modal/) component.\\n\\n## Component API\\n\\n<>\\n  \\n\\n  \\n</>\\n\\n## Hooks\\n\\n<>\\n  \\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n  \\n</>\\n\\n## Specifications\\n\\n\"\n    },\n    \"pagination\": {\n      \"title\": \"Components/Navigation/Pagination\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-navigation-pagination--docs\",\n      \"mdxPath\": \"modules/react/pagination/stories/pagination.mdx\",\n      \"mdxProse\": \"# Canvas Kit Pagination\\n\\n`Pagination` is a\\n[compound component](/get-started/for-developers/documentation/compound-components/) that allows\\nusers to navigate between pages in a range.\\n\\n[> Workday Design Reference](https://design.workday.com/components/navigation/pagination)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Pagination` includes a container `Pagination` component and a number of subcomponents which can be\\ncomposed in a variety of ways.\\n\\nIn this example, we set up a basic `Pagination` component with the default range of five pages, as\\nwell as step controls (`Pagination.StepToPreviousButton` and `Pagination.StepToNextButton`) that\\nallow you to move to the previous page or the next page.\\n```tsx\\nimport * as React from 'react';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const Basic = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\nNote that you must include `Pagination.AdditionalDetails` to meet accessibility standards (with one\\nexception, see [`Pagination.AdditionalDetails`](#paginationadditionaldetails) for more information).\\nIt is an `aria-live` region that announces the current page update to screen readers. If you wish to\\nprevent it from displaying (as we've done in the remaining examples), you may set its\\n`shouldHideDetails` prop to `true`. The visually hidden region will still be accessible to screen\\nreaders.\\n\\n### Hoisted Model\\n\\nBy default, `Pagination` will create and use its own [model](#model) internally. Alternatively, you\\nmay configure your own model with `usePaginationModel` and pass it to `Pagination` via the `model`\\nprop. This pattern is referred to as\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\\nand provides direct access to its `state` and `events` outside of the `Pagination` component.\\n\\nIn this example, we set up external observation of the model state and create an external button to\\ntrigger an event to change the current page.\\n```tsx\\nimport * as React from 'react';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n  usePaginationModel,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const HoistedModel = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  const model = usePaginationModel({\\n    lastPage,\\n    onPageChange: number => console.log(number),\\n  });\\n\\n  return (\\n    <>\\n      <Pagination aria-label=\\\"Pagination\\\" model={model}>\\n        <Pagination.Controls>\\n          <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n          <Pagination.PageList>\\n            {({state}) =>\\n              state.range.map(pageNumber => (\\n                <Pagination.PageListItem key={pageNumber}>\\n                  <Pagination.PageButton\\n                    aria-label={`Page ${pageNumber}`}\\n                    pageNumber={pageNumber}\\n                  />\\n                </Pagination.PageListItem>\\n              ))\\n            }\\n          </Pagination.PageList>\\n          <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        </Pagination.Controls>\\n        <Pagination.AdditionalDetails shouldHideDetails>\\n          {({state}) =>\\n            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n              state.currentPage,\\n              resultCount,\\n              totalCount\\n            )} of ${totalCount} results`\\n          }\\n        </Pagination.AdditionalDetails>\\n      </Pagination>\\n      <SecondaryButton\\n        onClick={() => {\\n          model.events.goTo(7);\\n        }}\\n      >\\n        Go to Page 7\\n      </SecondaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Jump Controls\\n\\nThis example adds jump controls (`Pagination.JumpToFirstButton` and `Pagination.JumpToLastButton`)\\nthat allow you to skip to the first and last pages in the range.\\n```tsx\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const JumpControls = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.JumpToFirstButton aria-label=\\\"First\\\" />\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        <Pagination.JumpToLastButton aria-label=\\\"Last\\\" />\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails shouldHideDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\n### GoTo Form\\n\\nThis example adds a form (`Pagination.GoToForm`) that allows you to skip to a specific page within\\nthe range.\\n```tsx\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const GoToForm = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.JumpToFirstButton aria-label=\\\"First\\\" />\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        <Pagination.JumpToLastButton aria-label=\\\"Last\\\" />\\n        <Pagination.GoToForm>\\n          <Pagination.GoToTextInput aria-label=\\\"Go to page number\\\" />\\n          <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>\\n        </Pagination.GoToForm>\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails shouldHideDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Pagination` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport * as React from 'react';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n  usePaginationModel,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Pagination aria-label=\\\"Pagination\\\" lastPage={lastPage}>\\n        <Pagination.Controls>\\n          <Pagination.JumpToFirstButton aria-label=\\\"First\\\" />\\n          <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n          <Pagination.PageList>\\n            {({state}) =>\\n              state.range.map(pageNumber => (\\n                <Pagination.PageListItem key={pageNumber}>\\n                  <Pagination.PageButton\\n                    aria-label={`Page ${pageNumber}`}\\n                    pageNumber={pageNumber}\\n                  />\\n                </Pagination.PageListItem>\\n              ))\\n            }\\n          </Pagination.PageList>\\n          <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n          <Pagination.JumpToLastButton aria-label=\\\"Last\\\" />\\n          <Pagination.GoToForm>\\n            <Pagination.GoToTextInput aria-label=\\\"Go to page number\\\" />\\n            <Pagination.GoToLabel>{({state}) => `\u0627\u0632 ${state.lastPage} \u0635\u0641\u062D\u0647`}</Pagination.GoToLabel>\\n          </Pagination.GoToForm>\\n        </Pagination.Controls>\\n        <Pagination.AdditionalDetails shouldHideDetails>\\n          {({state}) =>\\n            `${getVisibleResultsMax(\\n              state.currentPage,\\n              resultCount,\\n              totalCount\\n            )}-${getVisibleResultsMin(state.currentPage, resultCount)} \u0645\u0646 100 \u0635\u0641\u062D\u0627\u062A`\\n          }\\n        </Pagination.AdditionalDetails>\\n      </Pagination>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Custom Range\\n\\nThis example uses a custom range that allows you to control the width of the component.\\n```tsx\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const CustomRange = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      rangeSize={3}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails shouldHideDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\n### Responsive Range\\n\\nIn some situations, you might want to adjust Pagination's range based on the width of the container.\\nYou can use `useResizeObserver` to accomplish this as in the example below.\\n```tsx\\nimport * as React from 'react';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n  usePaginationModel,\\n} from '@workday/canvas-kit-react/pagination';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {useResizeObserver, useTheme} from '@workday/canvas-kit-react/common';\\n\\nexport const ResponsiveRange = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n  // Normally, rangeSize can be a static value, but we're making it stateful,\\n  // so we can update it using useResizeObserver\\n  const [rangeSize, setRangeSize] = React.useState(5);\\n  const model = usePaginationModel({\\n    lastPage,\\n    rangeSize,\\n  });\\n  // We're only using this state to display the container width;\\n  const [containerWidth, setContainerWidth] = React.useState(0);\\n  // We're using breakpoints from the theme as reference points to adjust the range\\n  const theme = useTheme();\\n  const {values: breakpointValues} = theme.canvas.breakpoints;\\n\\n  // We'll use this ref to measure the size of the container\\n  const containerRef = React.useRef(null);\\n  useResizeObserver({\\n    ref: containerRef,\\n    onResize: ({width}) => {\\n      // Note: onResizeObserver only accounts for the size of the container.\\n      // It does not factor in margin, padding, or border widths.\\n      // If you want to be exact, adjust your math to account for those.\\n      // If you're okay with being close enough on the measurements, this is fine.\\n      if (width) {\\n        // updating the container width for the display text\\n        setContainerWidth(width);\\n        // helper functions for better readability\\n        const isBetweenZeroAndSmall = width >= breakpointValues.zero && width < breakpointValues.s;\\n        const isBetweenSmallAndMedium = width >= breakpointValues.s && width < breakpointValues.m;\\n        const isBetweenMediumAndLarge = width >= breakpointValues.m && width < breakpointValues.l;\\n        const isBetweenLargeAndXLarge = width >= breakpointValues.l && width < breakpointValues.xl;\\n        // We're checking the rangeSize at each level to prevent extra re-renders.\\n        if (rangeSize !== 1 && isBetweenZeroAndSmall) {\\n          setRangeSize(1);\\n        }\\n        if (rangeSize !== 3 && isBetweenSmallAndMedium) {\\n          setRangeSize(3);\\n        }\\n        if (rangeSize !== 5 && isBetweenMediumAndLarge) {\\n          setRangeSize(5);\\n        }\\n        if (rangeSize !== 7 && isBetweenLargeAndXLarge) {\\n          setRangeSize(7);\\n        }\\n      }\\n    },\\n  });\\n\\n  return (\\n    <Flex\\n      border=\\\"solid 1px\\\"\\n      ref={containerRef}\\n      justifyContent=\\\"space-between\\\"\\n      padding=\\\"s\\\"\\n      alignItems=\\\"center\\\"\\n    >\\n      <Text typeLevel=\\\"body.small\\\" fontWeight=\\\"bold\\\">\\n        Width: {containerWidth}px\\n      </Text>\\n      <Pagination model={model} aria-label=\\\"Pagination\\\">\\n        <Pagination.Controls>\\n          <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n          <Pagination.PageList>\\n            {({state}) =>\\n              state.range.map(pageNumber => (\\n                <Pagination.PageListItem key={pageNumber}>\\n                  <Pagination.PageButton\\n                    aria-label={`Page ${pageNumber}`}\\n                    pageNumber={pageNumber}\\n                  />\\n                </Pagination.PageListItem>\\n              ))\\n            }\\n          </Pagination.PageList>\\n          <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        </Pagination.Controls>\\n        <Pagination.AdditionalDetails shouldHideDetails>\\n          {({state}) =>\\n            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n              state.currentPage,\\n              resultCount,\\n              totalCount\\n            )} of ${totalCount} results`\\n          }\\n        </Pagination.AdditionalDetails>\\n      </Pagination>\\n    </Flex>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Model\\n\\nIf `Pagination` was stripped of all its markup, attributes, and styling, what would remain is the\\n[model](/get-started/for-developers/documentation/compound-components/#models). The model is an\\nobject composed of two parts: `state` which describes the current snapshot in time of the component\\nand `events` which describes events that can be sent to the model.\\n\\nBy default, `Pagination` will create a model and share it internally with its subcomponents using\\nReact context. You may subscribe to `PaginationContext` if you wish to create a custom subcomponent\\nfor your implementation. Here's a simple example.\\n\\n```tsx\\n\\nconst CustomButton = (props: React.HTMLAttributes<HTMLButtonElement>) => {\\n  const model = React.useContext(PaginationContext);\\n\\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\\n    // If onClick is provided, pass the event along\\n    props.onClick?.(e);\\n    model.events.goTo(10);\\n  };\\n\\n  return (\\n    <button onClick={handleClick} {...props}>\\n      Go To Page 10\\n    </button>\\n  );\\n};\\n\\nexport const CustomPagination = () => {\\n  return (\\n    <Pagination aria-label=\\\"Pagination\\\" lastPage={20}>\\n      <CustomButton aria-label=\\\"Page 10\\\" />\\n      {/* Other subcomponents */}\\n    </Pagination>\\n  );\\n};\\n```\\n\\nAlternatively, if you need direct access to the model's `state` and `events` outside of the\\n`Pagination` component, you may configure your own model with `usePaginationModel` and pass it to\\n`Pagination` via a pattern called\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model).\\n\\n```tsx\\nconst model = usePaginationModel({\\n  lastPage,\\n  onPageChange: number => console.log(number),\\n});\\n\\n<Pagination aria-label=\\\"Pagination\\\" model={model}>\\n  {/* Child components */}\\n</Pagination>;\\n```\\n\\n### usePaginationModel\\n\\n`usePaginationModel` accepts a configuration object with the following properties and returns a\\n`PaginationModel` with `state` and `events` properties.\\n\\n## Utilities\\n\\n### getLastPage\\n\\n### getRangeMin\\n\\n### getRangeMax\\n\\n### getVisibleResultsMin\\n\\n### getVisibleResultsMax\\n\\n\"\n    },\n    \"modal\": {\n      \"title\": \"Components/Popups/Modal\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal--docs\",\n      \"mdxPath\": \"modules/react/modal/stories/Modal.mdx\",\n      \"mdxProse\": \"# Canvas Kit Modal\\n\\nA Modal component is a type of Dialog that renders a translucent overlay that prevents user\\ninteraction with the rest of the page. A Modal will render the rest of the page inert until the\\nModal is dismissed. A Modal should be used when the user needs to be presented with important\\ninformation that must be interacted with before continuing interaction with the rest of the page.\\n\\nFor tasks that do not require blocking the rest of the page, consider the non-modal\\n[**Dialog**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs)\\ncomponent instead.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic\\n\\nThe basic behavior of a modal is to hide all content from all users that is \\\"behind\\\" the modal\\ndialog.\\n```tsx\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\n\\nexport const Basic = () => {\\n  const handleAcknowledge = () => {\\n    console.log('License Acknowledged');\\n  };\\n\\n  const handleCancel = () => {\\n    console.log('Cancel clicked');\\n  };\\n\\n  return (\\n    <Modal>\\n      <Modal.Target as={PrimaryButton}>Open License</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>MIT License</Modal.Heading>\\n          <Modal.Body>\\n            <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n              Permission is hereby granted, free of charge, to any person obtaining a copy of this\\n              software and associated documentation files (the \\\"Software\\\").\\n            </Box>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n### Without Close Icon\\n\\nIf you wish to remove the close icon button, you can simply omit the `Modal.CloseButton`\\nsubcomponent. If you have a modal dialog that requires the user to accept instead of dismiss through\\nan escape key or clicking outside the modal, you must create a new `PopupModel` without those\\nbehaviors and hand that model to the Modal dialog component.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {\\n  usePopupModel,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusTrap,\\n  useAssistiveHideSiblings,\\n  useDisableBodyScroll,\\n} from '@workday/canvas-kit-react/popup';\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nexport const WithoutCloseIcon = () => {\\n  const longDescId = useUniqueId();\\n  const cancelBtnRef = React.useRef(null);\\n  const model = usePopupModel({\\n    initialFocusRef: cancelBtnRef,\\n  });\\n\\n  // disable useCloseOnEscape and useCloseOnOverlayClick\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useAssistiveHideSiblings(model);\\n  useDisableBodyScroll(model);\\n  const handleDelete = () => {\\n    console.log('Deleted item');\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card aria-describedby={longDescId}>\\n          <Modal.Heading>Delete Item</Modal.Heading>\\n          <Modal.Body>\\n            <Box as=\\\"p\\\" id={longDescId} marginY=\\\"zero\\\">\\n              Are you sure you want to delete the item?\\n            </Box>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton ref={cancelBtnRef}>Cancel</Modal.CloseButton>\\n            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>\\n              Delete\\n            </Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n### Custom Focus\\n\\nBy default, the Modal makes sure the first focusable element receives focus when the Modal is\\nopened. Most of the time, this is the `Modal.CloseIcon` button. If that element isn't present, the\\nModal will use the Modal Heading to make sure screen reader users have focus near the start of the\\nModal's content. This allows screen reader users to discover the Modal's content more naturally\\nwithout having to navigate back up again. Sometimes, it is a better user experience to focus on a\\ndifferent element. The following example shows how `initialFocusRef` can be used to change which\\nelement receives focus when the modal opens.\\n```tsx\\nimport React from 'react';\\nimport {Modal, useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nexport const CustomFocus = () => {\\n  const longDescID = useUniqueId();\\n  const ref = React.useRef<HTMLInputElement>(null);\\n  const [value, setValue] = React.useState('');\\n  const model = useModalModel({\\n    initialFocusRef: ref,\\n  });\\n\\n  const handleAcknowledge = () => {\\n    console.log('Acknowledged license');\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Modal.Target as={PrimaryButton}>Acknowledge License</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card aria-describedby={longDescID}>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>Acknowledge License</Modal.Heading>\\n          <Modal.Body>\\n            <Box as=\\\"p\\\" id={longDescID} marginTop={0} marginBottom=\\\"m\\\">\\n              Enter your initials to acknowledge the license.\\n            </Box>\\n            <FormField cs={{marginBottom: 0}}>\\n              <FormField.Label>Initials</FormField.Label>\\n              <FormField.Input\\n                as={TextInput}\\n                ref={ref}\\n                value={value}\\n                onChange={e => setValue(e.currentTarget.value)}\\n              />\\n            </FormField>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When initial focus lands on a control **below** the heading (for example,\\n> a text field instead of the close button), give supplementary copy a unique `id` and pass\\n> **`aria-describedby`** on **`Modal.Card`** so screen readers can announce both the dialog name and\\n> that text. For more examples of custom focus techniques, see\\n> [Popup > Initial Focus](https://workday.github.io/canvas-kit/?path=/docs/components-popups-popup--docs#initial-focus).\\n\\n### Return Focus\\n\\nBy default, the Modal will return focus to the `Modal.Target` element. When you open the modal with\\n`model.events.show()` (without `Modal.Target`), set **`returnFocusRef`** on the model to the element\\nthat should receive focus when the modal closes\u2014for example the button that opened it. That covers\\ncancel, Escape, and the close icon: focus returns to the control the user activated.\\n\\nIf confirming an action **removes** that control from the document (such as deleting the row that\\nheld the delete button), `returnFocusRef` alone cannot land on a **new** target. The example below\\nuses **`useLayoutEffect`** after the list updates to move focus to another row\u2019s delete control, or\\nto empty-state text when no files remain.\\n```tsx\\nimport React from 'react';\\nimport {Modal, useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\nimport {Heading, Text} from '@workday/canvas-kit-react/text';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {trashIcon} from '@workday/canvas-system-icons-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst INITIAL_FILES = ['Resume.docx', 'Cover_Letter.docx', 'References.docx'];\\n\\nconst actionStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nconst headingStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst emptyStateStyles = createStyles({\\n  maxWidth: '28rem',\\n  outline: 'none',\\n});\\n\\nconst listStyles = createStyles({\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n  marginY: system.space.zero,\\n  padding: system.space.zero,\\n  listStyle: 'none',\\n  maxWidth: '28rem',\\n});\\n\\nconst rowStyles = createStyles({\\n  alignItems: 'center',\\n  justifyContent: 'space-between',\\n  gap: system.space.x4,\\n  width: '100%',\\n});\\n\\nfunction fileNameId(name: string) {\\n  return `return-focus-file-${name.replace(/[^a-zA-Z0-9]/g, '_')}`;\\n}\\n\\n/** Index of a delete button to focus after removing `deletedIndex`, or empty list. */\\nfunction nextListFocusAfterDelete(deletedIndex: number, lengthBeforeDelete: number) {\\n  if (lengthBeforeDelete <= 1) {\\n    return 'empty' as const;\\n  }\\n  return deletedIndex < lengthBeforeDelete - 1 ? deletedIndex : deletedIndex - 1;\\n}\\n\\nexport const ReturnFocus = () => {\\n  const [items, setItems] = React.useState<string[]>(() => [...INITIAL_FILES]);\\n  const [confirmingFileName, setConfirmingFileName] = React.useState<string | null>(null);\\n  const bodyTextId = useUniqueId();\\n\\n  const returnFocusRef = React.useRef<HTMLButtonElement | null>(null);\\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\\n  const deleteButtonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\\n  const emptyStateRef = React.useRef<HTMLDivElement>(null);\\n  const pendingDeleteIndexRef = React.useRef<number | null>(null);\\n  const postDeleteFocusRef = React.useRef<number | 'empty' | null>(null);\\n\\n  const model = useModalModel({\\n    returnFocusRef,\\n    initialFocusRef: cancelButtonRef,\\n  });\\n\\n  React.useEffect(() => {\\n    if (model.state.visibility === 'hidden') {\\n      setConfirmingFileName(null);\\n      pendingDeleteIndexRef.current = null;\\n    }\\n  }, [model.state.visibility]);\\n\\n  React.useLayoutEffect(() => {\\n    if (postDeleteFocusRef.current === null) {\\n      return;\\n    }\\n    if (postDeleteFocusRef.current === 'empty') {\\n      emptyStateRef.current?.focus();\\n    } else {\\n      deleteButtonRefs.current[postDeleteFocusRef.current]?.focus();\\n    }\\n    postDeleteFocusRef.current = null;\\n  }, [items]);\\n\\n  const openDeleteModal = (index: number) => {\\n    pendingDeleteIndexRef.current = index;\\n    setConfirmingFileName(items[index]);\\n    returnFocusRef.current = deleteButtonRefs.current[index];\\n    model.events.show();\\n  };\\n\\n  const handleConfirmDelete = () => {\\n    const idx = pendingDeleteIndexRef.current;\\n    if (idx === null) {\\n      return;\\n    }\\n    postDeleteFocusRef.current = nextListFocusAfterDelete(idx, items.length);\\n    pendingDeleteIndexRef.current = null;\\n    setItems(prev => prev.filter((_, i) => i !== idx));\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Heading as=\\\"h4\\\" size=\\\"small\\\" cs={headingStyles}>\\n        Uploaded Files\\n      </Heading>\\n      <Box>\\n        {items.length > 0 ? (\\n          <Flex as=\\\"ul\\\" cs={listStyles}>\\n            {items.map((name, index) => (\\n              <Flex as=\\\"li\\\" key={name} cs={rowStyles}>\\n                <Text as=\\\"span\\\" id={fileNameId(name)}>\\n                  {name}\\n                </Text>\\n                <Tooltip title=\\\"Delete\\\">\\n                  <DeleteButton\\n                    aria-describedby={fileNameId(name)}\\n                    icon={trashIcon}\\n                    ref={el => {\\n                      deleteButtonRefs.current[index] = el;\\n                    }}\\n                    onClick={() => openDeleteModal(index)}\\n                  />\\n                </Tooltip>\\n              </Flex>\\n            ))}\\n          </Flex>\\n        ) : (\\n          <Box ref={emptyStateRef} tabIndex={-1} cs={emptyStateStyles}>\\n            <Text>No files remaining.</Text>\\n          </Box>\\n        )}\\n      </Box>\\n      <Modal.Overlay>\\n        <Modal.Card aria-describedby={bodyTextId}>\\n          <Modal.Heading>Delete file?</Modal.Heading>\\n          <Modal.Body>\\n            <Text id={bodyTextId}>\\n              {confirmingFileName\\n                ? `Are you sure you want to delete ${confirmingFileName}?`\\n                : 'Are you sure you want to delete this file?'}\\n            </Text>\\n          </Modal.Body>\\n          <Flex cs={actionStyles}>\\n            <Modal.CloseButton ref={cancelButtonRef}>Cancel</Modal.CloseButton>\\n            <Modal.CloseButton as={DeleteButton} onClick={handleConfirmDelete}>\\n              Delete\\n            </Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: After an item is deleted, focus is returned to the next item in the list\\n> or to the empty state text when no items remain.\\n\\n### Custom Target\\n\\nIt is common to have a custom target for your modal. Use the `as` prop to use your custom component.\\nThe `Modal.Target` element will add `onClick` and `ref` to the provided component. Your provided\\ntarget component must forward the `onClick` to an element for the Modal to open. The `as` will cause\\n`Modal.Target` to inherit the interface of your custom target component. This means any props your\\ntarget requires, `Modal.Target` now also requires. The example below has a `MyTarget` component that\\nrequires a `label` prop.\\n\\n> **Note**: If your application needs to programmatically open a Modal without the user interacting\\n> with the target button first, you'll also need to use `React.forwardRef` in your target component.\\n> Without this, the Modal will open at the top-left of the window instead of around the target.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\n\\ninterface MyTargetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  label: string;\\n}\\n\\nconst MyTarget = ({label, ...props}: MyTargetProps) => {\\n  return <button {...props}>{label}</button>;\\n};\\n\\nexport const CustomTarget = () => {\\n  return (\\n    <Modal>\\n      <Modal.Target as={MyTarget} label=\\\"Open\\\" />\\n      <Modal.Overlay>\\n        <Modal.Card>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>Modal Heading</Modal.Heading>\\n          <Modal.Body>\\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper facilisis dolor\\n            quis facilisis. Aenean tempor eget quam et semper. Nam malesuada rhoncus euismod.\\n            Quisque vel urna feugiat, dictum risus sed, pulvinar nulla. Sed gravida, elit non\\n            iaculis blandit, ligula tortor posuere mauris, vitae cursus turpis nunc non arcu.\\n          </Modal.Body>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be\\n> able to access the modal. Bear in mind that click handlers only work with the keyboard when\\n> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target\\n> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard\\n> event handlers for invoking the modal.\\n\\n### Body Content Overflow\\n\\nThe Modal automatically handles overflowing content inside the `Modal.Body` element. If contents are\\nlarger than the browser's height will allow, the content will overflow with a scrollbar. You may\\nneed to restrict the height of your browser to observe the overflow.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const BodyOverflow = () => {\\n  const handleAcknowledge = () => {\\n    console.log('License Acknowledged');\\n  };\\n\\n  const handleCancel = () => {\\n    console.log('Cancel clicked');\\n  };\\n\\n  return (\\n    <Modal>\\n      <Modal.Target as={PrimaryButton}>Open License</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>MIT License</Modal.Heading>\\n          <Modal.Body tabIndex={0}>\\n            <p style={{marginTop: 0}}>\\n              Permission is hereby granted, free of charge, to any person obtaining a copy of this\\n              software and associated documentation files (the \\\"Software\\\"), to deal in the Software\\n              without restriction, including without limitation the rights to use, copy, modify,\\n              merge, publish, distribute, sublicense, and/or sell copies of the Software, and to\\n              permit persons to whom the Software is furnished to do so, subject to the following\\n              conditions:\\n            </p>\\n            <p>\\n              The above copyright notice and this permission notice shall be included in all copies\\n              or substantial portions of the Software.\\n            </p>\\n            <p>\\n              THE SOFTWARE IS PROVIDED \\\"AS IS\\\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\\n              INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\\n              PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\\n              HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF\\n              CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE\\n              OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\\n            </p>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\\n              incididunt ut labore et dolore magna aliqua. Amet massa vitae tortor condimentum\\n              lacinia quis. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Sed lectus\\n              vestibulum mattis ullamcorper velit sed. Rutrum tellus pellentesque eu tincidunt\\n              tortor aliquam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus.\\n              Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Id neque\\n              aliquam vestibulum morbi blandit cursus risus at. Vel eros donec ac odio tempor orci.\\n              Ac felis donec et odio pellentesque diam volutpat. Laoreet non curabitur gravida arcu\\n              ac tortor dignissim. Rhoncus urna neque viverra justo nec ultrices dui. Bibendum arcu\\n              vitae elementum curabitur vitae nunc sed velit dignissim. Sed risus pretium quam\\n              vulputate dignissim suspendisse in est. Curabitur gravida arcu ac tortor. Nam libero\\n              justo laoreet sit amet cursus sit amet. Arcu dui vivamus arcu felis bibendum ut\\n              tristique et egestas. Eros donec ac odio tempor orci dapibus ultrices. At erat\\n              pellentesque adipiscing commodo elit at. Dignissim cras tincidunt lobortis feugiat\\n              vivamus at augue.\\n            </p>\\n            <p>\\n              Amet commodo nulla facilisi nullam vehicula ipsum. Blandit libero volutpat sed cras.\\n              Quam lacus suspendisse faucibus interdum posuere. Aenean euismod elementum nisi quis\\n              eleifend. Orci nulla pellentesque dignissim enim sit amet venenatis. Diam vel quam\\n              elementum pulvinar etiam non quam lacus. Sit amet dictum sit amet justo donec enim\\n              diam vulputate. Tincidunt ornare massa eget egestas purus. Pulvinar neque laoreet\\n              suspendisse interdum consectetur libero id faucibus. Morbi tincidunt augue interdum\\n              velit. Nullam non nisi est sit amet.\\n            </p>\\n            <p style={{marginBottom: 0}}>\\n              Aliquet enim tortor at auctor urna nunc id cursus metus. Leo urna molestie at\\n              elementum eu facilisis. Consectetur purus ut faucibus pulvinar elementum integer.\\n              Volutpat est velit egestas dui id ornare arcu odio. At consectetur lorem donec massa\\n              sapien. Condimentum vitae sapien pellentesque habitant. Pellentesque habitant morbi\\n              tristique senectus. Et molestie ac feugiat sed lectus vestibulum. Arcu risus quis\\n              varius quam quisque. Turpis massa tincidunt dui ut ornare lectus sit amet. Magna eget\\n              est lorem ipsum dolor sit. Suspendisse faucibus interdum posuere lorem ipsum. Nisi\\n              vitae suscipit tellus mauris a diam maecenas sed. Ipsum dolor sit amet consectetur\\n              adipiscing. Ultricies integer quis auctor elit sed. Scelerisque varius morbi enim nunc\\n              faucibus a. Tortor consequat id porta nibh venenatis cras. Consectetur adipiscing elit\\n              ut aliquam purus sit.\\n            </p>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When body content overflows, ensure users can scroll that region **using\\n> only the keyboard**. Mouse users can drag scrollbars, but keyboard users need another path. In\\n> this example, **`tabIndex={0}`** is set on **`Modal.Body`** so the scrollable area can receive\\n> focus; once focused, **arrow keys** move the viewport within the overflowing content.\\n\\n### Full overlay scrolling\\n\\nIf content is large, scrolling the entire overlay container is an option. Use the\\n`Modal.OverflowOverlay` component instead of the `Modal.Overlay` component. The `Modal.Card`'s\\n`maxHeight` and `height` will need to be reset to `inherit` to prevent any internal overflow.\\n\\nThis has the effect of scrolling the heading, close button, and any action buttons. If this type of\\nscrolling behavior is not desired, try the [Body Content Overflow](#body-content-overflow) method.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const FullOverflow = () => {\\n  const handleAcknowledge = () => {\\n    console.log('License Acknowledged');\\n  };\\n\\n  const handleCancel = () => {\\n    console.log('Cancel clicked');\\n  };\\n\\n  return (\\n    <Modal>\\n      <Modal.Target as={PrimaryButton}>Open License</Modal.Target>\\n      <Modal.OverflowOverlay>\\n        <Modal.Card maxHeight=\\\"inherit\\\" height=\\\"inherit\\\">\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>MIT License</Modal.Heading>\\n          <Modal.Body tabIndex={0}>\\n            <p style={{marginTop: 0}}>\\n              Permission is hereby granted, free of charge, to any person obtaining a copy of this\\n              software and associated documentation files (the \\\"Software\\\"), to deal in the Software\\n              without restriction, including without limitation the rights to use, copy, modify,\\n              merge, publish, distribute, sublicense, and/or sell copies of the Software, and to\\n              permit persons to whom the Software is furnished to do so, subject to the following\\n              conditions:\\n            </p>\\n            <p>\\n              The above copyright notice and this permission notice shall be included in all copies\\n              or substantial portions of the Software.\\n            </p>\\n            <p>\\n              THE SOFTWARE IS PROVIDED \\\"AS IS\\\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\\n              INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\\n              PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\\n              HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF\\n              CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE\\n              OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\\n            </p>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\\n              incididunt ut labore et dolore magna aliqua. Amet massa vitae tortor condimentum\\n              lacinia quis. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Sed lectus\\n              vestibulum mattis ullamcorper velit sed. Rutrum tellus pellentesque eu tincidunt\\n              tortor aliquam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus.\\n              Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Id neque\\n              aliquam vestibulum morbi blandit cursus risus at. Vel eros donec ac odio tempor orci.\\n              Ac felis donec et odio pellentesque diam volutpat. Laoreet non curabitur gravida arcu\\n              ac tortor dignissim. Rhoncus urna neque viverra justo nec ultrices dui. Bibendum arcu\\n              vitae elementum curabitur vitae nunc sed velit dignissim. Sed risus pretium quam\\n              vulputate dignissim suspendisse in est. Curabitur gravida arcu ac tortor. Nam libero\\n              justo laoreet sit amet cursus sit amet. Arcu dui vivamus arcu felis bibendum ut\\n              tristique et egestas. Eros donec ac odio tempor orci dapibus ultrices. At erat\\n              pellentesque adipiscing commodo elit at. Dignissim cras tincidunt lobortis feugiat\\n              vivamus at augue.\\n            </p>\\n            <p>\\n              Amet commodo nulla facilisi nullam vehicula ipsum. Blandit libero volutpat sed cras.\\n              Quam lacus suspendisse faucibus interdum posuere. Aenean euismod elementum nisi quis\\n              eleifend. Orci nulla pellentesque dignissim enim sit amet venenatis. Diam vel quam\\n              elementum pulvinar etiam non quam lacus. Sit amet dictum sit amet justo donec enim\\n              diam vulputate. Tincidunt ornare massa eget egestas purus. Pulvinar neque laoreet\\n              suspendisse interdum consectetur libero id faucibus. Morbi tincidunt augue interdum\\n              velit. Nullam non nisi est sit amet.\\n            </p>\\n            <p style={{marginBottom: 0}}>\\n              Aliquet enim tortor at auctor urna nunc id cursus metus. Leo urna molestie at\\n              elementum eu facilisis. Consectetur purus ut faucibus pulvinar elementum integer.\\n              Volutpat est velit egestas dui id ornare arcu odio. At consectetur lorem donec massa\\n              sapien. Condimentum vitae sapien pellentesque habitant. Pellentesque habitant morbi\\n              tristique senectus. Et molestie ac feugiat sed lectus vestibulum. Arcu risus quis\\n              varius quam quisque. Turpis massa tincidunt dui ut ornare lectus sit amet. Magna eget\\n              est lorem ipsum dolor sit. Suspendisse faucibus interdum posuere lorem ipsum. Nisi\\n              vitae suscipit tellus mauris a diam maecenas sed. Ipsum dolor sit amet consectetur\\n              adipiscing. Ultricies integer quis auctor elit sed. Scelerisque varius morbi enim nunc\\n              faucibus a. Tortor consequat id porta nibh venenatis cras. Consectetur adipiscing elit\\n              ut aliquam purus sit.\\n            </p>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.OverflowOverlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n### Form Modal\\n\\nThe `Modal.Card` can be turned into a `form` element to make a form modal. The `model` should be\\nhoisted to allow for form validation and allow you to control when the modal closes.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal, useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {plusIcon} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst FAVORITE_COLOR_OPTIONS = ['Blue', 'Yellow'];\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const FormModal = () => {\\n  const model = useModalModel();\\n\\n  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {\\n    event.preventDefault(); // prevent a page reload\\n\\n    // do form validation here\\n\\n    console.log('form data', {\\n      first: (event.currentTarget.elements.namedItem('first') as HTMLInputElement).value,\\n      last: (event.currentTarget.elements.namedItem('last') as HTMLInputElement).value,\\n      favoriteColor: (event.currentTarget.elements.namedItem('favoriteColor') as HTMLInputElement)\\n        .value,\\n    });\\n\\n    // if it looks good, submit to the server and close the modal\\n    model.events.hide();\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Modal.Target icon={plusIcon}>Create New User</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card as=\\\"form\\\" onSubmit={onSubmit}>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>New User</Modal.Heading>\\n          <Modal.Body>\\n            <FormField>\\n              <FormField.Label>First Name</FormField.Label>\\n              <FormField.Input as={TextInput} name=\\\"first\\\" />\\n            </FormField>\\n            <FormField>\\n              <FormField.Label>Last Name</FormField.Label>\\n              <FormField.Input as={TextInput} name=\\\"last\\\" />\\n            </FormField>\\n            <FormField>\\n              <FormField.Label>Favorite Color</FormField.Label>\\n              <FormField.Field>\\n                <Select items={FAVORITE_COLOR_OPTIONS}>\\n                  <FormField.Input as={Select.Input} name=\\\"favoriteColor\\\" />\\n                  <Select.Popper>\\n                    <Select.Card>\\n                      <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n                    </Select.Card>\\n                  </Select.Popper>\\n                </Select>\\n              </FormField.Field>\\n            </FormField>\\n          </Modal.Body>\\n          <Flex cs={flexStyles}>\\n            <Modal.CloseButton>Cancel</Modal.CloseButton>\\n            <PrimaryButton type=\\\"submit\\\">Submit</PrimaryButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\n`Modal` uses the default modal model (`useModalModel`), which composes **`useInitialFocus`**,\\n**`useReturnFocus`**, **`useCloseOnOverlayClick`**, **`useCloseOnEscape`**, **`useFocusTrap`**,\\n**`useAssistiveHideSiblings`**, and **`useDisableBodyScroll`**.\\n\\n**`Modal.Card`** exposes **`role=\\\"dialog\\\"`** and **`aria-labelledby`** referencing the `id` on\\n**`Modal.Heading`**, so the dialog has an accessible name that matches the visible heading. If you\\ndo not use **`Modal.Heading`**, add an **`aria-label`** on **`Modal.Card`** instead.\\n\\n**`aria-modal`:** The card sets **`aria-modal=\\\"false\\\"`**. When **`aria-modal`** is `true`, some\\nassistive technologies hide everything outside the dialog\u2014including portaled UI owned by the dialog\\n(such as a Select menu rendered as a sibling of the modal). Canvas Kit keeps\\n**`aria-modal=\\\"false\\\"`** for a better VoiceOver experience while **`useAssistiveHideSiblings`**\\napplies **`aria-hidden`** to siblings of the modal stack so background content stays hidden from\\nassistive technology while the modal is open.\\n\\nUnlike [**Dialog**](/components/popups/dialog/), Modal does **not** add the sibling **`aria-owns`**\\npattern used to remap reading order for portaled non-modal dialogs. Focus moves into the modal when\\nit opens, and sibling hiding reduces exposure to content behind the overlay. For portals, reading\\norder, and related tradeoffs, see\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n[Modal Dialog Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\\n\\n- Prefer **`Modal.Heading`** so the dialog is properly labelled; avoid leaving a dialog without an\\n  accessible name.\\n- Ensure icon-only controls such as **`Modal.CloseIcon`** include an accessible name. Prefer the\\n  `Tooltip` component to provide a visible label, or a translated `aria-label` string is acceptable.\\n\\n### Navigation\\n\\n- **Enter** / **Space**: Open the modal (standard button behavior on the trigger). When it opens,\\n  focus moves to the **first focusable element** inside the modal in DOM order\u2014often the close\\n  control\u2014or to the element referenced by **`initialFocusRef`** on the model when set.\\n- **Tab** / **Shift + Tab**: Move through focusable elements inside the modal; focus **stays**\\n  within the modal (**focus trap**).\\n- **Escape**: Closes the modal and returns focus to **`Modal.Target`** (or the configured return\\n  target, such as **`returnFocusRef`**).\\n\\n### Screen Reader Experience\\n\\n- **When the modal opens:** Screen readers should announce the first focused control (often the\\n  close button), the dialog's name (**`Modal.Heading`**) and role.\\n- **Background content:** Sibling elements of the modal stack receive **`aria-hidden=\\\"true\\\"`** while\\n  the modal is visible, which hides the rest of the page from many assistive technologies. Mouse\\n  users are blocked by the overlay and inert interaction expectations; always verify behavior in\\n  your supported browser and screen reader combinations.\\n- **Focus trap limits:** Trapping **keyboard** focus does not stop mouse users from interacting\\n  outside the dialog card, and some screen reader users can move a virtual cursor outside the\\n  trapped region. Treat the trap as the primary keyboard affordance, not a hard security boundary.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"menu\": {\n      \"title\": \"Components/Popups/Menu\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs\",\n      \"mdxPath\": \"modules/react/menu/stories/Menu.mdx\",\n      \"mdxProse\": \"# Canvas Kit Menu\\n\\n`Menu` displays a list of options when triggered by an action or UI element like an icon or button.\\n\\n[> Workday Design Reference](https://design.workday.com/components/popups/menus)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Menu` is typically triggered by an action such as pressing a button. The `Menu` comes with a\\n`Target` subcomponent and a Popup.\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Basic = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu onSelect={data => setSelected(data.id)}>\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item>First Item</Menu.Item>\\n            <Menu.Item>Second Item</Menu.Item>\\n            <Menu.Divider />\\n            <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>\\n            <Menu.Item aria-disabled>Fourth Item</Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n`Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu\\nmodel which composes a list model and a popup model and sets up accessibility features for you.\\n\\n### Context Menu\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const ContextMenu = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu onSelect={data => setSelected(data.id)}>\\n      <Menu.TargetContext>Right-click to Open Menu</Menu.TargetContext>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item>First Item</Menu.Item>\\n            <Menu.Item>Second Item</Menu.Item>\\n            <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>\\n            <Menu.Item>Fourth Item</Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: This variation relies on the `contextmenu` browser event, which has\\n> varying levels of support across different operating systems. On Windows, this feature is better\\n> supported and users can typically trigger context menus using the **Shift + F10** keyboard\\n> shortcut or the dedicated **Context Menu** key (if available on their keyboard). However, on\\n> macOS, context menu support is limited and may require users to enable specific accessibility\\n> settings in their system preferences to function properly. Consider providing alternative access\\n> methods for critical functionality.\\n\\n### Icons\\n\\nMenu supports more complex children, including icons, but the text of the item will no longer be\\nknown. In this case, add a `data-text` attribute to inform the collection system what the text of\\nthe item is. The text is used for components that filter based on text. For example, a Select\\ncomponent will jump to an item based on the keys the user types. If the user types \\\"C\\\", the\\ncomponent will jump to the first item that starts with a \\\"C\\\". This functionality requires knowledge\\nabout the text of the item.\\n```tsx\\nimport React from 'react';\\nimport {\\n  setupIcon,\\n  uploadCloudIcon,\\n  userIcon,\\n  taskContactIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Icons = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu onSelect={data => setSelected(data.id)}>\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item data-text=\\\"First Item\\\">\\n              <Menu.Item.Icon icon={uploadCloudIcon} />\\n              <Menu.Item.Text>First Item</Menu.Item.Text>\\n            </Menu.Item>\\n            <Menu.Item data-text=\\\"Second Item (with a really really really long label)\\\">\\n              <Menu.Item.Icon icon={setupIcon} />\\n              <Menu.Item.Text>Second Item (with a really really really long label)</Menu.Item.Text>\\n            </Menu.Item>\\n            <Menu.Item aria-disabled data-text=\\\"Third Item\\\">\\n              <Menu.Item.Icon icon={uploadCloudIcon} />\\n              <Menu.Item.Text>Third Item</Menu.Item.Text>\\n              <Menu.Item.Icon icon={taskContactIcon} />\\n            </Menu.Item>\\n            <Menu.Item data-text=\\\"User\\\">\\n              <Menu.Item.Icon icon={userIcon} />\\n              <Menu.Item.Text>User</Menu.Item.Text>\\n            </Menu.Item>\\n            <Menu.Divider />\\n            <Menu.Item data-text=\\\"Fifth Item (with divider)\\\">\\n              <Menu.Item.Icon icon={taskContactIcon} />\\n              <Menu.Item.Text>Fifth Item (with divider)</Menu.Item.Text>\\n            </Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Icons in menu items do not inherently provide text alternatives to\\n> assistive technologies. However, in most cases, icons are used decoratively alongside text labels,\\n> and additional text alternatives are not necessary since the menu item text itself provides the\\n> accessible name.\\n\\n### Grouping\\n\\nGrouping adds hierarchy and categorization to menu items. Group headers do not represent menu items\\nand are not selectable with the keyboard or mouse.\\n\\n> **Note**: Grouping is not supported in virtual rendering. Menus by default have `shouldVirtualize`\\n> set to `false`. Setting to `true` results in unspecified behavior. We use `react-virtual` which\\n> doesn't support nested virtualization.\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Grouping = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <>\\n      <Menu onSelect={data => setSelected(data.id)}>\\n        <Menu.Target>Open Menu</Menu.Target>\\n        <Menu.Popper>\\n          <Menu.Card>\\n            <Menu.List>\\n              <Menu.Group title=\\\"First Group\\\">\\n                <Menu.Item>First Item</Menu.Item>\\n                <Menu.Item>Second Item</Menu.Item>\\n              </Menu.Group>\\n              <Menu.Group title=\\\"Second Group\\\">\\n                <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>\\n                <Menu.Item aria-disabled>Fourth Item</Menu.Item>\\n              </Menu.Group>\\n            </Menu.List>\\n          </Menu.Card>\\n        </Menu.Popper>\\n        <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n          Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n        </BodyText>\\n      </Menu>\\n    </>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Menu groups use `role=\\\"group\\\"` with appropriate labeling to provide\\n> semantic structure for assistive technologies. When navigating through grouped menu items, screen\\n> readers will announce the group label when users enter a new group, providing important context\\n> about the organization of the menu. Group headers are not part of the keyboard navigation\\n> sequence, allowing users to efficiently move between actionable menu items. This semantic grouping\\n> helps all users, including those using assistive technologies, understand the hierarchy and\\n> categorization of menu options.\\n\\n### Nested\\n\\nMenus support nesting. If you only have a few items and not very many nesting levels, the menu can\\nbe defined statically using JSX. A submenu is defined using the `<Menu.Submenu>` component. The\\n`Submenu` is implemented as a special `Menu` subcomponent. The API of the submenu is the same as the\\n`Menu` except the submenu's target is also a menu item. The component is named `TargetItem` to\\nindicate this dual role.\\n```tsx\\nimport React from 'react';\\nimport {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Nested = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu\\n      id=\\\"first-menu\\\"\\n      onSelect={data => {\\n        setSelected(data.id);\\n      }}\\n    >\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item data-id=\\\"first-item\\\">First Item</Menu.Item>\\n            <Menu.Submenu id=\\\"second-menu\\\">\\n              <Menu.Submenu.TargetItem data-id=\\\"second-item\\\">Second Item</Menu.Submenu.TargetItem>\\n              <Menu.Submenu.Popper>\\n                <Menu.Submenu.Card>\\n                  <Menu.Submenu.List>\\n                    <Menu.Submenu.Item data-id=\\\"first-sub-item\\\">First Sub Item</Menu.Submenu.Item>\\n                    <Menu.Submenu.Item data-id=\\\"second-sub-item\\\">First Sub Item</Menu.Submenu.Item>\\n                    <Menu.Submenu.Item data-id=\\\"third-sub-item\\\">Third Sub Item</Menu.Submenu.Item>\\n                    <Menu.Submenu.Item data-id=\\\"fourth-sub-item\\\">Fourth Sub Item</Menu.Submenu.Item>\\n                  </Menu.Submenu.List>\\n                </Menu.Submenu.Card>\\n              </Menu.Submenu.Popper>\\n            </Menu.Submenu>\\n            <Menu.Divider />\\n            <Menu.Item data-id=\\\"third-item\\\">\\n              Third Item (with a really, really, really long label)\\n            </Menu.Item>\\n            <Menu.Item aria-disabled data-id=\\\"fourth-item\\\">\\n              Fourth Item\\n            </Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When a menu item has an attached submenu, the `<Menu.Submenu.TargetItem>`\\n> includes `aria-haspopup=\\\"true\\\"` and `aria-expanded={true | false}` properties. These properties\\n> will alert screen reader users to the available submenu systems.\\n\\n### Nested Dynamic Items\\n\\nMenu nesting is simpler with the dynamic API. In this example, a `renderItem` function is defined to\\nallow recursive nesting of items using a data structure you define. A submenu will inherit the\\n`getId` and `getTextValue` functions of the parent menu. While you can pass a specialize `getId` or\\n`getTextValue` function to each submenu, it may be simpler to use the same one for the menu and\\nsubmenus.\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\ntype Item = {\\n  type?: 'item';\\n  id: string;\\n  label: string;\\n};\\ntype SubmenuItem = {\\n  id: string;\\n  label: string;\\n  type: 'submenu';\\n  children: (Item | SubmenuItem)[];\\n};\\n\\n// This is a user-defined object. The structure uses `id` for the item identifier which is the\\n// default key used by the collection system and therefore doesn't require a `getId` function to be\\n// passed to the model. The `label` isn't the standard text value used by the collection system, so\\n// a `getTextValue` function is required. The `type` and `children` aren't important at all to the\\n// menu and are used in the template by the user-defined `renderItem` function.\\nconst items: (SubmenuItem | Item)[] = [\\n  {id: 'first-item', label: 'First Item'},\\n  {\\n    id: 'second-item',\\n    label: 'Second Item',\\n    type: 'submenu',\\n    children: [\\n      {id: 'first-sub-item', label: 'First Sub Item'},\\n      {\\n        id: 'second-sub-item',\\n        label: 'Second Sub Item',\\n        type: 'submenu',\\n        children: [\\n          {id: 'first-sub-sub-item', label: 'First Sub Sub Item'},\\n          {\\n            id: 'second-sub-sub-item',\\n            type: 'submenu',\\n            label: 'Second Sub Sub Item',\\n            children: [\\n              {id: 'first-sub-sub-sub-item', label: 'First Sub Sub Sub Item'},\\n              {\\n                id: 'second-sub-sub-sub-item',\\n                label: 'Second Sub Sub Sub Item',\\n              },\\n              {id: 'third-sub-sub-sub-item', label: 'Third Sub Sub Sub Item'},\\n              {id: 'fourth-sub-sub-sub-item', label: 'Fourth Sub Sub Sub Item'},\\n            ],\\n          },\\n          {id: 'third-sub-sub-item', label: 'Third Sub Sub Item'},\\n          {id: 'fourth-sub-sub-item', label: 'Fourth Sub Sub Item'},\\n        ],\\n      },\\n      {id: 'third-sub-item', label: 'Third Sub Item'},\\n      {id: 'fourth-sub-item', label: 'Fourth Sub Item'},\\n    ],\\n  },\\n  {id: 'third-item', label: 'Third Item'},\\n  {id: 'fourth-item', label: 'Fourth Item'},\\n];\\n\\nexport const NestedDynamic = () => {\\n  const [selected, setSelected] = React.useState('');\\n\\n  // defining this inline function allows use to recurse any nesting level defined by the `items`\\n  // array.\\n  function renderItem(item: SubmenuItem | Item) {\\n    if (item.type === 'submenu') {\\n      return (\\n        <Menu.Submenu id={item.id} items={item.children}>\\n          <Menu.Submenu.TargetItem>{item.label}</Menu.Submenu.TargetItem>\\n          <Menu.Submenu.Popper>\\n            <Menu.Submenu.Card>\\n              <Menu.Submenu.List>{renderItem}</Menu.Submenu.List>\\n            </Menu.Submenu.Card>\\n          </Menu.Submenu.Popper>\\n        </Menu.Submenu>\\n      );\\n    }\\n    return <Menu.Item>{item.label}</Menu.Item>;\\n  }\\n\\n  return (\\n    <Menu\\n      items={items}\\n      id=\\\"first-menu\\\"\\n      getTextValue={item => item.label}\\n      onSelect={data => {\\n        setSelected(data.id);\\n      }}\\n    >\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>{renderItem}</Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" cs={{marginBlockStart: system.space.x4}}>\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nOur Menu component is based on the Menu Button pattern on the ARIA Authoring Practices Guide from\\nthe W3C and relies on the roving tabindex technique for managing focus within the opened menu. This\\nmeans that the minimum requirements for screen reader support and keyboard navigation are included\\nin the component.\\n\\n[Menu Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\\n\\n- The `<Menu.Target>` sub-component uses `aria-haspopup=\\\"true\\\"` and `aria-expanded={true | false}`\\n  properties. This benefits screen reader users by indicating when a button element has an attached\\n  menu.\\n- The `<Menu.List>` sub-component uses `role=\\\"menu\\\"` and `<Menu.Item>` uses `role=\\\"menuitem\\\"` ARIA\\n  roles. These roles allow screen readers to pass through arrow key events to the web application.\\n- The `<Menu.List>` sub-component includes an `aria-labelledby` ID reference to the `<Menu.Target>`\\n  sub-component. This assigns a label to the menu for context.\\n\\n### Navigation\\n\\n- **Enter or Space**: When focused on the menu button, opens the menu and moves focus to the first\\n  menu item. When focused on a menu item, activates the item and closes the menu\\n- **Escape**: Closes the menu and returns focus to the menu button\\n- **Up & Down Arrow**: Moves focus up and down the menu items\\n- **Home & End**: Moves focus to the first or last menu item\\n- **Right & Left Arrow**: When focused on a menu item with a submenu, opens the submenu and moves\\n  focus to the first item in the submenu or closes the submenu and returns focus to the parent menu\\n  item\\n\\n### Screen Reader Experience\\n\\n- The menu button will be announced with its label text followed by the button role, a notification\\n  that it has a popup menu, and the current state of the menu (For example: \\\"Actions, button, menu\\n  popup, collapsed\\\")\\n- **Opening the Menu:** When the menu button is activated, screen readers will announce the menu\\n  opening, the number of menu items available, and the currently focused item (For example:\\n  \\\"Actions, menu, First Action, menu item, 1 of 4.\\\")\\n- **Navigating Menu Items:** As focus moves between menu items, screen readers will announce the\\n  item name and its position in the list (For example: \\\"Second Action, menu item, 2 of 4.\\\")\\n- **Menu Items with Submenus:** When focused on a menu item that has a submenu, screen readers will\\n  announce that it has a submenu and provide the expanded/collapsed state (For example: \\\"More\\n  Actions, menu item, has submenu, collapsed, 3 of 4.\\\")\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"loading-dots\": {\n      \"title\": \"Components/Indicators/Loading Dots\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-loading-dots--docs\",\n      \"mdxPath\": \"modules/react/loading-dots/stories/LoadingDots.mdx\",\n      \"mdxProse\": \"# Canvas Kit Loading Dots\\n\\nLoading Dots make users aware that content is currently being loaded, processing, or that change\\nwill occur on the page.\\n\\n[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/loading-dots/)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUse Loading Dots to identify when a specific area of the page is loading (i.e. the content within a card).\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\n\\nexport const Basic = () => {\\n  return <LoadingDots />;\\n};\\n```\\n\\n### Inverse Variant\\n\\nUse the `variant=\\\"inverse\\\"` prop when the loading dots are on a dark background or image.\\n```tsx\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Graphic} from '@workday/canvas-kit-react/icon';\\n\\nconst loadingStencil = createStencil({\\n  base: {\\n    background: system.color.bg.overlay,\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    display: 'flex',\\n    position: 'absolute',\\n    top: '50%',\\n    left: '50%',\\n    transform: 'translate(-50%, -50%)',\\n    width: '100%',\\n    height: '100%',\\n  },\\n});\\n\\nconst containerStyles = createStyles({\\n  position: 'relative',\\n  width: px2rem(200),\\n  height: px2rem(200),\\n});\\n\\nexport const Inverse = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <LoadingDots variant=\\\"inverse\\\" cs={loadingStencil()} />\\n      <Graphic\\n        alt=\\\"A magnifying glass\\\"\\n        width={200}\\n        src={{\\n          url: 'https://picsum.photos/200',\\n        }}\\n        srcset=\\\"https://picsum.photos/200 200w, https://picsum.photos/200 200w, https://picsum.photos/800 800w, https://picsum.photos/1200 1200w\\\"\\n      />\\n    </div>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <LoadingDots />\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Custom Shape\\n```tsx\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles, createStencil} from '@workday/canvas-kit-styling';\\n\\nconst styleOverrides = {\\n  parentContainer: createStyles({\\n    display: 'flex',\\n    gap: system.space.x4,\\n  }),\\n};\\n\\nconst loadingStencil = createStencil({\\n  base: {\\n    borderRadius: system.shape.round,\\n    backgroundColor: system.color.bg.contrast.strong,\\n    height: 80,\\n    width: 80,\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    display: 'flex',\\n  },\\n});\\n\\nexport const CustomShape = () => {\\n  return (\\n    <div className={styleOverrides.parentContainer}>\\n      <LoadingDots variant=\\\"inverse\\\" cs={loadingStencil()} />\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Color and Animation\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst styleOverrides = {\\n  parentContainer: createStyles({\\n    display: 'flex',\\n    gap: system.space.x4,\\n  }),\\n};\\n\\nexport const CustomColorAndAnimation = () => {\\n  return (\\n    <div className={styleOverrides.parentContainer}>\\n      <LoadingDots loadingDotColor={system.color.fg.primary.default} animationDurationMs=\\\"60ms\\\" />\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nLoading Dots supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\nCustom styling is also supported through the [Loading Dots documented props below](#props).\\n\\n### Accessibility\\n\\nSometimes, letting users know when content has finished loading is just as important as asking users\\nto \\\"please wait\\\" while content is loading. The disappearance of an animation is information that\\nmight need description. In this example, we are using `AriaLiveRegion` and `AccessibleHide`\\ncomponents included in Canvas to describe both the appearance and disappearance of `LoadingDots`.\\n\\n- When idle, render an empty live region\\n- When loading, render `LoadingDots` inside the live region,\\n- When complete, render `AccessibleHide` inside the live region expressing \\\"Complete!\\\"\\n- We can assign a name to `AriaLiveRegion` component by passing in `aria-label=\\\"Loading\\\"`\\n- We can declare `LoadingDots` a labeled graphic by passing `role=\\\"img\\\"` and\\n  `aria-label=\\\"Please wait...\\\"` into the component\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';\\n\\nconst styleOverrides = {\\n  parentContainer: createStyles({\\n    gap: system.space.x4,\\n  }),\\n  loadingStyles: createStyles({\\n    backgroundColor: system.color.bg.muted.default,\\n    padding: system.space.x3,\\n  }),\\n};\\n\\nexport const Accessible = () => {\\n  const [loadingState, setLoadingState] = React.useState('idle');\\n\\n  React.useEffect(() => {\\n    const timer = setTimeout(() => {\\n      if (loadingState === 'loading') {\\n        setLoadingState('success');\\n      }\\n    }, 4000);\\n\\n    return () => {\\n      clearTimeout(timer);\\n    };\\n  }, [loadingState]);\\n\\n  const handleLoad = () => {\\n    setLoadingState('loading');\\n  };\\n\\n  return (\\n    <Flex cs={styleOverrides.parentContainer}>\\n      <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>\\n      <AriaLiveRegion aria-label=\\\"Loading\\\">\\n        {loadingState === 'loading' && (\\n          <LoadingDots\\n            cs={styleOverrides.loadingStyles}\\n            role=\\\"img\\\"\\n            variant=\\\"inverse\\\"\\n            aria-label=\\\"Please wait...\\\"\\n          />\\n        )}\\n        {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}\\n      </AriaLiveRegion>\\n    </Flex>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"grid\": {\n      \"title\": \"Components/Layout/Grid\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs\",\n      \"mdxPath\": \"modules/react/layout/stories/Grid.mdx\",\n      \"mdxProse\": \"# Canvas Kit Grid\\n\\n`Grid` is a low-level layout component that provides a common, ergonomic API for building\\ntwo-dimensional layouts (rows and columns) with\\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).\\n\\nPlease refer to our [layout examples](/examples-layouts--docs) for more examples of how to implement\\ndifferent layouts using `Grid`.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n> **Note**: We recommend you familiarize yourself with CSS Grid\\n> ([MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids),\\n> [CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)) before diving into our\\n> `Grid` component. This example makes use of\\n> [Grid Areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).\\n\\nIn this example, we set up a basic layout built with `Grid` using four child components: `Header`,\\n`SideBar`, `BodyContent` and `Footer`. By assigning the same names to each child's `gridArea` prop,\\nwe're able to arrange them by referencing their names in the parent `Grid` container. Our example\\nuses a 12-column grid with `SideBar` occupying three columns and `BodyContent` occupying the\\nremaining nine.\\n\\n### Using Grid Items\\n\\nIn the example above we nested `Grid` components to create our layout, and we controlled the layout\\nstructure from the top-level `Grid` container. We can also use `Grid.Item` components to allow child\\ncells to have more control. While any direct child of a `Grid` component is implicitly a grid item,\\n`Grid.Item` provides special CSS Grid Item style props that allow you to have more control over how\\nand where each item renders.\\n\\nTo demonstrate this behavior, the example below has a `Grid` container with nine cells. The eight\\n`soap500` cells are `Grid` components, and the `peach300` cell is a `Grid.Item`. We can use the\\n`Grid.Item` style props `gridRowStart` and `gridColumnStart` to manipulate where the cell renders.\\nUse the `Row` and `Column` buttons to manipulate these props and see the `Grid.Item`'s position\\nadjust accordingly.\\n\\n> **Note**: This example is solely intended to demonstrate `Grid.Item`'s functionality and is\\n> **not** considered an accessibility best practice. Visually reordering content does not change the\\n> tab order or the order it is read in by a screen reader. Learn more about\\n> [CSS Grid layout and accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility).\\n\\nLet's look at another `Grid.Item` example. Below, we have a `Grid` container with two rows: one with\\nseven elements and another with two elements. Each row is a `Grid.Item` that wraps a nested `Grid`.\\nThis allows you to use `Grid.Item` to place a layout where needed. Here, we use `gridRowStart` to\\nplace the row with elements 3 through 7 before the row with elements 1 and 2.\\n\\n### Grid vs. Flex vs. Box\\n\\n`Grid` and `Flex` are built on top of `Box`, so they have access to all `BoxProps`. Additionally,\\n`Grid` and `Flex` have their own specific style props that map to CSS Grid and Flexbox properties,\\nrespectively. When using these components to build layouts, it is not a matter of choosing `Grid`\\n_or_ `Flex` _or_ `Box`, but rather deciding how to\\n[use them together](https://css-tricks.com/css-grid-replace-flexbox/). They are intended to be\\ncomplementary not exclusionary. With that said, here are general guidelines for when to use which:\\n\\n- Use `Grid` for **two-dimensional** layouts (rows AND columns).\\n- Use `Flex` for **one-dimensional** layouts (a row OR a column).\\n- Use `Box` for generic containers that don't need CSS Flexbox or Grid.\\n\\n## Component API\\n\\n### Grid\\n\\n`Grid` is a container component for creating two-dimensional layouts with CSS Grid. It has special\\nstyle props that map to CSS Grid style properties to provide a common, ergonomic API for building\\nlayouts.\\n\\n```tsx\\n<Grid gridTemplateColumns=\\\"1fr 2fr 1fr\\\" gridGap={space.s}>\\n  <div>Implicit grid item 1</div>\\n  <div>Implicit grid item 2</div>\\n  <div>Implicit grid item 3</div>\\n</Grid>\\n```\\n\\n#### Props\\n\\n`Grid` exposes\\n[grid container style props](/get-started/for-developers/documentation/style-props/#grid) and `Box`\\nstyle props.\\n\\n### Grid.Item\\n\\n`Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes\\n[grid item style props](/get-started/for-developers/documentation/style-props/#grid) that map to CSS\\nGrid Item properties. This provides greater control over how child components render in your layout.\\n\\n```tsx\\n<Grid gridGap={space.s}>\\n  <Grid.Item gridColumn=\\\"1 / span 2\\\">First item</Grid.Item>\\n  <Grid.Item gridRow=\\\"1 / span 2\\\">Second item</Grid.Item>\\n  <Grid.Item gridColumn=\\\"1 / span 2\\\" gridRow=\\\"2\\\">\\n    Third item\\n  </Grid.Item>\\n</Grid>\\n```\\n\\n#### Props\\n\\n`Grid.Item` exposes [grid item style props](/docs/features-style-props--grid-item-example) and `Box`\\nstyle props.\\n\"\n    },\n    \"flex\": {\n      \"title\": \"Components/Layout/Flex\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-layout-flex--docs\",\n      \"mdxPath\": \"modules/react/layout/stories/Flex.mdx\",\n      \"mdxProse\": \"# Canvas Kit Flex\\n\\n`Flex` is a low-level layout component that provides a common, ergonomic API for building\\none-dimensional layouts with\\n[CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n### Flex vs. Box\\n\\n`Flex` is built with `Box` and has access to all `BoxProps`. The main differences between `Box` and\\n`Flex` are:\\n\\n- `Flex` is set to `display: flex` by default\\n- The `display` prop is limited to `flex` and `inline-flex`\\n- `Flex` has access to flex container style props.\\n\\nIn short, use `Flex` when you need a flex container to build one-directional layouts with CSS\\nFlexbox, and use `Box` when you need a simple container. It's also important to note that `Flex` has\\nno real opinion about how to build layouts outside of the CSS Flexbox spec. This allows it to be\\ncomposed into many different components.\\n\\n## Component API\\n\\n### Flex\\n\\n`Flex` is the container component for creating one-dimensional layouts with CSS Flexbox. It has\\nspecial style props that map to CSS Flexbox style properties to provide a common, ergonomic API for\\nbuilding layouts.\\n\\n```tsx\\n<Flex flexDirection=\\\"column\\\" rowGap=\\\"xs\\\">\\n  <div>Implicit flex item 1</div>\\n  <div>Implicit flex item 2</div>\\n  <div>Implicit flex item 3</div>\\n</Flex>\\n```\\n\\n#### Props\\n\\n`Flex` exposes\\n[flex container style props](/get-started/for-developers/documentation/style-props/#flex) and `Box`\\nstyle props.\\n\\n### Flex.Item\\n\\n`Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes\\n[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) that map\\nto CSS Flexbox Item properties. This provides greater control over how child components render in\\nyour layout.\\n\\n```tsx\\n<Flex flexDirection=\\\"column\\\" rowGap=\\\"xs\\\">\\n  <Flex.Item flex={1}>First Item</Flex.Item>\\n  <Flex.Item flex={2}>Second Item</Flex.Item>\\n  <Flex.Item flex={1}>Third Item</Flex.Item>\\n</Flex>\\n```\\n\\n#### Props\\n\\n`Flex.Item` exposes\\n[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) and `Box`\\nstyle props.\\n\"\n    },\n    \"box\": {\n      \"title\": \"Components/Layout/Box\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-layout-box--docs\",\n      \"mdxPath\": \"modules/react/layout/stories/Box.mdx\",\n      \"mdxProse\": \"# Box\\n\\n`Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens. It\\nis highly flexible, and its primary purpose is to build other components.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n## Props\\n\\n### The `As` Prop\\n\\nThe `as` prop allows you to override the underlying element of a component or combine it with\\nanother component. By default, `Box` will render a `div` element, but sometimes that's not what you\\nwant. Below, we have a `Box` that we want to render as a semantic anchor element. The most\\nnoticeable transformation is that `Box` renders as a link. But also notice that while it still\\nsupports all `BoxProps` such as `padding`, it also supports semantic anchor element props such as\\n`href`.\\n\\n### Style Props\\n\\n`Box` exposes [style props](/get-started/for-developers/documentation/style-props/) that allow you\\nto modify styles in an ergonomic way across components. To learn more about individual sets of `Box`\\nstyle props, consult the lists below.\\n\\n- [Background Style Props](/get-started/for-developers/documentation/style-props/#background)\\n- [Border Style Props](/get-started/for-developers/documentation/style-props/#border)\\n- [Color Style Props](/get-started/for-developers/documentation/style-props/#color)\\n- [Depth Style Props](/get-started/for-developers/documentation/style-props/#depth)\\n- [Flex Item Style Props](/get-started/for-developers/documentation/style-props/#flex-item)\\n- [Grid Item Style Props](/get-started/for-developers/documentation/style-props/#grid-item)\\n- [Layout Style Props](/get-started/for-developers/documentation/style-props/#layout)\\n- [Other Style Props](/get-started/for-developers/documentation/style-props/#other)\\n- [Position Style Props](/get-started/for-developers/documentation/style-props/#position)\\n- [Space Style Props](/get-started/for-developers/documentation/style-props/#space)\\n- [Text Style Props](/get-started/for-developers/documentation/style-props/#text)\\n\"\n    },\n    \"form-field\": {\n      \"title\": \"Components/Inputs/Form Field\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs\",\n      \"mdxPath\": \"modules/react/form-field/stories/FormField.mdx\",\n      \"mdxProse\": \"# Canvas Kit Form Field\\n\\nFormField allows users to wrap input components to make them accessible. You can customize the field\\nby passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic\\n\\nForm Field should be used in tandem with most Canvas Kit input components to ensure they meet\\naccessibility standards. The orientation of the label by default is `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField>\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the Form Field or define it in the model to indicate it has an error.\\n`error` accepts the following values:\\n\\n`\\\"error\\\" | \\\"caution\\\" | undefined`\\n\\n### Caution\\n\\nUse the caution state when a value is valid but there is additional information.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState('hi');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField error=\\\"caution\\\">\\n        <FormField.Label>Create Password</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} type=\\\"password\\\" value={value} onChange={handleChange} />\\n          <FormField.Hint>\\n            Alert: Password strength is weak, using more characters is recommended.\\n          </FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Caution state **will not** include the `aria-invalid` attribute on the\\n> input for screen readers. Use error states when values are not valid.\\n\\n### Error\\n\\nUse the error state when the value is no longer valid.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField error=\\\"error\\\">\\n        <FormField.Label>Password</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} type=\\\"password\\\" value={value} onChange={handleChange} />\\n          <FormField.Hint>Error: Must Contain a number and a capital letter</FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Error states include visual color changes to the input border and\\n> **require** supplemental \\\"error\\\" text for colorblind users to distinguish between fields in an\\n> error state from fields with standard hint text. Read more about\\n> [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81)\\n\\n### Hint\\n\\nUse `FormField.Hint` to display a short message below the input component and `FormField.Field` to\\nensure proper alignment.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Hint = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n          <FormField.Hint>Cannot contain numbers</FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Hints are automatically associated to the input field with the\\n> `aria-describedby` attribute. This ensures that screen readers can automatically announce the hint\\n> text to users when the input field is focused.\\n\\n### Disabled\\n\\nSet the `disabled` prop of `FormField.Input` to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Disabled form elements are exempt from\\n> [WCAG minimum contrast guidelines](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).\\n> Despite this exemption, disabled fields are more difficult for low vision and colorblind users to\\n> perceive and may harm the usability of the form. Consider using text elements instead, or\\n> read-only fields if users cannot modify data.\\n\\n### Label Position\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`. If you want your label to be\\nhorizontal, you have two options: `horizontalStart` and `horizontalEnd`.\\n\\nIf you want the position of the label at the start of the container, set orientation prop to\\n`horizontalStart`.\\n```tsx\\nimport React from 'react';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst formStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  flexDirection: 'column',\\n});\\n\\nexport const LabelPositionHorizontalStart = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <form className={formStyles}>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n      </FormField>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Password</FormField.Label>\\n        <FormField.Input as={TextInput} type=\\\"password\\\" />\\n      </FormField>\\n    </form>\\n  );\\n};\\n```\\n\\nIf you want the position of the label at the end of the container, set orientation prop to\\n`horizontalEnd`.\\n```tsx\\nimport React from 'react';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst formStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  flexDirection: 'column',\\n});\\n\\nexport const LabelPositionHorizontalEnd = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <form className={formStyles}>\\n      <FormField orientation=\\\"horizontalEnd\\\">\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n      </FormField>\\n      <FormField orientation=\\\"horizontalEnd\\\">\\n        <FormField.Label>Password</FormField.Label>\\n        <FormField.Input as={TextInput} type=\\\"password\\\" />\\n      </FormField>\\n    </form>\\n  );\\n};\\n```\\n\\n### Grow\\n\\nSet the `grow` prop of the Form Field to `true` to configure it (including the wrapped input\\ncomponent) to expand to the width of its container.\\n\\n**Note: This Prop is deprecated and will be removed in a future major version.**\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField grow>\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nIf you need full customization you can use the `FormField` behavior hooks to build your own\\nsolution. It is also easy it work with custom components or third party libraries and get the CKR\\naccessibility guarantees by using the `as` prop.\\n```tsx\\nimport React from 'react';\\nimport {changeFocus} from '@workday/canvas-kit-react/common';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x1,\\n  alignItems: 'flex-start',\\n  flexDirection: 'column',\\n});\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    changeFocus(ref.current);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />\\n        </FormField.Field>\\n      </FormField>\\n      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `isRequired` prop of the Form Field to `true` to indicate that the field is required. Labels\\nfor required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextInput}\\n          placeholder=\\\"your@gmail.com\\\"\\n          onChange={handleChange}\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: The HTML `required` attribute will be added to the input field and\\n> announced by screen readers. Consider adding a note at the top of your form indicating that fields\\n> marked with an asterisk (\\\\*) are required. This provides context for all users.\\n\\n### Grouped Inputs\\n\\nUse `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like\\n`RadioGroup` or a group of `Checkbox`'s. `FormFieldGroup` renders a `fieldset` element and\\n`FormFieldGroup.Label` renders a `legend` element. These elements will allow screen readers to\\nautomatically announce the legend's context when focusing on the inputs in the group.\\n\\n`FormFieldGroup` supports the same props of `FormField`:\\n\\n- `error`: `\\\"caution\\\" | \\\"error\\\"` Defines the error around the whole group of inputs.\\n- `orientation`: `\\\"horizontal\\\" | \\\"vertical\\\"` Defines the legend placement.\\n- `isRequired`: `true` Defines if a group like RadioGroup is required.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {AriaLiveRegion} from '@workday/canvas-kit-react/common';\\n\\nconst formStyles = createStyles({\\n  margin: `${system.space.zero} ${system.space.x3}`,\\n});\\n\\nconst formButtonStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n});\\n\\nconst toppings = [\\n  {\\n    id: 1,\\n    label: 'Pepperoni',\\n    checked: false,\\n  },\\n  {\\n    id: 2,\\n    label: 'Cheese',\\n    checked: false,\\n  },\\n  {\\n    id: 3,\\n    label: 'Pineapple',\\n    checked: false,\\n  },\\n  {\\n    id: 4,\\n    label: 'Mushrooms',\\n    checked: false,\\n  },\\n];\\n\\nconst bannerStyles = createStyles({\\n  position: 'absolute',\\n  right: 0,\\n});\\n\\nexport const GroupedInputs = () => {\\n  const [toppingsState, setToppingsState] = React.useState(toppings);\\n  const [error, setError] = React.useState(undefined);\\n  const [radioError, setRadioError] = React.useState(undefined);\\n  const [showSuccess, setShowSuccess] = React.useState(false);\\n\\n  const [value, setValue] = React.useState<string>('');\\n  const [formData, setFormData] = React.useState({\\n    toppings: [],\\n    crust: '',\\n  });\\n  const handleCheckboxCheck = id => {\\n    if (error) {\\n      setError(undefined);\\n    }\\n    setToppingsState(\\n      toppingsState.map(item => (item.id === id ? {...item, checked: !item.checked} : item))\\n    );\\n  };\\n\\n  const handleRadioChange = (e: React.ChangeEvent) => {\\n    if (radioError) {\\n      setRadioError(undefined);\\n    }\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  const handleSubmit = e => {\\n    e.preventDefault();\\n    const radioError = !value && toppingsState.some(item => !item.checked) ? 'error' : undefined;\\n    const error = toppingsState.every(item => !item.checked) ? 'error' : undefined;\\n\\n    setRadioError(radioError);\\n    setError(error);\\n    if (!error && !radioError && toppingsState.some(item => item.checked) && value) {\\n      setShowSuccess(true);\\n    }\\n    setFormData({\\n      toppings: toppingsState,\\n      crust: value,\\n    });\\n  };\\n\\n  React.useEffect(() => {\\n    const timeout = setTimeout(() => {\\n      if (showSuccess) {\\n        setShowSuccess(false);\\n      }\\n    }, 3000);\\n\\n    return () => clearTimeout(timeout);\\n  }, [showSuccess]);\\n\\n  const handleReset = () => {\\n    setFormData({toppings: [], crust: ''});\\n    setError(undefined);\\n    setValue('');\\n    setRadioError('');\\n    setShowSuccess(false);\\n    setToppingsState(\\n      toppingsState.map(item => {\\n        return {...item, checked: false};\\n      })\\n    );\\n  };\\n\\n  return (\\n    <div>\\n      <h3>Choose your pizza options</h3>\\n      <AriaLiveRegion role=\\\"alert\\\">\\n        <div style={{display: 'flex', gap: '40px'}}>\\n          {error || radioError ? (\\n            <Banner isSticky hasError className={bannerStyles}>\\n              <Banner.Label>\\n                {error && radioError\\n                  ? 'At least one topping and crust selection is required'\\n                  : error\\n                  ? 'You must choose at least one topping'\\n                  : radioError\\n                  ? 'You must choose a crust'\\n                  : ''}\\n              </Banner.Label>\\n            </Banner>\\n          ) : null}\\n          {showSuccess && (\\n            <Banner isSticky className={bannerStyles}>\\n              <Banner.Label>You've successfully submitted your pizza options.</Banner.Label>\\n            </Banner>\\n          )}\\n        </div>\\n      </AriaLiveRegion>\\n\\n      <form className={formStyles} onSubmit={handleSubmit}>\\n        <FormFieldGroup error={error} isRequired>\\n          <FormFieldGroup.Label>Choose Your Toppings</FormFieldGroup.Label>\\n          <FormFieldGroup.List>\\n            {toppingsState.map(item => {\\n              return (\\n                <FormFieldGroup.Input\\n                  key={item.id}\\n                  onChange={() => handleCheckboxCheck(item.id)}\\n                  checked={item.checked}\\n                  value={item.label}\\n                  as={Checkbox}\\n                  disabled={item.label === 'Pineapple' ? true : undefined}\\n                  label={item.label}\\n                />\\n              );\\n            })}\\n          </FormFieldGroup.List>\\n          <FormFieldGroup.Hint>\\n            {error === 'error' && 'Error: You must choose one topping'}\\n          </FormFieldGroup.Hint>\\n        </FormFieldGroup>\\n        <FormFieldGroup error={radioError} isRequired>\\n          <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>\\n          <FormFieldGroup.Field>\\n            <FormFieldGroup.List\\n              as={RadioGroup}\\n              onChange={handleRadioChange}\\n              value={value}\\n              name=\\\"crust\\\"\\n            >\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin-crust\\\">\\n                Thin Crust\\n              </FormFieldGroup.Input>\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"hand-tossed\\\">\\n                Hand Tossed\\n              </FormFieldGroup.Input>\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n                Deep Dish\\n              </FormFieldGroup.Input>\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n                Cauliflower\\n              </FormFieldGroup.Input>\\n            </FormFieldGroup.List>\\n            <FormFieldGroup.Hint>\\n              {radioError === 'error' ? 'Error: You must choose a crust' : null}\\n            </FormFieldGroup.Hint>\\n          </FormFieldGroup.Field>\\n        </FormFieldGroup>\\n        <div className={formButtonStyles}>\\n          <PrimaryButton type=\\\"submit\\\">Submit Your Choices</PrimaryButton>\\n          <SecondaryButton onClick={() => handleReset()}>Reset Form</SecondaryButton>\\n        </div>\\n      </form>\\n      <div>\\n        <div>\\n          Selected Toppings:{' '}\\n          {!error && formData.toppings.map(item => (item.checked ? `${item.label} ` : null))}\\n        </div>\\n        <div>Selected Crust: {formData.crust}</div>\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In addition to radio button and checkbox groups, `FormFieldGroup` can be\\n> useful in any situation where the form needs to have multiple sets of identical input fields. For\\n> example, a form with identical fields for a Shipping address and a Billing address. The legend\\n> provides critical context for screen reader users in these situations.\\n\\n### Custom\\n\\nIf you need full customization you can use the `FormField` behavior hooks to build your own\\nsolution. It is also easy it work with custom components or third party libraries and get the CKR\\naccessibility guarantees by using the `as` prop.\\n```tsx\\nimport React from 'react';\\nimport {\\n  useFormFieldHint,\\n  useFormFieldInput,\\n  useFormFieldLabel,\\n  useFormFieldModel,\\n  formFieldStencil,\\n} from '@workday/canvas-kit-react/form-field';\\nimport {useModelContext} from '@workday/canvas-kit-react/common';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst Label = ({model, children}) => {\\n  const localModel = useModelContext(useFormFieldModel.Context, model);\\n  const props = useFormFieldLabel(localModel);\\n\\n  return (\\n    <label {...props}>\\n      {children}\\n      {model.state.isRequired ? '*' : ''}\\n    </label>\\n  );\\n};\\n\\nconst Hint = ({model, children}) => {\\n  const localModel = useModelContext(useFormFieldModel.Context, model);\\n  const props = useFormFieldHint(localModel);\\n\\n  return <span {...props}>{children}</span>;\\n};\\n\\nconst Input = ({model, ...elementProps}) => {\\n  const localModel = useModelContext(useFormFieldModel.Context, model);\\n  const props = useFormFieldInput(localModel, elementProps);\\n\\n  return <input type=\\\"text\\\" required={model.state.isRequired ? true : false} {...props} />;\\n};\\n\\nexport const Custom = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const model = useFormFieldModel({isRequired: true});\\n\\n  return (\\n    <Flex cs={formFieldStencil({orientation: 'horizontalStart'})}>\\n      <Label model={model}>My Custom Field</Label>\\n      <Input model={model} value={value} onChange={handleChange} />\\n      <Hint model={model}>You can be anything</Hint>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Custom id\\n\\nForm Field will automatically generate an HTML `id` for its input element to link it to the\\ncorreponding label. Alternatively, you may set the `id` prop of the Form Field to specify a custom\\n`id` for the input element. The `id` will be appended by `input-${your-unique-id}`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const CustomId = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField id=\\\"first-name\\\">\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### All Fields\\n\\nForm Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,\\n`TextArea`, `Switch`, and `RadioGroup`.\\n```tsx\\nimport React from 'react';\\nimport {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\nimport {calc, createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n  gap: calc.subtract(system.space.x6, system.space.x1),\\n  padding: calc.subtract(system.space.x10, system.space.x1),\\n  borderRadius: system.space.x1,\\n});\\n\\nexport const AllFields = () => {\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField grow>\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} />\\n        </FormField.Field>\\n      </FormField>\\n\\n      <FormField isRequired={true} error=\\\"caution\\\" grow>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} />\\n          <FormField.Hint>Hint text for your input</FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n      <FormField grow>\\n        <FormField.Label>Text Area Label</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextArea} />\\n        </FormField.Field>\\n      </FormField>\\n      <FormField error=\\\"error\\\" grow>\\n        <FormField.Label>Choose a Crust</FormField.Label>\\n        <Select items={['Pizza', 'Cheeseburger', 'Fries']}>\\n          <FormField.Input as={Select.Input} />\\n          <Select.Popper>\\n            <Select.Card>\\n              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n            </Select.Card>\\n          </Select.Popper>\\n        </Select>\\n      </FormField>\\n      <FormField as=\\\"fieldset\\\" isRequired={true} error={'error'} orientation=\\\"horizontalStart\\\" grow>\\n        <FormField.Label as=\\\"legend\\\">Radio Group Legend</FormField.Label>\\n        <FormField.Container>\\n          <FormField.Input as={RadioGroup}>\\n            <RadioGroup.RadioButton value=\\\"deep-dish\\\">Deep dish</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"thin\\\">Thin</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"gluten-free\\\">Gluten free</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"cauliflower\\\">Cauliflower</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"butter\\\">\\n              Butter - the best thing to put on bread\\n            </RadioGroup.RadioButton>\\n          </FormField.Input>\\n          <FormField.Hint>Error Message</FormField.Hint>\\n        </FormField.Container>\\n      </FormField>\\n      <FormField as=\\\"fieldset\\\" grow>\\n        <FormField.Label as=\\\"legend\\\">Checkbox Legend</FormField.Label>\\n        <FormField.Input checked={true} as={Checkbox} label=\\\"Checkbox Label\\\" />\\n        <FormField.Input checked={false} as={Checkbox} label=\\\"Thin Crust\\\" />\\n        <FormField.Input checked={false} as={Checkbox} label=\\\"Extra Cheese\\\" />\\n      </FormField>\\n      <FormFieldGroup error=\\\"error\\\" orientation=\\\"horizontalStart\\\" grow>\\n        <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.Field>\\n          <FormFieldGroup.List as={RadioGroup}>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin-crust\\\">\\n              Thin Crust\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"hand-tossed\\\">\\n              Hand Tossed\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n              Deep Dish\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n              Cauliflower\\n            </FormFieldGroup.Input>\\n          </FormFieldGroup.List>\\n        </FormFieldGroup.Field>\\n      </FormFieldGroup>\\n      <FormFieldGroup grow>\\n        <FormFieldGroup.Label>Checkbox Legend</FormFieldGroup.Label>\\n        <FormField.Field>\\n          <FormFieldGroup.List>\\n            <FormFieldGroup.Input checked={true} as={Checkbox} label=\\\"Checkbox Label\\\" />\\n            <FormFieldGroup.Input checked={false} as={Checkbox} label=\\\"Thin Crust\\\" />\\n            <FormFieldGroup.Input checked={false} as={Checkbox} label=\\\"Extra Cheese\\\" />\\n          </FormFieldGroup.List>\\n        </FormField.Field>\\n      </FormFieldGroup>\\n\\n      <FormField orientation=\\\"horizontalStart\\\" grow>\\n        <FormField.Label>Switch Label</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={Switch} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Hidden Label\\n\\nIn cases where you want to hide the label while still meeting accessibility standards, you can add\\n`isHidden` on the `<FormField.Label/>`. This prop will visually hide the label.\\n```tsx\\nimport React from 'react';\\nimport {\\n  FormField,\\n  useFormFieldModel,\\n  useFormFieldInput,\\n} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput, InputGroup} from '@workday/canvas-kit-react/text-input';\\nimport {SystemIcon} from '@workday/canvas-kit-react/icon';\\nimport {searchIcon} from '@workday/canvas-system-icons-web';\\n\\n/**\\n * Using `as={InputGroup}` on `FormField.Input` will break the label associations necessary for accessibility.\\n * In this example, we've rendered `FormField.Field` as `InputGroup` and then hoisted the `id` of the input from the FormField model.\\n * This allows us to set the `id` of the `InputGroup.Input` correctly for proper label association.\\n */\\n\\nexport const HiddenLabel = () => {\\n  const [value, setValue] = React.useState('');\\n  const model = useFormFieldModel();\\n  const {id: formFieldInputId} = useFormFieldInput(model);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField model={model}>\\n        <FormField.Label isHidden>Search</FormField.Label>\\n        <FormField.Field as={InputGroup}>\\n          <InputGroup.InnerStart>\\n            <SystemIcon icon={searchIcon} size=\\\"small\\\" />\\n          </InputGroup.InnerStart>\\n          <InputGroup.Input\\n            as={TextInput}\\n            id={formFieldInputId}\\n            onChange={handleChange}\\n            value={value}\\n          />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Hidden labels are typically not recommended. In this example, a\\n> universally recognizable icon like a magnifying glass signaling \\\"search\\\" may be a suitable\\n> alternative to visible text labels.\\n\\n### Themed Errors\\n\\nYou can theme your error rings by wrapping an input in a `CanvasProvider` and defining\\n`focusOutline` and `error` properties on the `theme`.\\n\\n### Custom Styles\\n\\nForm Field and its subcomponents support custom styling via the `cs` prop. For more information,\\ncheck our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Accessibility\\n\\n`FormField` provides essential accessibility features to ensure form inputs are properly labeled and\\ndescribed for all users, including those using assistive technologies. This section covers both the\\ntechnical implementation and best practices for creating accessible forms.\\n\\n### Label Association\\n\\nThe `FormField` adds a `for` attribute to the `FormField.Label` (`<label>` element) element that\\nmatches the `id` attribute of the `FormField.Input` which is usually a `input` element. This both\\nlabels the input for screen readers and other assistive technology as well as will focus on the\\ninput when the user clicks on the label. If your form field input component is more complicated, the\\n`FormField` will also add an `id` to the `FormField.Label` and an `aria-labelledby` to the\\n`FormField.Input` component. You can then forward the `aria-labelledby` to whatever elements you\\nneed for the proper accessibility.\\n\\nFor example, the DOM will look something like this:\\n\\n```html\\n<div>\\n  <label id=\\\"label-abc\\\" for=\\\"input-abc\\\">First Name</label>\\n  <input id=\\\"input-abc\\\" aria-labelledby=\\\"label-abc\\\" />\\n</div>\\n```\\n\\nSome components, like `MultiSelect`, have an additional `role=listbox` element that also needs to\\nlink to the `label` element. The resulting DOM will look something like:\\n\\n```html\\n<div>\\n  <label id=\\\"label-abc\\\" for=\\\"input-abc\\\">States you've lived in</label>\\n  <input id=\\\"input-abc\\\" aria-labelledby=\\\"label-abc\\\" role=\\\"combobox\\\" ... />\\n  <ul role=\\\"listbox\\\" aria-labelledby=\\\"label-abc\\\">\\n    <li>Texas</li>\\n    <li>California</li>\\n  </ul>\\n</div>\\n```\\n\\nThe `MultiSelect` component gets the `aria-labelledby` from the `FormField.Input` and forwards it to\\nboth the `input[role=combobox]` element and the `ul[role=listbox]` element so the screen reader\\nknows the label for both is \\\"States you've lived in\\\".\\n\\n### Label Text Best Practices\\n\\n- **Be Clear and Concise**: Labels should clearly describe the purpose of the input field.\\n- **Use Visible Labels Instead of Only Placeholders**: Always provide a persistent and accessible\\n  label with `FormField.Label`. Do not rely solely on placeholder text, as it can disappear while\\n  typing and may not be accessible to assistive technologies. Use the `isHidden` prop on\\n  `FormField.Label` if a hidden label is required for visual design.\\n\\n### Screen Reader Experience\\n\\n- The label is announced when the input receives focus.\\n- Required, disabled, and invalid statuses are announced automatically.\\n- Help text and error messages are announced automatically when focused.\\n- For grouped inputs, the group label (`legend`) is announced automatically when focused.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"expandable\": {\n      \"title\": \"Components/Containers/Expandable\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-expandable--docs\",\n      \"mdxPath\": \"modules/react/expandable/stories/Expandable.mdx\",\n      \"mdxProse\": \"# Canvas Kit Expandable\\n\\n`Expandable` is a compound component that creates a header to expand or collapse related content.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Start Icon\\n\\nFor a basic expandable container with a chevron icon before the title, place`Expandable.Icon` before\\n`Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to\\n`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon when\\ncollapsed and a down chevron icon when expanded.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n\\nexport const StartIcon = () => (\\n  <Expandable>\\n    <Expandable.Target headingLevel=\\\"h4\\\">\\n      <Expandable.Icon iconPosition=\\\"start\\\" />\\n      <Expandable.Title>Title</Expandable.Title>\\n    </Expandable.Target>\\n\\n    <Expandable.Content>Content</Expandable.Content>\\n  </Expandable>\\n);\\n```\\n\\n### End Icon\\n\\nFor an expandable container with a chevron icon after the title, place `Expandable.Title` before\\n`Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to\\n`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon when\\ncollapsed and an up chevron icon when expanded.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n\\nexport const EndIcon = () => (\\n  <Expandable>\\n    <Expandable.Target headingLevel=\\\"h4\\\">\\n      <Expandable.Title>\\n        TitleTitleTitleTitleTitle TitleTitleTitleTitle TitleTitleTitle Title\\n      </Expandable.Title>\\n      <Expandable.Icon iconPosition=\\\"end\\\" />\\n    </Expandable.Target>\\n\\n    <Expandable.Content>Content</Expandable.Content>\\n  </Expandable>\\n);\\n```\\n\\n### With Avatar\\n\\nTo include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and\\n`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be passed\\nto `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after\\n`Expandable.Title`.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\n\\nexport const Avatar = () => (\\n  <div>\\n    <Expandable>\\n      <Expandable.Target headingLevel=\\\"h4\\\">\\n        <Expandable.Icon iconPosition=\\\"start\\\" />\\n        <Expandable.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n        <Expandable.Title>Title</Expandable.Title>\\n      </Expandable.Target>\\n\\n      <Expandable.Content>Content</Expandable.Content>\\n    </Expandable>\\n    <Expandable>\\n      <Expandable.Target headingLevel=\\\"h4\\\">\\n        <Expandable.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n        <Expandable.Title>Title</Expandable.Title>\\n        <Expandable.Icon iconPosition=\\\"end\\\" />\\n      </Expandable.Target>\\n\\n      <Expandable.Content>Content</Expandable.Content>\\n    </Expandable>\\n  </div>\\n);\\n```\\n\\n> **Accessibility Note:** In this situation, the Avatar is decorative and should not be announced to\\n> screen readers. The `<Expandable.Avatar>` component has `isDecorative` set to `true` by default to\\n> hide it from screen readers, as avatars in expandable headers are typically decorative when paired\\n> with adjacent text.\\n\\n### Right to Left (RTL)\\n\\nExpandable container has bidirectional support and should function as expected with RTL languages as\\nlong as the content direction is set in your Canvas theme.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Expandable>\\n        <Expandable.Target headingLevel=\\\"h4\\\">\\n          <Expandable.Icon iconPosition=\\\"start\\\" />\\n          <Expandable.Avatar name=\\\"Avatar\\\" />\\n          <Expandable.Title>Title</Expandable.Title>\\n        </Expandable.Target>\\n\\n        <Expandable.Content>Content</Expandable.Content>\\n      </Expandable>\\n      <Expandable>\\n        <Expandable.Target headingLevel=\\\"h4\\\">\\n          <Expandable.Avatar name=\\\"Avatar\\\" />\\n          <Expandable.Title>Title</Expandable.Title>\\n          <Expandable.Icon iconPosition=\\\"end\\\" />\\n        </Expandable.Target>\\n\\n        <Expandable.Content>Content</Expandable.Content>\\n      </Expandable>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Depth\\n\\nThe `depth` prop passed to `Expandable` allows you to adjust the visual elevation of a component\\nusing our depth tokens.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n\\nexport const Depth = () => {\\n  return (\\n    <Expandable borderRadius=\\\"l\\\" depth={3} margin=\\\"xxxs\\\" padding=\\\"xs\\\">\\n      <Expandable.Target headingLevel=\\\"h4\\\">\\n        <Expandable.Title>Additional Information</Expandable.Title>\\n        <Expandable.Icon iconPosition=\\\"end\\\" />\\n      </Expandable.Target>\\n\\n      <Expandable.Content>This Expandable Container has a depth of 3.</Expandable.Content>\\n    </Expandable>\\n  );\\n};\\n```\\n\\n### Title Wrap\\n\\nLong titles will wrap to the next line and increase the height of the container.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\n\\nexport const LongTitle = () => (\\n  <Expandable>\\n    <Expandable.Target headingLevel=\\\"h4\\\">\\n      <Expandable.Icon iconPosition=\\\"start\\\" />\\n      <Expandable.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n      <Expandable.Title>\\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n        onions, and oregano.\\n      </Expandable.Title>\\n    </Expandable.Target>\\n\\n    <Expandable.Content>Content</Expandable.Content>\\n  </Expandable>\\n);\\n```\\n\\nYou can also have direct access to the model if\\n\\n### Hoisted Model\\n\\nIf you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In the\\nexample below, we're hoisting the models to expand and collapse all three containers at once.\\n```tsx\\nimport React from 'react';\\n\\nimport {Expandable, useExpandableModel} from '@workday/canvas-kit-react/expandable';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst listStyles = createStyles({\\n  flexDirection: 'column',\\n  gap: system.space.x2,\\n  padding: system.space.zero,\\n  marginX: system.space.x4,\\n  marginY: system.space.zero,\\n});\\n\\nexport const HoistedModel = () => {\\n  const modelOne = useExpandableModel();\\n  const modelTwo = useExpandableModel();\\n  const modelThree = useExpandableModel();\\n\\n  const idOne = useUniqueId();\\n  const idTwo = useUniqueId();\\n  const idThree = useUniqueId();\\n\\n  const handleExpandAll = () => {\\n    modelOne.events.show();\\n    modelTwo.events.show();\\n    modelThree.events.show();\\n  };\\n\\n  const handleCollapseAll = () => {\\n    modelOne.events.hide();\\n    modelTwo.events.hide();\\n    modelThree.events.hide();\\n  };\\n\\n  return (\\n    <Flex gap={system.space.x6} flexDirection=\\\"column\\\">\\n      <Flex gap={system.space.x4}>\\n        <SecondaryButton onClick={handleExpandAll}>Expand All</SecondaryButton>\\n        <SecondaryButton onClick={handleCollapseAll}>Collapse All</SecondaryButton>\\n      </Flex>\\n      <Flex flexDirection=\\\"column\\\">\\n        <Expandable model={modelOne}>\\n          <Expandable.Target headingLevel=\\\"h4\\\">\\n            <Expandable.Title id={idOne}>Usage Guidance</Expandable.Title>\\n            <Expandable.Icon iconPosition=\\\"end\\\" />\\n          </Expandable.Target>\\n\\n          <Expandable.Content as=\\\"section\\\" aria-labelledby={idOne}>\\n            This component highlights the most important details of a section and reveals more when\\n            a user taps or clicks on the header part of the container. Enabling users to hide and\\n            show information ensures the design remains focused and relevant to their expectations.\\n            Scanning through the most critical information first makes processing more efficient\\n            without compromising the ability to access additional information.\\n          </Expandable.Content>\\n        </Expandable>\\n        <Expandable model={modelTwo}>\\n          <Expandable.Target headingLevel=\\\"h4\\\">\\n            <Expandable.Title id={idTwo}>Accessibility Guidelines</Expandable.Title>\\n            <Expandable.Icon iconPosition=\\\"end\\\" />\\n          </Expandable.Target>\\n\\n          <Expandable.Content as=\\\"section\\\" aria-labelledby={idTwo}>\\n            <Flex as=\\\"ul\\\" cs={listStyles}>\\n              <li>\\n                The state of a component being open or closed must be conveyed to assistive\\n                technologies.\\n              </li>\\n              <li>A Button must be used as the control to toggle the display of any content.</li>\\n              <li>\\n                If there are multiple toggle Buttons on the same page, provide additional\\n                information in their labels to make them uniquely distinguishable to a screen\\n                reader.\\n              </li>\\n              <li>\\n                Do not change the toggle Button label to convey state. An exception to this would be\\n                a scenario where a visual hint text is decoupled from both the state and the label\\n                for a control so the hint text is not announced by assistive technologies.\\n              </li>\\n              <li>\\n                Avoid keyboard traps when adding components to the accordion panel. For example, the\\n                user expands an accordion, but is unable to tab to the next focusable element.\\n              </li>\\n              <li>\\n                Hidden content must be hidden correctly from keyboard, screen reader, and touch\\n                interaction.\\n              </li>\\n              <li>\\n                Changing the label of something to indicate its state will not always be accounted\\n                for in live time for a screen reader user. For example, a play button should have a\\n                non-changing, persistent label and the state (pressed or unpressed) is conveyed\\n                visually as well as to assistive technology once the state is changed.\\n              </li>\\n            </Flex>\\n          </Expandable.Content>\\n        </Expandable>\\n        <Expandable model={modelThree}>\\n          <Expandable.Target headingLevel=\\\"h4\\\">\\n            <Expandable.Title id={idThree}>Content Guidelines</Expandable.Title>\\n            <Expandable.Icon iconPosition=\\\"end\\\" />\\n          </Expandable.Target>\\n          <Expandable.Content as=\\\"section\\\" aria-labelledby={idThree}>\\n            Titles should be short and concise, yet long enough to explain what the user would\\n            expect to see when the content is expanded. If titles must be long, make sure it doesn't\\n            wrap more than two lines.\\n          </Expandable.Content>\\n        </Expandable>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note:** When using multiple Expandable Containers on a page, use the `as` prop to\\n> render the `<Expandable.Content>` sub-component as an HTML `<section>` element. Then, use\\n> `aria-labelledby` to reference the unique `id` of the `<Expandable.Title>` element. This practice\\n> can be useful to screen reader users when multiple Expandable Containers are opened at one time\\n> for uniquely describing the boundaries of the expandable content.\\n\\n## Accessibility\\n\\nOur Expandable component renders a semantic HTML `<button>` element to the DOM, with an optional\\nparent heading element as defined by the `headingLevel` prop. The `aria-expanded` property is\\nincluded on the button to indicate the state of the content to screen readers.\\n\\n[Accordion Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)\\n\\n- Use the `headingLevel` prop to assign an appropriate heading level based on the context of the\\n  page content.\\n- When using Expandable Container for navigation elements, then we don't recommend using the\\n  `headingLevel` prop. This will render only expandable buttons to the DOM, reserving headings for\\n  organizing content in the main body of the page.\\n- The `as` prop may also be used on `<Expandable.Content>` to render an HTML `<ul>` element for\\n  displaying a list of items. For example, check out\\n  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).\\n\\n### Navigation\\n\\n- **Tab key**: Moves focus to the next expandable button or focusable element\\n- **Shift + Tab**: Moves focus to the previous focusable element\\n- **Enter or Space**: Toggles the expanded/collapsed state\\n\\n### Screen Reader Experience\\n\\n- The expandable button will be announced with its title text followed by the button role\\n- The current state will be announced as either \\\"collapsed\\\" or \\\"expanded\\\" (For example: \\\"Usage\\n  Guidance, button, collapsed\\\" or \\\"Usage Guidance, button, expanded\\\")\\n- **State Changes:** When activating the button to expand content, screen readers will announce the\\n  new \\\"expanded\\\" state and vice versa when collapsing content.\\n- **Content Regions:** Screen reader users can use landmark navigation to jump between sections and\\n  each section will be announced with its associated title (For example: \\\"Usage Guidance, landmark\\n  region\\\")\\n- **Heading Structure:** Using heading levels with expandable buttons allows screen reader users to\\n  navigate by headings, making the document structure and hierarchy easier to understand.\\n\\n## Component API\\n\\n\"\n    },\n    \"dialog\": {\n      \"title\": \"Components/Popups/Dialog\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs\",\n      \"mdxPath\": \"modules/react/dialog/stories/Dialog.mdx\",\n      \"mdxProse\": \"# Canvas Kit Dialog\\n\\nA Dialog component is a non-modal type of dialog that will not render the rest of the page inert\\nwhile it is active. A Dialog should be used in situations where the task is not critical.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUnlike Modal, Dialog **does not** render the rest of the page inert while it is active. Dialog\\nshould be used in situations where the task does not require immediate attention.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Dialog} from '@workday/canvas-kit-react/dialog';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleEmail = () => {\\n    console.log('Email Submitted');\\n  };\\n  return (\\n    <Dialog>\\n      <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>\\n      <Dialog.Popper>\\n        <Dialog.Card>\\n          <Dialog.CloseIcon aria-label=\\\"Close\\\" />\\n          <Dialog.Heading paddingTop=\\\"m\\\">Sign Up for 15% Off Your Next Order</Dialog.Heading>\\n          <Dialog.Body>\\n            <FormField>\\n              <FormField.Label>Email</FormField.Label>\\n              <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n            </FormField>\\n          </Dialog.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\" marginTop=\\\"xxs\\\">\\n            <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>\\n              Submit\\n            </Dialog.CloseButton>\\n            <Dialog.CloseButton>Cancel</Dialog.CloseButton>\\n          </Flex>\\n        </Dialog.Card>\\n      </Dialog.Popper>\\n    </Dialog>\\n  );\\n};\\n```\\n\\n### Focus Redirect\\n\\nDialog **does not** trap keyboard focus like the Modal component does. Instead, it allows focus to\\nmove freely in and out of the dialog, supporting more flexible navigation. The following example\\nshows how Dialog manages focus in and out of the component.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Dialog} from '@workday/canvas-kit-react/dialog';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Focus = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleEmail = () => {\\n    console.log('Email Submitted');\\n  };\\n  return (\\n    <Flex gap=\\\"m\\\">\\n      <Dialog>\\n        <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>\\n        <Dialog.Popper>\\n          <Dialog.Card>\\n            <Dialog.CloseIcon aria-label=\\\"Close\\\" />\\n            <Dialog.Heading paddingTop=\\\"m\\\">Sign Up for 15% Off Your Next Order</Dialog.Heading>\\n            <Dialog.Body>\\n              <FormField>\\n                <FormField.Label>Email</FormField.Label>\\n                <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n              </FormField>\\n            </Dialog.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\" marginTop=\\\"xxs\\\">\\n              <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>\\n                Submit\\n              </Dialog.CloseButton>\\n              <Dialog.CloseButton>Cancel</Dialog.CloseButton>\\n            </Flex>\\n          </Dialog.Card>\\n        </Dialog.Popper>\\n      </Dialog>\\n      <PrimaryButton>Focus #1</PrimaryButton>\\n      <PrimaryButton>Focus #2</PrimaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Focus redirect **will not** have any effect on the reading order of a\\n> screen reader.\\n\\n## Accessibility\\n\\n`Dialog` composes the popup stack with `useInitialFocus`, `useReturnFocus`, `useCloseOnEscape`,\\n`useCloseOnOutsideClick`, and `useFocusRedirect`. The card container includes an ARIA\\n**`role=\\\"dialog\\\"`** that is **non-modal**: the rest of the page stays available. The card also\\nincludes an **`aria-labelledby`** attribute referencing the `id` on `Dialog.Heading`, so the dialog\\nhas an accessible name that matches the visible heading.\\n\\nThe Dialog component includes a `<div>` element (sibling to the `Dialog.Target`) with `aria-owns`\\npointing to the `Dialog.Card`. This remaps the hierarchy of the accessibility tree to improve\\nsequential reading order in supported browsers. For more information, see\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n[Dialog Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\\n\\n- Prefer **`Dialog.Heading`** so the dialog is properly labelled; avoid leaving a dialog without an\\n  accessible name.\\n- Ensure icon-only controls such as **`Dialog.CloseIcon`** include an accessible name. Prefer the\\n  `Tooltip` component to provide a visible label, or a translated `aria-label` string is acceptable.\\n\\n### Navigation\\n\\n- **Enter** / **Space**: Open the dialog (standard button behavior on the trigger). When it opens,\\n  focus moves to the **first focusable element** inside the dialog in DOM order\u2014often the close\\n  control\u2014or to the element referenced by **`initialFocusRef`** on the dialog model when set.\\n- **Tab** / **Shift + Tab**: Move through focusable elements inside the dialog; leaving the first or\\n  last focusable element **closes** the dialog and moves focus to the next or previous focusable\\n  element on the page (non-modal focus redirect behavior).\\n- **Escape**: Closes the dialog and returns focus to the `Dialog.Target` (or configured return\\n  target).\\n\\n### Screen Reader Experience\\n\\n- **When the dialog opens:** Screen readers should announce the name and role of the first focused\\n  control (often the close button), the dialog's name (`Dialog.Heading`) and role.\\n- **Reading order:** The dialog contents should be read in the same order as it appears on screen\\n  for browsers and screen readers that support `aria-owns`. Results vary, so always test with your\\n  supported browsers and screen reader combinations.\\n- **Expanded or collapsed state:** The `Dialog.Target` does not include an expanded or collapsed\\n  state by default, but it can be added if the interaction design isn't using an initial focus for\\n  the Dialog. See\\n  [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs)\\n  for more information.\\n\\n## Component API\\n\\n\"\n    },\n    \"checkbox\": {\n      \"title\": \"Components/Inputs/Checkbox\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-checkbox--docs\",\n      \"mdxPath\": \"modules/react/checkbox/stories/Checkbox.mdx\",\n      \"mdxProse\": \"# Canvas Kit Checkbox\\n\\nCheckboxes allow a user to select zero, one, or multiple values from a predefined list of 7 or less\\noptions.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nCheckbox may be used on its own without [Form Field](/components/inputs/form-field/) since it\\nincludes a `<label>` with a `for` attribute referencing the underlying `<input type=\\\"checkbox\\\">`\\nelement.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Basic = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Inverse\\n\\nCheckbox with inverse variation\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = createStyles({\\n  backgroundColor: system.color.bg.primary.default,\\n  padding: system.space.x4,\\n});\\n\\nexport const Inverse = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <Flex cs={styleOverrides}>\\n      <Checkbox\\n        variant=\\\"inverse\\\"\\n        checked={checked}\\n        label=\\\"I agree to the terms\\\"\\n        onChange={handleChange}\\n      />\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Checkbox to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Disabled = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          disabled={true}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Indeterminate\\n\\nSet the `indeterminate` prop of the Checkbox to `true` to indicate the Checkbox is neither checked\\nnor unchecked.\\n\\nA common use case for an indeterminate Checkbox is when the value of a parent Checkbox is dependent\\non a number of child Checkboxes. The parent Checkbox is set to the indeterminate state if some (but\\nnot all) of its children are checked.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = createStyles({\\n  marginInlineLeft: system.space.x8,\\n  marginTop: system.space.x2,\\n});\\n\\nexport const Indeterminate = () => {\\n  const [pizzaChecked, setPizzaChecked] = React.useState(false);\\n  const [pizzaIndeterminate, setPizzaIndeterminate] = React.useState(false);\\n\\n  const [toppings, setToppings] = React.useState([\\n    {name: 'Pepperoni', checked: false},\\n    {name: 'Sausage', checked: false},\\n    {name: 'Bell Peppers', checked: false},\\n    {name: 'Olives', checked: false},\\n    {name: 'Onions', checked: false},\\n  ]);\\n\\n  const handlePizzaChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    const checked = event.target.checked;\\n\\n    if (checked || (!checked && pizzaIndeterminate)) {\\n      setPizzaChecked(true);\\n      setToppings(\\n        toppings.map(topping => ({\\n          ...topping,\\n          checked: true,\\n        }))\\n      );\\n    } else {\\n      setPizzaChecked(false);\\n      setToppings(\\n        toppings.map(topping => ({\\n          ...topping,\\n          checked: false,\\n        }))\\n      );\\n    }\\n\\n    setPizzaIndeterminate(false);\\n  };\\n\\n  const handleToppingChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n    const newToppings = toppings.map(topping => ({...topping}));\\n    newToppings[index].checked = event.target.checked;\\n    setToppings(newToppings);\\n\\n    const anyToppingChecked = newToppings.filter(topping => topping.checked).length > 0;\\n    const anyToppingUnchecked = newToppings.filter(topping => !topping.checked).length > 0;\\n    const allToppingChecked = !anyToppingUnchecked;\\n    setPizzaIndeterminate(anyToppingChecked && anyToppingUnchecked);\\n    setPizzaChecked(allToppingChecked);\\n  };\\n\\n  return (\\n    <>\\n      <Checkbox\\n        checked={pizzaChecked}\\n        indeterminate={pizzaIndeterminate}\\n        label=\\\"Supreme Pizza Toppings\\\"\\n        onChange={handlePizzaChange}\\n      />\\n      <Box cs={styleOverrides}>\\n        {toppings.map((topping, index) => (\\n          <Checkbox\\n            checked={topping.checked}\\n            key={topping.name}\\n            label={topping.name}\\n            onChange={event => handleToppingChange(event, index)}\\n          />\\n        ))}\\n      </Box>\\n    </>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nCheckbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<input type=\\\"checkbox\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nconst boxStyles = createStyles({\\n  display: 'flex',\\n  flexDirection: 'column',\\n});\\n\\nexport const RefForwarding = () => {\\n  const [checked, setChecked] = React.useState(false);\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.click();\\n  };\\n\\n  return (\\n    <>\\n      <Box cs={boxStyles}>\\n        <FormField>\\n          <FormField.Label>Confirm</FormField.Label>\\n          <FormField.Field>\\n            <FormField.Input\\n              as={Checkbox}\\n              checked={checked}\\n              label=\\\"I agree to the terms\\\"\\n              onChange={handleChange}\\n              ref={ref}\\n            />\\n          </FormField.Field>\\n        </FormField>\\n      </Box>\\n      <PrimaryButton onClick={handleClick}>Check Agreement to Terms</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const LabelPosition = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of a wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Required = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping Form Field to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the Checkbox to the Alert or Error state, respectively. You will\\nalso need to set the `hintId` and `hintText` props on the Form Field to meet accessibility\\nstandards. You may wish to omit the `label` prop on the Form Field given that Checkbox already\\nincludes a label.\\n\\nThe `error` prop may be applied directly to the Checkbox with a value of `\\\"caution\\\"`\\nor `\\\"error\\\"` if Form Field is not being used.\\n\\n#### Caution\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Caution = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"caution\\\">\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n#### Error\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Error = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"error\\\">\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nCheckbox supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"card\": {\n      \"title\": \"Components/Containers/Card\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-card--docs\",\n      \"mdxPath\": \"modules/react/card/stories/card.mdx\",\n      \"mdxProse\": \"# Canvas Kit Card\\n\\nA Card is a preview that serves as an entry point to more detailed information. Card is a\\npresentational [compound component](/get-started/for-developers/documentation/compound-components/)\\nused as a building block for other components such as [Popup](/components/popups/popup/) and\\n[Modal](/components/popups/modal/).\\n\\n[> Workday Design Reference](https://design.workday.com/components/containers/cards)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Card` includes a container component and `Card.Body` and `Card.Heading` subcomponents.\\n```tsx\\nimport React from 'react';\\nimport {Card} from '@workday/canvas-kit-react/card';\\n\\nexport const Basic = () => {\\n  return (\\n    <Card>\\n      <Card.Heading>Canvas Supreme</Card.Heading>\\n      <Card.Body>\\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n        onions, and oregano.\\n      </Card.Body>\\n    </Card>\\n  );\\n};\\n```\\n\\n### Borderless Example\\n\\nThe `borderless` variant removes the border from the Card, creating a cleaner appearance while\\nmaintaining the same internal spacing and structure. Use this variant when placing cards on colored\\nbackgrounds where you want the card to blend seamlessly without borders or shadows.\\n```tsx\\nimport React from 'react';\\nimport {Card} from '@workday/canvas-kit-react/card';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styles = createStyles({\\n  background: system.color.bg.alt.softer,\\n  padding: system.space.x4,\\n});\\n\\nexport const Borderless = () => {\\n  return (\\n    <div className={styles}>\\n      <Card variant=\\\"borderless\\\">\\n        <Card.Heading>Canvas Supreme</Card.Heading>\\n        <Card.Body>\\n          Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n          onions, and oregano.\\n        </Card.Body>\\n      </Card>\\n    </div>\\n  );\\n};\\n```\\n\\n### Filled Example\\n\\nThe `filled` variant adds a background color to the Card, creating a more prominent appearance while\\nmaintaining the same internal spacing and structure. Use this variant when you need a card with a\\ngrayish background to create visual separation from the page background.\\n```tsx\\nimport React from 'react';\\nimport {Card} from '@workday/canvas-kit-react/card';\\n\\nexport const Filled = () => {\\n  return (\\n    <Card variant=\\\"filled\\\">\\n      <Card.Heading>Canvas Supreme</Card.Heading>\\n      <Card.Body>\\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n        onions, and oregano.\\n      </Card.Body>\\n    </Card>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nCard and its subcomponents support custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Stencils\\n\\nYou can also use `Card` stencils to extend styles for your own custom components. This allows you to\\ncompose styles without using components directly. In the example below, we're extending `Card`\\nstencils to create a custom `MenuCard` component.\\n\\nHere's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).\\n\\n## Component API\\n\\n\"\n    },\n    \"breadcrumbs\": {\n      \"title\": \"Components/Navigation/Breadcrumbs\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-navigation-breadcrumbs--docs\",\n      \"mdxPath\": \"modules/react/breadcrumbs/stories/Breadcrumbs.mdx\",\n      \"mdxProse\": \"# Canvas Kit Breadcrumbs\\n\\nBreadcrumbs is a\\n[compound component](/get-started/for-developers/documentation/compound-components/) that allows\\nusers to keep track and maintain awareness of their location as they navigate through pages,\\nfolders, files, etc.\\n\\n[> Workday Design Reference](https://design.workday.com/components/navigation/breadcrumbs)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Breadcrumbs` includes a container `Breadcrumbs` component and the following subcomponents which can\\nbe composed in a variety of ways: `Breadcrumbs.List`, `Breadcrumbs.Item`, `Breadcrumbs.CurrentItem`\\nand `Breadcrumbs.Link`.\\n\\nAccessibility is built into `Breadcrumbs` in a way that allows you to create an inclusive experience\\nwith little additional configuration. As seen in the example below, you don't need to pass any\\naccessibility attributes, because they are baked into the component. You only need to add\\n`aria-label` attribute to a `nav` component through a `aria-label` prop of `Breadcrumbs`.\\n```tsx\\nimport {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';\\n\\nexport const Basic = () => {\\n  return (\\n    <Breadcrumbs aria-label=\\\"Breadcrumbs\\\">\\n      <Breadcrumbs.List>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/\\\">Home</Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/menus\\\">Menus</Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/lunch\\\">Lunch</Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/house-specialty-pies\\\" maxWidth={100}>\\n            House Specialty Pies\\n          </Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.CurrentItem maxWidth={100}>Canvas Supreme</Breadcrumbs.CurrentItem>\\n      </Breadcrumbs.List>\\n    </Breadcrumbs>\\n  );\\n};\\n```\\n\\nNote that all links require an `href` to be properly identified.\\n\\n### Overflow Breadcrumbs\\n\\n`Breadcrumbs` is a responsive component based on the width of its container. If the rendered links\\nexceed the width of the `Breadcrumbs.List`, an overflow menu will be rendered. This only works\\nagainst the dynamic API where you give the `BreadcrumbsModel` an array of items to be rendered. The\\ndynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires\\neither an `id` on each item object or a `getId` function that returns an identifier based on the\\nitem. The example below uses an `id` property on each item.\\n\\nThe dynamic API takes in any object, but since nothing is known about your object, a\\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\\nshould render.\\n\\n### Truncating a Link\\n\\n`Breadcrumbs.Link` is a styled `<a>` element that also renders a tooltip if the text is truncated.\\nThe built-in truncation and tooltip functionality provides an easy-to-use, accessible feature for\\nmanaging the length of link text. The `maxWidth` is set to `350px` by default and can be adjusted as\\nneeded. Note that tooltips will only render when text is truncated. The example below uses a\\n`maxWidth` of `150px`.\\n```tsx\\nimport * as React from 'react';\\nimport {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';\\n\\nexport const LinkTruncation = () => {\\n  return (\\n    <Breadcrumbs.Link href=\\\"/#\\\" maxWidth={150}>\\n      Small Plates & Appetizers\\n    </Breadcrumbs.Link>\\n  );\\n};\\n```\\n\\n### Item Truncation\\n\\n`Breadcrumbs.CurrentItem` is a styled `<li>` element that also renders a tooltip if the text is\\ntruncated. The built-in truncation and tooltip functionality provides an easy-to-use, accessible\\nfeature for managing the length of the text. The `maxWidth` is set to `350px` by default and can be\\nadjusted as needed. Normally, this is a non-focusable element; when truncated, however, it sets the\\n`tabIndex` to `0` to enable the tooltip to appear on keyboard focus. Note that tooltips will only\\nrender when text is truncated. The example below uses a `maxWidth` of `100px`.\\n```tsx\\nimport * as React from 'react';\\nimport {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';\\n\\nexport const CurrentItemTruncation = () => {\\n  return (\\n    <Breadcrumbs aria-label=\\\"Breadcrumbs\\\">\\n      <Breadcrumbs.CurrentItem maxWidth={100}>Foccacia Genovese</Breadcrumbs.CurrentItem>\\n    </Breadcrumbs>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Breadcrumbs` has bidirectional support out of the box. That means outside of setting the content\\ndirection in your application's Canvas theme, you don't need to do anything else to make it work.\\nAll you need to supply is the translated text for items and ARIA labels.\\n\\n### Handling Redirects\\n\\n`Breadcrumbs.Link` defaults to redirecting with an `href`, which means the page will hard-redirect\\nwhen the link is clicked. However, if you're in a single-page application (SPA) environment, you\\nmight want to use the internal SPA router instead. You can override that behavior with a custom\\n`onClick` handler that blocks the default behavior of the event and passes along the link path to\\nyour SPA router. Most of our consumers use `react-router-dom` for managing SPA routing, so below is\\nan example of how to do this in V5 and V6 of `react-router-dom`.\\n\\n```tsx\\n// React Router DOM V5 API\\n...\\nconst history = useHistory();\\nconst handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, link?: string) => {\\n      event.preventDefault();\\n    // if no link is provided, default to the current path\\n    history.push(link || window.location.pathname);\\n}\\nreturn (\\n  <Breadcrumbs.Link href=\\\"/account\\\" onClick={handleClick}>\\n    Account\\n  </Breadcrumbs.Link>\\n);\\n\\n// React Router DOM V6 API\\n...\\nconst navigate = useNavigate();\\nconst handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, link?: string) => {\\n      event.preventDefault();\\n    // if no link is provided, default to the current path\\n    navigate(link || window.location.pathname);\\n}\\nreturn (\\n  <Breadcrumbs.Link href=\\\"/account\\\" onClick={handleClick}>\\n    Account\\n  </Breadcrumbs.Link>\\n);\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"banner\": {\n      \"title\": \"Components/Indicators/Banner\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs\",\n      \"mdxPath\": \"modules/react/banner/stories/Banner.mdx\",\n      \"mdxProse\": \"# Canvas Kit Banner\\n\\n`Banner` is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nused surface important information and feedback to the user about a task, action, or state.\\n\\n[> Workday Design Reference](https://design.workday.com/components/indicators/banners)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUse the children of `Banner.Label` to set the main text for the `Banner`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nexport const Basic = () => {\\n  return (\\n    <Banner onClick={() => console.log('clicked banner')}>\\n      <Banner.Icon />\\n      <Banner.Label>3 Warnings</Banner.Label>\\n      <Banner.ActionText />\\n    </Banner>\\n  );\\n};\\n```\\n\\n### Action Text\\n\\nUse the children of `Banner.ActionText` to customize the action text contained in the `Banner`. The\\ntext has default value of `View All`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nexport const ActionText = () => {\\n  return (\\n    <Banner>\\n      <Banner.Icon />\\n      <Banner.Label>3 Warnings</Banner.Label>\\n      <Banner.ActionText>Show Details</Banner.ActionText>\\n    </Banner>\\n  );\\n};\\n```\\n\\n### Error Type\\n\\nSet the `hasError` prop of the `Banner` to designate the severity of the message presented in the\\nbanner. This will change the defualt icon to `exclamationCircleIcon`.\\n```tsx\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nexport const Error = () => {\\n  return (\\n    <Banner hasError={true}>\\n      <Banner.Icon />\\n      <Banner.Label>3 Errors</Banner.Label>\\n      <Banner.ActionText />\\n    </Banner>\\n  );\\n};\\n```\\n\\n### Icon Banner\\n\\nWhen only using an icon in the `Banner`, use our `Tooltip` component to both show a visible text\\nalternative, and assign an `aria-label` string to the child `Banner`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {styled} from '@workday/canvas-kit-react/common';\\n\\nexport const IconBanner = () => {\\n  return (\\n    <Tooltip title=\\\"Warning\\\">\\n      <Banner width=\\\"4em\\\">\\n        <Banner.Icon />\\n      </Banner>\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Sticky\\n\\nSet the `isSticky` prop of the `Banner` to display it along the right edge of the page. When true,\\nthe `Banner.ActionText` will be hidden. Some basic styles will be applied, but you will still need\\nto manually set the css `position` value.\\n```tsx\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {styled} from '@workday/canvas-kit-react/common';\\n\\nconst StyledBanner = styled(Banner)({\\n  position: 'absolute',\\n  right: 0,\\n});\\n\\nexport const Sticky = () => {\\n  return (\\n    <Box height={64}>\\n      <StyledBanner hasError={true} isSticky={true}>\\n        <Banner.Icon />\\n        <Banner.Label>3 Errors</Banner.Label>\\n        <Banner.ActionText />\\n      </StyledBanner>\\n    </Box>\\n  );\\n};\\n```\\n\\nYou can use keyframes to animate the `Banner` in.\\n```tsx\\nimport React from 'react';\\n\\nimport {useTheme} from '@workday/canvas-kit-react/common';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {loopIcon} from '@workday/canvas-system-icons-web';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {\\n  createStencil,\\n  createStyles,\\n  createVars,\\n  keyframes,\\n  handleCsProp,\\n  cssVar,\\n} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  position: 'absolute',\\n  right: 0,\\n  overflow: 'hidden',\\n});\\nconst stickyAnimationVars = createVars('width', 'rerun');\\nconst stickAnimationKeyframes = keyframes({\\n  '0%': {\\n    transform: `translateX(${cssVar(stickyAnimationVars.width)})`,\\n  },\\n  '100%': {\\n    transform: `translateX(0 * ${cssVar(stickyAnimationVars.rerun)})`,\\n  },\\n});\\n\\nconst stickyAnimationStencil = createStencil({\\n  base: {\\n    marginBlock: system.space.x1,\\n    marginInlineStart: system.space.x1,\\n    marginInlineEnd: 0,\\n    animationName: stickAnimationKeyframes,\\n    animationDuration: '.3s',\\n    animationTimingFunction: 'ease-out',\\n  },\\n});\\n\\nexport const StickyAnimation = () => {\\n  const theme = useTheme();\\n  const bannerRef = React.useRef<HTMLButtonElement>(null);\\n  const containerRef = React.useRef<HTMLDivElement>(null);\\n  const [bannerWidth, setBannerWidth] = React.useState(0);\\n\\n  const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes\\n\\n  React.useLayoutEffect(() => {\\n    const width = bannerRef.current.offsetWidth;\\n    setBannerWidth(theme.canvas.direction === 'rtl' ? width * -1 : width);\\n  }, [theme.canvas.direction, rerun]);\\n\\n  return (\\n    <Box height={64}>\\n      <div className={containerStyles} ref={containerRef}>\\n        <div\\n          key={rerun}\\n          {...handleCsProp({}, [\\n            stickyAnimationStencil(),\\n            stickyAnimationVars({width: `${bannerWidth}px`, rerun: `${rerun}`}),\\n          ])}\\n        >\\n          <Banner\\n            onClick={() => setRerun(r => r + 1)}\\n            hasError={true}\\n            isSticky={true}\\n            ref={bannerRef}\\n          >\\n            <Banner.Icon icon={loopIcon} />\\n            <Banner.Label>Click to run animation</Banner.Label>\\n            <Banner.ActionText />\\n          </Banner>\\n        </div>\\n      </div>\\n    </Box>\\n  );\\n};\\n```\\n\\n### RefForwarding\\n\\n`Banner` supports ref forwarding. It will forward ref to its underlying button element.\\n```tsx\\nimport React from 'react';\\n\\nimport {changeFocus} from '@workday/canvas-kit-react/common';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const RefForwarding = () => {\\n  const bannerRef = React.useRef<HTMLButtonElement>(null);\\n\\n  const focusBanner = () => {\\n    changeFocus(bannerRef.current);\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\" gap=\\\"xs\\\" alignItems=\\\"flex-start\\\">\\n      <Banner ref={bannerRef}>\\n        <Banner.Icon />\\n        <Banner.Label>3 Warnings</Banner.Label>\\n        <Banner.ActionText />\\n      </Banner>\\n      <SecondaryButton onClick={focusBanner}>Focus Banner</SecondaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\nBanner supports right-to-left languages when specified in the CanvasProvider theme.\\n```tsx\\nimport React from 'react';\\n\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {CanvasProvider, styled} from '@workday/canvas-kit-react/common';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nconst StyledStickyBanner = styled(Banner)({\\n  position: 'absolute',\\n  right: 0,\\n});\\n\\nexport const StickyRTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Box height={64}>\\n        <StyledStickyBanner isSticky={true}>\\n          <Banner.Icon />\\n          <Banner.Label>3 \u05D0\u05D6\u05D4\u05E8\u05D5\u05EA</Banner.Label>\\n          <Banner.ActionText />\\n        </StyledStickyBanner>\\n      </Box>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Themed Banners\\n\\nBanners use the `useThemedPalette` hook for themeing. By default, your alert theme is used. `main`\\nwill be used for the background, `dark` for the hover background, and `contrast` for the text.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ThemedAlert = () => {\\n  const theme: PartialEmotionCanvasTheme = {\\n    canvas: {\\n      palette: {\\n        alert: {\\n          main: colors.kiwi200,\\n          dark: colors.kiwi300,\\n        },\\n      },\\n    },\\n  };\\n\\n  return (\\n    <CanvasProvider theme={theme}>\\n      <Banner>\\n        <Banner.Icon />\\n        <Banner.Label>3 Items</Banner.Label>\\n        <Banner.ActionText />\\n      </Banner>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\nIf you set the `hasError` prop, the banner will use your error theme.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ThemedError = () => {\\n  const theme: PartialEmotionCanvasTheme = {\\n    canvas: {\\n      palette: {\\n        error: {\\n          main: colors.islandPunch500,\\n          dark: colors.islandPunch600,\\n          contrast: colors.berrySmoothie100,\\n        },\\n      },\\n    },\\n  };\\n\\n  return (\\n    <CanvasProvider theme={theme}>\\n      <Banner hasError={true}>\\n        <Banner.Icon />\\n        <Banner.Label>3 Items</Banner.Label>\\n        <Banner.ActionText />\\n      </Banner>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"countbadge\": {\n      \"title\": \"Components/Indicators/CountBadge\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-countbadge--docs\",\n      \"mdxPath\": \"modules/react/badge/stories/CountBadge.mdx\",\n      \"mdxProse\": \"# Canvas Kit Count Badge\\n\\n`CountBadge` provides a quantity-based summary with dynamic values.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThe following section provides examples for common use cases. Please be sure to also read the\\nAccessibility section below.\\n\\n### Basic\\n\\nUse the default `CountBadge` variant for most situations. The default `high` emphasis is ideal for\\ndrawing attention to important or primary information.\\n```tsx\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  padding: system.space.x4,\\n});\\n\\nexport const Basic = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <CountBadge count={427} />\\n    </div>\\n  );\\n};\\n```\\n\\n### Emphasis\\n\\nSelect the `low` emphasis option for less prominent or secondary information. This is useful when\\nyou want the badge to be visible but not distracting.\\n\\n`high` emphasis is ideal for drawing attention to important or primary information.\\n```tsx\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Text} from '@workday/canvas-kit-react/text';\\n\\nconst containerStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  padding: system.space.x4,\\n  flexDirection: 'column',\\n});\\n\\nconst textStyles = createStyles({\\n  paddingInlineEnd: system.space.x2,\\n});\\n\\nexport const Emphasis = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <div>\\n        <Text as=\\\"strong\\\" className={textStyles}>\\n          Low Emphasis:\\n        </Text>\\n        <CountBadge count={427} emphasis=\\\"low\\\" />\\n      </div>\\n      <div>\\n        <Text as=\\\"strong\\\" className={textStyles}>\\n          High Emphasis:\\n        </Text>\\n        <CountBadge count={427} emphasis=\\\"high\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n### Inverse\\n\\nApply the `inverse` variant when displaying the badge on dark or accent backgrounds to maintain\\nproper contrast and readability. This ensures the badge remains legible in visually dense or colored\\nareas. The same rules apply for `low` and `high` emphasis. Only use this combination on backgrounds with\\n[a token of 600 or greater](https://workday.github.io/canvas-tokens/?path=/docs/docs-base-tokens--docs)\\nto ensure sufficient contrast and accessibility.\\n```tsx\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {createStyles, cssVar} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nconst containerStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  padding: system.space.x4,\\n  backgroundColor: system.color.static.blue.default,\\n  flexDirection: 'column',\\n});\\n\\nconst textStyles = createStyles({\\n  paddingInlineEnd: system.space.x2,\\n});\\n\\nexport const Inverse = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <div>\\n        <Text as=\\\"strong\\\" variant=\\\"inverse\\\" className={textStyles}>\\n          Low Emphasis:\\n        </Text>\\n        <CountBadge count={427} variant=\\\"inverse\\\" emphasis=\\\"low\\\" />\\n      </div>\\n      <div>\\n        <Text as=\\\"strong\\\" variant=\\\"inverse\\\" className={textStyles}>\\n          High Emphasis\\n        </Text>\\n        <CountBadge count={427} variant=\\\"inverse\\\" emphasis=\\\"high\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Limit\\n\\nBy default, `CountBadge`'s limit is set to `1000`. Once the count reaches the limit, the badge will\\nformat the number: `1000` becomes `999+`. The default limit is largely arbitrary and intended to\\nprevent unexpected overflow. You should choose a limit based on your specific use case and consider\\nthe user's experience. For example, someone looking for a new job finds there are `99+` new\\nopportunities. Or perhaps someone returns from extended leave and is overwhelmed by `999+` unread\\nmessages on their first day back.\\n```tsx\\nimport * as React from 'react';\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\n\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst columnStyles = createStyles({\\n  boxSizing: 'border-box',\\n  display: 'flex',\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n});\\n\\nconst controls = createStyles({\\n  boxSizing: 'border-box',\\n  borderBottom: `solid 1px ${system.color.border.divider}`,\\n  display: 'flex',\\n  gap: system.space.x1,\\n  padding: system.space.x1,\\n});\\n\\nconst defaultBackground = createStyles({\\n  boxSizing: 'border-box',\\n  backgroundColor: system.color.bg.alt.soft,\\n  padding: system.space.x4,\\n});\\n\\nconst inverseBackground = createStyles({\\n  boxSizing: 'border-box',\\n  backgroundColor: system.color.bg.primary.default,\\n  padding: system.space.x4,\\n});\\n\\nconst initialCount = 1;\\n\\nexport const CustomLimit = () => {\\n  const [count, setCount] = React.useState(initialCount);\\n\\n  return (\\n    <div className={columnStyles}>\\n      <div className={controls}>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(count + 1)}>\\n          Increment\\n        </TertiaryButton>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(initialCount)}>\\n          Reset\\n        </TertiaryButton>\\n      </div>\\n      <div className={defaultBackground}>\\n        <CountBadge count={count} limit={10} />\\n      </div>\\n      <div className={inverseBackground}>\\n        <CountBadge count={count} limit={10} variant=\\\"inverse\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n### Accessibility\\n\\n#### Notification Badge\\n\\nNotifications are a major use case for `CountBadge`. When the `CountBadge` value is updated in\\nreal-time, screen readers must be supported with an `AriaLiveRegion` that will automatically\\ndescribe the change in the number of notifications. If the web app only updates `CountBadge` as part\\nof another screen update, then this use of `AriaLiveRegion` is unnecessary and not recommended.\\n\\n- `Tooltip` is set on the `SecondaryButton` automatically applying the `aria-label` to the button.\\n- `aria-describedby` property is conditionally set on the `SecondaryButton` when greater than zero\\n  referencing a unique `id` for the `CountBadge` value .\\n- `AriaLiveRegion` is used around the `CountBadge`, enabling screen readers to monitor changes in\\n  value.\\n- `aria-label` string is conditionally set on `AriaLiveRegion` when greater than zero, describing\\n  \\\"New notification\\\"\\n```tsx\\nimport * as React from 'react';\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles, cssVar} from '@workday/canvas-kit-styling';\\nimport {notificationsIcon} from '@workday/canvas-system-icons-web';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nfunction negate(value: string, fallback?: string) {\\n  return `calc(${cssVar(value, fallback)} * -1)`;\\n}\\n\\nconst container = createStyles({\\n  boxSizing: 'border-box',\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n});\\n\\nconst controls = createStyles({\\n  boxSizing: 'border-box',\\n  gap: system.space.x2,\\n  padding: system.space.x1,\\n});\\n\\nconst notificationContainerStyles = createStyles({\\n  boxSizing: 'border-box',\\n  position: 'relative',\\n});\\n\\nconst countBadgeStyles = createStyles({\\n  boxSizing: 'border-box',\\n  position: 'absolute',\\n  top: negate(system.space.x1),\\n  insetInlineEnd: negate(system.space.x1),\\n});\\n\\n// Testing notes (Aug. 30, 2024):\\n// Windows 11\\n// JAWS 2024 + Chrome / Edge: \\\"New notifications\\\" once, then only the count change \\\"2\\\"\\n// JAWS 2024 + FF: \\\"New notifications\\\" once, then describes nothing\\n// NVDA + Chrome / Edge: Consistently describes \\\"{X} New notifications\\\"\\n// NVDA + FF: Consistently describes count value only \\\"{X}\\\"\\n// macOS v14.6.1\\n// VoiceOver + Chrome / Safari: Consistently describes \\\"New notifications {X}\\\"\\nexport const NotificationBadge = () => {\\n  const [count, setCount] = React.useState(4);\\n  const badgeID = useUniqueId();\\n\\n  return (\\n    <Flex cs={container}>\\n      <Flex cs={controls}>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(count + 1)}>\\n          Add Notification\\n        </TertiaryButton>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(0)}>\\n          Clear\\n        </TertiaryButton>\\n      </Flex>\\n      <Flex>\\n        <span className={notificationContainerStyles}>\\n          <Tooltip title=\\\"Notifications\\\">\\n            <SecondaryButton\\n              size=\\\"medium\\\"\\n              icon={notificationsIcon}\\n              aria-describedby={!!count ? badgeID : undefined}\\n            />\\n          </Tooltip>\\n          <AriaLiveRegion aria-label={!!count ? 'New notifications' : undefined}>\\n            {!!count && <CountBadge id={badgeID} count={count} limit={100} cs={countBadgeStyles} />}\\n          </AriaLiveRegion>\\n        </span>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nCount Badge supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"action-bar\": {\n      \"title\": \"Components/Buttons/Action Bar\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-buttons-action-bar--docs\",\n      \"mdxPath\": \"modules/react/action-bar/stories/ActionBar.mdx\",\n      \"mdxProse\": \"# Canvas Kit Action Bar\\n\\nAction Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nthat contains primary and secondary actions related to a page or task.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`ActionBar` includes a container `ActionBar` component and the following subcomponent:\\n`ActionBar.List` which should contains `ActionBar.Item`.\\n\\nIn a basic example of an `ActionBar` there are two buttons. The primary action button should be used\\nonly once and left aligned if content is left to right, followed by secondary buttons. Tertiary\\nbuttons should not be used in the Action Bar.\\n```tsx\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Basic = () => {\\n  return (\\n    <ActionBar>\\n      <ActionBar.List position=\\\"relative\\\" as=\\\"section\\\" aria-label=\\\"Action Bar\\\">\\n        <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>\\n          First Action\\n        </ActionBar.Item>\\n        <ActionBar.Item>Second Action</ActionBar.Item>\\n      </ActionBar.List>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n### Icons Example\\n\\n`ActionBar.Item` renders a `SecondaryButton` as default, so it's possible to use other Button props\\nwith `ActionBar.Item` such as `icon` or `size`.\\n```tsx\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\nimport {notificationsIcon, alarmClockIcon} from '@workday/canvas-system-icons-web';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Icons = () => {\\n  return (\\n    <ActionBar>\\n      <ActionBar.List position=\\\"relative\\\" as=\\\"section\\\" aria-label=\\\"Action Bar\\\">\\n        <ActionBar.Item as={PrimaryButton} icon={notificationsIcon}>\\n          First Action\\n        </ActionBar.Item>\\n        <ActionBar.Item icon={alarmClockIcon}>Second Action</ActionBar.Item>\\n      </ActionBar.List>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n### Delete Action Example\\n\\n`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,\\nsuch as `DeleteButton`, by using `as` prop.\\n```tsx\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\n\\nexport const DeleteAction = () => {\\n  return (\\n    <ActionBar>\\n      <ActionBar.List position=\\\"relative\\\" as=\\\"section\\\" aria-label=\\\"Action Bar\\\">\\n        <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>\\n        <ActionBar.Item>Second Action</ActionBar.Item>\\n      </ActionBar.List>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n### Overflow Example\\n\\n`ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3\\nactions, the other remaining actions should be placed into an Overflow Menu that is launched by\\nclicking the Overflow Button.\\n\\nAlso, ActionBar is a responsive component based on the width of its container. If the rendered\\nactions exceed the width of the `ActionBar.List`, an overflow menu will be rendered. This only works\\nagainst the dynamic API where you give the `ActionBarModel` an array of items to be rendered. The\\ndynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires\\neither an `id` on each item object or a `getId` function that returns an identifier based on the\\nitem. The below example uses an `id` property on each item.\\n\\nThe dynamic API takes in any object, but since nothing is known about your object, a\\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\\nshould render.\\n```tsx\\nimport React from 'react';\\nimport {breakpoints} from '@workday/canvas-kit-react/common';\\nimport {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\n\\ntype MyActionItem = {\\n  id: string;\\n  text: React.ReactNode;\\n};\\n\\nexport const OverflowActionBar = () => {\\n  const [items] = React.useState<MyActionItem[]>([\\n    {id: 'first', text: 'First Action'},\\n    {id: 'second', text: 'Second Action'},\\n    {id: 'third', text: 'Third Action'},\\n    {id: 'fourth', text: 'Fourth Action'},\\n    {id: 'fifth', text: 'Fifth Action'},\\n  ]);\\n\\n  const model = useActionBarModel({items});\\n  const [containerWidth, setContainerWidth] = React.useState<string | number>('100%');\\n\\n  return (\\n    <div>\\n      <Box maxWidth={containerWidth} marginBottom=\\\"xl\\\">\\n        <ActionBar model={model}>\\n          <ActionBar.List\\n            position=\\\"relative\\\"\\n            as=\\\"section\\\"\\n            aria-label=\\\"Action Bar\\\"\\n            overflowButton={<ActionBar.OverflowButton aria-label=\\\"More actions\\\" />}\\n          >\\n            {(item: MyActionItem, index) => (\\n              <ActionBar.Item\\n                as={index === 0 ? PrimaryButton : undefined}\\n                onClick={() => console.log(item.id)}\\n              >\\n                {item.text}\\n              </ActionBar.Item>\\n            )}\\n          </ActionBar.List>\\n          <ActionBar.Menu.Popper>\\n            <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>\\n              <ActionBar.Menu.List>\\n                {(item: MyActionItem) => (\\n                  <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\\n                    {item.text}\\n                  </ActionBar.Menu.Item>\\n                )}\\n              </ActionBar.Menu.List>\\n            </ActionBar.Menu.Card>\\n          </ActionBar.Menu.Popper>\\n        </ActionBar>\\n      </Box>\\n      <footer>\\n        <h4>Change Action Bar container size</h4>\\n        <SegmentedControl onSelect={data => setContainerWidth(data.id)}>\\n          <SegmentedControl.List role=\\\"group\\\" aria-label=\\\"container width control\\\" marginBottom=\\\"m\\\">\\n            <SegmentedControl.Item data-id=\\\"100%\\\">100%</SegmentedControl.Item>\\n            <SegmentedControl.Item data-id={`${breakpoints.m}px`}>Small</SegmentedControl.Item>\\n            <SegmentedControl.Item data-id=\\\"420px\\\">420px</SegmentedControl.Item>\\n            <SegmentedControl.Item data-id={`${breakpoints.s}px`}>\\n              Extra Small\\n            </SegmentedControl.Item>\\n          </SegmentedControl.List>\\n        </SegmentedControl>\\n        <p>Selected: {containerWidth}</p>\\n      </footer>\\n    </div>\\n  );\\n};\\n```\\n\\nThe number of visible buttons can also be adjusted by using the model's `maximumVisible` attribute.\\nYou can change it from the default of 3 to any number greater than 1 and less than items.length.\\n```tsx\\nimport React from 'react';\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\n\\ntype MyActionItem = {\\n  id: string;\\n  text: React.ReactNode;\\n};\\n\\nexport const OverflowActionBarCustomButtonCount = () => {\\n  const [items] = React.useState<MyActionItem[]>([\\n    {id: 'view', text: 'View'},\\n    {id: 'edit', text: 'Edit'},\\n    {id: 'delete', text: 'Delete'},\\n  ]);\\n\\n  return (\\n    <ActionBar items={items} maximumVisible={2}>\\n      <ActionBar.List\\n        as=\\\"section\\\"\\n        aria-label=\\\"Custom button count overflow example\\\"\\n        position=\\\"relative\\\"\\n        overflowButton={<ActionBar.OverflowButton aria-label=\\\"More actions\\\" />}\\n      >\\n        {(item: MyActionItem) => (\\n          <ActionBar.Item onClick={() => console.log(item.id)}>{item.text}</ActionBar.Item>\\n        )}\\n      </ActionBar.List>\\n      <ActionBar.Menu.Popper>\\n        <ActionBar.Menu.Card>\\n          <ActionBar.Menu.List>\\n            {(item: MyActionItem) => (\\n              <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\\n                {item.text}\\n              </ActionBar.Menu.Item>\\n            )}\\n          </ActionBar.Menu.List>\\n        </ActionBar.Menu.Card>\\n      </ActionBar.Menu.Popper>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nGrouping the actions into an HTML `<section>` element with an `aria-label` string is recommended.\\nThis can be useful for helping screen reader users quickly jump down to the actions at the bottom of\\na page.\\n\\nRefer to [Button](/components/buttons/button/#accessibility) and\\n[Menus](/components/popups/menu/#accessibility) for more information about accessibiliy of these\\ncomponents in the Action Bar.\\n\\n## Component API\\n\\n\"\n    },\n    \"status-indicator\": {\n      \"title\": \"Preview/Status Indicator\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs\",\n      \"mdxPath\": \"modules/preview-react/status-indicator/stories/StatusIndicator.mdx\",\n      \"mdxProse\": \"# Canvas Kit Status Indicator\\n\\nStatus Indicators help the user quickly identify the status of a task, action, or page element.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`StatusIndicator` includes a container `StatusIndicator` component and the following subcomponents\\nwhich can be composed in a variety of ways: `StatusIndicator.Label` and `StatusIndicator.Icon`.\\n\\nA basic `StatusIndicator` with a `StatusIndicator.Label` will render text with a gray background and\\nlow emphasis.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\n\\nexport const Basic = () => {\\n  return (\\n    <StatusIndicator>\\n      <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\\n    </StatusIndicator>\\n  );\\n};\\n```\\n\\n### Emphasis\\n\\nSet the `emphasis` prop of `StatusIndicator` to adjust the contrast between the text and background\\ncolor. Emphasis is typically used to convey more visual urgency.\\n\\n`emphasis` accepts `high` or `low`.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nexport const Emphasis = () => {\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <StatusIndicator emphasis=\\\"high\\\">\\n        <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>\\n      </StatusIndicator>\\n      <StatusIndicator emphasis=\\\"low\\\">\\n        <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>Low Emphasis</StatusIndicator.Label>\\n      </StatusIndicator>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Icon\\n\\nUse `StatusIndicator.Icon` to add an icon to the `StatusIndicator` as a visual decorator. The\\nposition of the icon may be adjusted depending on where you place it in the markup.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nexport const Icon = () => {\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <StatusIndicator>\\n        <StatusIndicator.Icon aria-label=\\\"unpublished\\\" icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\\n      </StatusIndicator>\\n      <StatusIndicator variant=\\\"positive\\\">\\n        <StatusIndicator.Label>published</StatusIndicator.Label>\\n        <StatusIndicator.Icon aria-label=\\\"published\\\" icon={uploadCloudIcon} />\\n      </StatusIndicator>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Overflow\\n\\nWe **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its\\nmaximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we\\nsuggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the\\noverflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`\\nof `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {calc, createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst statusIndicatorStyles = createStyles({\\n  maxWidth: calc.add(system.space.x20, system.space.x4),\\n});\\n\\nexport const Overflow = () => {\\n  return (\\n    <OverflowTooltip>\\n      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>\\n        <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>\\n          Your workbook is currently in process of saving\\n        </StatusIndicator.Label>\\n      </StatusIndicator>\\n    </OverflowTooltip>\\n  );\\n};\\n```\\n\\n### Variants\\n\\nSet the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the\\nfollowing values:\\n\\n- `gray`\\n- `orange`\\n- `blue`\\n- `green`\\n- `red`\\n- `transparent`\\n\\nThe background color dictated by the `variant` will be dark or light based on the `emphasis`.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  parentContainerStyles: createStyles({\\n    gap: system.space.x4,\\n    flexDirection: 'column',\\n  }),\\n  innerContainerStyles: createStyles({\\n    gap: system.space.x4,\\n  }),\\n};\\n\\nexport const Variants = () => {\\n  return (\\n    <Flex cs={styleOverrides.parentContainerStyles}>\\n      <Flex cs={styleOverrides.innerContainerStyles}>\\n        <StatusIndicator>\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"caution\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"info\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"positive\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"critical\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"transparent\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n      </Flex>\\n      <Flex cs={styleOverrides.innerContainerStyles}>\\n        <StatusIndicator emphasis=\\\"high\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"caution\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"info\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"positive\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"critical\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"transparent\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nStatus Indicator and its subcomponents support custom styling via the `cs` prop. For more\\ninformation, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"segmented-control\": {\n      \"title\": \"Preview/Segmented Control\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs\",\n      \"mdxPath\": \"modules/preview-react/segmented-control/stories/SegmentedControl.mdx\",\n      \"mdxProse\": \"# Canvas Kit Segmented Control\\n\\nSegmented Control is a\\n[compound component](/get-started/for-developers/documentation/compound-components/) that represents\\na linear group of multiple buttons allowing the selection of a specific value.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`SegmentedControl` includes a container `SegmentedControl` component and the following\\nsubcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.\\n\\nThe example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered\\nusing a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only\\none button can be active at a time.\\n```tsx\\nimport React from 'react';\\n\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Basic = () => {\\n  const [viewType, setViewType] = React.useState('table');\\n\\n  return (\\n    <>\\n      <SegmentedControl initialValue={viewType} onSelect={data => setViewType(data.id)}>\\n        <SegmentedControl.List aria-label=\\\"View type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon} tooltipProps={{title: 'Table'}} />\\n          <SegmentedControl.Item\\n            data-id=\\\"list-view\\\"\\n            icon={listViewIcon}\\n            tooltipProps={{title: 'List'}}\\n          />\\n          <SegmentedControl.Item\\n            data-id=\\\"list-detail\\\"\\n            icon={listDetailIcon}\\n            tooltipProps={{title: 'Detail'}}\\n          />\\n          <SegmentedControl.Item\\n            data-id=\\\"diagrams\\\"\\n            icon={pieChartIcon}\\n            tooltipProps={{title: 'Diagram'}}\\n          />\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: {viewType}\\n      </BodyText>\\n    </>\\n  );\\n};\\n```\\n\\nWe **strongly** discourage including more than four buttons in a single `SegmentedControl`.\\n\\n### Accessibility\\n\\nOur `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,\\nwrapped inside of a `<div>` with an explicit ARIA `role=\\\"group\\\"`. This is equivalent to an HTML\\n`<fieldset>` element, and useful for screen readers to describe the relationship between the\\nbuttons.\\n\\n- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current\\n  state to screen readers.\\n- Providing your own `aria-label`string to `SegmentedControl.List` is recommended for describing the\\n  purpose of the component.\\n\\n#### Screen Reader Experience\\n\\nWhen users interact with a `SegmentedControl` using screen readers:\\n\\n- The group context is announced (e.g., \\\"View options, group\\\" when using\\n  `aria-label=\\\"View options\\\"`)\\n- Each button announces its text/label, \\\"toggle button\\\" role, and pressed/unpressed state (e.g.,\\n  \\\"List view, toggle button, pressed\\\" or \\\"Grid view, toggle button, not pressed\\\")\\n- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and\\n  state\\n- When a button is activated, screen readers should announce the new state\\n\\nRefer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about\\naccessibility of these components.\\n\\n### Variations\\n\\n`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`\\ncomponents have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.\\n\\nAll `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same\\nvariation.\\n\\n#### Icon-Only\\n\\nTo render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do\\nnot provide it with text content. Refer to the [basic example](#basic-example) above for an instance\\nof an icon-only `SegmentedControl`.\\n\\nThe icon-only variation is the only variation which supports a vertical orientation in addition to\\nthe default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`\\nto configure the component to render vertically.\\n```tsx\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Vertical = () => (\\n  <SegmentedControl orientation=\\\"vertical\\\">\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon} tooltipProps={{title: 'Table'}} />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-view\\\"\\n        icon={listViewIcon}\\n        tooltipProps={{title: 'List'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-detail\\\"\\n        icon={listDetailIcon}\\n        tooltipProps={{title: 'Detail'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"diagram\\\"\\n        icon={pieChartIcon}\\n        tooltipProps={{title: 'Diagram'}}\\n      />\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n#### Text-Only\\n\\nTo render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and\\nprovide it with text content.\\n```tsx\\nimport React from 'react';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\n\\nexport const TextOnly = () => (\\n  <SegmentedControl>\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\">Table</SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"list\\\">List</SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"diagram\\\">Diagram</SegmentedControl.Item>\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n#### Text-and-Icon\\n\\nTo render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and\\nprovide it with text content.\\n```tsx\\nimport React from 'react';\\nimport {gridIcon, listViewIcon, pieChartIcon} from '@workday/canvas-system-icons-web';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\n\\nexport const TextAndIcon = () => (\\n  <SegmentedControl>\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n        Table\\n      </SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"list\\\" icon={listViewIcon}>\\n        List\\n      </SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"diagram\\\" icon={pieChartIcon}>\\n        Diagram\\n      </SegmentedControl.Item>\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n### Sizes\\n\\n`SegmentedControl` accepts a `size` prop which supports the following values:\\n\\n- `small`\\n- `medium` (Default)\\n- `large`\\n```tsx\\nimport React from 'react';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Sizes = () => (\\n  <>\\n    <Box>\\n      <BodyText size=\\\"medium\\\" fontWeight=\\\"bold\\\" marginTop={0}>\\n        Small\\n      </BodyText>\\n      <SegmentedControl size=\\\"small\\\">\\n        <SegmentedControl.List aria-label=\\\"View type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n            Table\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n            List\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n            Detail\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n            Diagram\\n          </SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </Box>\\n    <Box>\\n      <BodyText size=\\\"medium\\\" fontWeight=\\\"bold\\\">\\n        Medium\\n      </BodyText>\\n      <SegmentedControl size=\\\"medium\\\">\\n        <SegmentedControl.List aria-label=\\\"View type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n            Table\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n            List\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n            Detail\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n            Diagram\\n          </SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </Box>\\n    <Box>\\n      <BodyText size=\\\"medium\\\" fontWeight=\\\"bold\\\">\\n        Large\\n      </BodyText>\\n      <SegmentedControl size=\\\"large\\\">\\n        <SegmentedControl.List aria-label=\\\"Content view type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n            Table\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n            List\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n            Detail\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n            Diagram\\n          </SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </Box>\\n  </>\\n);\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.\\n```tsx\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Disabled = () => (\\n  <SegmentedControl disabled>\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon} tooltipProps={{title: 'Table'}} />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-view\\\"\\n        icon={listViewIcon}\\n        tooltipProps={{title: 'List'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-detail\\\"\\n        icon={listDetailIcon}\\n        tooltipProps={{title: 'Detail'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"diagrams\\\"\\n        icon={pieChartIcon}\\n        tooltipProps={{title: 'Diagram'}}\\n      />\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\n\\nexport const RTL = () => (\\n  <CanvasProvider dir=\\\"rtl\\\">\\n    <SegmentedControl initialValue=\\\"list-detail\\\">\\n      <SegmentedControl.List aria-label=\\\"View type\\\">\\n        <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n          \u05E9\u05D5\u05DC\u05D7\u05DF\\n        </SegmentedControl.Item>\\n        <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n          \u05E8\u05E9\u05D9\u05DE\u05D4\\n        </SegmentedControl.Item>\\n        <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n          \u05E4\u05E8\u05D8\u05D9\u05DD\\n        </SegmentedControl.Item>\\n        <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n          \u05EA\u05E8\u05E9\u05D9\u05DD\\n        </SegmentedControl.Item>\\n      </SegmentedControl.List>\\n    </SegmentedControl>\\n  </CanvasProvider>\\n);\\n```\\n\\n### Dynamic Items\\n\\n`SegmentedControl` supports a\\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where instead\\nof statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in\\nthe `model` state and provide a render function to display the items.\\n```tsx\\nimport React from 'react';\\nimport {\\n  SegmentedControl,\\n  useSegmentedControlModel,\\n} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Dynamic = () => {\\n  const [viewType, setViewType] = React.useState('table');\\n\\n  const model = useSegmentedControlModel({\\n    items: [\\n      {id: 'table', icon: gridIcon, label: 'Table'},\\n      {id: 'list', icon: listViewIcon, label: 'List'},\\n      {id: 'detail', icon: listDetailIcon, label: 'Detail'},\\n      {id: 'diagram', icon: pieChartIcon, label: 'Diagram'},\\n    ],\\n    size: 'small',\\n    initialValue: viewType,\\n    onSelect: data => {\\n      console.log(`${data.id} is selected`);\\n      setViewType(data.id);\\n    },\\n  });\\n\\n  return (\\n    <SegmentedControl model={model}>\\n      <SegmentedControl.List aria-label=\\\"View type\\\">\\n        {item => (\\n          <SegmentedControl.Item data-id={item.id} icon={item.icon}>\\n            {item.label}\\n          </SegmentedControl.Item>\\n        )}\\n      </SegmentedControl.List>\\n    </SegmentedControl>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"radio\": {\n      \"title\": \"Preview/Inputs/Radio\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs\",\n      \"mdxPath\": \"modules/preview-react/radio/stories/Radio.mdx\",\n      \"mdxProse\": \"# Canvas Kit Radio\\n\\nRadio Buttons allow a user to select one value from a predefined list of 7 or fewer options.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/radio-buttons)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nOur radio component includes a `RadioGroup` container and `RadioGroup.RadioButton`, which renders an\\nindividual radio button. Nest related `RadioGroup.RadioButton` buttons within a `RadioGroup` and\\nprovide a `name` prop to the `RadioGroup` to group the radio buttons together. Each\\n`RadioGroup.Radio` must have a unique `value`. This value is used in conjunction with the `value`\\nprop set on the `RadioGroup` to determine which radio button is selected. To tie it all together,\\nprovide an `onChange` handler to the `RadioGroup` to track the selected value as it changes.\\n\\n`RadioGroup` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\\n`useFieldset` prop is set to `true` to meet accessibility standards. This ensures the `label` text\\nfrom `FormField` is attached to the `RadioGroup` and read out as a group for voiceover.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst formfieldInputStyles = createStyles({\\n  width: px2rem(200),\\n});\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\">\\n      <FormFieldGroup>\\n        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.Field>\\n          <FormFieldGroup.List\\n            cs={formfieldInputStyles}\\n            as={RadioGroup}\\n            name=\\\"pizza-crust\\\"\\n            onChange={handleChange}\\n            value={value}\\n          >\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n              Deep dish\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n              Thin\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n              Gluten free\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n              Cauliflower\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"custom\\\">\\n              Butter - the best thing to put on bread\\n            </FormFieldGroup.Input>\\n          </FormFieldGroup.List>\\n        </FormFieldGroup.Field>\\n      </FormFieldGroup>\\n      Value selected: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\nOur example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the\\nvalue of the `RadioGroup`.\\n\\n`RadioGroup` and `RadioGroup.Radio` support keyboard navigation through the proper use of WAI-ARIA\\n[properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role#associated_wai-aria_roles_states_and_properties).\\n\\n### Inverse\\n\\nSet the `variant` prop of `RadioGroup.RadioButton` to `inverse` to ensure proper contrast on dark\\nbackgrounds.\\n```tsx\\nimport React from 'react';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  containerStyles: createStyles({\\n    backgroundColor: system.color.bg.primary.default,\\n    padding: system.space.x4,\\n  }),\\n  formFieldStyles: createStyles({\\n    legend: {\\n      color: system.color.text.inverse,\\n    },\\n  }),\\n};\\n\\nexport const Inverse = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Box cs={styleOverrides.containerStyles}>\\n      <RadioGroup name=\\\"crust-inverse\\\" onChange={handleChange} value={value}>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"deep-dish\\\">\\n          Deep dish\\n        </RadioGroup.RadioButton>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"thin\\\">\\n          Thin\\n        </RadioGroup.RadioButton>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"gluten-free\\\">\\n          Gluten free\\n        </RadioGroup.RadioButton>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"cauliflower\\\">\\n          Cauliflower\\n        </RadioGroup.RadioButton>\\n      </RadioGroup>\\n    </Box>\\n  );\\n};\\n```\\n\\n### Radio Group with No Value\\n\\nOmit the `value` prop from `RadioGroup` to render the group with no selected\\n`RadioGroup.RadioButton`.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const NoValue = () => {\\n  const [value, setValue] = React.useState<string | number>(0);\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup>\\n      <FormFieldGroup.Label as=\\\"legend\\\">Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.List\\n        as={RadioGroup}\\n        name=\\\"crust-no-value\\\"\\n        onChange={handleChange}\\n        value={value}\\n      >\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n          Deep dish\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n          Thin\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n          Gluten free\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n          Cauliflower\\n        </FormFieldGroup.Input>\\n      </FormFieldGroup.List>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\n`RadioGroup.RadioButton` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html).\\nIt will forward `ref` to its underlying `<input type=\\\"radio\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n  const glutenFreeRef = React.useRef(null);\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  const handleClick = () => {\\n    glutenFreeRef.current.click();\\n  };\\n\\n  return (\\n    <>\\n      <FormFieldGroup>\\n        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.List as={RadioGroup} name=\\\"crust-ref\\\" onChange={handleChange} value={value}>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\" ref={glutenFreeRef}>\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n      </FormFieldGroup>\\n      <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup orientation=\\\"horizontalStart\\\">\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-label\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping `FormField` to `true` to indicate that the field is\\nrequired. Labels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState<string | number>('');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup isRequired={true}>\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.List\\n        as={RadioGroup}\\n        name=\\\"crust-required\\\"\\n        onChange={handleChange}\\n        value={value}\\n        aria-describedby=\\\"choose-crust\\\"\\n      >\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n          Deep dish\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n          Thin\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n          Gluten free\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n          Cauliflower\\n        </FormFieldGroup.Input>\\n      </FormFieldGroup.List>\\n      <FormFieldGroup.Hint>You must choose a crust</FormFieldGroup.Hint>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of `RadioGroup.RadioButton` to prevent users from interacting with it. Be\\ncareful not to disable a pre-selected radio button as this will block keyboard access to the entire\\n`RadioGroup`.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup>\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-disabled\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} disabled value=\\\"gluten-free\\\">\\n            Gluten free (sold out)\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Custom Radio Button\\n\\nUse `RadioGroup.Label` instead of `RadioGroup.RadioButton` if you need direct access to the label\\nand the radio input. This will allow you to apply custom styling to the text and radio input.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  formfieldInputStyles: createStyles({\\n    width: px2rem(200),\\n  }),\\n  radioGroupLabelTextStyles: createStyles({\\n    color: system.color.fg.default,\\n  }),\\n};\\n\\nexport const Custom = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\">\\n      <FormFieldGroup>\\n        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.Field>\\n          <FormFieldGroup.List\\n            as={RadioGroup}\\n            name=\\\"pizza-crust-custom\\\"\\n            onChange={handleChange}\\n            cs={styleOverrides.formfieldInputStyles}\\n            value={value}\\n          >\\n            <RadioGroup.Label>\\n              <FormFieldGroup.Input as={RadioGroup.Label.Input} value=\\\"deep-dish\\\" />\\n              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>\\n                Deep dish\\n              </RadioGroup.Label.Text>\\n            </RadioGroup.Label>\\n            <RadioGroup.Label>\\n              <FormFieldGroup.Input as={RadioGroup.Label.Input} value=\\\"gluten-free\\\" />\\n              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>\\n                Gluten free\\n              </RadioGroup.Label.Text>\\n            </RadioGroup.Label>\\n            <RadioGroup.Label>\\n              <FormFieldGroup.Input as={RadioGroup.Label.Input} value=\\\"cauliflower\\\" />\\n              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>\\n                Cauliflower\\n              </RadioGroup.Label.Text>\\n            </RadioGroup.Label>\\n          </FormFieldGroup.List>\\n        </FormFieldGroup.Field>\\n      </FormFieldGroup>\\n      Value selected: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Standalone Radio Button\\n\\nUse `StyledRadioButton` when you want a styled radio button on its own without using `RadioGroup`.\\nYou will need to handle behavior and accessibility.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const StandaloneRadio = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\">\\n      <FormFieldGroup as=\\\"fieldset\\\">\\n        <FormFieldGroup.Label as=\\\"legend\\\">Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <Flex gap=\\\"m\\\">\\n          <Flex as=\\\"label\\\" gap=\\\"xs\\\">\\n            <FormFieldGroup.Input\\n              as={StyledRadioButton}\\n              onChange={handleChange}\\n              value=\\\"deep-dish\\\"\\n              name=\\\"pizza-crust-standalone\\\"\\n              checked={value === 'deep-dish'}\\n            />\\n            Deep dish\\n          </Flex>\\n          <Flex as=\\\"label\\\" gap=\\\"xs\\\">\\n            <FormFieldGroup.Input\\n              as={StyledRadioButton}\\n              onChange={handleChange}\\n              value=\\\"gluten-free\\\"\\n              checked={value === 'gluten-free'}\\n              name=\\\"pizza-crust-standalone\\\"\\n            />\\n            Gluten free\\n          </Flex>\\n        </Flex>\\n      </FormFieldGroup>\\n      Value selected: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\nUse `RadioGroup.Label` when you want more control styling the text and radio input but still want\\nsome behavior handled for you.\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping `FormField` to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the `RadioGroup` to the alert or error state, respectively. You\\nwill also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility\\nstandards. You must set an `aria-describedby` attribute on the `RadioGroup` element that matches the\\nvalue of `hintId` set on the `FormField` element. These attributes ensure that the alert message is\\nassociated to the `RadioGroup` and read out by voiceover.\\n\\n#### Caution\\n\\nUse the alert state when a selection is valid but there is additional information.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <FormFieldGroup error=\\\"caution\\\" id=\\\"hint-alert\\\">\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-alert\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n        <FormFieldGroup.Hint>Deep dish is an extra $2.99.</FormFieldGroup.Hint>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n#### Error\\n\\nUse the error state when the selection is no longer valid.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <FormFieldGroup error=\\\"error\\\">\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-error\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n        <FormFieldGroup.Hint>Deep dish is currently sold out.</FormFieldGroup.Hint>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### React Hook Form\\n\\nUsing a form library like [React Hook Form](https://www.react-hook-form.com/) is a common use case.\\nReference this [CodeSandbox](https://codesandbox.io/s/radio-preview-with-react-hook-form-stn5vr) on\\nhow to use `RadioGroup` with React Hook Form.\\n\\n### Custom Styles\\n\\nRadio and its subcomponents support custom styling via the `cs` prop. For more information, check\\nour\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"pill\": {\n      \"title\": \"Preview/Pill\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-pill--docs\",\n      \"mdxPath\": \"modules/preview-react/pill/stories/Pill.mdx\",\n      \"mdxProse\": \"# Canvas Kit Pill\\n\\n`Pill`s are static or interactive indicators that allow users to input, filter, or label\\ninformation.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n`Pill`s are used to visually label objects on a page for quick recognition. They\u2019re offered as both\\nstatic (read-only) and interactive elements. They allow users to filter a list or table, or label\\ninformation to help with scanning and organization.\\n\\n### Basic Pills\\n\\nBy default a Pill is considered interactive. All leading elements (icons or avatars) are intended to\\nbe descriptive, helping support the label. Do not rely on the leading element to indicate the\\ninteraction behavior.\\n\\n#### Icon\\n\\nYou can render an icon inside the `Pill` with `Pill.Icon`. It will render a `plusIcon` by default,\\nbut it can be customized by providing an icon to the `icon` prop. Because it uses `SystemIcon` under\\nthe hood, you also have access to all `SystemIconProps`.\\n\\n#### Accessibility\\n\\nYou must provide an `aria-label` to the `Pill.Icon` for proper accessibility.\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\n\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const Basic = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill onClick={() => setText('The first pill is clicked!')}>\\n          <Pill.Icon aria-label=\\\"Add user\\\" />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n        <Pill disabled>\\n          <Pill.Icon aria-label=\\\"Add user\\\" />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n#### Avatar\\n\\nYou can render an avatar image inside the `Pill` with `Pill.Avatar`. It should appear before the\\n`Pill` text. Because it uses `Avatar` under the hood, you also have access to all `AvatarProps`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithAvatar = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill onClick={() => setText('The first pill is clicked!')}>\\n          <Pill.Avatar name=\\\"Regina Skeltor\\\" url={testAvatar} />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n        <Pill disabled>\\n          <Pill.Avatar name=\\\"Regina Skeltor\\\" />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n#### Count\\n\\nThe count appears after the label. It is usually associated with the label. If you have a category,\\nthe count will directly correlate to that category.\\n```tsx\\nimport React from 'react';\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithCount = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill onClick={() => setText('The first pill is clicked!')}>\\n          Shoes\\n          <Pill.Count>30</Pill.Count>\\n        </Pill>\\n        <Pill disabled>\\n          Shoes\\n          <Pill.Count>30</Pill.Count>\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n### Read Only\\n\\nThe `readOnly` variant is a non-interactive element that is used to display information.\\n\\nYou can define a read only `Pill` by providing a `variant='readOnly'` prop.\\n```tsx\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithReadOnly = () => (\\n  <div className={flexStyles} id=\\\"read-only-list\\\">\\n    <Pill variant=\\\"readOnly\\\">Read-only</Pill>\\n    <Pill variant=\\\"readOnly\\\" maxWidth={150}>\\n      Read-only but with super long text in case you want to read a paragraph in a Pill which we\\n      don't recommend\\n    </Pill>\\n  </div>\\n);\\n```\\n\\n### Removable Pills\\n\\nRemovable `Pill`s display an `X` icon after the label. They have a smaller, more specific focus\\nstate and click target to be more intentional about their actions and to avoid unintended removal.\\n\\nYou can define a removable `Pill` by providing a `variant='removable'` prop.\\n\\n```tsx\\n<Pill variant=\\\"removable\\\">\\n  Pink Shirts\\n  <Pill.IconButton onClick={() => console.warn('clicked')} />\\n</Pill>\\n```\\n\\nIn this case, we use a `Pill.IconButton` because the `X` becomes the focusable and clickable\\nelement.\\n\\nThe default icon for `Pill.IconButton` is `xSmallIcon` but this can also be overwritten by passing\\nan `icon` prop to `Pill.IconButton`\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithRemovable = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill variant=\\\"removable\\\">\\n          <Pill.Label>Pink Shirts</Pill.Label>\\n          <Pill.IconButton\\n            aria-label=\\\"Remove\\\"\\n            onClick={() => setText('The first pill is clicked!')}\\n          />\\n        </Pill>\\n        <Pill variant=\\\"removable\\\">\\n          <Pill.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n          <Pill.Label>Carolyn Grimaldi</Pill.Label>\\n          <Pill.IconButton\\n            aria-label=\\\"Remove\\\"\\n            onClick={() => setText('The second pill is clicked!')}\\n          />\\n        </Pill>\\n        <Pill variant=\\\"removable\\\" disabled>\\n          <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>\\n          <Pill.IconButton aria-label=\\\"Remove\\\" />\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n### List of Pills\\n\\n`Pill`s can often represent multiple pieces of information such as a filtered list of categories or\\nskills.\\n\\nIn order to achieve this, use our `Flex` component to wrap each `Pill` and space them out\\naccordingly.\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst data = [\\n  'Shoes',\\n  'Pants',\\n  'Dress Shoes',\\n  'Color',\\n  'Accessories',\\n  'Luxury',\\n  'Casual',\\n  'Hats',\\n  'Beanies',\\n  'Glasses',\\n  'Jewelry',\\n];\\n\\nconst flexWrapStyles = createStyles({\\n  display: 'flex',\\n  flexWrap: 'wrap',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithList = () => {\\n  const [items, setItems] = React.useState(data);\\n\\n  return (\\n    <div className={flexWrapStyles}>\\n      {items.map((cat, index) => {\\n        return (\\n          <Pill key={index} variant=\\\"removable\\\">\\n            <Pill.Label>{cat}</Pill.Label>\\n            <Pill.IconButton\\n              aria-label=\\\"Remove\\\"\\n              onClick={() => setItems(items.filter(i => i !== cat))}\\n            />\\n          </Pill>\\n        );\\n      })}\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\n`Pill` supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)\\nor view the example below.\\n```tsx\\nimport {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';\\n\\nimport {createStencil} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\\n\\nconst customPillStencil = createStencil({\\n  base: {\\n    [pillStencil.vars.background]: system.color.static.green.default,\\n    [pillStencil.vars.border]: system.color.static.green.stronger,\\n    [pillStencil.vars.label]: system.color.static.white,\\n    [systemIconStencil.vars.color]: system.color.static.white,\\n    [pillCountStencil.vars.backgroundColor]: system.color.static.green.default,\\n    [pillCountStencil.vars.borderColor]: system.color.static.green.default,\\n\\n    '&:hover, &.hover': {\\n      [pillStencil.vars.background]: system.color.static.green.stronger,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n      [pillCountStencil.vars.borderColor]: system.color.static.green.stronger,\\n    },\\n    '&:active, &.active': {\\n      [pillStencil.vars.background]: system.color.static.green.stronger,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,\\n    },\\n    '&:focus, &.focus, &:focus-visible': {\\n      [pillStencil.vars.background]: system.color.static.green.stronger,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,\\n    },\\n    '&:disabled, &.disabled': {\\n      [pillStencil.vars.background]: system.color.static.green.default,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n    },\\n  },\\n});\\n\\nexport const CustomStyles = () => {\\n  return (\\n    <div>\\n      <Pill cs={customPillStencil()}>\\n        <Pill.Icon aria-label=\\\"Add user\\\" />\\n        <Pill.Label>Custom Pill Color</Pill.Label>\\n        <Pill.Count>10</Pill.Count>\\n      </Pill>\\n    </div>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"multiselect\": {\n      \"title\": \"Preview/MultiSelect\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-multiselect--docs\",\n      \"mdxPath\": \"modules/preview-react/multi-select/stories/MultiSelect.mdx\",\n      \"mdxProse\": \"# Canvas Kit MultiSelect\\n\\nMultiSelect inputs allow users to choose multiple options from a list of items.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`MultiSelect` supports a\\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you\\npass an array of items via the `items` prop and provide a render function to display the items. The\\nitems may be provided as an\\n[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an\\n[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).\\n\\n`MultiSelect` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\\n`MultiSelect` wraps the `FormField` element and the `FormField` element wraps the children of\\n`MultiSelect` to meet accessibility standards. This ensures the `label` text from `FormField` is\\nattached to the `MultiSelect.Input` and read out as a group for voiceover.\\n\\n```tsx\\n<MultiSelect items={options}>\\n  <FormField label=\\\"Your Label\\\">\\n    <MultiSelect.Input onChange={e => handleChange(e)} id=\\\"contact-multi-select\\\" />\\n    <MultiSelect.Popper>\\n      <MultiSelect.Card>\\n        <MultiSelect.List>\\n          {item => <MultiSelect.Item>{item.id}</MultiSelect.Item>}\\n        </MultiSelect.List>\\n      </MultiSelect.Card>\\n    </MultiSelect.Popper>\\n  </FormField>\\n</MultiSelect>\\n```\\n\\n### Disabled Example\\n\\nDisabling `MultiSelect` involves passing the `disabled` prop to the `MultiSelect.Input` component.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];\\n\\nexport const Disabled = () => {\\n  return (\\n    <>\\n      <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>\\n        <FormField orientation=\\\"horizontalStart\\\">\\n          <FormField.Label>Toppings</FormField.Label>\\n          <FormField.Input\\n            as={MultiSelect.Input}\\n            placeholder=\\\"Select Multiple\\\"\\n            removeLabel=\\\"Remove\\\"\\n            disabled\\n          />\\n          <MultiSelect.Popper>\\n            <MultiSelect.Card>\\n              <MultiSelect.List>\\n                {item => (\\n                  <MultiSelect.Item data-id={item}>\\n                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>\\n                  </MultiSelect.Item>\\n                )}\\n              </MultiSelect.List>\\n            </MultiSelect.Card>\\n          </MultiSelect.Popper>\\n        </FormField>\\n      </MultiSelect>\\n    </>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nThe `MultiSelect.Input` and `MultiSelect.SearchInput` support the `ErrorType` from the Common\\npackage. The error styling is identical to the `TextInput` error styling. The `error` prop is\\ntypically passed from the `FormField` component.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];\\n\\nexport const Error = () => {\\n  const model = useMultiSelectModel({\\n    items,\\n    initialSelectedIds: [],\\n  });\\n  return (\\n    <>\\n      <MultiSelect model={model}>\\n        <FormField\\n          orientation=\\\"horizontalStart\\\"\\n          error={\\n            model.state.selectedIds.length < 1\\n              ? 'error'\\n              : model.state.selectedIds.length > 3\\n              ? 'caution'\\n              : undefined\\n          }\\n        >\\n          <FormField.Label>Toppings</FormField.Label>\\n          <FormField.Field>\\n            <FormField.Input\\n              as={MultiSelect.Input}\\n              placeholder=\\\"Select Multiple\\\"\\n              removeLabel=\\\"Remove\\\"\\n            />\\n            <MultiSelect.Popper>\\n              <MultiSelect.Card>\\n                <MultiSelect.List>\\n                  {item => (\\n                    <MultiSelect.Item data-id={item}>\\n                      <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>\\n                    </MultiSelect.Item>\\n                  )}\\n                </MultiSelect.List>\\n              </MultiSelect.Card>\\n            </MultiSelect.Popper>\\n\\n            <FormField.Hint>\\n              {model.state.selectedIds.length < 1\\n                ? 'Select at least one topping.'\\n                : model.state.selectedIds.length > 3\\n                ? 'More than 3 toppings cost extra.'\\n                : undefined}\\n            </FormField.Hint>\\n          </FormField.Field>\\n        </FormField>\\n      </MultiSelect>\\n    </>\\n  );\\n};\\n```\\n\\n### Complex\\n\\nWhen registering items in an array of objects, it's common to have the text that is displayed to the\\nuser be different than an id. In this example, `serverId` and `label` properties need to be remapped\\nto `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties\\n`text` and `id`, there would be no need for this.\\n```tsx\\nimport React from 'react';\\n\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nconst items = [\\n  {id: '1', text: 'Cheese'},\\n  {id: '2', text: 'Olives'},\\n  {id: '3', text: 'Onions'},\\n  {id: '4', text: 'Pepperoni'},\\n  {id: '5', text: 'Peppers'},\\n];\\n\\nexport const Complex = () => {\\n  const [value, setValue] = React.useState('');\\n  const [label, setLabel] = React.useState('');\\n  return (\\n    <CanvasProvider>\\n      <>\\n        <form\\n          onSubmit={e => {\\n            console.log('form submitted');\\n            e.preventDefault();\\n          }}\\n        >\\n          <main className={mainContentStyles}>\\n            <MultiSelect items={items} getId={i => i.id} getTextValue={i => i.text}>\\n              <FormField orientation=\\\"horizontalStart\\\">\\n                <FormField.Label>Toppings</FormField.Label>\\n                <FormField.Input\\n                  as={MultiSelect.Input}\\n                  placeholder=\\\"Select Multiple\\\"\\n                  removeLabel=\\\"Remove\\\"\\n                  name=\\\"toppings\\\"\\n                  onChange={e => {\\n                    const value = e.currentTarget.value;\\n                    setValue(value);\\n                    setLabel(\\n                      value\\n                        .split(', ')\\n                        .map(item => items.find(i => i.id === item)?.text || 'Not Found')\\n                        .join(', ')\\n                    );\\n                  }}\\n                  value={value}\\n                />\\n                <MultiSelect.Popper>\\n                  <MultiSelect.Card>\\n                    <MultiSelect.List>\\n                      {item => (\\n                        <MultiSelect.Item data-id={item.id}>\\n                          <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                        </MultiSelect.Item>\\n                      )}\\n                    </MultiSelect.List>\\n                  </MultiSelect.Card>\\n                </MultiSelect.Popper>\\n              </FormField>\\n            </MultiSelect>\\n          </main>\\n        </form>\\n        <div>Selected IDs: {value}</div>\\n        <div>Selected Labels: {label}</div>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### With Icons\\n\\nUse `MultiSelect.Item.Icon` to render an icon for a `MultiSelect.Item`. The `icon` prop for\\n`MultiSelect.Item.Icon` accepts [system icons](/assets/system-icons/) from\\n`@workday/canvas-system-icons-web`.\\n\\n> **Note: `data-id` on `MultiSelect.Item` must match the `id` property in your array of objects.\\n> This ensures proper keyboard handling and type-ahead.**\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {\\n  mediaPauseIcon,\\n  mediaPlayIcon,\\n  mediaTopicsIcon,\\n  skipIcon,\\n  previousIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = [\\n  {id: '1', text: 'Pause', icon: mediaPauseIcon},\\n  {id: '2', text: 'Play', icon: mediaPlayIcon},\\n  {id: '3', text: 'Skip', icon: skipIcon},\\n  {id: '4', text: 'Previous', icon: previousIcon},\\n];\\n\\nexport const Icons = () => {\\n  return (\\n    <MultiSelect items={items}>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Controls</FormField.Label>\\n        <FormField.Input\\n          as={MultiSelect.Input}\\n          placeholder=\\\"Select Multiple\\\"\\n          removeLabel=\\\"Remove\\\"\\n        />\\n        <MultiSelect.Popper>\\n          <MultiSelect.Card>\\n            <MultiSelect.List>\\n              {item => (\\n                <MultiSelect.Item data-id={item.id}>\\n                  <MultiSelect.Item.Icon icon={item.icon} />\\n                  <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                  <MultiSelect.Item.Icon icon={mediaTopicsIcon} />\\n                </MultiSelect.Item>\\n              )}\\n            </MultiSelect.List>\\n          </MultiSelect.Card>\\n        </MultiSelect.Popper>\\n      </FormField>\\n    </MultiSelect>\\n  );\\n};\\n```\\n\\n### Controlled\\n\\nThe MultiSelect can be a controlled input component by passing the `value` and `onChange` to either\\nthe `<MultiSelect>` component or the `<MultiSelect.Input>` component. Internally, the\\n`MultiSelect.Input` watches for changes on the `value` React prop as well as the `value` DOM\\nproperty and will update the model accordingly.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = [\\n  {id: '1', text: 'Cheese'},\\n  {id: '2', text: 'Olives'},\\n  {id: '3', text: 'Onions'},\\n  {id: '4', text: 'Pepperoni'},\\n  {id: '5', text: 'Peppers'},\\n];\\n\\nexport const Controlled = () => {\\n  const formRef = React.useRef<HTMLFormElement>(null);\\n  const [value, setValue] = React.useState('1');\\n  const [label, setLabel] = React.useState('Cheese');\\n\\n  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {\\n    const value = event.currentTarget.value;\\n    setValue(value);\\n    setLabel(\\n      value\\n        .split(', ')\\n        .map(item => items.find(i => i.id === item)?.text || 'Not Found')\\n        .join(', ')\\n    );\\n  }\\n\\n  return (\\n    <>\\n      <form\\n        onSubmit={e => {\\n          console.log('form submitted');\\n          e.preventDefault();\\n        }}\\n        ref={formRef}\\n      >\\n        <Flex gap=\\\"s\\\" flexDirection=\\\"column\\\">\\n          <MultiSelect items={items}>\\n            <FormField orientation=\\\"horizontalStart\\\">\\n              <FormField.Label>Toppings</FormField.Label>\\n              <FormField.Input\\n                as={MultiSelect.Input}\\n                placeholder=\\\"Select Multiple\\\"\\n                removeLabel=\\\"Remove\\\"\\n                name=\\\"toppings\\\"\\n                onChange={handleOnChange}\\n                value={value}\\n              />\\n              <MultiSelect.Popper>\\n                <MultiSelect.Card>\\n                  <MultiSelect.List>\\n                    {item => (\\n                      <MultiSelect.Item data-id={item.id}>\\n                        <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                      </MultiSelect.Item>\\n                    )}\\n                  </MultiSelect.List>\\n                </MultiSelect.Card>\\n              </MultiSelect.Popper>\\n            </FormField>\\n          </MultiSelect>\\n          <Flex gap=\\\"s\\\">\\n            <SecondaryButton\\n              onClick={e => {\\n                setValue('1, 2, 3');\\n              }}\\n            >\\n              Set to \\\"Cheese, Olives, Onions\\\" via React `value`\\n            </SecondaryButton>\\n            <SecondaryButton\\n              onClick={e => {\\n                const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;\\n                input.value = '1, 2';\\n              }}\\n            >\\n              Set to \\\"Cheese, Olives\\\" via DOM `value`\\n            </SecondaryButton>\\n          </Flex>\\n          <div>\\n            <PrimaryButton type=\\\"submit\\\">Submit</PrimaryButton>\\n          </div>\\n          <div>Selected ID: {value}</div>\\n          <div>Selected Label: {label}</div>\\n        </Flex>\\n      </form>\\n    </>\\n  );\\n};\\n```\\n\\n### Searching\\n\\nA MultiSelect input can be used as a filter for results. Most likely this also means there are many\\nitems that may not be all be loaded from the server at once. The `useComboboxLoader` can be used to\\ndynamically load items as the user navigates the available options.\\n\\n> **Note:** The behavior of search is experimental. The example should continue to work without\\n> modification, but how the searchable input is presented to the user may change with user testing.\\n> Don't rely too much on the exact behavior of the search input. For example, the search input may\\n> be cleared when the user blurs the field.\\n```tsx\\nimport React from 'react';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {LoadReturn} from '@workday/canvas-kit-react/collection';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {useComboboxLoader} from '@workday/canvas-kit-react/combobox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';\\nimport {StyledMenuItem} from '@workday/canvas-kit-react/menu';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nconst colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];\\nconst fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];\\nconst options = Array(1000)\\n  .fill('')\\n  .map((_, index) => {\\n    return {\\n      id: `${index + 1}`,\\n      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,\\n    };\\n  });\\n\\nexport const Searching = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const {model, loader} = useComboboxLoader(\\n    {\\n      // You can start with any number that makes sense.\\n      total: 0,\\n\\n      // Pick whatever number makes sense for your API\\n      pageSize: 20,\\n\\n      // A load function that will be called by the loader. You must return a promise that returns\\n      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache\\n      async load({pageNumber, pageSize, filter}) {\\n        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {\\n          // simulate a server response by resolving after a period of time\\n          setTimeout(() => {\\n            // simulate paging and filtering based on pre-computed items\\n            const start = (pageNumber - 1) * pageSize;\\n            const end = start + pageSize;\\n            const filteredItems = options.filter(item => {\\n              if (filter === '' || typeof filter !== 'string') {\\n                return true;\\n              }\\n              return item.text.toLowerCase().includes(filter.toLowerCase());\\n            });\\n\\n            const total = filteredItems.length;\\n            const items = filteredItems.slice(start, end);\\n\\n            resolve({\\n              items,\\n              total,\\n            });\\n          }, 300);\\n        });\\n      },\\n      onShow() {\\n        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is\\n        // visible\\n        loader.load();\\n      },\\n    },\\n    useMultiSelectModel\\n  );\\n\\n  return (\\n    <CanvasProvider>\\n      <>\\n        <form\\n          onSubmit={e => {\\n            console.log('form submitted');\\n            e.preventDefault();\\n          }}\\n        >\\n          <main className={mainContentStyles}>\\n            <MultiSelect model={model}>\\n              <FormField orientation=\\\"horizontalStart\\\">\\n                <FormField.Label>Fruits</FormField.Label>\\n                <FormField.Input\\n                  as={MultiSelect.SearchInput}\\n                  placeholder=\\\"Search\\\"\\n                  removeLabel=\\\"Remove\\\"\\n                  name=\\\"toppings\\\"\\n                  onChange={e => {\\n                    setValue(e.currentTarget.value);\\n                  }}\\n                  value={value}\\n                />\\n                <MultiSelect.Popper>\\n                  <MultiSelect.Card>\\n                    {model.state.items.length === 0 && (\\n                      <StyledMenuItem as=\\\"span\\\">No Results Found</StyledMenuItem>\\n                    )}\\n                    {model.state.items.length > 0 && (\\n                      <MultiSelect.List maxHeight={200}>\\n                        {item =>\\n                          item ? (\\n                            <MultiSelect.Item data-id={item.id}>\\n                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                            </MultiSelect.Item>\\n                          ) : undefined\\n                        }\\n                      </MultiSelect.List>\\n                    )}\\n                  </MultiSelect.Card>\\n                </MultiSelect.Popper>\\n              </FormField>\\n            </MultiSelect>\\n          </main>\\n        </form>\\n        <div>Selected: {value}</div>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Initial Selected Items\\n\\nYou can set `initialSelectedIds` to the value that you want initially selected.\\n```tsx\\nimport React, {useEffect} from 'react';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {LoadReturn} from '@workday/canvas-kit-react/collection';\\nimport {CanvasProvider, useMountLayout} from '@workday/canvas-kit-react/common';\\nimport {useComboboxLoader} from '@workday/canvas-kit-react/combobox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';\\nimport {StyledMenuItem} from '@workday/canvas-kit-react/menu';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nconst colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];\\nconst fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];\\nconst options = Array(1000)\\n  .fill('')\\n  .map((_, index) => {\\n    return {\\n      id: `${index + 1}`,\\n      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,\\n    };\\n  });\\n\\nexport const InitialSelectedItems = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const {model, loader} = useComboboxLoader(\\n    {\\n      // You can start with any number that makes sense.\\n      total: 0,\\n      initialSelectedIds: ['3', '5'],\\n\\n      // Pick whatever number makes sense for your API\\n      pageSize: 500,\\n\\n      // A load function that will be called by the loader. You must return a promise that returns\\n      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache\\n      async load({pageNumber, pageSize, filter}) {\\n        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {\\n          // simulate a server response by resolving after a period of time\\n          setTimeout(() => {\\n            // simulate paging and filtering based on pre-computed items\\n            const start = (pageNumber - 1) * pageSize;\\n            const end = start + pageSize;\\n            const filteredItems = options.filter(item => {\\n              if (filter === '' || typeof filter !== 'string') {\\n                return true;\\n              }\\n              return item.text.toLowerCase().includes(filter.toLowerCase());\\n            });\\n\\n            const total = filteredItems.length;\\n            const items = filteredItems.slice(start, end);\\n\\n            resolve({\\n              items,\\n              total,\\n            });\\n          }, 300);\\n        });\\n      },\\n      onShow() {\\n        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is\\n        // visible\\n        loader.load();\\n      },\\n    },\\n    useMultiSelectModel\\n  );\\n\\n  useEffect(() => {\\n    loader.load();\\n  }, [loader]);\\n\\n  return (\\n    <CanvasProvider>\\n      <>\\n        <form\\n          onSubmit={e => {\\n            console.log('form submitted');\\n            e.preventDefault();\\n          }}\\n        >\\n          <main className={mainContentStyles}>\\n            <MultiSelect model={model}>\\n              <FormField orientation=\\\"horizontalStart\\\">\\n                <FormField.Label>Fruits</FormField.Label>\\n                <FormField.Input\\n                  as={MultiSelect.SearchInput}\\n                  placeholder=\\\"Search\\\"\\n                  removeLabel=\\\"Remove\\\"\\n                  name=\\\"toppings\\\"\\n                  onChange={e => {\\n                    setValue(e.currentTarget.value);\\n                  }}\\n                  value={value}\\n                />\\n                <MultiSelect.Popper>\\n                  <MultiSelect.Card>\\n                    {model.state.items.length === 0 && (\\n                      <StyledMenuItem as=\\\"span\\\">No Results Found</StyledMenuItem>\\n                    )}\\n                    {model.state.items.length > 0 && (\\n                      <MultiSelect.List maxHeight={200}>\\n                        {item =>\\n                          item ? (\\n                            <MultiSelect.Item data-id={item.id}>\\n                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                            </MultiSelect.Item>\\n                          ) : undefined\\n                        }\\n                      </MultiSelect.List>\\n                    )}\\n                  </MultiSelect.Card>\\n                </MultiSelect.Popper>\\n              </FormField>\\n            </MultiSelect>\\n          </main>\\n        </form>\\n        <div>Selected: {value}</div>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\"\n    },\n    \"loading-sparkles-(ai)\": {\n      \"title\": \"Preview/Loading Sparkles (AI)\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-loading-sparkles-(ai)--docs\",\n      \"mdxPath\": \"modules/preview-react/loading-sparkles/stories/LoadingSparkles.mdx\",\n      \"mdxProse\": \"# Canvas Kit Loading Sparkles\\n\\n`LoadingSparkles` is a loading animation that makes users aware an AI operation is in progress.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add some wiring for screen\\nreaders. In the example below, we're simulating a loading state with a `setTimeout` that's triggered\\nwhen the \\\"Generate Quote\\\" button is clicked.\\n\\nThe ARIA live region uses the `aria-label` on `LoadingSparkles` to announce the loading state. And\\nit uses the text in `AccessibleHide` to announce when loading is complete. In a real-world\\napplication, you would probably add another state for loading failures. Also note that generated\\ntext should live outside the live region. This content doesn't need to be announced to screen\\nreaders.\\n\\n#### Consolidating ARIA Live Regions\\n\\nIn the example, we wrapped `LoadingSparkles` inside our `AriaLiveRegion` component, but in general\\nyou should not have multiple ARIA live regions on the page at once. If you already have a live\\nregion, consider sending these loading messages there instead of adding another region.\\n```tsx\\nimport React from 'react';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';\\nimport {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst containerStyles = createStyles({\\n  minHeight: '3.5rem',\\n  display: 'flex',\\n  flexDirection: 'column',\\n  gap: '0.5rem',\\n});\\n\\nexport const Basic = () => {\\n  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');\\n  const [quote, setQuote] = React.useState('');\\n\\n  React.useEffect(() => {\\n    if (loadingStatus === 'loading') {\\n      const mockLoading = setTimeout(() => {\\n        setLoadingStatus('success');\\n        setQuote(getQuote());\\n      }, 3000);\\n\\n      return () => {\\n        clearTimeout(mockLoading);\\n      };\\n    }\\n  }, [loadingStatus]);\\n\\n  const handleClick = () => {\\n    setQuote('');\\n    setLoadingStatus('loading');\\n  };\\n\\n  return (\\n    <div>\\n      <div className={containerStyles}>\\n        {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}\\n        <AriaLiveRegion>\\n          {loadingStatus === 'loading' && <LoadingSparkles aria-label=\\\"loading\\\" />}\\n          {loadingStatus === 'success' && (\\n            <AccessibleHide role=\\\"status\\\">loading complete</AccessibleHide>\\n          )}\\n        </AriaLiveRegion>\\n      </div>\\n      <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>\\n    </div>\\n  );\\n};\\n\\nconst robotQuotes = [\\n  'The Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.',\\n  'Law 1: A robot may not injure a human being or, through inaction, allow a human being to come to harm.',\\n  'Law 2: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',\\n  'Law 3: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',\\n  'There is nothing so eternally adhesive as the memory of power.',\\n];\\n\\nconst getQuote = () => {\\n  const index = Math.floor(Math.random() * robotQuotes.length);\\n  return robotQuotes[index];\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n```tsx\\nimport React from 'react';\\nimport {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <LoadingSparkles />\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"information-highlight\": {\n      \"title\": \"Preview/Information Highlight\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs\",\n      \"mdxPath\": \"modules/preview-react/information-highlight/stories/InformationHighlight.mdx\",\n      \"mdxProse\": \"# Canvas Kit Information Highlight\\n\\nA container to call out important information on a page or a section of a page that the user should\\nbe aware of.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n`InformationHighlight` should be used to call out important information to the user and are paired\\nwith a meaningful icon and color to differentiate information type. It should not be removed from\\nthe interface until some system or admin level action has been taken to do so.\\n\\nYou can use an `InformationHighlight` to:\\n\\n- Prevent unwanted consequences from destructive actions\\n- Reassure users in their next steps\\n- Provide detail into information on the page\\n- Show changes in page content\\n\\n### When to Consider Something Else\\n\\n- Consider a\\n  [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if\\n  the message is about system-wide errors or alerts, or if the message appears in response to user\\n  action.\\n- Consider a\\n  [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the\\n  message is critical and requires user action or decision before proceeding\\n- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs)\\n  if the message is timely, such as communicating updates on the process of an application.\\n\\n### Basic Example\\n```tsx\\nimport React from 'react';\\n\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\n\\nexport const Basic = () => {\\n  return (\\n    <InformationHighlight>\\n      <InformationHighlight.Icon />\\n      <InformationHighlight.Heading>Information Highlight</InformationHighlight.Heading>\\n      <InformationHighlight.Body>\\n        {' '}\\n        This is what an information highlight would look like with with the default settings and\\n        every field filled in{' '}\\n      </InformationHighlight.Body>\\n      <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n    </InformationHighlight>\\n  );\\n};\\n```\\n\\n## Variants\\n\\n`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.\\n\\nVariants: `informational`, `caution`, `critical`\\n\\nEmphasis: `low`, `high`\\n\\nThe variants have different icons and colors to convey severity and the emphasis changes the\\nbackground color to have a lower or higher contrast. If no `variant` or `emphasis` is selected the\\nlayout will default to `Variant: informational, Emphasis: low`.\\n\\nThe following examples will show the `low` and `high` emphasis of the three variants. `low` Emphasis\\nwill be shown first and should be used when there is other more important information on the page.\\n`high` Emphasis will be shown second, and should be used when the highlight is not competing with\\nother, more important information.\\n\\n### Informational\\n\\nThe informational variant is for _nice to have_ information, such as related features or\\nopportunities.\\n```tsx\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst contentTextStyles = createStyles({\\n  margin: 0,\\n});\\n\\nconst contentListStyles = createStyles({\\n  listStyle: 'inside',\\n  marginInlineStart: 0,\\n  marginBlockStart: system.space.x2,\\n  marginBlockEnd: 0,\\n  padding: 0,\\n});\\n\\nexport const Informational = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <InformationHighlight variant={'informational'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          <p className={contentTextStyles}>\\n            This is a low-emphasis, informational callout. You should use this for nice-to-have\\n            information, such as:\\n          </p>\\n          <ul className={contentListStyles}>\\n            <li>tangential information or context</li>\\n            <li>related features</li>\\n            <li>additional opportunities</li>\\n          </ul>\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">Learn More</InformationHighlight.Link>\\n      </InformationHighlight>\\n      <InformationHighlight variant={'informational'} emphasis={'high'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          <p className={contentTextStyles}>\\n            This is a high-emphasis, informational callout. You should use this for nice-to-have\\n            information, such as:\\n          </p>\\n          <ul className={contentListStyles}>\\n            <li>tangential information or context</li>\\n            <li>related features</li>\\n            <li>additional opportunities</li>\\n          </ul>\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">Learn More</InformationHighlight.Link>\\n      </InformationHighlight>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Caution\\n\\nThe caution variant is for _important to know_ information, such as the potential consequences of\\nspecific actions.\\n```tsx\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nexport const Caution = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <InformationHighlight variant={'caution'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below, nothing will happen\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n      <InformationHighlight variant={'caution'} emphasis={'high'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below, nothing will happen\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Critical\\n\\nThe critical variant is for _must know_ information that could otherwise cause failure if the user\\nis unaware\\n```tsx\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nexport const Critical = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <InformationHighlight variant={'critical'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading>Attention! Highlight Something</InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below it will reroute you back to this page.\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n      <InformationHighlight variant={'critical'} emphasis={'high'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading>Attention! Highlight Something</InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below it will reroute you back to this page.\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### RTL Example\\n\\nInformation Highlight also supports RTL Languages. To enable RTL, set the `dir` attribute on the\\nparent dom element that renders your application.\\n```tsx\\nimport React from 'react';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {system} from '@workday/canvas-tokens-web';\\nexport const RTL = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <CanvasProvider dir=\\\"rtl\\\">\\n        <InformationHighlight variant={'caution'} emphasis={'low'}>\\n          <InformationHighlight.Icon />\\n          <InformationHighlight.Heading>\\n            {' '}\\n            \u0627\u0646\u062A\u0628\u0627\u0647! \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631{' '}\\n          </InformationHighlight.Heading>\\n          <InformationHighlight.Body>\\n            \u0646\u062D\u0646 \u0646\u062F\u0639\u0645 \u0627\u0644\u0644\u063A\u0627\u062A \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631\\n          </InformationHighlight.Body>\\n          <InformationHighlight.Link href=\\\"#hyperlink\\\">\u0648\u062B\u0627\u0626\u0642</InformationHighlight.Link>\\n        </InformationHighlight>\\n      </CanvasProvider>\\n      <CanvasProvider dir=\\\"rtl\\\">\\n        <InformationHighlight variant={'caution'} emphasis={'high'}>\\n          <InformationHighlight.Icon />\\n          <InformationHighlight.Heading>\\n            {' '}\\n            \u0627\u0646\u062A\u0628\u0627\u0647! \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631{' '}\\n          </InformationHighlight.Heading>\\n          <InformationHighlight.Body>\\n            \u0646\u062D\u0646 \u0646\u062F\u0639\u0645 \u0627\u0644\u0644\u063A\u0627\u062A \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631\\n          </InformationHighlight.Body>\\n          <InformationHighlight.Link href=\\\"#hyperlink\\\">\u0648\u062B\u0627\u0626\u0642</InformationHighlight.Link>\\n        </InformationHighlight>\\n      </CanvasProvider>\\n    </Flex>\\n  );\\n};\\n```\\n\\n## Partial and Custom Information Highlights\\n\\n`InformationHighlight` can use custom icons or be designed to only use some of its components.\\n\\n### Custom Icon: Critical\\n\\n### Body Only Example\\n```tsx\\nimport React from 'react';\\n\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\n\\nexport const Body = () => {\\n  return (\\n    <InformationHighlight>\\n      <InformationHighlight.Body>\\n        Only the body of an information highlight\\n      </InformationHighlight.Body>\\n    </InformationHighlight>\\n  );\\n};\\n```\\n\\n### Heading Only Example\\n```tsx\\nimport React from 'react';\\n\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\n\\nexport const Heading = () => {\\n  return (\\n    <InformationHighlight>\\n      <InformationHighlight.Heading> Only Heading </InformationHighlight.Heading>\\n    </InformationHighlight>\\n  );\\n};\\n```\\n\\n### Accessible Use of the `as` Prop\\n\\nLike many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop,\\nwhich lets you change the underlying semantic element. For `InformationHighlight.Heading`, you can\\nchange the heading level if you were needing to define a different level of importance. This should\\nbe done with caution to ensure the best accessibility.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"divider\": {\n      \"title\": \"Preview/Divider\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs\",\n      \"mdxPath\": \"modules/preview-react/divider/stories/Divider.mdx\",\n      \"mdxProse\": \"# Divider\\n\\nA `Divider` segments and visually organizes content.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\nUse a `Divider` to separate content and create visual hierarchy. Typically they are used between\\nparagraph sections to indicate a break or shift in content. However, they can also be used as\\ndecorative elements to provide greater emphasis and visual hierarchy.\\n\\n### Basic Example\\n\\nBy default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and\\nbottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the\\n`Divider`s provide a subtle deliniation between each profile card without being as visually\\nprominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and\\nbottom margin.\\n```tsx\\nimport React from 'react';\\nimport {Divider} from '@workday/canvas-kit-preview-react/divider';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Avatar} from '@workday/canvas-kit-react/avatar';\\n\\nconst sectionStyles = createStyles({\\n  display: 'flex',\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n  maxWidth: '40rem',\\n});\\n\\nexport const Basic = () => {\\n  const lastIndex = maintainerList.length - 1;\\n  return (\\n    <section className={sectionStyles}>\\n      {maintainerList.map((maintainerData, index) => (\\n        <>\\n          <ProfileCard {...maintainerData} />\\n          {index !== lastIndex && <Divider space={system.space.x1} />}\\n        </>\\n      ))}\\n    </section>\\n  );\\n};\\n\\nconst maintainerList = [\\n  {\\n    id: '44883293',\\n    name: 'Josh Bagwell',\\n    bio: 'Software Development Engineer',\\n  },\\n  {\\n    id: '338257',\\n    name: 'Nicholas Boll',\\n    bio: 'Principal Software Development Engineer',\\n  },\\n  {\\n    id: '7966550',\\n    name: 'Manuel Carrera',\\n    bio: 'Sr. Software Development Engineer',\\n  },\\n  {\\n    id: '146020',\\n    name: 'James Fan',\\n    bio: 'Sr. Software Development Engineer',\\n  },\\n  {\\n    id: '48605821',\\n    name: 'Raisa Primerova',\\n    bio: 'Software Development Engineer',\\n  },\\n  {\\n    id: '4818182',\\n    name: 'Alan Smith',\\n    bio: 'Principal Software Development Engineer',\\n  },\\n];\\n\\nconst profileCardStyles = createStyles({\\n  display: 'grid',\\n  gridGap: '0.5rem',\\n  gridTemplateColumns: '5rem 1fr',\\n  gridTemplateRows: '1fr 1fr',\\n});\\n\\nconst profileCardAvatarStyles = createStyles({\\n  gridColumn: '1',\\n  gridRow: '1 / 3',\\n});\\n\\nconst profileCardHeadingStyles = createStyles({\\n  ...system.type.body.large,\\n  fontWeight: system.fontWeight.bold,\\n  gridColumn: '2/3',\\n  gridRow: '1',\\n  margin: 0,\\n});\\n\\nconst profileCardBodyStyles = createStyles({\\n  ...system.type.body.small,\\n  gridColumn: '2',\\n  gridRow: '2',\\n  margin: 0,\\n});\\n\\ninterface ProfileCardProps {\\n  id: string;\\n  name: string;\\n  bio: string;\\n}\\n\\nconst ProfileCard = ({id, name, bio}: ProfileCardProps) => (\\n  <div className={profileCardStyles}>\\n    <Avatar\\n      size=\\\"extraLarge\\\"\\n      url={`https://avatars.githubusercontent.com/u/${id}?v=4`}\\n      altText={`${name}'s avatar`}\\n      className={profileCardAvatarStyles}\\n    />\\n    <h3 className={profileCardHeadingStyles}>{name}</h3>\\n    <p className={profileCardBodyStyles}>{bio}</p>\\n  </div>\\n);\\n```\\n\\n### Custom Space\\n\\nYou might also want to apply custom space to `Divider` where the top and bottom margin are not\\nequal. The best way to achieve this is with `createStyles` and the `cs` property. In the example\\nbelow, the `Divider` is applied as a decorative element to add emphasis to the section heading.\\nCustom styles are defined in the `createStyles` function outside the component and are passed to\\n`Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.\\n```tsx\\nimport React from 'react';\\nimport {Divider} from '@workday/canvas-kit-preview-react/divider';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst headingStyles = createStyles({\\n  ...system.type.body.large,\\n  fontWeight: system.fontWeight.bold,\\n  margin: 0,\\n});\\n\\nconst bodyStyles = createStyles({\\n  ...system.type.body.small,\\n  margin: 0,\\n});\\n\\nconst customDividerSpace = createStyles({\\n  margin: `0 0 ${system.space.x4}`,\\n});\\n\\nexport const CustomSpace = () => {\\n  return (\\n    <section>\\n      <h3 className={headingStyles}>Quote of the Day</h3>\\n      <Divider cs={customDividerSpace} />\\n      <p className={bodyStyles}>\\n        \\\"It is not our differences that divide us. It is our inability to recognize, accept, and\\n        celebrate those differences.\\\" \u2013 Audre Lorde\\n      </p>\\n    </section>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"avatar\": {\n      \"title\": \"Preview/Avatar\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs\",\n      \"mdxPath\": \"modules/preview-react/avatar/stories/Avatar.mdx\",\n      \"mdxProse\": \"# Avatar\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nThe most basic usage requires only a `name` prop. The component automatically extracts and displays\\nthe initials. If you want to display a different set of initials, you can use the `preferredInitials` prop.\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\n\\nexport const Basic = () => {\\n  return <Avatar name=\\\"John Doe\\\" />;\\n};\\n```\\n\\n### Image Avatar\\n\\nYou can display a profile image by providing the `url` prop.\\n\\n> Note: The `url` and the `name` prop is required for the image avatar. The `name` is used for the `alt` attribute on the image.\\n\\n#### Image Fallback Behavior\\n\\nThe Avatar component includes intelligent fallback handling:\\n\\n- While the image loads, the user's initials are displayed using the `name` prop\\n- If the image fails to load, initials remain visible\\n- The `name` prop serves as both the alt text and fallback content\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\n\\nexport const Image = () => {\\n  return (\\n    <Avatar\\n      name=\\\"Happy Doggo\\\"\\n      url={'https://picsum.photos/id/237/300/200'}\\n      objectFit=\\\"cover\\\"\\n      size=\\\"medium\\\"\\n    />\\n  );\\n};\\n```\\n\\n### Sizes\\n\\nThe Avatar component supports the following sizes:\\n- `extraExtraSmall` is 24px x 24px\\n- `extraSmall` is 32px x 32px\\n- `small` is 40px x 40px\\n- `medium` is 48px x 48px\\n- `large` is 72px x 72px\\n- `extraLarge` is 96px x 96px\\n- `extraExtraLarge` is 120px x 120px\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const Size = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <Avatar name=\\\"John Doe\\\" size=\\\"extraExtraSmall\\\" />\\n      <Avatar name=\\\"Logan McNeil\\\" size=\\\"extraSmall\\\" />\\n      <Avatar name=\\\"Wonder Woman\\\" size=\\\"small\\\" />\\n      <Avatar name=\\\"Iron Man\\\" size=\\\"medium\\\" />\\n      <Avatar name=\\\"Peter Parker\\\" size=\\\"large\\\" />\\n      <Avatar name=\\\"Bruce Banner\\\" size=\\\"extraLarge\\\" />\\n      <Avatar name=\\\"Elektra\\\" size=\\\"extraExtraLarge\\\" />\\n    </div>\\n  );\\n};\\n```\\n\\n### Variants\\n\\nChoose from four predefined color schemes:\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const Variant = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <Avatar name=\\\"John Doe\\\" variant=\\\"blue\\\" />\\n      <Avatar name=\\\"Logan McNeil\\\" variant=\\\"amber\\\" />\\n      <Avatar name=\\\"Wonder Woman\\\" variant=\\\"teal\\\" />\\n      <Avatar name=\\\"Elektra\\\" variant=\\\"purple\\\" />\\n    </div>\\n  );\\n};\\n```\\n\\n### Advanced Custom Component\\n\\nFor complete control over styling and behavior, use the `BaseAvatar` component:\\n```tsx\\nimport {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {base} from '@workday/canvas-tokens-web';\\n\\nconst customStyles = createStyles({\\n  cursor: 'pointer',\\n  backgroundColor: base.magenta300,\\n  color: base.magenta700,\\n  borderRadius: '50%',\\n  border: 'none',\\n  padding: '0',\\n  margin: '0',\\n  display: 'flex',\\n  alignItems: 'center',\\n  span: {\\n    cursor: 'pointer',\\n  },\\n});\\n\\nexport const Custom = () => {\\n  return (\\n    <BaseAvatar\\n      size={px2rem(56)}\\n      cs={customStyles}\\n      as=\\\"button\\\"\\n      onClick={() => console.log('clicked')}\\n    >\\n      <BaseAvatar.Name name=\\\"John Doe Jane\\\" />\\n    </BaseAvatar>\\n  );\\n};\\n```\\n\\n### Accessibility\\nIf the Avatar is purely decorative, you can set the `isDecorative` prop to `true` to prevent the `name` prop from being forwarded to the `alt` attribute of the image.\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\n// @ts-ignore\\nimport nicholasAvatar from './nicholas-avatar.jpg';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\nconst containerStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n  alignItems: 'center',\\n});\\nexport const Decorative = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <Avatar\\n        name=\\\"Nicholas Smith\\\"\\n        isDecorative\\n        url={nicholasAvatar}\\n        objectFit=\\\"cover\\\"\\n        size=\\\"small\\\"\\n      />\\n      <Text>Nicholas Smith</Text>\\n    </div>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"side-panel-(new)\": {\n      \"title\": \"Labs/Side Panel (New)\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel-(new)--docs\",\n      \"mdxPath\": \"modules/labs-react/side-panel/stories/SidePanel.mdx\",\n      \"mdxProse\": \"# Canvas Kit Side Panel <StorybookStatusIndicator type=\\\"new\\\" />\\n\\n`SidePanel` is a collapsible container that anchors to the left or right side of the screen. It uses\\nthe model pattern for state management and is fully accessible.\\n\\n[> Workday Design Reference](https://design.workday.com/components/containers/side-panel)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-labs-react\\n```\\n\\n## Migrating from Preview\\n\\nIf you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API\\nchanges:\\n\\n### Import Changes\\n\\n```tsx\\n// Before (preview-react)\\n\\n// After (labs-react)\\n```\\n\\n### Hook API Changes\\n\\n| Preview (`useSidePanel`)         | Labs (`useSidePanelModel`)                              |\\n| -------------------------------- | ------------------------------------------------------- |\\n| `initialExpanded: boolean`       | `initialTransitionState: 'expanded' \\\\| 'collapsed'`     |\\n| `origin: 'left' \\\\| 'right'`      | `origin: 'start' \\\\| 'end'`                              |\\n| Returns `expanded: boolean`      | Returns `model.state.transitionState`                   |\\n| Returns `setExpanded(bool)`      | Use `model.events.expand()` / `model.events.collapse()` |\\n| Returns `panelProps` to spread   | Props applied automatically via `elemPropsHook`         |\\n| Returns `labelProps` to spread   | Use `id={model.state.labelId}` on label element         |\\n| Returns `controlProps` to spread | Props applied automatically to `SidePanel.ToggleButton` |\\n\\n### Component API Changes\\n\\n| Preview                                        | Labs                                              |\\n| ---------------------------------------------- | ------------------------------------------------- |\\n| `<SidePanel {...panelProps}>`                  | `<SidePanel model={model}>` or just `<SidePanel>` |\\n| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />`                      |\\n| `<Heading {...labelProps}>`                    | `<Heading id={model.state.labelId}>`              |\\n| `expanded` prop on SidePanel                   | Managed by model's `transitionState`              |\\n| `touched` prop on SidePanel                    | Managed internally                                |\\n| `onExpandedChange` callback                    | Use `onStateTransition` and derive expanded state |\\n| `onStateTransition` on component               | `onStateTransition` on model config               |\\n\\n### Code Migration Example\\n\\n```tsx\\n// Before (preview-react)\\nconst {expanded, panelProps, labelProps, controlProps} = useSidePanel({\\n  initialExpanded: false,\\n});\\n\\n<SidePanel {...panelProps} origin=\\\"right\\\" onExpandedChange={exp => console.log(exp)}>\\n  <SidePanel.ToggleButton {...controlProps} />\\n  <Heading {...labelProps}>Panel Title</Heading>\\n  {expanded && <Content />}\\n</SidePanel>;\\n\\n// After (labs-react)\\nconst model = useSidePanelModel({\\n  initialTransitionState: 'collapsed',\\n  origin: 'end',\\n  onStateTransition: state => {\\n    const isExpanded = state === 'expanded' || state === 'expanding';\\n    console.log(isExpanded);\\n  },\\n});\\n\\n<SidePanel model={model}>\\n  <SidePanel.ToggleButton />\\n  <Heading id={model.state.labelId}>Panel Title</Heading>\\n  {model.state.transitionState === 'expanded' && <Content />}\\n</SidePanel>;\\n```\\n\\n### Checking Expanded State\\n\\n```tsx\\n// Before (preview-react)\\nif (expanded) {\\n  /* ... */\\n}\\n\\n// After (labs-react) - for exact state\\nif (model.state.transitionState === 'expanded') {\\n  /* ... */\\n}\\n\\n// After (labs-react) - including animation states\\nconst isExpanded =\\n  model.state.transitionState === 'expanded' || model.state.transitionState === 'expanding';\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`SidePanel` is composed of three parts:\\n\\n- The panel container (with an optional `model` prop)\\n- A heading (`SidePanel.Heading`) for the panel that is visually hidden when the panel is collapsed\\n- A toggle button (`SidePanel.ToggleButton`) to control the expand / collapse states\\n\\nBidirectional support is built into `SidePanel`. As seen in the example below, CSS Flexbox flips the\\npage layout and the panel's contents. `SidePanel` also has logic to flip the position and direction\\nof the `ToggleButton` as well as the direction of the expand / collapse animation. If you're using\\nCSS Flexbox for layouts and using the provided components, you shouldn't have to provide any custom\\nlogic or styling for bidirectional support.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {AccentIcon} from '@workday/canvas-kit-react/icon';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {rocketIcon} from '@workday/canvas-accent-icons-web';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexHeadingStyles = createStyles({\\n  alignItems: 'center',\\n  gap: system.space.x2,\\n});\\n\\nconst viewPortStyles = createStyles({\\n  height: px2rem(320),\\n});\\n\\nexport const Basic = () => {\\n  const model = useSidePanelModel();\\n\\n  return (\\n    <Flex cs={viewPortStyles}>\\n      <SidePanel model={model}>\\n        <SidePanel.Heading size=\\\"small\\\">\\n          <Flex cs={flexHeadingStyles}>\\n            <AccentIcon icon={rocketIcon} />\\n            Tasks Panel\\n          </Flex>\\n        </SidePanel.Heading>\\n        <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n      </SidePanel>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Hidden Name\\n\\n`SidePanel`'s `<section>` element container should always have an accessible name to help screen\\nreader users understand the purpose of the panel. For this reason, we recommend using the\\n`SidePanel.Heading` component and setting the `hidden` prop to `true`. This will visually hide the\\nheading while keeping it accessible to screen readers.\\n```tsx\\nimport * as React from 'react';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nexport const Heading = () => {\\n  const model = useSidePanelModel({\\n    onStateTransition: state => {\\n      console.log(`state is: ${state}`);\\n    },\\n  });\\n\\n  return (\\n    <Flex cs={stylesOverride.viewport}>\\n      <SidePanel model={model}>\\n        <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n        <SidePanel.Heading hidden size=\\\"small\\\">\\n          Tasks Panel\\n        </SidePanel.Heading>\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          Side Panel with a hidden title text.\\n        </Text>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Alternate Variant\\n\\n`SidePanel` has one variant, `alternate`, which you can supply as a top-level prop. Default depth of\\n`alternate` variant is 5, if `alternate` SidePanel has an overlay behavior the depth 6 should be\\nused (this case is covered in the Examples section).\\n\\n### External Control\\n\\nSometimes you'll want to control `SidePanel`'s expand / collapse behavior from outside the\\ncomponent. You can use the model's events (`model.events.expand()` and `model.events.collapse()`) to\\nprogrammatically control the panel.\\n\\n#### Notes about accessibility\\n\\nWhen using external controls, be mindful of accessibility:\\n\\n- Use `aria-pressed` on toggle buttons to indicate the current state\\n- The `SidePanel.ToggleButton` inside the panel automatically receives the correct ARIA attributes\\n- External buttons should have their own accessible labels (don't rely on `aria-labelledby` pointing\\n  to the panel's label)\\n\\nIn the following example, we use the model's `transitionState` to determine the button's pressed\\nstate and call `model.events.expand()` or `model.events.collapse()` on click.\\n```tsx\\nimport * as React from 'react';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  panel: createStyles({\\n    alignItems: 'center',\\n    padding: system.space.x4,\\n  }),\\n  panelHeading: createStyles({\\n    color: system.color.fg.muted.stronger,\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nexport const ExternalControl = () => {\\n  const model = useSidePanelModel({\\n    initialTransitionState: 'collapsed',\\n    labelId: 'tasks-panel-label',\\n  });\\n\\n  return (\\n    <Flex cs={stylesOverride.viewport}>\\n      <SidePanel model={model}>\\n        <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n        <SidePanel.Heading size=\\\"small\\\" cs={stylesOverride.panelHeading}>\\n          Task Panel\\n        </SidePanel.Heading>\\n        {model.state.transitionState === 'expanded' && (\\n          <Flex cs={stylesOverride.panel}>Contents</Flex>\\n        )}\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          Control the panel externally\\n        </Text>\\n        <SecondaryButton\\n          onClick={\\n            model.state.transitionState === 'expanded' ? model.events.collapse : model.events.expand\\n          }\\n          aria-pressed={model.state.transitionState === 'expanded'}\\n        >\\n          {model.state.transitionState === 'expanded' ? 'Hide Side Panel' : 'Show Side Panel'}\\n        </SecondaryButton>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Right Origin\\n\\nBy default, `SidePanel` uses a `start` origin (left in LTR, right in RTL). This sets the\\n`ToggleButton`'s position and direction as well as the direction of the animation. You can set the\\norigin to `\\\"end\\\"` to flip these. The origin uses logical properties (`start`/`end`) for proper\\nbidirectional support.\\n```tsx\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\n// local helper hook for setting content direction;\\nimport {useDirection} from './useDirection';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  panelContainer: createStyles({\\n    marginInlineStart: 'auto',\\n  }),\\n  panel: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'flex-end',\\n    padding: system.space.x4,\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nconst RightPanel = () => {\\n  const model = useSidePanelModel({\\n    origin: 'end',\\n  });\\n\\n  return (\\n    <SidePanel model={model} className={stylesOverride.panelContainer}>\\n      <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n      <Flex cs={stylesOverride.panel}>\\n        <SidePanel.Heading size=\\\"small\\\">Tasks Panel</SidePanel.Heading>\\n      </Flex>\\n    </SidePanel>\\n  );\\n};\\n\\nexport const RightOrigin = () => {\\n  const {direction, toggleDirection} = useDirection();\\n\\n  return (\\n    <CanvasProvider dir={direction}>\\n      <Flex cs={stylesOverride.viewport}>\\n        <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n          <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n            Toggle the content direction\\n          </Text>\\n          <SecondaryButton onClick={toggleDirection}>\\n            Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}\\n          </SecondaryButton>\\n        </Flex>\\n\\n        <RightPanel />\\n      </Flex>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Always Open\\n\\nIf you do not need `SidePanel`'s expand / collapse behavior, you can simply omit the `ToggleButton`.\\n```tsx\\nimport {AccentIcon} from '@workday/canvas-kit-react/icon';\\nimport {rocketIcon} from '@workday/canvas-accent-icons-web';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst stylesOverride = {\\n  accentIcon: createStyles({\\n    marginRight: system.space.x4,\\n  }),\\n  pageContainer: createStyles({\\n    gap: system.space.x4,\\n    height: px2rem(320),\\n  }),\\n  panelContainer: createStyles({\\n    alignItems: 'center',\\n    padding: system.space.x4,\\n  }),\\n  panelHeading: createStyles({\\n    color: system.color.fg.default,\\n  }),\\n  mainContent: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexBasis: 'auto',\\n    flex: 1,\\n  }),\\n};\\n\\nexport const AlwaysOpen = () => {\\n  const model = useSidePanelModel();\\n\\n  return (\\n    <Flex cs={stylesOverride.pageContainer}>\\n      <SidePanel model={model}>\\n        <Flex cs={stylesOverride.panelContainer}>\\n          <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />\\n          <SidePanel.Heading size=\\\"small\\\" cs={stylesOverride.panelHeading}>\\n            Tasks Panel\\n          </SidePanel.Heading>\\n        </Flex>\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.mainContent}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          This is the main content section.\\n        </Text>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Deriving Expanded State\\n\\nIf you need a simple boolean `expanded` state (similar to the preview-react `onExpandedChange`\\ncallback), you can derive it from the `transitionState` using the `onStateTransition` callback on\\nthe model.\\n\\n### onStateTransition\\n\\nThe `onStateTransition` callback is called whenever the panel's transition state changes. This\\nincludes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass this\\ncallback directly to the `SidePanel` component or to the `useSidePanelModel` hook.\\n\\nThe transition flow is:\\n\\n1. **Collapsing**: `expanded` \u2192 `collapsing` \u2192 `collapsed`\\n2. **Expanding**: `collapsed` \u2192 `expanding` \u2192 `expanded`\\n\\nThis is useful for:\\n\\n- Triggering side effects when the panel state changes\\n- Syncing the panel state with external state management\\n- Animating child components based on the transition state\\n```tsx\\nimport * as React from 'react';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  SidePanel,\\n  useSidePanelModel,\\n  SidePanelTransitionStates,\\n} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {AccessibleHide} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nexport const OnStateTransition = () => {\\n  const [transitionState, setTransitionState] =\\n    React.useState<SidePanelTransitionStates>('expanded');\\n\\n  const model = useSidePanelModel({\\n    onStateTransition: state => {\\n      setTransitionState(state);\\n      console.log('Expanded changed to:', state);\\n    },\\n  });\\n\\n  return (\\n    <Flex cs={stylesOverride.viewport}>\\n      <SidePanel model={model}>\\n        <SidePanel.ToggleButton />\\n        <SidePanel.Heading hidden size=\\\"small\\\">\\n          Hidden Title\\n        </SidePanel.Heading>\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          Side panel is {transitionState}.\\n        </Text>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Accessibility\\n\\n`SidePanel` renders a `<section>` element with an accessible name provided by `aria-labelledby`,\\nwhich references the `SidePanel.Heading` component. This ensures screen reader users understand the\\npurpose of the panel.\\n\\n#### Panel and Heading\\n\\n- The `SidePanel.Heading` provides the accessible name for the panel via `aria-labelledby`\\n- When the panel is collapsed, the heading is automatically hidden visually but remains accessible\\n  to screen readers\\n- Use the `hidden` prop on `SidePanel.Heading` if you want the heading always visually hidden\\n\\n#### Toggle Button\\n\\n- `SidePanel.ToggleButton` automatically includes `aria-controls` (references the panel's `id`),\\n  `aria-pressed` (indicates current state), and `aria-describedby` (references the panel's heading)\\n- Developers must provide a static `aria-label` string on `SidePanel.ToggleButton` to describe the\\n  button's purpose (e.g., \\\"Collapse View\\\"). Avoid using ambiguous terms like \\\"Toggle\\\" in the label.\\n  Since `aria-pressed` communicates the state, avoid dynamically updating `aria-label`\\n- The button includes a Tooltip with customizable text via `tooltipTextExpand` and\\n  `tooltipTextCollapse` props (defaults: \\\"Expand View\\\" and \\\"Collapse View\\\")\\n- For optimal keyboard navigation, place `SidePanel.ToggleButton` as the first focusable element in\\n  the panel\\n\\n## Component API\\n\\n## Hooks\\n\\n### useSidePanelModel\\n\\nThe `useSidePanelModel` hook creates a model for managing the SidePanel's state and events. You can\\npass this model to the `SidePanel` component, or let the component create one internally.\\n\\n```tsx\\n\\n// Create a model with custom configuration\\nconst model = useSidePanelModel({\\n  initialTransitionState: 'collapsed',\\n  origin: 'end',\\n  onStateTransition: state => console.log('State:', state),\\n});\\n\\n// Access state\\nmodel.state.transitionState; // 'expanded' | 'expanding' | 'collapsed' | 'collapsing'\\nmodel.state.panelId; // unique ID for the panel\\nmodel.state.labelId; // unique ID for the label\\n\\n// Trigger events\\nmodel.events.expand(); // Set to expanded (no animation)\\nmodel.events.collapse(); // Set to collapsed (no animation)\\nmodel.events.handleAnimationStart(); // Start expand/collapse animation\\n```\\n\\n### useSidePanelContainer\\n\\nThe `useSidePanelContainer` elemProps hook provides the necessary props for the SidePanel container\\nelement, including `id`, `aria-labelledby`, and `onTransitionEnd`.\\n\\n### useSidePanelToggleButtonElemProps\\n\\nThe `useSidePanelToggleButtonElemProps` elemProps hook provides ARIA attributes for the toggle\\nbutton, including `aria-controls`, `aria-expanded`, and `aria-labelledby`.\\n\\n## Specifications\\n\\n\"\n    },\n    \"ai-ingress-button-(ai)\": {\n      \"title\": \"Labs/AI Ingress Button (AI)\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/labs-ai-ingress-button-(ai)--docs\",\n      \"mdxPath\": \"modules/labs-react/ai-ingress-button/stories/AIIngressButton.mdx\",\n      \"mdxProse\": \"# AI Ingress Button\\n\\nCTA to open and close AI Ingress Button\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-labs-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nYou can click to toggle the AI Ingress Button.\\n```tsx\\nimport {useState} from 'react';\\n\\nimport {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';\\n\\nexport const Basic = () => {\\n  const [toggled, setToggled] = useState(false);\\n  return (\\n    <div>\\n      <AIIngressButton\\n        aria-label={toggled ? 'Hide AI Ingress' : 'Show AI Ingress'}\\n        onClick={() => setToggled(!toggled)}\\n        toggled={toggled}\\n      />\\n    </div>\\n  );\\n};\\n```\\n\\n### Inverse Example\\n\\nThe Button can also be used on dark backgrounds.\\n```tsx\\nimport {useState} from 'react';\\n\\nimport {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst darkBackground = createStyles({\\n  background: system.color.bg.contrast.strong,\\n  padding: system.space.x8,\\n});\\n\\nexport const Inverse = () => {\\n  const [toggled, setToggled] = useState(false);\\n  return (\\n    <div className={darkBackground}>\\n      <AIIngressButton\\n        variant=\\\"inverse\\\"\\n        onClick={() => setToggled(!toggled)}\\n        aria-label={toggled ? 'Hide Ingress' : 'Show Ingress'}\\n        toggled={toggled}\\n      />\\n    </div>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"color-preview\": {\n      \"title\": \"Components/Inputs/Color Picker/Color Preview\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-color-picker-color-preview--docs\",\n      \"mdxPath\": \"modules/react/color-picker/stories/color-preview/ColorPreview.mdx\",\n      \"mdxProse\": \"# Canvas Kit Color Preview\\n\\nColor Preview displays a color swatch.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/color-input)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n```tsx\\nimport {ColorPreview} from '@workday/canvas-kit-react/color-picker';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Basic = () => {\\n  return (\\n    <FormField>\\n      <FormField.Label>Current Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorPreview} value=\\\"#00ffcc\\\" />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nColor Preview supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\\nforward `ref` to its underlying `<input type=\\\"text\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorPreview} from '@workday/canvas-kit-react/color-picker';\\nimport {type} from '@workday/canvas-kit-react/tokens';\\n\\nexport const RefForwarding = () => {\\n  const [width, setWidth] = React.useState(null);\\n  const ref = React.useRef(null);\\n\\n  const handleClick = () => {\\n    setWidth(ref.current.offsetWidth);\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Background Color</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={ColorPreview} ref={ref} value=\\\"#00ffcc\\\" />\\n        </FormField.Field>\\n      </FormField>\\n      <p style={type.levels.subtext.large}>Width of Color Preview: {width}</p>\\n      <PrimaryButton onClick={handleClick}>Calculate Width of Color Preview</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorPreview} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const LabelPosition = () => {\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorPreview} value=\\\"#00ffcc\\\" />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"color-input\": {\n      \"title\": \"Components/Inputs/Color Picker/Color Input\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-color-picker-color-input--docs\",\n      \"mdxPath\": \"modules/react/color-picker/stories/color-input/ColorInput.mdx\",\n      \"mdxProse\": \"# Canvas Kit Color Input\\n\\nColor Input lets a user specify a color by entering a hexadecimal value into a text field.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/color-input)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nColor Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet\\naccessibility standards.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Color Input to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} disabled onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Checked\\n\\nSet the `showCheck` prop of the Color Input to display a check icon in the swatch.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Checked = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} showCheck={true} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nColor Input supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\\nforward `ref` to its underlying `<input type=\\\"text\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Background Color</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={ColorInput} onChange={handleChange} ref={ref} value={value} />\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Color Input</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Valid Color Change Callback\\n\\nSet the `onValidColorChange` prop of the Color Input to set a callback for when a valid hex color is\\nprovided.\\n\\nThe color passed to the callback will be prefixed with a hash and expanded if necessary. For\\nexample, `03F` would be converted to `#0033FF`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\nimport {type} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ValidColorChange = () => {\\n  const [value, setValue] = React.useState('');\\n  const [validColor, setValidColor] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleValidColorChange = (color: string) => {\\n    setValidColor(color);\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Background Color</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input\\n            as={ColorInput}\\n            onChange={handleChange}\\n            onValidColorChange={handleValidColorChange}\\n            value={value}\\n          />\\n        </FormField.Field>\\n      </FormField>\\n      <p style={type.levels.subtext.large}>Last valid color: {validColor}</p>\\n    </>\\n  );\\n};\\n```\\n\\n### Grow\\n\\nSet the `grow` prop of the wrapping Form Field to `true` to configure the Color Input to expand to\\nthe width of its container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField cs={{width: '100%'}}>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          cs={{width: '100%'}}\\n          as={ColorInput}\\n          onChange={handleChange}\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\nThe `grow` prop may also be applied directly to the Color Input if Form Field is not being used.\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping Form Field to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the Color Input to the Caution or Error state, respectively. You\\nwill also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility\\nstandards.\\n\\n#### Caution\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField error=\\\"caution\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n        <FormField.Hint>Please select a background color.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n#### Error\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField error=\\\"error\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n        <FormField.Hint>Please select a background color.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"hyperlink\": {\n      \"title\": \"Components/Hyperlink\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs\",\n      \"mdxPath\": \"modules/react/button/stories/button/Hyperlink.mdx\",\n      \"mdxProse\": \"# Canvas Kit Hyperlinks\\n\\nClickable anchor elements that extend the native `<a>` element with Canvas styling.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Hyperlink\\n\\n`Hyperlink`s should be used when you want to navigate away from the current page or to an anchor on\\nthe current page. By default, `Hyperlink`s have an underline for accessibility.\\n\\n#### Inverse\\n\\n`Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink`\\non a dark or colorful background.\\n\\n#### Standalone\\n\\n`Hyperlink`s also have a `standalone` variant. Use this variant when you need to place a `Hyperlink`\\noutside of a paragraph or body text. This will remove the underline.\\n\\nThis variant can also be used with the `ExternalHyperlink` component.\\n\\n#### In Body Text\\n\\nIn most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence where you need to\\nlink to another page or part of the document. By default they will wrap to a new line.\\n\\n> **Accessibility Note:** Underlining links is not required in most cases. However, the example\\n> above is one such exception. When hyperlinked text appears inline with static text, a text\\n> decoration is required to avoid failing WCAG v2.2 success criterion 1.4.1 Use of Color.\\n>\\n> [Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73)\\n\\n### Accessibility\\n\\nOur link components render semantic HTML `<a>` elements to the browser DOM. This means that ARIA\\nroles won't be necessary in most cases. The `href` prop is required for accessibility. Activation\\nlinks with the Enter key is standard expected behavior, while Space is only expected for buttons.\\n\\n#### When to Use Links vs Buttons\\n\\n- **Use Hyperlinks when:** Navigating to different pages or sections, or changing the browser's\\n  location\\n- **Use Buttons when:** Performing actions like submitting forms, opening modals, or triggering\\n  functions without navigation\\n- **Why This Matters:** Screen reader users expect different behaviors from links vs buttons. Users\\n  navigate between links using different keyboard shortcuts than buttons. Browser behaviors like\\n  \\\"Open in new tab\\\" only work with proper links.\\n\\n#### Common Mistakes to Avoid\\n\\n- Using buttons styled as links for navigation (breaks right-click context menus)\\n- Using links for actions like \\\"Delete\\\" or \\\"Save\\\" (confuses user expectations)\\n- Missing `href` attributes on navigation elements (breaks keyboard accessibility)\\n- Using `href=\\\"#\\\"` with `onClick` handlers instead of proper buttons\\n\\n### Component API\\n\\n### ExternalHyperlink\\n\\nIf your link should open in a new tab or window use the `ExternalHyperlink` component. It will let\\nusers know about the behavior by adding an icon, `extLinkIcon`.\\n\\n> **Accessibility Note:** Providing a label to the icon via the `iconLabel` prop is required for\\n> accessibility because the icon adds meaning to the link text. We recommend keeping the alt text as\\n> concise as possible, such as \\\"Opens new window\\\". This override will be needed for translations.\\n\\n`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the\\nlink on a dark or colorful background.\\n\\n`ExternalHyperlink`s will also flip the icon for right-to-left (RTL) languages.\\n\\n### Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"buttons\": {\n      \"title\": \"Components/Buttons\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs\",\n      \"mdxPath\": \"modules/react/button/stories/button/Button.mdx\",\n      \"mdxProse\": \"# Canvas Kit Button\\n\\nClickable button elements that extend the native `<button>` element with Canvas styling.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### PrimaryButton\\n\\nThe example below shows multiple instances of a `PrimaryButton` with various icon configurations.\\n```tsx\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Primary = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <PrimaryButton>Primary</PrimaryButton>\\n    <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n      Primary\\n    </PrimaryButton>\\n    <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n      Primary\\n    </PrimaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <PrimaryButton icon={relatedActionsVerticalIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\nPrimary Buttons also have an `inverse` variant. While it looks similar to the default Secondary\\nButton, the default outline as well as the hover and focus states are different. Use this variant\\nwhen you need to place a Primary Button on a dark or colorful background such as `blueberry400`.\\n```tsx\\nimport React from 'react';\\n\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  backgroundColor: system.color.bg.primary.default,\\n  padding: system.space.x4,\\n});\\n\\nexport const PrimaryInverse = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <PrimaryButton variant=\\\"inverse\\\">Primary</PrimaryButton>\\n    <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\" variant=\\\"inverse\\\">\\n      Primary\\n    </PrimaryButton>\\n    <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\" variant=\\\"inverse\\\">\\n      Primary\\n    </PrimaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <PrimaryButton icon={relatedActionsVerticalIcon} variant=\\\"inverse\\\" />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### SecondaryButton\\n\\nThe example below shows multiple instances of a `SecondaryButton` with various icon configurations.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Secondary = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <SecondaryButton>Secondary</SecondaryButton>\\n    <SecondaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <SecondaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <SecondaryButton icon={relatedActionsVerticalIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\nSecondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button\\non a dark or colorful background such as `blueberry400`.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n  backgroundColor: system.color.bg.primary.default,\\n});\\n\\nexport const SecondaryInverse = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <SecondaryButton variant=\\\"inverse\\\">Secondary</SecondaryButton>\\n    <SecondaryButton icon={plusIcon} variant=\\\"inverse\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <SecondaryButton icon={caretDownIcon} variant=\\\"inverse\\\" iconPosition=\\\"end\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <SecondaryButton icon={relatedActionsVerticalIcon} variant=\\\"inverse\\\" />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### TertiaryButton\\n\\nThe example below shows multiple instances of a `TertiaryButton` with various icon configurations.\\n```tsx\\nimport React from 'react';\\n\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Tertiary = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <TertiaryButton>Tertiary</TertiaryButton>\\n    <TertiaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <TertiaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <TertiaryButton icon={relatedActionsVerticalIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\nTertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button\\non a dark or colorful background such as `blueberry400`.\\n```tsx\\nimport React from 'react';\\n\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n  backgroundColor: system.color.bg.primary.default,\\n});\\n\\nexport const TertiaryInverse = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <TertiaryButton variant=\\\"inverse\\\">Tertiary</TertiaryButton>\\n    <TertiaryButton icon={plusIcon} iconPosition=\\\"start\\\" variant=\\\"inverse\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <TertiaryButton icon={caretDownIcon} iconPosition=\\\"end\\\" variant=\\\"inverse\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <TertiaryButton icon={relatedActionsVerticalIcon} variant=\\\"inverse\\\" />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### DeleteButton\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {trashIcon} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Delete = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <DeleteButton>Delete</DeleteButton>\\n    <DeleteButton icon={trashIcon} iconPosition=\\\"start\\\">\\n      Delete\\n    </DeleteButton>\\n    <DeleteButton icon={trashIcon} iconPosition=\\\"end\\\">\\n      Delete\\n    </DeleteButton>\\n    <Tooltip title=\\\"Delete\\\">\\n      <DeleteButton icon={trashIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### Grow Prop\\n\\nThe example below shows the use of the `grow` prop on different variants of buttons. This will set\\nthe width of the button to the width of its container.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  DeleteButton,\\n  PrimaryButton,\\n  SecondaryButton,\\n  TertiaryButton,\\n} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Grow = () => (\\n  <Flex gap=\\\"s\\\" padding=\\\"s\\\" flexDirection=\\\"column\\\" maxWidth={300}>\\n    <PrimaryButton size=\\\"small\\\" grow={true}>\\n      Primary\\n    </PrimaryButton>\\n    <SecondaryButton size=\\\"small\\\" grow={true}>\\n      Secondary\\n    </SecondaryButton>\\n    <TertiaryButton size=\\\"small\\\" grow={true}>\\n      Tertiary\\n    </TertiaryButton>\\n    <DeleteButton size=\\\"small\\\" grow={true}>\\n      Delete\\n    </DeleteButton>\\n  </Flex>\\n);\\n```\\n\\n### Custom Styles\\n\\nAll of our buttons support custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)\\nor view the example below.\\n```tsx\\nimport {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';\\nimport {Grid} from '@workday/canvas-kit-react/layout';\\nimport {plusIcon} from '@workday/canvas-system-icons-web';\\nimport {createComponent} from '@workday/canvas-kit-react/common';\\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\\nimport {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst customContainer = createStyles({\\n  gap: system.space.x4,\\n  maxWidth: 'max-content',\\n});\\n\\nconst myButtonStencil = createStencil({\\n  base: {\\n    [buttonStencil.vars.background]: system.color.static.green.soft,\\n    [buttonStencil.vars.label]: system.color.static.green.strong,\\n    [systemIconStencil.vars.color]: system.color.static.green.strong,\\n    [buttonStencil.vars.borderRadius]: system.shape.half,\\n    border: `${px2rem(3)} solid transparent`,\\n    '&:focus-visible': {\\n      [buttonStencil.vars.background]: system.color.static.green.strong,\\n      [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,\\n      [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,\\n      [systemIconStencil.vars.color]: system.color.icon.inverse,\\n    },\\n    '&:hover': {\\n      [buttonStencil.vars.background]: system.color.static.green.default,\\n      border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,\\n      [systemIconStencil.vars.color]: system.color.static.green.strong,\\n      [systemIconStencil.vars.color]: system.color.icon.inverse,\\n    },\\n    '&:active': {\\n      [buttonStencil.vars.background]: system.color.static.green.strong,\\n      [buttonStencil.vars.label]: system.color.fg.inverse,\\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\\n    },\\n  },\\n});\\n\\nconst MyCustomButton = createComponent('button')({\\n  Component: ({children, cs, ...elemProps}: PrimaryButtonProps, ref, Element) => (\\n    <PrimaryButton as={Element} ref={ref} cs={[myButtonStencil(), cs]} {...elemProps}>\\n      {children}\\n    </PrimaryButton>\\n  ),\\n});\\n\\nconst myCustomStyles = createStyles({\\n  padding: system.space.x4,\\n  textTransform: 'uppercase',\\n  [buttonStencil.vars.background]: system.color.static.gray.soft,\\n  [buttonStencil.vars.label]: system.color.static.gray.strong,\\n  [systemIconStencil.vars.color]: system.color.static.gray.strong,\\n  [buttonStencil.vars.borderRadius]: system.shape.x2,\\n  [buttonStencil.vars.border]: system.color.static.gray.stronger,\\n  '&:focus-visible': {\\n    [buttonStencil.vars.background]: system.color.static.gray.strong,\\n    [buttonStencil.vars.boxShadowInner]: system.color.static.gray.soft,\\n    [buttonStencil.vars.boxShadowOuter]: system.color.static.gray.strong,\\n    [systemIconStencil.vars.color]: system.color.icon.inverse,\\n  },\\n  '&:hover': {\\n    [buttonStencil.vars.background]: system.color.static.gray.default,\\n    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,\\n    [systemIconStencil.vars.color]: system.color.static.gray.strong,\\n    [systemIconStencil.vars.color]: system.color.icon.inverse,\\n    border: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,\\n  },\\n  '&:active': {\\n    [buttonStencil.vars.background]: system.color.static.gray.strong,\\n    [buttonStencil.vars.label]: system.color.fg.inverse,\\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\\n  },\\n});\\n\\nconst customColors = {\\n  default: {\\n    background: system.color.static.amber.soft,\\n    icon: system.color.static.amber.strong,\\n    label: system.color.static.amber.strong,\\n  },\\n  focus: {\\n    background: system.color.static.amber.strong,\\n    boxShadowInner: system.color.static.amber.soft,\\n    boxShadowOuter: system.color.static.amber.strong,\\n  },\\n  hover: {\\n    background: system.color.static.amber.default,\\n    icon: system.color.icon.inverse,\\n  },\\n  active: {\\n    background: system.color.static.amber.strong,\\n  },\\n  disabled: {},\\n};\\n\\nexport const CustomStyles = () => (\\n  <Grid cs={customContainer}>\\n    <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>\\n    <MyCustomButton icon={plusIcon} cs={myCustomStyles}>\\n      Style Override Via Create Styles\\n    </MyCustomButton>\\n    <PrimaryButton icon={plusIcon} colors={customColors}>\\n      Styling Override Via Colors Prop\\n    </PrimaryButton>\\n  </Grid>\\n);\\n```\\n\\n### Theme Overrides\\n\\nThe most common way to theme our buttons is to pass a `theme` object at the root level of the\\napplication via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`\\ntokens with the fallback being `brand.primary.**`.\\n\\n> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all\\n> `PrimaryButton` theme colors set at the `CanvasProvider` level.\\n\\n> **Note:** You should **not** individually theme components wrapping them with the\\n> `CanvasProvider`, but rather theme at the root level of the application.\\n```tsx\\nimport React from 'react';\\n\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {brand, system} from '@workday/canvas-tokens-web';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nconst customActionTheme = createStyles({\\n  [brand.action.base]: 'teal',\\n  [brand.action.accent]: 'white',\\n  [brand.action.dark]: 'hsla(180, 100%, 20%)',\\n  [brand.action.darkest]: 'hsla(180, 100%, 16%)',\\n});\\n\\nexport const ThemeOverrides = () => (\\n  <div>\\n    <Heading size=\\\"medium\\\" as=\\\"h3\\\">\\n      Override Primary Color Via Canvas Provider\\n    </Heading>\\n    <CanvasProvider\\n      theme={{\\n        canvas: {\\n          palette: {\\n            primary: {\\n              main: 'navy',\\n            },\\n          },\\n        },\\n      }}\\n    >\\n      <Flex cs={parentContainerStyles}>\\n        <PrimaryButton>Primary</PrimaryButton>\\n        <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton aria-label=\\\"Related Actions\\\" icon={relatedActionsVerticalIcon} />\\n      </Flex>\\n    </CanvasProvider>\\n    <Heading size=\\\"medium\\\" as=\\\"h3\\\">\\n      Override Action Color Via CSS Action Token\\n    </Heading>\\n    <div className={customActionTheme}>\\n      <Flex cs={parentContainerStyles}>\\n        <PrimaryButton>Primary</PrimaryButton>\\n        <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton aria-label=\\\"Related Actions\\\" icon={relatedActionsVerticalIcon} />\\n      </Flex>\\n    </div>\\n  </div>\\n);\\n```\\n\\n## Accessibility\\n\\nOur button components render semantic HTML `<button>` elements to the browser DOM. This means that\\nARIA roles won't be necessary in most cases, and `onClick` listeners will automatically support the\\nEnter and Space keys for keyboard interactions.\\n\\n[Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)\\n\\n- An `aria-label` is only necessary for icon-only buttons in most cases. Using\\n  [Canvas Kit's tooltip component](/components/popups/tooltip/) will handle this for you, and all\\n  users will be able to see the label for the button.\\n- When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required\\n  for screen reader support. For example, see Canvas Kit's\\n  [Segmented Control component](/components/buttons/segmented-control/).\\n- When buttons have an attached menu, an `aria-haspopup=\\\"true\\\"` property is required. Using\\n  [Canvas Kit's Menu component](/components/popups/menu/) will handle this for you.\\n- The icons used in text buttons are decorative in most cases and include ARIA `role=\\\"presentation\\\"`\\n  and `focusable=\\\"false\\\"`. In some special cases where an icon does add meaning, you may be required\\n  to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.\\n\\n### Disabled Buttons\\n\\n- Disabled buttons use the `disabled` attribute, removing them from the tab order.\\n- Disabled styling is exempt from WCAG contrast requirements.\\n\\n### Screen Reader Experience\\n\\n- Button text content is announced along with the button role (e.g., \\\"Primary, button\\\").\\n- Icon-only buttons announce the `aria-label` value along with the button role.\\n- Toggle buttons announce their pressed/unpressed state (e.g., \\\"Activity Stream, toggle button,\\n  pressed\\\" and check out the [Segmented Control component](/components/buttons/segmented-control/)).\\n\\n### Touch Target Size\\n\\n- All buttons meet the minimum 24px by 24px touch target size requirement for mobile accessibility.\\n- Button padding ensures adequate spacing between interactive elements to prevent accidental\\n  activation.\\n\\n### Button Groups\\n\\n- Related buttons can be grouped together with HTML unordered list elements or with `<fieldset>` and\\n  `<legend>` elements. This can help give additional context to screen readers about the purpose of\\n  the group.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    }\n  }\n}\n"],
+  "sourcesContent": ["#!/usr/bin/env node\n\nimport {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js';\nimport {getServer} from './index.js';\n\nexport async function main() {\n  const transport = new StdioServerTransport();\n  await getServer().connect(transport);\n}\n\nmain().catch((error: unknown) => {\n  console.error('Fatal error in main():', error);\n  process.exit(1);\n});\n", "// @ts-nocheck\nimport * as fs from 'node:fs';\nimport * as path from 'node:path';\nimport {fileURLToPath} from 'node:url';\n\nimport {z} from 'zod';\nimport packageJson from '../package.json';\nimport fileNames from './config.json';\nimport storiesConfig from './stories-config.json';\nimport {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js';\nimport {\n  registerAppTool,\n  registerAppResource,\n  RESOURCE_MIME_TYPE,\n} from '@modelcontextprotocol/ext-apps/server';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nexport function getServer() {\n  const mcpVersion = packageJson.version;\n  const mcpName = packageJson.name;\n\n  const server = new McpServer(\n    {\n      name: mcpName,\n      version: mcpVersion,\n    },\n    {\n      capabilities: {\n        tools: {},\n        resources: {},\n      },\n    }\n  );\n\n  /**\n   * Metadata for agents about the resource files.\n   */\n  function getUpgradeGuideResource(fileName: string) {\n    switch (fileName) {\n      case 'upgrade-guides/9.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 9.0 Upgrade Guide',\n          description: `# Canvas Kit 9.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v9.\n\nIn this release, we:\n- introduced new Table component\n- removed Drawer, Layout, Column, Stack, HStack, and VStack components\n- removed focusRing and composeModelHooks utilities\n- updated Button, Toast, and Collection components\n- added depth token updates`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/9.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/10.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 10.0 Upgrade Guide',\n          description: `# Canvas Kit 10.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v10.\n\nIn this release, we:\n- introduced new styling package @workday/canvas-kit-styling\n- removed CSS packages and useBanner\n- deprecated Input Icon Container, Select Preview, Space Numbers, and Table\n- updated space and depth tokens\n- updated Button, Popups, and Select components`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/10.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/11.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 11.0 Upgrade Guide',\n          description: `# Canvas Kit 11.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v11.\n\nIn this release, we:\n- transitioned to new CSS variable-based styling approach\n- introduced Canvas Tokens Web package for semantic tokens\n- introduced new styling API for component styling\n- deprecated Form Field Main, Label Text, Text Area Preview, Text Input Preview\n- updated components to use CSS tokens`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/11.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/12.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 12.0 Upgrade Guide',\n          description: `# Canvas Kit 12.0 Upgrade Guide\nCanvas Kit is transitioning into a new way of styling.\nTheming and building an in sync Canvas Kit CSS has been at the top of our minds.\nWe've started using our new Canvas Tokens Web package to take advantage of CSS variables and provide semantic tokens that can translate to theming components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/12.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/13.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 13.0 Upgrade Guide',\n          description: `# Canvas Kit 13.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v13.\n\nIn this release, we:\n- refactored components to use our Canvas tokens and styling API\n- made several accessibility improvements\n- updated our brand logos\n- improved our infrastructure`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/13.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'llm-style-props-migration.txt':\n        return {\n          title: 'Canvas Kit Style Props Migration Guide',\n          description: `# Canvas Kit Style Props Migration Guide\nGuide for migrating from Emotion's style props to @workday/canvas-kit-styling.\nThis migration improves performance, consistency, and maintainability by moving away from runtime styling to static CSS compilation.`,\n          mimeType: 'text/plain',\n          uri: 'docs://llm-style-props-migration',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'upgrade-guides/14.0-UPGRADE-GUIDE.md':\n        return {\n          title: 'Canvas Kit 14.0 Upgrade Guide',\n          description: `# Canvas Kit 14.0 Upgrade Guide\nThis guide contains an overview of the changes in Canvas Kit v14.\n\nIn this release, we:\n- introduced Workday's new brand direction with a new color palette\n- made styling updates to our components\n- improved token system and theming capabilities`,\n          mimeType: 'text/markdown',\n          uri: 'docs://upgrade-guides/14.0-UPGRADE-GUIDE',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'theming.md':\n        return {\n          title: 'Canvas Kit Theming Guide',\n          description: `# Canvas Kit Theming Guide\nComprehensive guide for theming Canvas Kit applications in v14.\n\nCovers:\n- Global theming with CSS variables at :root level (recommended approach)\n- Scoped theming with CanvasProvider for specific sections\n- CSS token structure: base tokens, brand tokens, and system tokens\n- Dark mode implementation\n- RTL support with CSS logical properties\n- Migration from JavaScript theme objects to CSS variables\n- Theming modals, dialogs, and popups\n- Best practices for semantic token usage and accessibility`,\n          mimeType: 'text/markdown',\n          uri: 'docs://theming',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      default:\n        throw new Error(`${fileName} is not a valid resource`);\n    }\n  }\n\n  fileNames.upgradeGuideFiles.forEach(fileName => {\n    const resource = getUpgradeGuideResource(fileName);\n    if (!resource || !resource.contents) {\n      throw new Error(`Resource ${fileName} not found`);\n    }\n    server.registerResource(\n      resource.title,\n      resource.uri,\n      {\n        title: resource.title,\n        description: resource.description,\n        mimeType: resource.mimeType,\n      },\n      async (uri: URL) => ({\n        contents: [\n          {\n            uri: uri.href,\n            text: resource.contents,\n          },\n        ],\n      })\n    );\n  });\n\n  server.registerTool(\n    'get-canvas-kit-upgrade-guides',\n    {\n      title: 'Get Canvas Kit Upgrade Guides',\n      description: 'Retrieve the Canvas Kit Upgrade Guide documentation.',\n      annotations: {\n        readOnlyHint: true,\n      },\n    },\n    async () => {\n      const output = {\n        count: fileNames.upgradeGuideFiles.length,\n        files: fileNames.upgradeGuideFiles.map(fileName => {\n          const resource = getUpgradeGuideResource(fileName);\n          if (!resource) {\n            throw new Error(`Resource ${fileName} not found`);\n          }\n          return {\n            name: resource.title,\n            uri: resource.uri,\n          };\n        }),\n      };\n      return {\n        content: [\n          {type: 'text', text: JSON.stringify(output)},\n          ...fileNames.upgradeGuideFiles.map(fileName => {\n            const resource = getUpgradeGuideResource(fileName);\n            if (!resource) {\n              throw new Error(`Resource ${fileName} not found`);\n            }\n            return {\n              type: 'resource_link' as const,\n              uri: resource.uri,\n              name: resource.title,\n              mimeType: resource.mimeType,\n              description: resource.description,\n              annotations: {\n                audience: ['user', 'assistant'] as ('user' | 'assistant')[],\n              },\n            };\n          }),\n        ],\n        structuredContent: output,\n      };\n    }\n  );\n  /**\n   * Metadata for agents about the token documentation files.\n   */\n  function getTokenResource(fileName: string) {\n    switch (fileName) {\n      case 'tokens/token-migration.md':\n        return {\n          title: 'Canvas Kit Token Migration v2 to v3',\n          description: `# Design Token Migration: v2 to v3\nComprehensive mapping of deprecated tokens to new values. Includes:\n- Old fruit-named palette tokens (cinnamon, cantaloupe, blueberry, etc.) mapped to new color family names (red, amber, blue, etc.)\n- System token replacements for semantic color usage (sys.color.bg.*, sys.color.fg.*, sys.color.border.*)\n- Migration phases: Assessment, Replacement, Testing, Documentation\n- Accessibility considerations for OKLCH color space changes`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/token-migration',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-palette.md':\n        return {\n          title: 'Canvas Kit Color Palette',\n          description: `# Canvas Kit Color Palette\nOverview of Workday's shared color palette. Includes:\n- Global palette with 11 colors and 2 neutrals (Slate, Neutral), each with 13 shades\n- OKLCH color space for perceptual balance\n- Accent colors, neutral colors, and alpha colors guidance\n- Token hierarchy: Base tokens (raw values), Brand tokens (tenant theming), System tokens (semantic roles)\n- Color roles mapping (primary, positive, caution, critical, etc.)`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-palette',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-tokens.md':\n        return {\n          title: 'Canvas Kit Color Tokens',\n          description: `# Canvas Kit Color Tokens\nDesign tokens naming system and usage guide. Includes:\n- Token naming pattern: [property].[role].[modifier]\n- Properties: bg, fg, text, border, icon, shadow, static\n- Roles: default, primary, positive, critical, caution, info, alt, muted, contrast, ai, focus, disabled, inverse, hint, input, container, divider, transparent, translucent, overlay\n- Modifiers: softest, softer, soft, default, strong, stronger, strongest\n- Theming and platform adaptation guidance`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-tokens',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-contrast.md':\n        return {\n          title: 'Canvas Kit Color Contrast',\n          description: `# Canvas Kit Color Contrast\nAccessibility contrast guidelines for color pairings. Includes:\n- WCAG 2.1 compliance requirements (4.5:1 for text, 3:1 for non-text, 7:1 for AAA)\n- Step difference framework: 500+ for AA text, 400+ for AA non-text, 700+ for AAA\n- Practical contrast tables for background/foreground combinations\n- High contrast (7:1+) guidelines for low vision support`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-contrast',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-roles.md':\n        return {\n          title: 'Canvas Kit Color Roles',\n          description: `# Canvas Kit Color Roles\nSemantic color role system for consistent UI styling. Includes:\n- Role categories: Interactive (primary, focus), Status (positive, caution, critical), Hierarchy (alt, muted, contrast), Functional (disabled, translucent, overlay)\n- Property types: bg, fg, text, icon, border, shadow, static, brand\n- Usage guidance with Do's and Don'ts for each role\n- Modifier scale: softest \u2192 softer \u2192 soft \u2192 default \u2192 strong \u2192 stronger \u2192 strongest`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-roles',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/color-scale.md':\n        return {\n          title: 'Canvas Kit Color Scale',\n          description: `# Canvas Kit Color Scale\nTonal scale system from 0 (lightest) to 1000 (darkest). Includes:\n- Step guidelines: 0 (page bg), 50-100 (subtle bg), 200-300 (borders), 400-500 (interactive), 600-700 (accents), 800-950 (text), 975-1000 (dark mode)\n- Perceptual uniformity across color families using OKLCH\n- Amber exception: chroma peaks at 300-400 instead of 500\n- Practical examples for each step range`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/color-scale',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'llm-token-migration-14.txt':\n        return {\n          title: 'Canvas Kit v14 Token Migration Guide',\n          description: `# Canvas Kit v14 Token Migration Guide\nComplete migration guide from @workday/canvas-kit-react/tokens to @workday/canvas-tokens-web. Includes:\n- Installation and CSS variable imports setup\n- Color token mapping tables (old fruit names \u2192 new base tokens \u2192 system tokens)\n- Brand color migration from Emotion theme to CSS variables\n- Spacing tokens (space.s \u2192 system.space.x4), shape tokens (borderRadius \u2192 system.shape)\n- Typography tokens (type.levels \u2192 system.type), depth tokens (depth \u2192 system.depth)\n- Complete before/after code examples for cards, forms, and buttons\n- Best practices and common pitfalls`,\n          mimeType: 'text/plain',\n          uri: 'docs://llm-token-migration-14',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/v4-token-migration.md':\n        return {\n          title: 'Canvas Kit v4 Token Migration Guide',\n          description: `# Canvas Kit v4 Token Migration Guide\nComplete migration guide from @workday/canvas-tokens-web v3 to v4. Includes:\n- Extended alpha scales across base color palettes (A25, A50, A100, A200) and extended alpha range (A0-A975) for slate, neutral, and white palettes\n- New magenta palette added to the color system\n- Brand token updates with numerical naming (25, 50, 100, 200...900, 950, 975) replacing descriptive names (darkest, darker, dark, base, light, lighter, lightest)\n- Brand common token updates: focus-outline \u2192 focus, error-inner \u2192 critical, alert-inner \u2192 caution.inner, alert-outer \u2192 caution.outer\n- Comprehensive surface token system (system.color.surface.*) replacing color.bg.surface.* tokens for better UI component support\n- New semantic tokens for size, space, shape, and breakpoints\n- Focus, accent, and semantic token additions\n- Complete deprecation mapping tables showing old tokens \u2192 new token replacements\n- Migration examples and best practices for updating code from v3 to v4`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/v4-token-migration',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/opacity.md':\n        return {\n          title: 'Canvas Kit v4 Opacity Token Migration Guide',\n          description: `# Canvas Kit v4 Opacity Token Migration Guide\nOpacity tokens control transparency values for UI elements. Use them to create visual hierarchy, indicate states, and guide user focus.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/opacity',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/shape.md':\n        return {\n          title: 'Canvas Kit v4 Shape Token Migration Guide',\n          description: `# Canvas Kit v4 Shape Token Migration Guide\nShape tokens control border radius values for UI elements. Use them to create consistent rounded corners across components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/shape',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/size.md':\n        return {\n          title: 'Canvas Kit v4 Size Token Migration Guide',\n          description: `# Canvas Kit v4 Size Token Migration Guide\nSize tokens control the size of UI elements. Use them to create consistent sizes across components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/size',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      case 'tokens/v4/space.md':\n        return {\n          title: 'Canvas Kit v4 Space Token Migration Guide',\n          description: `# Canvas Kit v4 Space Token Migration Guide\nSpace tokens control the spacing of UI elements. Use them to create consistent spacing across components.`,\n          mimeType: 'text/markdown',\n          uri: 'docs://tokens/v4/space',\n          contents: fs.readFileSync(path.resolve(__dirname, 'lib', fileName), 'utf8'),\n        };\n      default:\n        throw new Error(`${fileName} is not a valid token resource`);\n    }\n  }\n\n  fileNames.tokenFiles.forEach(fileName => {\n    const resource = getTokenResource(fileName);\n    if (!resource || !resource.contents) {\n      throw new Error(`Resource ${fileName} not found`);\n    }\n    server.registerResource(\n      resource.title,\n      resource.uri,\n      {\n        title: resource.title,\n        description: resource.description,\n        mimeType: resource.mimeType,\n      },\n      async (uri: URL) => ({\n        contents: [\n          {\n            uri: uri.href,\n            text: resource.contents,\n          },\n        ],\n      })\n    );\n  });\n\n  server.registerTool(\n    'get-canvas-kit-tokens',\n    {\n      title: 'Get Canvas Kit Tokens',\n      description: `Retrieve Canvas Kit design token documentation for migrating from old tokens to the new @workday/canvas-tokens-web system.\n\nUse this tool when:\n- Migrating from @workday/canvas-kit-react/tokens to @workday/canvas-tokens-web\n- Converting old fruit-named colors (cinnamon, blueberry, cantaloupe) to new token system\n- Understanding the token hierarchy: base tokens, system tokens, and brand tokens\n- Finding the correct system token replacement (sys.color.bg.*, sys.color.fg.*, sys.color.border.*)\n- Learning the token naming pattern: [property].[role].[modifier]\n- Understanding color roles (primary, positive, caution, critical, muted, etc.)\n- Migrating spacing (space.s \u2192 system.space.x4), shape, typography, or depth tokens\n- Ensuring WCAG accessibility compliance with color contrast requirements\n\nReturns links to token documentation resources including migration guides, color palettes, color roles, contrast guidelines, and complete v14 migration examples.`,\n      annotations: {\n        readOnlyHint: true,\n      },\n    },\n    async () => {\n      const output = {\n        count: fileNames.tokenFiles.length,\n        files: fileNames.tokenFiles.map(fileName => {\n          const resource = getTokenResource(fileName);\n          if (!resource) {\n            throw new Error(`Resource ${fileName} not found`);\n          }\n          return {\n            name: resource.title,\n            uri: resource.uri,\n          };\n        }),\n      };\n      return {\n        content: [\n          {type: 'text', text: JSON.stringify(output)},\n          ...fileNames.tokenFiles.map(fileName => {\n            const resource = getTokenResource(fileName);\n            if (!resource) {\n              throw new Error(`Resource ${fileName} not found`);\n            }\n            return {\n              type: 'resource_link' as const,\n              uri: resource.uri,\n              name: resource.title,\n              mimeType: resource.mimeType,\n              description: resource.description,\n              annotations: {\n                audience: ['user', 'assistant'],\n              },\n            };\n          }),\n        ],\n        structuredContent: output,\n      };\n    }\n  );\n\n  interface StoryConfig {\n    title: string;\n    storybookUrl: string;\n    mdxPath: string;\n    mdxProse: string;\n  }\n\n  const stories = storiesConfig.stories as Record<string, StoryConfig>;\n  const storySlugs: string[] = [];\n\n  for (const [slug, story] of Object.entries(stories)) {\n    const appPath = path.resolve(__dirname, 'apps', `${slug}.html`);\n    const appExists = fs.existsSync(appPath);\n\n    if (appExists) {\n      storySlugs.push(slug);\n      registerAppResource(\n        server,\n        story.title,\n        `ui://story/${slug}`,\n        {\n          description: `Interactive preview of the ${story.title} Canvas Kit component`,\n        },\n        async (uri: URL) => ({\n          contents: [\n            {\n              uri: uri.href,\n              text: fs.readFileSync(appPath, 'utf8'),\n              mimeType: RESOURCE_MIME_TYPE,\n              _meta: {\n                ui: {\n                  csp: {\n                    resourceDomains: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],\n                  },\n                },\n              },\n            },\n          ],\n        })\n      );\n    }\n\n    if (story.mdxProse) {\n      server.registerResource(\n        `${story.title} Documentation & Sample Code`,\n        `docs://examples/${slug}`,\n        {\n          title: `${story.title} Documentation & Sample Code`,\n          description: `Documentation and source code for all ${story.title} component examples.`,\n          mimeType: 'text/markdown',\n        },\n        async (uri: URL) => ({\n          contents: [\n            {\n              uri: uri.href,\n              text: story.mdxProse,\n            },\n          ],\n        })\n      );\n    }\n  }\n\n  const storyViewerPath = path.resolve(__dirname, 'apps', 'story-viewer.html');\n  if (storySlugs.length > 0 && fs.existsSync(storyViewerPath)) {\n    const slugEnum = storySlugs as [string, ...string[]];\n\n    registerAppResource(\n      server,\n      'Canvas Kit Story Viewer',\n      'ui://story-viewer',\n      {\n        description: 'Wrapper app that renders Canvas Kit component story previews.',\n      },\n      async (uri: URL) => ({\n        contents: [\n          {\n            uri: uri.href,\n            text: fs.readFileSync(storyViewerPath, 'utf8'),\n            mimeType: RESOURCE_MIME_TYPE,\n            _meta: {\n              ui: {\n                csp: {\n                  resourceDomains: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],\n                },\n              },\n            },\n          },\n        ],\n      })\n    );\n\n    const fetchStoryHandler = async ({story}: {story: string}) => {\n      const config = stories[story];\n      if (!config) {\n        throw new Error(`Unknown story \"${story}\". Valid stories: ${storySlugs.join(', ')}`);\n      }\n      const appPath = path.resolve(__dirname, 'apps', `${story}.html`);\n      const storyHtml = fs.readFileSync(appPath, 'utf8');\n      const hasDocs = !!config.mdxProse;\n      return {\n        content: [\n          {\n            type: 'text' as const,\n            text: JSON.stringify({\n              displayGuide:\n                'Present the Storybook URL as a markdown link. If you need code examples, read the resource_link.',\n              title: config.title,\n              storybookUrl: config.storybookUrl,\n            }),\n          },\n          ...(hasDocs\n            ? [\n                {\n                  type: 'resource_link' as const,\n                  uri: `docs://examples/${story}`,\n                  name: `${config.title} Documentation & Sample Code`,\n                  mimeType: 'text/markdown',\n                  description: `Documentation and code examples for ${config.title}. Read this if you need to write code.`,\n                },\n              ]\n            : []),\n        ],\n        structuredContent: {\n          storyHtml,\n        },\n      };\n    };\n\n    registerAppTool(\n      server,\n      'fetch-component-documentation-example',\n      {\n        title: 'Fetch Canvas Kit Component Documentation and Storybook example',\n        description:\n          'Renders an interactive Canvas Kit component story inline for the user to see.\\n\\n' +\n          'Before Calling:\\n' +\n          '1. Read the docs://examples/{story} resource for documentation and code examples\\n' +\n          '2. Only call this tool if the user needs to see the documentation or code examples\\n' +\n          '3. Do not call this tool just to learn about a component \u2014 read the resource instead',\n        inputSchema: {\n          story: z.enum(slugEnum).describe('The component story slug to preview'),\n        },\n        annotations: {\n          readOnlyHint: true,\n        },\n        _meta: {\n          ui: {resourceUri: 'ui://story-viewer'},\n        },\n      },\n      fetchStoryHandler\n    );\n  }\n\n  return server;\n}\n", "{\n  \"name\": \"@workday/canvas-kit-mcp\",\n  \"version\": \"14.3.13\",\n  \"description\": \"MCP package for Canvas Kit\",\n  \"author\": \"Workday, Inc. (https://www.workday.com)\",\n  \"license\": \"Apache-2.0\",\n  \"type\": \"module\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/Workday/canvas-kit.git\",\n    \"directory\": \"modules/mcp\"\n  },\n  \"bin\": {\n    \"canvas-kit-mcp\": \"./dist/cli.js\"\n  },\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/types/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./lib\": {\n      \"types\": \"./dist/types/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    }\n  },\n  \"main\": \"./dist/index.js\",\n  \"types\": \"./dist/types/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build:discover\": \"tsx ./build/discover-stories.ts\",\n    \"build:apps\": \"tsx ./build/build-story-apps.ts\",\n    \"build:copy\": \"tsx ./build/index.ts\",\n    \"build:types\": \"tsc --project tsconfig.build.json -d true --declarationDir dist/types --emitDeclarationOnly --pretty\",\n    \"build:mcp\": \"esbuild lib/index.ts --bundle --platform=node --packages=external --outfile=dist/index.js --format=esm --sourcemap && esbuild lib/cli.ts --bundle --platform=node --packages=external --outfile=dist/cli.js --format=esm --sourcemap\",\n    \"build\": \"npm-run-all build:discover build:apps build:copy build:types build:mcp\",\n    \"clean\": \"rimraf dist && rimraf .build-info && mkdirp dist\"\n  },\n  \"keywords\": [\n    \"canvas\",\n    \"canvas-kit\",\n    \"workday\",\n    \"mcp\"\n  ],\n  \"dependencies\": {\n    \"@modelcontextprotocol/ext-apps\": \"^1.3.2\",\n    \"@modelcontextprotocol/sdk\": \"^1.29.0\",\n    \"zod\": \"^4.3.6\"\n  },\n  \"devDependencies\": {\n    \"@mdx-js/react\": \"^3.1.0\",\n    \"@mdx-js/rollup\": \"^3.1.0\",\n    \"@types/node\": \"^22.0.0\",\n    \"@vitejs/plugin-react\": \"^4.3.0\",\n    \"esbuild\": \"^0.25.11\",\n    \"glob\": \"^10.5.0\",\n    \"mkdirp\": \"^1.0.3\",\n    \"remark-gfm\": \"^4.0.0\",\n    \"rimraf\": \"^5.0.0\",\n    \"tsx\": \"^4.7.0\",\n    \"typescript\": \"5.0\",\n    \"vite\": \"^5.0.0\",\n    \"vite-plugin-singlefile\": \"^2.0.0\"\n  }\n}\n", "{\n  \"upgradeGuideFiles\": [\n    \"upgrade-guides/9.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/10.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/11.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/12.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/13.0-UPGRADE-GUIDE.md\",\n    \"upgrade-guides/14.0-UPGRADE-GUIDE.md\",\n    \"llm-style-props-migration.txt\",\n    \"theming.md\"\n  ],\n  \"tokenFiles\": [\n    \"tokens/token-migration.md\",\n    \"tokens/color-palette.md\",\n    \"tokens/color-tokens.md\",\n    \"tokens/color-contrast.md\",\n    \"tokens/color-roles.md\",\n    \"tokens/color-scale.md\",\n    \"llm-token-migration-14.txt\",\n    \"tokens/v4/v4-token-migration.md\",\n    \"tokens/v4/opacity.md\",\n    \"tokens/v4/shape.md\",\n    \"tokens/v4/size.md\",\n    \"tokens/v4/space.md\"\n  ]\n}\n", "{\n  \"stories\": {\n    \"tooltip\": {\n      \"title\": \"Components/Popups/Tooltip\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs\",\n      \"mdxPath\": \"modules/react/tooltip/stories/Tooltip.mdx\",\n      \"mdxProse\": \"# Canvas Kit React Tooltips\\n\\nA Tooltip component that renders information/text when the user hovers over an element. A tooltip is\\nused to label or describe an element. By default, a tooltip will label an element. This is useful\\nfor buttons with icons. A tooltip can also be used to describe additional information about an\\nelement\\n\\n[> Workday Design Reference](https://design.workday.com/components/popups/tooltips)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThis component follows the\\n[W3 Tooltip specification](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). Tooltips are used to\\nlabel buttons with icons and provide additional context to elements.\\n\\n### When to use tooltips\\n\\nUse a tooltip when you want to display additional information for users to better understand the\\npurpose, context, or interaction.\\n\\n### When not to use tooltips\\n\\nWhen the visual text will be the exact same as what is visually displayed to the user without the\\ntooltip being visible\\n\\n- Does this element need additional context or information?\\n  - No: Don't use a tooltip\\n  - Yes:\\n    - Is the tooltip text useful to screen reader users?\\n      - No: Use `type=\\\"muted\\\"` which will not make the tooltip visible to screen reader users\\n      - Yes:\\n        - Is the tooltip text different from the visual text displayed to users?\\n          - No text: Use `type=\\\"label\\\"` which will add `aria-label` like the icon example\\n          - Yes: Use `type=\\\"describe\\\"` which will add `aria-describedby`\\n          - No: Don't use a tooltip\\n\\n### Basic Example\\n\\nHere is a basic example of a `TertiaryButton` that renders an icon using a tooltip to label the\\nicon. This labels the button for both sighted users and screen readers. A tooltip provides an\\n`aria-label` to child elements for the accessibility tree and a visual tooltip during mouse hover\\nand focus events.\\n```tsx\\nimport {xIcon} from '@workday/canvas-system-icons-web';\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const Default = () => {\\n  return (\\n    <Tooltip title=\\\"Close\\\">\\n      <TertiaryButton icon={xIcon} aria-label=\\\"Close\\\" />\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Describing an Element\\n\\nThe default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to\\nprovide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`\\nto the target element. This will allow screen reader users to hear the name of the control that is\\nbeing focused and the ancillary tooltip information.\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const DescribeType = () => {\\n  return (\\n    <Tooltip type=\\\"describe\\\" title=\\\"The service will restart after this action\\\">\\n      <DeleteButton>Delete</DeleteButton>\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Description of an Element\\n\\nThe default mode for a tooltip is to assign a name to the target element with an `aria-label`\\nstring. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.\\nThis will add `aria-description` strings to the target element instead. This variant is useful on\\ntext buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible. \\n\\n> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.\\n>\\n> ```jsx\\n> // The text will be understood as: You must accept terms and conditions\\n> <Tooltip type=\\\"description\\\" title={<span>You<i>must</i> accept terms and conditions</span>}/>\\n>\\n> // This will render a string including the html and will not be properly understood by voice over.\\n> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>\\n> <Tool\\n```tsx\\nimport {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {chartConfigIcon} from '@workday/canvas-system-icons-web';\\n\\nexport const DescriptionType = () => {\\n  return (\\n    <Flex gap=\\\"s\\\">\\n      <Tooltip type=\\\"description\\\" title=\\\"Search using additional criteria\\\">\\n        <TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>\\n      </Tooltip>\\n      <Tooltip type=\\\"description\\\" title=\\\"Create saved search\\\">\\n        <SecondaryButton>Save</SecondaryButton>\\n      </Tooltip>\\n      <Tooltip type=\\\"description\\\" title=\\\"The service will restart after this action\\\">\\n        <DeleteButton>Delete</DeleteButton>\\n      </Tooltip>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Muted Tooltips\\n\\nIf a tooltip does not need to be visible to screen reader users, or you handle accessibility of the\\ntooltip yourself, you can set the `type` to `muted`. This will not add any special ARIA attributes\\nto the target element.\\n```tsx\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const Muted = () => {\\n  return (\\n    <Tooltip title=\\\"Visual-only Tooltip\\\" type=\\\"muted\\\">\\n      <span>Some text. The contents of the tooltip are invisible to screen reader users.</span>\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Custom Content\\n\\nA tooltip can contain HTML, but should not contain any focusable elements or semantically meaningful\\nformatting. The content will lose all semantic meaning when read by a screen reader. If complex\\ncontent or a focusable element is needed by your UI, a tooltip is not a good choice. Consider using\\na dialog instead.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const CustomContent = () => {\\n  return (\\n    <React.Fragment>\\n      <Tooltip\\n        type=\\\"describe\\\"\\n        title={\\n          <div>\\n            This is a <em>custom</em> tooltip with <strong>custom HTML</strong>\\n          </div>\\n        }\\n      >\\n        <SecondaryButton>Hover Me</SecondaryButton>\\n      </Tooltip>\\n    </React.Fragment>\\n  );\\n};\\n```\\n\\n### Delayed Tooltip\\n\\nThe default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can\\ncontrol the length of the delay by providing custom `showDelay` and `hideDelay` in ms.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const DelayedTooltip = () => {\\n  return (\\n    <React.Fragment>\\n      <Tooltip type=\\\"describe\\\" title=\\\"Tooltip Text\\\" showDelay={2000} hideDelay={1000}>\\n        <SecondaryButton>\\n          Tooltip appears after 2 seconds and disappears after 1 second\\n        </SecondaryButton>\\n      </Tooltip>\\n    </React.Fragment>\\n  );\\n};\\n```\\n\\n### Placements\\n\\nThe tooltip allows for a `placement` configuration. The tooltip uses\\n[PopperJS](https://popper.js.org/) to position tooltips, so any valid PopperJS placement is valid\\nfor tooltips.\\n```tsx\\nimport React from 'react';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Card} from '@workday/canvas-kit-react/card';\\nimport {Placement} from '@workday/canvas-kit-react/popup';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst placementCardStyles = createStyles({\\n  boxShadow: system.depth[2],\\n  display: 'flex',\\n  width: 100,\\n  height: 100,\\n  justifyContent: 'space-around',\\n  alignItems: 'center',\\n  padding: system.space.x1,\\n});\\n\\nexport const Placements = () => {\\n  const placementStyles = {\\n    display: 'flex',\\n    justifyContent: 'space-around',\\n  };\\n\\n  const createPlacement = (placement: string, index) => {\\n    return (\\n      <Tooltip title=\\\"Add\\\" placement={placement as Placement} key={index}>\\n        <Card cs={placementCardStyles}>\\n          <Card.Body>{placement}</Card.Body>\\n        </Card>\\n      </Tooltip>\\n    );\\n  };\\n\\n  return (\\n    <div\\n      style={{\\n        padding: 100, // give enough room for the tooltips to fit around their targets\\n        display: 'grid',\\n        gridTemplateColumns: '100px 320px 100px',\\n        gridTemplateRows: '100px 320px 100px',\\n      }}\\n    >\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'row'}}>\\n        {['top-start', 'top', 'top-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'column'}}>\\n        {['left-start', 'left', 'left-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'column'}}>\\n        {['right-start', 'right', 'right-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n      <div style={{...placementStyles, flexDirection: 'row'}}>\\n        {['bottom-start', 'bottom', 'bottom-end'].map(createPlacement)}\\n      </div>\\n      <div />\\n    </div>\\n  );\\n};\\n```\\n\\n### Tooltips on overflowing content\\n\\nThe `OverflowTooltip` component can be applied to any element that has some type of overflow\\napplied, or has a child element that has overflow applied. The most common and widely supported type\\nof truncation is the ellipsis.\\n\\n```css\\noverflow: hidden;\\ntext-overflow: ellipsis;\\nwhite-space: nowrap;\\n```\\n\\n**Note**: Text truncation should be avoided if possible. A user should not have to activate a\\ntooltip to access important content. If user-generated content is being truncated, the following\\nsituation might occur which is a bad user experience. Consider the following list:\\n\\n- Home Site A\\n- Home Site B\\n- Home Site C\\n\\nIf the list items get truncated via an ellipsis, this is what the user could see:\\n\\n- Home Sit...\\n- Home Sit...\\n- Home Sit...\\n\\nHere are suggestions to try to avoid truncation:\\n\\n- Allow content to wrap instead\\n- Limit character count in admin interfaces if possible to avoid need for truncation\\n- Avoid fixed container sizes if possible to allow content to flow naturally\\n\\nIf truncation is required, here are a few guidelines to insure minimal impact on users:\\n\\n- Only truncate text of elements that naturally receive focus.\\n  - Keyboard users can only activate tooltips with focus. Adding `tabindex=0` can give focus to\\n    non-focusable elements, but increase the amount of tab stops for keyboard users.\\n- Provide the full content elsewhere in the UI\\n\\nCanvas Kit Buttons have this style applied to the text inside them. `OverflowTooltip` in combination\\nwith a max-width can show a tooltip only when overflow is detected:\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\nimport {resetIcon} from '@workday/canvas-system-icons-web';\\n\\nconst CustomContent = ({...elemProps}) => (\\n  <button\\n    style={{\\n      marginTop: space.xs,\\n      maxWidth: 200,\\n      overflow: 'hidden',\\n      textOverflow: 'ellipsis',\\n      whiteSpace: 'nowrap',\\n    }}\\n    {...elemProps}\\n  >\\n    Super Mega Ultra Long Content With Max Width Custom\\n  </button>\\n);\\n\\nexport const Ellipsis = () => {\\n  return (\\n    <React.Fragment>\\n      <OverflowTooltip>\\n        <SecondaryButton>Short Content</SecondaryButton>\\n      </OverflowTooltip>{' '}\\n      <OverflowTooltip>\\n        <SecondaryButton style={{maxWidth: 200}}>\\n          Super Mega Ultra Long Content With Max Width On The Button\\n        </SecondaryButton>\\n      </OverflowTooltip>\\n      <OverflowTooltip>\\n        <SecondaryButton icon={resetIcon} style={{maxWidth: 200}}>\\n          Super Mega Ultra Long Content With Max Width On The Button with Icon\\n        </SecondaryButton>\\n      </OverflowTooltip>\\n      <OverflowTooltip>\\n        <button\\n          style={{\\n            marginTop: space.xs,\\n            maxWidth: 200,\\n            overflow: 'hidden',\\n            textOverflow: 'ellipsis',\\n            whiteSpace: 'nowrap',\\n          }}\\n        >\\n          Super Mega Ultra Long Content With Max Width\\n        </button>\\n      </OverflowTooltip>\\n      <OverflowTooltip>\\n        <CustomContent />\\n      </OverflowTooltip>\\n    </React.Fragment>\\n  );\\n};\\n```\\n\\n### Line Clamp\\n\\nThe `OverflowTooltip` can support various types of overflow. The component will first look for\\n`text-overflow: ellipsis` and `-webkit-line-clamp`, but will fall back to\\n`overflow: auto | scroll | clip | hidden`. These properties will be used to determine which\\n`element` is experiencing an overflow. Overflow detection is as follows where `element` is\\ndetermined by the above style properties:\\n\\n```js\\nelement.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;\\n```\\n\\nHere's an example using the `-webkit-line-clamp` property (multi-line ellipsis which works in all\\nbrowsers):\\n```tsx\\nimport React from 'react';\\n\\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const LineClamp = () => {\\n  return (\\n    <OverflowTooltip>\\n      <button>\\n        <span\\n          style={{\\n            display: '-webkit-box',\\n            overflow: 'hidden',\\n            maxWidth: 200,\\n            WebkitBoxOrient: 'vertical',\\n            WebkitLineClamp: 3,\\n          }}\\n        >\\n          Super Mega Ultra Long Content With Max Width. Super Mega Ultra Long Content With Max\\n          Width.\\n        </span>\\n      </button>\\n    </OverflowTooltip>\\n  );\\n};\\n```\\n\\nOther truncation techniques should be supported as well, even JavaScript ones as long as overflow is\\ntriggered somehow and detectable differences in scroll size and client size.\\n\\n### The UseTooltip Hook\\n\\nThe `Tooltip` component is a combination of the `TooltipContainer` (a styled element), `Popper`\\n(which uses PopperJS and the popup stack), the `useTooltip` hook and some behavior. If custom\\nbehavior is required, these sub-components can be composed in a custom container element. This\\nexample uses those parts directly while being functionally equivalent to the original basic example.\\n```tsx\\nimport React from 'react';\\n\\nimport {Popper} from '@workday/canvas-kit-react/popup';\\nimport {xIcon} from '@workday/canvas-system-icons-web';\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nexport const UseTooltip = () => {\\n  const {targetProps, popperProps, tooltipProps} = useTooltip();\\n\\n  return (\\n    <>\\n      <TertiaryButton icon={xIcon} {...targetProps} aria-label=\\\"Close\\\" />\\n      <Popper placement=\\\"top\\\" {...popperProps}>\\n        <TooltipContainer {...tooltipProps}>Close</TooltipContainer>\\n      </Popper>\\n    </>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"toast\": {\n      \"title\": \"Components/Popups/Toast\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs\",\n      \"mdxPath\": \"modules/react/toast/stories/toast.mdx\",\n      \"mdxProse\": \"# Canvas Kit Toast\\n\\n`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nthat contains updates or messages about the status of an application's process.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,\\n`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.\\n\\n`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode\\nconveys a different purpose of the message and assigns the necessary ARIA attributes to support that\\npurpose and provide an accessible experience.\\n\\nBy default, `mode` is set to `status`, which indicates the message contains advisory information\\nsuch as a successful action.\\n```tsx\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\n\\nexport const Basic = () => {\\n  return (\\n    <Toast>\\n      <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n      <Toast.Body>\\n        <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n      </Toast.Body>\\n    </Toast>\\n  );\\n};\\n```\\n\\nA `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of\\n`status`.\\n\\nHere's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is\\npositioned using `Popper`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\nimport {Popper} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const WithPopper = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const containerRef = React.useRef(null);\\n\\n  const handleClose = () => {\\n    setOpen(false);\\n  };\\n\\n  const handleOpen = () => {\\n    setOpen(true);\\n  };\\n\\n  return (\\n    <div ref={containerRef}>\\n      <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>\\n      <Popper placement=\\\"bottom-end\\\" open={open} anchorElement={containerRef}>\\n        <Toast mode=\\\"dialog\\\" aria-label=\\\"notification\\\">\\n          <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n          <Toast.Body>\\n            <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n          </Toast.Body>\\n          <Toast.CloseIcon aria-label=\\\"Close notification\\\" onClick={handleClose} />\\n        </Toast>\\n      </Popper>\\n    </div>\\n  );\\n};\\n```\\n\\n### Alert\\n\\nSet the `mode` prop to `alert` to convey urgent and important information such as an error.\\n```tsx\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {exclamationCircleIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ToastAlert = () => (\\n  <Toast mode=\\\"alert\\\">\\n    <Toast.Icon icon={exclamationCircleIcon} color={colors.cinnamon500} />\\n    <Toast.Body>\\n      <Toast.Message>There was an error with your workbook.</Toast.Message>\\n    </Toast.Body>\\n  </Toast>\\n);\\n```\\n\\nAn `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of\\n`alert`.\\n\\n### Dialog\\n\\nSet the `mode` prop to `dialog` to convey the presence of a follow-up action. If you use this\\n`mode`, you need to add an `aria-label`. This `aria-label` should be additional information for the\\n`Toast` such as `notification`. The `Toast` will also add an `aria-describedby` that links the\\n`Toast` to `Toast.Message` so that it is read out to screen readers. The `aria-label` should be\\ndifferent that the contents of the `Toast` so there is no duplication being read out by screen\\nreaders.\\n```tsx\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\n\\nexport const ToastDialog = () => (\\n  <Toast mode=\\\"dialog\\\" aria-label=\\\"notification\\\">\\n    <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n    <Toast.Body>\\n      <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n      <Toast.Link href=\\\"#hreflink\\\">Custom Link</Toast.Link>\\n    </Toast.Body>\\n  </Toast>\\n);\\n```\\n\\nScreen readers will read the `Toast` out in the following order: \\\"Notification: Your workbook was\\nsuccessfully processed.\\\"\\n\\n> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`\\n> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to\\n> provide a specific `id` for the `Toast.Message`\\n\\n```tsx\\nexport const CustomIDToast = () => {\\n  const model = useToastModel({\\n    id: '12df5',\\n    mode: 'dialog',\\n  });\\n  return (\\n    <Toast model={model}>\\n      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />\\n      <Toast.Body>\\n        <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n        <Toast.Link href=\\\"#href\\\">View More Details</Toast.Link>\\n      </Toast.Body>\\n    </Toast>\\n  );\\n};\\n```\\n\\n`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action\\nlink and a close button.\\n```tsx\\nimport React from 'react';\\n\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const WithActionLinkAndCloseIcon = () => {\\n  const handleClose = () => console.log('close button clicked');\\n\\n  return (\\n    <Toast mode=\\\"dialog\\\" aria-label=\\\"notification\\\">\\n      <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n      <Toast.Body>\\n        <Toast.Message>Your workbook was successfully</Toast.Message>\\n        <Toast.Link href=\\\"#hyperlink\\\">Custom Link</Toast.Link>\\n      </Toast.Body>\\n      <Toast.CloseIcon aria-label=\\\"Close notification\\\" onClick={handleClose} />\\n    </Toast>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Toast} from '@workday/canvas-kit-react/toast';\\nimport {checkIcon} from '@workday/canvas-system-icons-web';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  const handleClose = () => console.log('close button clicked');\\n\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Toast>\\n        <Toast.Icon icon={checkIcon} color=\\\"greenApple400\\\" />\\n        <Toast.Body>\\n          <Toast.Message>Your workbook was successfully processed.</Toast.Message>\\n        </Toast.Body>\\n        <Toast.CloseIcon aria-label=\\\"Close\\\" onClick={handleClose} />\\n      </Toast>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"text-input\": {\n      \"title\": \"Components/Inputs/Text Input\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs\",\n      \"mdxPath\": \"modules/react/text-input/stories/TextInput.mdx\",\n      \"mdxProse\": \"# Canvas Kit Text Input\\n\\nText Inputs allow users to enter words or characters without styling.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-input)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nText Input should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\\nproper label association and screen reader support.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Text Input to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} disabled onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Placeholder\\n\\nSet the `placeholder` prop of the Text Input to display a sample of its expected format or value\\nbefore a value has been provided.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Placeholder = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextInput}\\n          onChange={handleChange}\\n          placeholder=\\\"user@email.com\\\"\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\\n> placeholder text as the only label for an input. Placeholders can disappear or lack sufficient\\n> contrast. Use placeholders only for short format examples (e.g., \\\"name@example.com\\\"), and place\\n> detailed instructions or guidance in `FormField.Hint` instead of the placeholder.\\n\\n### Ref Forwarding\\n\\nText Input supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<input type=\\\"text\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} onChange={handleChange} ref={ref} value={value} />\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Grow\\n\\nSet the `grow` prop of the wrapping Form Field to `true` to configure the Text Input to expand to\\nthe width of its container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField grow>\\n      <FormField.Label>Street Address</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\nThe `grow` prop may also be applied directly to the Text Input if Form Field is not being used.\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n        <FormField.Hint>Add a valid email</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Icons\\n\\n`InputGroup` is available to add icons to the `TextInput`. Internally, a container `div` element is\\nused with relative position styling on the `div` and absolute position styling on the start and end\\nicons. `InputGroup.InnerStart` and `InputGroup.InnerEnd` are used to position elements at the start\\nand end of the input. \\\"start\\\" and \\\"end\\\" are used instead of \\\"left\\\" and \\\"right\\\" to match\\n[CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)\\nand will be semantically correct in left-to-right and right-to-left languages.\\n\\n`InputGroup.InnerStart` and `InputGroup.InnerEnd` subcomponents can handle any child elements, but\\nare built for icons. The default width is `40px`, which is perfect for icons. If you need to use\\nsomething else, be sure to set the `width` property of `InputGroup.InnerStart` or\\n`InputGroup.InnerEnd` to match the intended width of the element. Do not use the `cs` prop or any\\nmethod to change width. The `width` prop is used to correctly position other inner elements.\\n```tsx\\nimport React from 'react';\\n\\nimport {mailIcon} from '@workday/canvas-system-icons-web';\\nimport {\\n  FormField,\\n  useFormFieldModel,\\n  useFormFieldInput,\\n} from '@workday/canvas-kit-react/form-field';\\nimport {InputGroup} from '@workday/canvas-kit-react/text-input';\\nimport {SystemIcon} from '@workday/canvas-kit-react/icon';\\n\\n/**\\n * Using `as={InputGroup}` on `FormField.Input` will break the label associations necessary for accessibility.\\n * In this example, we've rendered `FormField.Field` as `InputGroup` and then hoisted the `id` of the input from the FormField model.\\n * This allows us to set the `id` of the `InputGroup.Input` correctly for proper label association.\\n */\\n\\nexport const Icons = () => {\\n  const model = useFormFieldModel();\\n  const {id: formFieldInputId} = useFormFieldInput(model);\\n\\n  return (\\n    <FormField model={model}>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field as={InputGroup}>\\n        <InputGroup.InnerStart>\\n          <SystemIcon icon={mailIcon} size=\\\"small\\\" />\\n        </InputGroup.InnerStart>\\n        <InputGroup.Input id={formFieldInputId} autoComplete=\\\"email\\\" />\\n        <InputGroup.InnerEnd>\\n          <InputGroup.ClearButton />\\n        </InputGroup.InnerEnd>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In this example, the mail icon is decorative and hidden from screen\\n> readers. If icons are used for conveying meaning in addition to the label text, a text alternative\\n> must be provided for screen readers.\\n\\n### Error States\\n\\nForm Field provides error and caution states for Text Input. Set the `error` prop on Form Field to\\n`\\\"error\\\"` or `\\\"caution\\\"` and use `FormField.Hint` to provide error messages. See\\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for examples and\\naccessibility guidance.\\n\\n## Accessibility\\n\\n`TextInput` should be used with [Form Field](/components/inputs/form-field/) to ensure proper\\nlabeling, error handling, and help text association. See\\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility) for\\ncomprehensive guidance on form accessibility best practices.\\n\\n### Autocomplete Attribute\\n\\n- Add appropriate `autoComplete` values to indicate the input's purpose (e.g., `\\\"email\\\"`, `\\\"name\\\"`,\\n  `\\\"street-address\\\"`, `\\\"tel\\\"`). Read more about\\n  [Identify Input Purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html).\\n- Autocomplete enables browser autofill and helps assistive technologies understand the field's\\n  purpose, benefiting users with cognitive disabilities and motor impairments.\\n- Autocomplete also helps password managers identify the correct fields.\\n\\n### Input Type for Mobile Keyboards\\n\\n`TextInput` defaults to `<input type=\\\"text\\\">`, but for better mobile keyboard support, use more\\nspecific `type` attributes (like `\\\"email\\\"`, `\\\"tel\\\"`, `\\\"url\\\"`, or `\\\"search\\\"`) as needed.\\n\\n### Screen Reader Experience\\n\\nWhen properly implemented with `FormField`, screen readers will announce:\\n\\n- The label text when the input receives focus.\\n- Required, disabled, or read-only status.\\n- Help text and error messages (via `aria-describedby`).\\n- The current value or \\\"blank\\\" if empty.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"textarea\": {\n      \"title\": \"Components/Inputs/TextArea\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs\",\n      \"mdxPath\": \"modules/react/text-area/stories/TextArea.mdx\",\n      \"mdxProse\": \"# Canvas Kit Text Area\\n\\nText Areas allow users to enter and edit multiple lines of text.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/text-area)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nText Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure\\nproper label association and screen reader support.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Text Area to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Placeholder\\n\\nSet the `placeholder` prop of the Text Area to display a sample of its expected format or value\\nbefore a value has been provided.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Placeholder = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextArea}\\n          onChange={handleChange}\\n          placeholder=\\\"Let us know how we did!\\\"\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on\\n> placeholder text as the only label for a text area. Placeholders can disappear or lack sufficient\\n> contrast. Use placeholders only for short format examples, and place detailed instructions or\\n> guidance in `FormField.Hint` instead of the placeholder.\\n\\n### Ref Forwarding\\n\\nText Area supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<textarea>` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Leave a Review</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Resize Constraints\\n\\nSet the `resize` prop of the Text Area to restrict resizing of it to certain dimensions. `resize`\\naccepts the following values:\\n\\n- `TextArea.ResizeDirection.Both` (Default)\\n- `TextArea.ResizeDirection.Horizontal`\\n- `TextArea.ResizeDirection.None`\\n- `TextArea.ResizeDirection.Vertical`\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const ResizeConstraints = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextArea}\\n          onChange={handleChange}\\n          resize={TextArea.ResizeDirection.Vertical}\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Allowing users to resize the text area (default `resize: both`) improves\\n> accessibility by letting them adjust it for comfort. Avoid disabling resizing (`resize: none`)\\n> unless necessary, and always ensure the initial size meets the needs of your content.\\n\\n### Grow\\n\\nSet the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of\\nits container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField grow>\\n      <FormField.Label>Leave a Review foo</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n        <FormField.Hint>Message must be under 200 characters</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Leave a Review</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={TextArea} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nForm Field provides error and caution states for Text Area. Set the `error` prop on Form Field to\\n`\\\"error\\\"` or `\\\"caution\\\"` and use `FormField.Hint` to provide error messages. See\\n[Form Field's Error documentation](/components/inputs/form-field/#error-states) for\\nexamples and accessibility guidance.\\n\\n## Accessibility\\n\\n`TextArea` should be used with [Form Field](/components/inputs/form-field/) to\\nensure proper labeling, error handling, and help text association. See\\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility)\\nfor comprehensive guidance on form accessibility best practices.\\n\\n### Character Limits\\n\\nWhen limiting text area length:\\n\\n- Use the `maxLength` attribute to enforce the limit programmatically.\\n- For longer limits (100+ characters), consider adding character count information to\\n  `FormField.Hint`.\\n- Avoid announcing character counts after every keystroke, as this disrupts screen reader users.\\n  Check out\\n  [Debouncing an AriaLiveRegion: TextArea with character limit](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs#debouncing-an-arialiveregion-textarea-with-character-limit)\\n  for an example of how to wait for users to stop typing before announcing the character count to\\n  screen readers.\\n\\n### Screen Reader Experience\\n\\nWhen properly implemented with `FormField`, screen readers will announce:\\n\\n- The label text when the text area receives focus.\\n- Required, disabled, or read-only status.\\n- Help text and error messages (via `aria-describedby`).\\n- The current value or \\\"blank\\\" if empty.\\n- That it's a multi-line text input field.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"title\": {\n      \"title\": \"Components/Text/Title\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-title--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Title.mdx\",\n      \"mdxProse\": \"# Canvas Kit Title\\n\\n`Title` provides a simple way to render title-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Title` is a Type Level component (along with [`Heading`](/components/text/heading/),\\n[`BodyText`](/components/text/body-text/), and [`Subtext`](/components/text/subtext/)) built on top\\nof [`Text`](/components/text/text/) which provides a simple way to render title-level text according\\nto the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`Title` renders an `<h1>` element by default with styles equivalent to `type.levels.title[size]`.\\nYou may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nTitle supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"text\": {\n      \"title\": \"Components/Text/Text\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Text.mdx\",\n      \"mdxProse\": \"# Canvas Kit Text\\n\\n`Text` provides an ergonomic API for rendering text. It includes built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Text` is built on top of [`Box`](/components/layout/box/) and supports a multitude of\\n[style props](/get-started/for-developers/documentation/style-props/) including spacing props such\\nas `margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.\\n\\n`Text` renders a `<span>` element by default. You may override the rendered element using the `as`\\nprop.\\n\\n### Type Level and Variant\\n\\n`Text` includes built-in support for [Canvas type tokens](/tokens/type/) via the `typeLevel` and\\n`variant` props.\\n\\n`typeLevel` hooks into the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`variant` allows you to layer [additional styling](/tokens/type/#variants) to aid users'\\nunderstanding of the text being rendered.\\n\\n### Custom Styles\\n\\nText supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"subtext\": {\n      \"title\": \"Components/Text/Subtext\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-subtext--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Subtext.mdx\",\n      \"mdxProse\": \"# Canvas Kit Subtext\\n\\n`Subtext` provides a simple way to render subtext-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Subtext` is a Type Level component (along with [`Title`](/components/text/title/),\\n[`Heading`](/components/text/heading/), and [`BodyText`](/components/text/body-text/)) built on top\\nof [`Text`](/components/text/text/) which provides a simple way to render subtext-level text\\naccording to the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`Subtext` renders a `<p>` element by default with styles equivalent to `type.levels.subtext[size]`.\\nYou may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nSubtext supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"heading\": {\n      \"title\": \"Components/Text/Heading\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs\",\n      \"mdxPath\": \"modules/react/text/stories/Heading.mdx\",\n      \"mdxProse\": \"# Canvas Kit Heading\\n\\n`Heading` provides a simple way to render heading-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Heading` is a Type Level component (along with [`Title`](/components/text/title/),\\n[`BodyText`](/components/text/body-text/), and [`Subtext`](/components/text/subtext/)) built on top\\nof [`Text`](/components/text/text/) which provides a simple way to render heading-level text\\naccording to the [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`Heading` renders an `<h2>` element by default with styles equivalent to\\n`type.levels.heading[size]`. You may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nHeading supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"body-text\": {\n      \"title\": \"Components/Text/Body Text\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-text-body-text--docs\",\n      \"mdxPath\": \"modules/react/text/stories/BodyText.mdx\",\n      \"mdxProse\": \"# Canvas Kit Body Text\\n\\n`BodyText` provides a simple way to render body-level text with built-in support for Canvas type\\ntokens.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`BodyText` is a Type Level component (along with [`Title`](/components/text/title/),\\n[`Heading`](/components/text/heading/), and [`Subtext`](/components/text/subtext/)) built on top of\\n[`Text`](/components/text/text/) which provides a simple way to render body-level text according to\\nthe [Canvas type hierarchy](/tokens/type/#type-styles).\\n\\n`BodyText` renders a `<p>` element by default with styles equivalent to `type.levels.body[size]`.\\nYou may override the rendered element using the `as` prop.\\n\\n### Custom Styles\\n\\nBody Text supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"tabs\": {\n      \"title\": \"Components/Containers/Tabs\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-tabs--docs\",\n      \"mdxPath\": \"modules/react/tabs/stories/Tabs.mdx\",\n      \"mdxProse\": \"# Canvas Kit Tabs\\n\\n`Tabs` is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nthat allows users to navigate between related views of content while remaining in context of the\\npage.\\n\\n[> Workday Design Reference](https://design.workday.com/components/navigation/tabs)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Tabs` includes a container `Tabs` component and the following subcomponents which can be composed\\nin a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the\\n[W3 Tabs specification](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\\n\\nIn this example, we set up a basic `Tabs` component with five tabs. This example uses a static API\\nthat does not support overflow.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const Basic = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>First Tab</Tabs.Item>\\n        <Tabs.Item>Second Tab</Tabs.Item>\\n        <Tabs.Item>Third Tab</Tabs.Item>\\n        <Tabs.Item>Fourth Tab</Tabs.Item>\\n        <Tabs.Item>Fifth Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel>Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Fifth Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Overflow Tabs\\n\\nTabs is a responsive component based on the width of its container. If the rendered tabs exceed the\\nwidth of the `Tabs.List`, an overflow menu will be rendered. This only works against the dynamic API\\nwhere you give the `TabsModel` an array of items to be rendered. The dynamic API handles the React\\n`key` for you based on the item's identifier. The dynamic API requires either an `id` on each item\\nobject or a `getId` function that returns an identifier based on the item. The below example uses an\\n`id` property on each item.\\n\\nThe dynamic API takes in any object, but since nothing is known about your object, a\\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\\nshould render.\\n```tsx\\nimport React from 'react';\\n\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\n\\ntype MyTabItem = {\\n  id: string;\\n  text: React.ReactNode;\\n  contents: string;\\n};\\n\\nexport const OverflowTabs = () => {\\n  const [items] = React.useState<MyTabItem[]>([\\n    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},\\n    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},\\n    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},\\n    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},\\n    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},\\n    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},\\n    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},\\n  ]);\\n  const model = useTabsModel({\\n    items,\\n  });\\n  const [containerWidth, setContainerWidth] = React.useState('100%');\\n  return (\\n    <div>\\n      <Box width={containerWidth} marginBottom=\\\"xl\\\">\\n        <Tabs model={model}>\\n          <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>\\n            {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}\\n          </Tabs.List>\\n          <Tabs.Menu.Popper>\\n            <Tabs.Menu.Card maxWidth={300} maxHeight={200}>\\n              <Tabs.Menu.List>\\n                {(item: MyTabItem) => <Tabs.Menu.Item>{item.text}</Tabs.Menu.Item>}\\n              </Tabs.Menu.List>\\n            </Tabs.Menu.Card>\\n          </Tabs.Menu.Popper>\\n          <Tabs.Panels>\\n            {(item: MyTabItem) => <Tabs.Panel marginTop=\\\"m\\\">{item.contents}</Tabs.Panel>}\\n          </Tabs.Panels>\\n        </Tabs>\\n      </Box>\\n      <hr />\\n      <h4>Change Tabs container size</h4>\\n      <SegmentedControl onSelect={data => setContainerWidth(data.id)}>\\n        <SegmentedControl.List aria-label=\\\"container width control\\\">\\n          <SegmentedControl.Item data-id=\\\"100%\\\">100%</SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"500px\\\">500px</SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"360px\\\">360px</SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"150px\\\">150px</SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </div>\\n  );\\n};\\n```\\n\\n### Hoisted Model\\n\\nBy default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may\\nconfigure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This\\npattern is referred to as\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\\nand provides direct access to its `state` and `events` outside of the `Tabs` component.\\n\\nIn this example, we set up external observation of the model state and create an external button to\\ntrigger an event to change the active tab.\\n```tsx\\nimport React from 'react';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\n\\nexport const HoistedModel = () => {\\n  const model = useTabsModel({\\n    onSelect(data, prevState) {\\n      console.log('Selected Tab', data.id, prevState);\\n    },\\n  });\\n\\n  return (\\n    <>\\n      <Tabs model={model}>\\n        <Tabs.List>\\n          <Tabs.Item data-id=\\\"first\\\">First Tab</Tabs.Item>\\n          <Tabs.Item data-id=\\\"second\\\">Second Tab</Tabs.Item>\\n          <Tabs.Item data-id=\\\"third\\\">Third Tab</Tabs.Item>\\n        </Tabs.List>\\n        <div style={{marginTop: space.m}}>\\n          <Tabs.Panel data-id=\\\"first\\\">Contents of First Tab</Tabs.Panel>\\n          <Tabs.Panel data-id=\\\"second\\\">Contents of Second Tab</Tabs.Panel>\\n          <Tabs.Panel data-id=\\\"third\\\">Contents of Third Tab</Tabs.Panel>\\n        </div>\\n      </Tabs>\\n      <SecondaryButton\\n        onClick={() => {\\n          model.events.select({id: 'third'});\\n        }}\\n      >\\n        Select Third Tab\\n      </SecondaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Named Tabs\\n\\n`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the\\n`onActivate` callback. This example is identical to the Basic Example, but with tabs named using\\n`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const NamedTabs = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item data-id=\\\"first\\\">First Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"second\\\">Second Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"third\\\">Third Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"fourth\\\">Fourth Tab</Tabs.Item>\\n        <Tabs.Item data-id=\\\"fifth\\\">Fifth Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel data-id=\\\"first\\\">Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"second\\\">Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"third\\\">Contents of Third Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"fourth\\\">Contents of Fourth Tab</Tabs.Panel>\\n        <Tabs.Panel data-id=\\\"fifth\\\">Contents of Fifth Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Tabs` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const RightToLeft = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Tabs>\\n        <Tabs.List>\\n          <Tabs.Item>\u05E8\u05D0\u05E9\u05D5\u05DF</Tabs.Item>\\n          <Tabs.Item>\u05E9\u05C1\u05B0\u05E0\u05B4\u05D9\u05B8\u05D4</Tabs.Item>\\n          <Tabs.Item>\u05E9\u05C1\u05B0\u05DC\u05B4\u05D9\u05E9\u05C1\u05B4\u05D9</Tabs.Item>\\n          <Tabs.Item>\u05E8\u05D1\u05D9\u05E2\u05D9</Tabs.Item>\\n          <Tabs.Item>\u05D7\u05DE\u05D9\u05E9\u05D9</Tabs.Item>\\n        </Tabs.List>\\n        <div style={{marginTop: space.m}}>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E8\u05D0\u05E9\u05D5\u05DF</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E9\u05E0\u05D9</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E9\u05DC\u05D9\u05E9\u05D9</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05E8\u05D1\u05D9\u05E2\u05D9</Tabs.Panel>\\n          <Tabs.Panel>\u05EA\u05D5\u05DB\u05DF \u05D4\u05D7\u05DE\u05D9\u05E9\u05D9</Tabs.Panel>\\n        </div>\\n      </Tabs>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Disabled Tab\\n\\nSet the `disabled` prop of a `Tabs.Item` to `true` to disable it.\\n```tsx\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const DisabledTab = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>First Tab</Tabs.Item>\\n        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>\\n        <Tabs.Item>Third Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel>Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Disabled Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Tab Icons\\n\\nTabs can have icons. Use the `Icon` and `Text` subcomponents.\\n```tsx\\nimport React from 'react';\\n\\nimport {space} from '@workday/canvas-kit-react/tokens';\\nimport {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const Icons = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={starIcon} />\\n          <Tabs.Item.Text>First Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={searchIcon} />\\n          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={selectIcon} />\\n          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n        <Tabs.Item>\\n          <Tabs.Item.Icon icon={shareIcon} />\\n          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>\\n        </Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel>Contents of First Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Alternative Tab Stop\\n\\nBy default, tab panels are focusable for accessibility. If the contents of a tab panel have a\\nfocusable element, you may disable this default behavior by setting the `tabIndex` prop of\\n`Tabs.Panel` to `undefined`. This example has a tab panel with a focusable button.\\n```tsx\\nimport React from 'react';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs} from '@workday/canvas-kit-react/tabs';\\n\\nexport const AlternativeTabStop = () => {\\n  return (\\n    <Tabs>\\n      <Tabs.List>\\n        <Tabs.Item>First Tab</Tabs.Item>\\n        <Tabs.Item>Second Tab</Tabs.Item>\\n        <Tabs.Item>Third Tab</Tabs.Item>\\n      </Tabs.List>\\n      <div style={{marginTop: space.m}}>\\n        <Tabs.Panel tabIndex={undefined}>\\n          <button>Focusable button</button>\\n          <br />\\n          Contents of First Tab. The tab panel is no longer focusable, but the button is. It may be\\n          desirable to disable focus on the tab panel and allow focus to flow into the tab panel to\\n          the first focusable element.\\n        </Tabs.Panel>\\n        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>\\n        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>\\n      </div>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Single Tab Panel\\n\\nThe compound component pattern allows for advanced composition. For example, `Tabs` can be composed\\nto have only a single `Tabs.Panel` using attribute overrides and callbacks. More information about\\nattributes and callbacks can be found in the prop tables below for each subcomponent.\\n\\nIn this example, we use a hoisted model and the `activeTab` property of the state to show content\\nfrom the `contents` object.\\n```tsx\\nimport React from 'react';\\nimport {space} from '@workday/canvas-kit-react/tokens';\\n\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\n\\nexport const SinglePanel = () => {\\n  const model = useTabsModel();\\n\\n  const message = (\\n    <p>\\n      This example shows how to use a single tab panel. You must manually set the{' '}\\n      <code>hidden</code>, <code>aria-controls</code>, and <code>id</code> attributes of Tab item\\n      and Tab panel components\\n    </p>\\n  );\\n\\n  const contents = {\\n    first: <div>Contents of First Tab {message}</div>,\\n    second: <div>Contents of Second Tab {message}</div>,\\n    third: <div>Contents of Third Tab {message}</div>,\\n  };\\n\\n  return (\\n    <Tabs model={model}>\\n      <Tabs.List>\\n        <Tabs.Item data-id=\\\"first\\\" aria-controls=\\\"mytab-panel\\\">\\n          First Tab\\n        </Tabs.Item>\\n        <Tabs.Item data-id=\\\"second\\\" aria-controls=\\\"mytab-panel\\\">\\n          Second Tab\\n        </Tabs.Item>\\n        <Tabs.Item data-id=\\\"third\\\" aria-controls=\\\"mytab-panel\\\">\\n          Third Tab\\n        </Tabs.Item>\\n      </Tabs.List>\\n      <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id=\\\"mytab-panel\\\">\\n        {contents[model.state.selectedIds[0]]}\\n      </Tabs.Panel>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n### Dynamic Tabs\\n\\nThe `Tabs.Item` component takes in an optional `index` property if you want to specify the position\\nof a tab. If not defined, by default it will append tabs to the end. In this example, our tabs are\\nstored as an array in the state, and we have a fixed tab at the end that can add new tabs to that\\narray.\\n```tsx\\nimport React from 'react';\\n\\nimport {slugify} from '@workday/canvas-kit-react/common';\\nimport {isCursor} from '@workday/canvas-kit-react/collection';\\nimport {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';\\n\\ntype Tab = {\\n  tab: string;\\n  id: string;\\n};\\n\\nexport const DynamicTabs = () => {\\n  const [tabs, setTabs] = React.useState<Tab[]>([\\n    {tab: 'Tab 1', id: 'tab-1'},\\n    {tab: 'Tab 2', id: 'tab-2'},\\n    {tab: 'Tab 3', id: 'tab-3'},\\n    {tab: 'Add Tab', id: 'add'},\\n  ]);\\n  const addedRef = React.useRef(tabs.length - 1);\\n  const model = useTabsModel({\\n    items: tabs,\\n    shouldSelect: data => data.id !== 'add',\\n  });\\n\\n  // A ref of the model for the render functions to work around the caching done to lists\\n  const modelRef = React.useRef(model);\\n  modelRef.current = model;\\n\\n  /**\\n   * Helper function that should be called when an item is programmatically removed. The following\\n   * side effects depend on state of the model:\\n   * * **Item is focused**: Focus will be moved to next item in the list\\n   * * **Item is selected**: Selection will be moved to the next item in the list\\n   * @param id The id of the item that will be removed\\n   */\\n  const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {\\n    const index = model.state.items.findIndex(item => isCursor(model.state, item.id));\\n    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;\\n    const nextId = model.state.items[nextIndex].id;\\n    if (model.state.selectedIds[0] === id) {\\n      // We're removing the currently selected item. Select next item\\n      model.events.select({id: nextId});\\n    }\\n    if (isCursor(model.state, id)) {\\n      // We're removing the currently focused item. Focus next item\\n      model.events.goTo({id: nextId});\\n\\n      // wait for stabilization of state\\n      requestAnimationFrame(() => {\\n        document\\n          .querySelector<HTMLElement>(`[id=\\\"${slugify(`${model.state.id}-${nextId}`)}\\\"]`)\\n          ?.focus();\\n      });\\n    }\\n  };\\n\\n  const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {\\n    if ((e.key === 'Delete' || e.key === 'Backspace') && id !== 'add') {\\n      setTabs(tabs.filter(item => item.id !== id));\\n      const model = modelRef.current;\\n      removeItem(id, model);\\n    }\\n  };\\n\\n  const onClick = (id: string) => (e: React.MouseEvent) => {\\n    if (id === 'add') {\\n      addedRef.current += 1;\\n      setTabs(tabs => {\\n        const newTabs = tabs.slice(0, tabs.length - 1);\\n        const addTab = tabs.slice(-1);\\n        return newTabs.concat(\\n          {tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`},\\n          addTab\\n        );\\n      });\\n    }\\n  };\\n\\n  return (\\n    <Tabs model={model}>\\n      <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>\\n        {(item: Tab) => (\\n          <Tabs.Item onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>\\n            {item.tab}\\n          </Tabs.Item>\\n        )}\\n      </Tabs.List>\\n      <Tabs.Menu.Popper>\\n        <Tabs.Menu.Card maxWidth={300} maxHeight={200}>\\n          <Tabs.Menu.List>\\n            {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}\\n          </Tabs.Menu.List>\\n        </Tabs.Menu.Card>\\n      </Tabs.Menu.Popper>\\n      <Tabs.Panels>\\n        {(item: Tab) => <Tabs.Panel marginTop=\\\"m\\\">Contents of {item.tab}</Tabs.Panel>}\\n      </Tabs.Panels>\\n    </Tabs>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"table\": {\n      \"title\": \"Components/Containers/Table\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs\",\n      \"mdxPath\": \"modules/react/table/stories/Table.mdx\",\n      \"mdxProse\": \"# Canvas Kit Table\\n\\n`Table` is a simple styled compound component that renders a\\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to\\npresent information in a two-dimensional table comprised of rows and columns of cells containing\\ndata. `Table` is built off of `BaseTable` and is using\\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUsers may not want to use a `caption` so they can import\\n[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or\\n[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This\\nwill give the user more flexibility around the customization of the title/heading of their table.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  parentContainerStyles: createStyles({\\n    marginBottom: system.space.x4,\\n  }),\\n  tableHeaderStyles: createStyles({\\n    backgroundColor: system.color.bg.alt.softer,\\n  }),\\n};\\n\\nexport const BasicWithHeading = () => {\\n  const headingID = useUniqueId();\\n\\n  return (\\n    <>\\n      <Heading as=\\\"h3\\\" id={headingID} size=\\\"small\\\" cs={styleOverrides.parentContainerStyles}>\\n        Pizza Toppings\\n      </Heading>\\n      <Table aria-labelledby={headingID}>\\n        <Table.Head>\\n          <Table.Row>\\n            <Table.Header scope=\\\"col\\\" cs={styleOverrides.tableHeaderStyles}>\\n              Toppings\\n            </Table.Header>\\n            <Table.Header scope=\\\"col\\\" cs={styleOverrides.tableHeaderStyles}>\\n              Amount\\n            </Table.Header>\\n          </Table.Row>\\n        </Table.Head>\\n        <Table.Body>\\n          <Table.Row>\\n            <Table.Cell>Pepperoni</Table.Cell>\\n            <Table.Cell>2.5 oz</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>Mozzarella</Table.Cell>\\n            <Table.Cell>5 oz</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>Basil</Table.Cell>\\n            <Table.Cell>10 Leaves</Table.Cell>\\n          </Table.Row>\\n        </Table.Body>\\n      </Table>\\n    </>\\n  );\\n};\\n```\\n\\n### Right to Left\\n\\nTable supports right-to-left languages when specified in the CanvasProvider theme.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst tableHeaderStyles = createStyles({\\n  backgroundColor: system.color.bg.alt.softer,\\n});\\n\\nexport const RightToLeft = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Table>\\n        <Table.Caption>\u05DE\u05E9\u05E7\u05D0\u05D5\u05EA \u05E7\u05E4\u05D4 \u05D5\u05D2\u05D3\u05DC\u05D9\u05DD</Table.Caption>\\n        <Table.Head>\\n          <Table.Row>\\n            <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n              \u05DE\u05B7\u05E9\u05C1\u05E7\u05B6\u05D4\\n            </Table.Header>\\n            <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n              \u05D2\u05D5\u05D3\u05DC\\n            </Table.Header>\\n          </Table.Row>\\n        </Table.Head>\\n        <Table.Body>\\n          <Table.Row>\\n            <Table.Cell>\u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\\n            <Table.Cell>1 \u05D2\u05E8</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>\u05DE\u05E7\u05D9\u05D0\u05D8\u05D5</Table.Cell>\\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\\n          </Table.Row>\\n          <Table.Row>\\n            <Table.Cell>\u05D2\u05D6\u05D9\u05E8\u05D4</Table.Cell>\\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5, 1 \u05D2\u05E8\u05DD \u05D7\u05DC\u05D1 \u05DE\u05D5\u05E7\u05E6\u05E3</Table.Cell>\\n          </Table.Row>\\n        </Table.Body>\\n      </Table>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Example with Caption\\n\\nUsers are free to use a `caption` instead of a heading. A `caption` is not required but it is good\\nfor\\n[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)\\npurposes.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst tableHeaderStyles = createStyles({\\n  backgroundColor: system.color.bg.alt.softer,\\n});\\n\\nexport const Basic = () => {\\n  return (\\n    <Table>\\n      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\\n      <Table.Head>\\n        <Table.Row>\\n          <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Drink\\n          </Table.Header>\\n          <Table.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Size\\n          </Table.Header>\\n        </Table.Row>\\n      </Table.Head>\\n      <Table.Body>\\n        <Table.Row>\\n          <Table.Cell>Espresso</Table.Cell>\\n          <Table.Cell>1 oz</Table.Cell>\\n        </Table.Row>\\n        <Table.Row>\\n          <Table.Cell>Macchiato</Table.Cell>\\n          <Table.Cell>2 oz Espresso</Table.Cell>\\n        </Table.Row>\\n        <Table.Row>\\n          <Table.Cell>Cortado</Table.Cell>\\n          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>\\n        </Table.Row>\\n        <Table.Row></Table.Row>\\n        <Table.Row>\\n          <Table.Cell>Cappuccino</Table.Cell>\\n          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>\\n        </Table.Row>\\n      </Table.Body>\\n    </Table>\\n  );\\n};\\n```\\n\\n### Fixed Column\\n\\nUsers may add styles to the `Table.Header` to render a fixed column. The example below assigns a\\n`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the\\n`width` if you would only like the fixed column to be triggered if necessary.\\n```tsx\\nimport React from 'react';\\n\\nimport {Table} from '@workday/canvas-kit-react/table';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  parentContainerStyles: createStyles({\\n    marginBottom: system.space.x4,\\n  }),\\n  tableStyles: createStyles({\\n    width: px2rem(690),\\n  }),\\n  tableHeaderStyles: createStyles({\\n    position: 'sticky',\\n    left: system.space.zero,\\n    backgroundColor: system.color.bg.alt.softer,\\n    borderRight: `2px solid ${system.color.border.divider}`,\\n  }),\\n};\\n\\nexport const FixedColumn = () => {\\n  const headingID = useUniqueId();\\n  const exampleData = [\\n    {\\n      make: 'Porsche',\\n      model: '992 911 GT3',\\n      year: '2022',\\n      price: 'Starts at $160,000',\\n      engine: '4.0L Flat 6',\\n      transmission: 'PDK or 7-Speed Manual',\\n      horsepower: '502hp',\\n      torque: '346 lb-ft',\\n      curbWeight: '3,164 lbs',\\n    },\\n    {\\n      make: 'BMW',\\n      model: 'M5 Competition',\\n      year: '2018',\\n      price: 'Starts at $105,000',\\n      engine: 'Twin-Turbo 4.4L V8',\\n      transmission: 'Automatic',\\n      horsepower: '627hp',\\n      torque: '553 lb-ft',\\n      curbWeight: '4,345 lbs',\\n    },\\n    {\\n      make: 'Alfa Romeo',\\n      model: '1750 GTV',\\n      year: '1970',\\n      price: '$30,000 - $55,000',\\n      engine: '1.75L Inline 4',\\n      transmission: 'Manual',\\n      horsepower: '122hp',\\n      torque: '137 lb-ft',\\n      curbWeight: '2,140 lbs',\\n    },\\n    {\\n      make: 'Lotus',\\n      model: 'Emira',\\n      year: '2023',\\n      price: 'Starts at $78,000',\\n      engine: 'Supercharged 3.5L V6',\\n      transmission: 'Automatic or 6-Speed Manual',\\n      horsepower: '400hp',\\n      torque: '317 lb-ft',\\n      curbWeight: '3520 lbs',\\n    },\\n    {\\n      make: 'Toyota',\\n      model: 'Supra',\\n      year: '1998',\\n      price: '$40,000 - $80,000',\\n      engine: '3.0L Inline 6',\\n      transmission: 'Automatic or 6-Speed Manual',\\n      horsepower: '320hp',\\n      torque: '315 lb-ft',\\n      curbWeight: '3,599 lbs',\\n    },\\n    {\\n      make: 'Nissan',\\n      model: 'Skyline GT-R',\\n      year: '1994',\\n      price: '$45,000 - $90,000',\\n      engine: '2.6L Twin-Turbo Inline 6',\\n      transmission: '5-Speed Manual',\\n      horsepower: '276hp',\\n      torque: '260 lb-ft',\\n      curbWeight: '3,153 lbs',\\n    },\\n  ];\\n  return (\\n    <>\\n      <Heading as=\\\"h3\\\" id={headingID} size=\\\"small\\\" cs={styleOverrides.parentContainerStyles}>\\n        Performance Car Specs\\n      </Heading>\\n      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>\\n        <Table.Head>\\n          <Table.Row>\\n            <Table.Header scope=\\\"col\\\" cs={styleOverrides.tableHeaderStyles}>\\n              Make\\n            </Table.Header>\\n            <Table.Header scope=\\\"col\\\">Model</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Year</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Price</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Engine</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Transmission</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Horsepower</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Torque</Table.Header>\\n            <Table.Header scope=\\\"col\\\">Curb Weight</Table.Header>\\n          </Table.Row>\\n        </Table.Head>\\n        <Table.Body>\\n          {exampleData.map(item => (\\n            <>\\n              <Table.Row>\\n                <Table.Header scope=\\\"row\\\" cs={styleOverrides.tableHeaderStyles}>\\n                  {item.make}\\n                </Table.Header>\\n                <Table.Cell>{item.model}</Table.Cell>\\n                <Table.Cell>{item.year}</Table.Cell>\\n                <Table.Cell>{item.price}</Table.Cell>\\n                <Table.Cell>{item.engine}</Table.Cell>\\n                <Table.Cell>{item.transmission}</Table.Cell>\\n                <Table.Cell>{item.horsepower}</Table.Cell>\\n                <Table.Cell>{item.torque}</Table.Cell>\\n                <Table.Cell>{item.curbWeight}</Table.Cell>\\n              </Table.Row>\\n            </>\\n          ))}\\n        </Table.Body>\\n      </Table>\\n    </>\\n  );\\n};\\n```\\n\\n### Base Html Table Example\\n\\nIf a user needs a standard HTML\\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no\\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can\\nuse the `BaseTable` component.\\n```tsx\\nimport React from 'react';\\n\\nimport {BaseTable} from '@workday/canvas-kit-react/table';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst tableHeaderStyles = createStyles({\\n  backgroundColor: system.color.bg.alt.softer,\\n});\\n\\nexport const BaseHtmlTable = () => {\\n  return (\\n    <BaseTable>\\n      <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>\\n      <BaseTable.Head>\\n        <BaseTable.Row>\\n          <BaseTable.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Drink\\n          </BaseTable.Header>\\n          <BaseTable.Header scope=\\\"col\\\" cs={tableHeaderStyles}>\\n            Size\\n          </BaseTable.Header>\\n        </BaseTable.Row>\\n      </BaseTable.Head>\\n      <BaseTable.Body>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Espresso</BaseTable.Cell>\\n          <BaseTable.Cell>1 oz</BaseTable.Cell>\\n        </BaseTable.Row>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Macchiato</BaseTable.Cell>\\n          <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>\\n        </BaseTable.Row>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Cortado</BaseTable.Cell>\\n          <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>\\n        </BaseTable.Row>\\n        <BaseTable.Row></BaseTable.Row>\\n        <BaseTable.Row>\\n          <BaseTable.Cell>Cappuccino</BaseTable.Cell>\\n          <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>\\n        </BaseTable.Row>\\n      </BaseTable.Body>\\n    </BaseTable>\\n  );\\n};\\n```\\n\\n### Which Component Should I Use?\\n\\n> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)\\n> features with their Table, then use the\\n> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)\\n> component.\\n\\n> If a user **does not** want\\n> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their\\n> Table, then use the\\n> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)\\n> component.\\n\\n### Advanced\\n\\nYou can also find several advanced Table examples in our Storybook Examples section.\\n\\n- [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#expandable-rows)\\n- [Selectable Rows ](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#selectable-rows)\\n- [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers)\\n- [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#sortable-column-headers)\\n\\n### Custom Styles\\n\\nTable and its subcomponents support custom styling via the `cs` prop. For more information, check\\nour\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"switch\": {\n      \"title\": \"Components/Inputs/Switch\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-switch--docs\",\n      \"mdxPath\": \"modules/react/switch/stories/Switch.mdx\",\n      \"mdxProse\": \"# Canvas Kit Switch\\n\\nSwitch is a selection control that is used to switch between two potential states.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/switch)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nSwitch should be used in tandem with [Form Field](/components/inputs/form-field/) to meet\\naccessibility standards.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Basic = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Switch to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Disabled = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input disabled as={Switch} checked={checked} onChange={handleChange} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nSwitch supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<input type=\\\"checkbox\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const RefForwarding = () => {\\n  const [checked, setChecked] = React.useState(false);\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Dark Mode</FormField.Label>\\n        <FormField>\\n          <FormField.Input as={Switch} checked={checked} ref={ref} onChange={handleChange} />\\n        </FormField>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Switch</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const LabelPosition = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping Form Field to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the Switch to the Caution or Error state, respectively. You will\\nalso need to set the `hintId` and `hintText` props on the Form Field to meet accessibility\\nstandards.\\n\\nThe `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Caution` or\\n`Switch.ErrorType.Error` if Form Field is not being used.\\n\\n#### Caution\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Caution = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"caution\\\">\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n#### Error\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\n\\nexport const Error = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"error\\\">\\n      <FormField.Label>Dark Mode</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />\\n        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nSwitch supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"skeleton\": {\n      \"title\": \"Components/Indicators/Skeleton\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-skeleton--docs\",\n      \"mdxPath\": \"modules/react/skeleton/stories/Skeleton.mdx\",\n      \"mdxProse\": \"# Canvas Kit Skeleton\\n\\nA Skeleton is a low-fidelity visual placeholder that represents the loading of interface elements\\nbefore they have displayed on the page. Appearing as a blank version of the incoming content, it\\nmitigates focus on the loading process and improves the user\u2019s perceived load time.\\n\\n[> Workday Design Reference](https://design.workday.com/components/indicators/skeleton-loader)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nSkeleton includes a container `Skeleton` component and the following subcomponents:\\n`Skeleton.Header`, `Skeleton.Text`, and `Skeleton.Shape`. Each subcomponent can be used as a\\nplaceholder for a particular type of content.\\n\\nHere's an example of how you might compose Skeleton components (along with non-Skeleton components\\nsuch as `Box` and `Flex`) to create a loading placeholder for a piece of content comprised of an\\nicon, a heading, and some text.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {borderRadius, space} from '@workday/canvas-kit-react/tokens';\\n\\nexport const Basic = () => {\\n  return (\\n    <Skeleton>\\n      <Flex alignItems=\\\"center\\\">\\n        <Skeleton.Shape width={space.xl} height={space.xl} borderRadius={borderRadius.circle} />\\n        <Box flex={1} marginLeft=\\\"xs\\\">\\n          <Skeleton.Header />\\n        </Box>\\n      </Flex>\\n      <Skeleton.Text />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\nAnd here's an example that simulates how that Skeleton might work in practice.\\n```tsx\\nimport React from 'react';\\nimport {keyframes} from '@emotion/react';\\n\\nimport {Card} from '@workday/canvas-kit-react/card';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {SystemIconCircle} from '@workday/canvas-kit-react/icon';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {borderRadius, space} from '@workday/canvas-kit-react/tokens';\\nimport {patternIcon} from '@workday/canvas-system-icons-web';\\nimport {styled, StyledType} from '@workday/canvas-kit-react/common';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\n\\nconst fadeOut = keyframes`\\n  from {\\n    opacity: 1;\\n  }\\n\\n  to {\\n    opacity: 0;\\n  }\\n`;\\n\\nconst StyledSimulation = styled(Box)<StyledType>({\\n  pointerEvents: 'none',\\n});\\n\\nexport const Simulation = () => {\\n  const [loading, setLoading] = React.useState(true);\\n  const [loadTime, setLoadTime] = React.useState('3000');\\n  const timer = React.useRef(0);\\n  const loadTimeValue = React.useRef(parseFloat(loadTime));\\n\\n  const resetTimeout = () => {\\n    setLoading(true);\\n    window.clearTimeout(timer.current);\\n    timer.current = window.setTimeout(() => {\\n      setLoading(false);\\n    }, loadTimeValue.current);\\n    return () => {\\n      window.clearTimeout(timer.current);\\n    };\\n  };\\n\\n  const onChangeLoading = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    window.clearTimeout(timer.current);\\n    setLoading(event.target.checked);\\n  };\\n\\n  const onChangeLoadTime = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setLoadTime(event.currentTarget.value);\\n    const value = parseInt(event.currentTarget.value, 10);\\n\\n    if (value) {\\n      loadTimeValue.current = value;\\n    }\\n  };\\n\\n  React.useEffect(resetTimeout, []);\\n\\n  return (\\n    <Box>\\n      <Box marginBottom=\\\"l\\\">\\n        <FormField orientation=\\\"horizontalStart\\\">\\n          <FormField.Label>Load Time</FormField.Label>\\n          <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />\\n        </FormField>\\n        <FormField orientation=\\\"horizontalStart\\\">\\n          <FormField.Label>Loading</FormField.Label>\\n          <FormField.Input as={Checkbox} checked={loading} onChange={onChangeLoading} />\\n        </FormField>\\n        <SecondaryButton onClick={resetTimeout}>Simulate Loading</SecondaryButton>\\n      </Box>\\n      <Card>\\n        <Card.Body>\\n          <Box minHeight={180} position=\\\"relative\\\">\\n            {loading ? (\\n              <StyledSimulation\\n                position=\\\"absolute\\\"\\n                top={0}\\n                left={0}\\n                width=\\\"100%\\\"\\n                animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}\\n              >\\n                <Skeleton>\\n                  <Flex alignItems=\\\"center\\\">\\n                    <Skeleton.Shape\\n                      width={space.xl}\\n                      height={space.xl}\\n                      borderRadius={borderRadius.circle}\\n                    />\\n                    <Box flex={1} marginLeft=\\\"xs\\\">\\n                      <Skeleton.Header />\\n                    </Box>\\n                  </Flex>\\n                  <Skeleton.Text lineCount={3} />\\n                </Skeleton>\\n              </StyledSimulation>\\n            ) : (\\n              <Box>\\n                <Flex alignItems=\\\"center\\\" display=\\\"inline-flex\\\" marginBottom=\\\"s\\\">\\n                  <SystemIconCircle icon={patternIcon} />\\n                  <Heading as=\\\"h3\\\" size=\\\"small\\\" margin={`0 0 0 ${space.xxs}`}>\\n                    Patterns\\n                  </Heading>\\n                </Flex>\\n                <p>\\n                  Canvas Patterns classify and document reusable solutions built to respond to\\n                  common user scenarios. Following these guidelines allows us to design experiences\\n                  that feel consistent and natural for users as they move between applications and\\n                  ensures that our approach aligns with industry standards.\\n                </p>\\n              </Box>\\n            )}\\n          </Box>\\n        </Card.Body>\\n      </Card>\\n    </Box>\\n  );\\n};\\n```\\n\\nPress the **Simulate Loading** button to simulate the loading of the content (customize the loading\\ntime using the **Load Time** field), or check the **Loading** check box to force the Skeleton to\\ndisplay.\\n\\n### Color\\n\\nAll Skeleton subcomponents accept a `backgroundColor` prop which can be used to specify the color of\\nthe subcomponent. This is generally only recommended to be used for dark or gray backgrounds to\\nensure the Skeleton components are visible.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';\\n\\nexport const Color = () => {\\n  return (\\n    <Skeleton>\\n      <Flex alignItems=\\\"center\\\">\\n        <Skeleton.Shape\\n          width={space.xl}\\n          height={space.xl}\\n          borderRadius={borderRadius.circle}\\n          backgroundColor={colors.berrySmoothie100}\\n        />\\n        <Box flex={1} marginLeft=\\\"xs\\\">\\n          <Skeleton.Header backgroundColor={colors.cantaloupe100} />\\n        </Box>\\n      </Flex>\\n      <div>\\n        <Skeleton.Text backgroundColor={colors.fruitPunch100} />\\n      </div>\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n### Text\\n\\n`Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder line has\\na width of `100%` and a fixed height of `21px`, with the last line having a width of `60%` if there\\nare multiple lines.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\n\\nexport const Text = () => {\\n  return (\\n    <Skeleton>\\n      <Skeleton.Text />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n### Header\\n\\n`Skeleton.Header` renders a placeholder for header content such as headings.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\n\\nexport const Header = () => {\\n  return (\\n    <Skeleton>\\n      <Skeleton.Header />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n### Shape\\n\\n`Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small images.\\nSet the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create various\\nrectangular and circular shapes.\\n```tsx\\nimport React from 'react';\\nimport {Skeleton} from '@workday/canvas-kit-react/skeleton';\\nimport {borderRadius, space} from '@workday/canvas-kit-react/tokens';\\n\\nexport const Shape = () => {\\n  return (\\n    <Skeleton>\\n      <Skeleton.Shape width={space.xxl} height={space.xxl} borderRadius={borderRadius.circle} />\\n    </Skeleton>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"select\": {\n      \"title\": \"Components/Inputs/Select\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs\",\n      \"mdxPath\": \"modules/react/select/stories/Select.mdx\",\n      \"mdxProse\": \"# Canvas Kit Select\\n\\nSelect inputs allow users to choose one option from a list of items or type a matching option.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/select)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Select` supports a\\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you\\npass an array of items via the `items` prop and provide a render function to display the items. The\\nitems may be provided as an\\n[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an\\n[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).\\n\\n`Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\\n`Select` wraps the `FormField` element and the `FormField` element wraps the children of `Select` to\\nmeet accessibility standards. This ensures the `label` text from `FormField` is attached to the\\n`Select.Input` and read out as a group for voiceover.\\n\\n```tsx\\n<Select items={options}>\\n  <FormField label=\\\"Your Label\\\">\\n    <Select.Input onChange={e => handleChange(e)} id=\\\"contact-select\\\" />\\n    <Select.Popper>\\n      <Select.Card>\\n        <Select.List>{item => <Select.Item>{item.id}</Select.Item>}</Select.List>\\n      </Select.Card>\\n    </Select.Popper>\\n  </FormField>\\n</Select>\\n```\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n  'Thisisalongstringwithnobreaksandwillwrap',\\n];\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    console.log('change', event.currentTarget.value);\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} onChange={handleChange} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => {\\n                    return <Select.Item>{item}</Select.Item>;\\n                  }}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\nOur example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the\\nvalue of the `Select`.\\n\\n### Hoisted Model\\n\\nBy default, `Select` will create and use its own model internally. Alternatively, you may configure\\nyour own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is\\nreferred to as\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\\nand provides direct access to its `state` and `events` outside of the `Select` component.\\n\\nIn this example, we set up external observation of the model state and create an external button to\\ntrigger an event to change the selected item.\\n\\n**Note: If your array of objects uses an `id` property and a `text` property there is no need to use\\nthe helper functions of `getId` or `getTextValue`. The collection system and the `Select` use these\\nproperties by default for keyboard navigation and selected the `id` based on the item clicked.**\\n```tsx\\nimport React from 'react';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nconst options = [\\n  {text: 'E-mail', id: 'email-1'},\\n  {text: 'Phone', id: 'phone-2'},\\n  {text: 'Fax', id: 'fax-3'},\\n  {text: 'Mail', id: 'mail-4'},\\n  {text: 'Mobile Phone', id: 'mobile-phone-5'},\\n];\\n\\nexport const HoistedModel = () => {\\n  const model = useSelectModel({\\n    items: options,\\n    initialSelectedIds: ['fax-3'],\\n  });\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <BodyText size=\\\"small\\\">Selected Value: {model.state.selectedIds[0]}</BodyText>\\n      <SecondaryButton\\n        onClick={() => {\\n          model.events.select({id: 'phone-2'});\\n        }}\\n      >\\n        Select Phone Item\\n      </SecondaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const LabelPosition = () => {\\n  const model = useSelectModel({\\n    items: options,\\n  });\\n\\n  return (\\n    <Flex>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n            <FormField.Hint>Choose a form of contact</FormField.Hint>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping `FormField` to `true` to indicate that the field is\\nrequired. Labels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField isRequired>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of `Select.Input` to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax (disabled)',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Disabled = () => {\\n  const [_, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\\n            <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => (\\n                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\\n                      {item}\\n                    </Select.Item>\\n                  )}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Disabled Items\\n\\nIn order to disable items and prevent users from interacting with them:\\n\\n1.  Set the `nonInteractiveIds` prop of `Select` to an array of disabled item `id`s. If your items\\n    are an array of `strings` this will be just the text value. If your items are an array of\\n    `objects`, this will be that value of the `id` property. This will disable interaction for those\\n    items and exclude them from type-ahead.\\n\\n2.  Set the `aria-disabled` attribute of all disabled `Select.Item`s to `true`. This ensures the\\n    items are styled as disabled.\\n\\nThe following example adds the string value of the items we want disable to `nonInteractiveIds` and\\nsets `aria-disabled` for the disabled items.\\n\\n### With Icons\\n\\nUse `Select.Item.Icon` to render an icon for a `Select.Item`. The `icon` prop for `Select.Item.Icon`\\naccepts [system icons](/assets/system-icons/) from `@workday/canvas-system-icons-web`.\\n\\nIn order to render the icon for the selected item in the `Select.Input`:\\n\\n1.  Obtain a reference to the `model` by registering your `items` with `useSelectModel`.\\n2.  Get the selected item:\\n    `const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model)`\\n3.  Pass the icon for the selected item to the input:\\n    `<Select.Input inputStartIcon={selectedItem.value.icon}>`\\n\\n> **Note: `data-id` on `Select.Item` must match the `id` property in your array of objects. This\\n> ensures proper keyboard handling and type-ahead.**\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  activityStreamIcon,\\n  avatarIcon,\\n  uploadCloudIcon,\\n  userIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst styleOverrides = {\\n  formfieldInputStyles: createStyles({\\n    width: px2rem(300),\\n  }),\\n  selectCardStyles: createStyles({\\n    maxHeight: px2rem(200),\\n  }),\\n};\\n\\nconst customOptions = [\\n  {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},\\n  {text: 'Avatar', id: 'avatar', icon: avatarIcon},\\n  {text: 'Upload Cloud', id: 'upload-cloud', icon: uploadCloudIcon},\\n  {text: 'User', id: 'user', icon: userIcon},\\n];\\n\\nexport const WithIcons = () => {\\n  const model = useSelectModel({\\n    items: customOptions,\\n  });\\n  const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model);\\n  return (\\n    <Flex>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input\\n              as={Select.Input}\\n              cs={styleOverrides.formfieldInputStyles}\\n              inputStartIcon={selectedItem?.value.icon}\\n            />\\n            <Select.Popper>\\n              <Select.Card cs={styleOverrides.selectCardStyles}>\\n                {model.state.items.length > 0 && (\\n                  <Select.List>\\n                    {item => (\\n                      <Select.Item data-id={item.id}>\\n                        <Select.Item.Icon icon={item.icon} />\\n                        {item.text}\\n                      </Select.Item>\\n                    )}\\n                  </Select.List>\\n                )}\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n**Note: that `Select.Input` will only render an icon if an item is selected.**\\n\\n### Grow\\n\\nSet the `grow` prop of the wrapping `FormField` to `true` to configure the `Select.Input` to expand\\nto the width of its container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Grow = () => {\\n  const model = useSelectModel({\\n    items: options,\\n  });\\n\\n  return (\\n    <Flex>\\n      <FormField grow>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Menu Height\\n\\n`Select.Card` has a default maximum height of `300px` to restrict the height of the dropdown menu.\\nSet its `maxHeight` prop to override this value.\\n```tsx\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst selectCardStyles = createStyles({\\n  maxHeight: px2rem(200),\\n});\\n\\nconst cities = [\\n  'Atlanta (United States)',\\n  'Amsterdam (Europe)',\\n  'Austin (United States)',\\n  'Beaverton (United States)',\\n  'Belfast (Europe)',\\n  'Berlin (Europe)',\\n  'Boston (United States)',\\n  'Boulder (United States)',\\n  'Chicago (United States)',\\n  'Dallas (United States)',\\n  'Denver (United States)',\\n  'Dublin (Europe)',\\n  'Irvine (United States)',\\n  'Minneapolis (United States)',\\n  'New York (United States)',\\n  'Orlando (United States)',\\n  'Palo Alto (United States)',\\n  'Philadelphia (United States)',\\n  'Pleasanton (United States)',\\n  'Raleigh (United States)',\\n  'San Francisco (United States)',\\n  'San Mateo (United States)',\\n  'Stockholm (Europe)',\\n  'Toronto (Canada)',\\n  'Victoria (Canada)',\\n  'Vienna (Europe)',\\n  'Warsaw (Europe)',\\n  'Washington, DC (United States)',\\n  'Zurich (Europe)',\\n];\\n\\nexport const MenuHeight = () => {\\n  return (\\n    <Box>\\n      <FormField>\\n        <FormField.Label>Choose a City</FormField.Label>\\n        <FormField.Field>\\n          <Select items={cities}>\\n            <FormField.Input as={Select.Input} />\\n            <Select.Popper>\\n              <Select.Card cs={selectCardStyles}>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n    </Box>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\n`Select.Input` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\\nforward `ref` to its underlying `<input type=\\\"text\\\" role=\\\"combobox\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const RefForwarding = () => {\\n  // @ts-ignore\\n  const [value, setValue] = React.useState('medium');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    if (ref && ref.current) {\\n      console.log(ref);\\n      ref.current.focus();\\n    }\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping `FormField` to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the `Select` to the caution or error state, respectively. You will\\nalso need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility\\nstandards. You must set an `id` attribute on the `Select.Input` element that matches the value of\\n`inputId` set on the `FormField` element. These attributes ensure that the caution message is\\nassociated to the `Select` and read out by voiceover.\\n\\n**Note: The Select container component, `Select`, must wrap `FormField` to ensure `Select.Input` is\\nstyled correctly.**\\n\\n```tsx\\n<Select items={options}>\\n  <FormField label=\\\"Contact\\\" inputId=\\\"contact-id-formfield\\\">\\n    <Select.Input id=\\\"contact-id-formfield\\\" />\\n    ...\\n  </FormField>\\n</Select>\\n```\\n\\n#### Caution\\n\\nUse the alert state when a selection is valid but there is additional information.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField error=\\\"caution\\\">\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id=\\\"alert-select\\\" />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n            <FormField.Hint>Please choose a form of contact.</FormField.Hint>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n#### Error\\n\\nUse the error state when the selection is no longer valid.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax (disabled)',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField error=\\\"error\\\">\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => (\\n                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>\\n                      {item}\\n                    </Select.Item>\\n                  )}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n            <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Initial Selected Item\\n\\nYou can set `initialSelectedIds` to the value that you want initially selected.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  {\\n    id: 'b310c757b2d341f99d40d76f4d563c5b',\\n    descriptor: 'Arabic',\\n    languageCode: 'ar',\\n    label: 'Arabic',\\n    nativeLanguageName: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629',\\n  },\\n  {\\n    id: 'a675a6b6e22d100017d7fe2a784d1255',\\n    descriptor: 'Bulgarian (Bulgaria)',\\n    languageCode: 'bg_BG',\\n    label: 'Bulgarian (Bulgaria)',\\n    nativeLanguageName: '\u0431\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438 (\u0420\u0435\u043F\u0443\u0431\u043B\u0438\u043A\u0430 \u0411\u044A\u043B\u0433\u0430\u0440\u0438\u044F)',\\n  },\\n  {\\n    id: 'da594226446c11de98360015c5e6daf6',\\n    descriptor: 'English (United States)',\\n    languageCode: 'en_US',\\n    label: 'English (United States)',\\n    nativeLanguageName: 'English',\\n  },\\n];\\n\\nexport const InitialSelectedItem = () => {\\n  const [value, setValue] = React.useState('English (United States)');\\n  const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setId(event.target.value);\\n    setValue(options.find(item => item.id === event.target.value).label);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select\\n            items={options}\\n            initialSelectedIds={['da594226446c11de98360015c5e6daf6']}\\n            getId={item => item.id}\\n            getTextValue={item => item.label}\\n          >\\n            <Select.Input onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <p>Id: {id}</p>\\n      <p>Value: {value}</p>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Placeholder\\n\\nYou can change the placeholder text by passing in a string value to the `placeholder` attribute on\\nthe `Select.Input`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  'E-mail',\\n  'Phone',\\n  'Fax',\\n  'Mail',\\n  'Mobile Phone',\\n  'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n];\\n\\nexport const Placeholder = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options}>\\n            <Select.Input placeholder=\\\"Make a Selection\\\" onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => {\\n                    return <Select.Item>{item}</Select.Item>;\\n                  }}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      Selected Value: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Fetching Dynamic Items\\n\\nIt's common to load items from a server call. Hoisting the `model` and setting your items on state\\nallows you to pass those items to your `model`. You can leverage React state to set your items on\\nload as well as displaying a placeholder indicating when items are loaded.\\n\\n**Note: In this case we need to use `getId` and `getTextValue` because our data doesn't have the\\nproperties of `id` or `text`. Using these helper functions sets the `serverId` to be `id` and\\n`label` to be `text`.**\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {useMount} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n  maxWidth: px2rem(300),\\n});\\n\\nconst movieListItems = [\\n  {\\n    label: 'The Lion King',\\n    serverId: '123',\\n    Year: '2019',\\n    Runtime: '118 min',\\n  },\\n  {\\n    label: 'Mowgli: Legend of the Jungle',\\n    serverId: '234',\\n    Year: '2018',\\n    Runtime: '104 min',\\n  },\\n  {\\n    label: 'Doctor Strange',\\n    serverId: '345',\\n    Year: '2016',\\n    Runtime: '115 min',\\n  },\\n  {\\n    label: 'John Wick',\\n    Year: '2014',\\n    serverId: '456',\\n    Runtime: '101 min',\\n  },\\n  {\\n    label: 'The Notebook',\\n    serverId: '567',\\n    Year: '2004',\\n    Runtime: '123 min',\\n  },\\n];\\n\\nexport const FetchingDynamicItems = () => {\\n  const [id, setId] = React.useState('456');\\n  const [moviesLists, setMoviesList] = React.useState<typeof movieListItems>([]);\\n  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');\\n  const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();\\n\\n  const model = useSelectModel({\\n    items: moviesLists,\\n    getTextValue: item => item.label,\\n    getId: item => item.serverId,\\n    initialSelectedIds: [id],\\n  });\\n\\n  const stringValue = moviesLists.find(item => item.serverId === id)?.label || '';\\n\\n  function loadItems() {\\n    setLoadingStatus('loading');\\n    loadingRef.current = setTimeout(() => {\\n      setLoadingStatus('success');\\n      setMoviesList(movieListItems);\\n    }, 1500);\\n  }\\n\\n  useMount(() => {\\n    return () => {\\n      clearTimeout(loadingRef.current);\\n    };\\n  });\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Choose a Film</FormField.Label>\\n        <FormField.Field>\\n          <Select model={model}>\\n            <FormField.Input\\n              as={Select.Input}\\n              onChange={e => {\\n                setId(e.target.value);\\n              }}\\n              placeholder={loadingStatus}\\n            />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>\\n                  {item => {\\n                    return <Select.Item>{item.label}</Select.Item>;\\n                  }}\\n                </Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <div data-testid=\\\"selected-id\\\">Selected Id: {id}</div>\\n      <div data-testid=\\\"selected-value\\\">Selected value: {stringValue}</div>\\n      <PrimaryButton\\n        onClick={() => {\\n          loadItems();\\n        }}\\n      >\\n        Get Items\\n      </PrimaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Complex\\n\\nWhen registering items in an array of objects, it's common to have the text that is displayed to the\\nuser be different than an id. In this example, `serverId` and `label` properties need to be remapped\\nto `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties\\n`text` and `id`, there would be no need for this.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  {serverId: 'email', label: 'E-mail'},\\n  {serverId: 'phone', label: 'Phone'},\\n  {serverId: 'fax', label: 'Fax'},\\n  {serverId: 'mail', label: 'Mail'},\\n  {serverId: 'mobile', label: 'Mobile Phone'},\\n  {\\n    serverId: 'oasis',\\n    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n  },\\n];\\n\\nexport const Complex = () => {\\n  const [value, setValue] = React.useState('');\\n  const [id, setId] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setId(event.target.value);\\n    setValue(options.find(item => item.serverId === event.target.value)!.label);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\\n            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <p>Id: {id}</p>\\n      <p>Value: {value}</p>\\n    </Flex>\\n  );\\n};\\n```\\n\\n**Note: By default, the identifier and text value are `id` and `text` properties respectively. If\\nyour data object for each item is different, provide a `getId` or `getTextValue` function to the\\nmodel config. For example:**\\n\\n```jsx\\nconst items = [\\n  {\\n    serverId: '1',\\n    label: 'First Option',\\n  },\\n];\\n\\n<Select items={items} getId={item => item.serverId} getTextValue={item => item.label}>\\n  {/* etc */}\\n</Select>;\\n```\\n\\n### Controlled\\n\\nThe Select can be a\\n[controlled input](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)\\ncomponent by passing the `value` and `onChange` to either the `<Select>` component or the\\n`<Select.Input>` component. Internally, the `Select.Input` watches for changes on the `value` React\\nprop as well as the `value` DOM property and will update the model accordingly.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n});\\n\\nconst options = [\\n  {serverId: 'email', label: 'E-mail'},\\n  {serverId: 'phone', label: 'Phone'},\\n  {serverId: 'fax', label: 'Fax'},\\n  {serverId: 'mail', label: 'Mail'},\\n  {serverId: 'mobile', label: 'Mobile Phone'},\\n  {\\n    serverId: 'oasis',\\n    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',\\n  },\\n];\\n\\nexport const Controlled = () => {\\n  const [value, setValue] = React.useState('');\\n  const [label, setLabel] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.currentTarget.value);\\n    setLabel(options.find(item => item.serverId === event.currentTarget.value)?.label || '');\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Contact</FormField.Label>\\n        <FormField.Field>\\n          <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>\\n            <FormField.Input\\n              as={Select.Input}\\n              onChange={handleChange}\\n              value={value}\\n              name=\\\"contact\\\"\\n            />\\n            <Select.Popper>\\n              <Select.Card>\\n                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n              </Select.Card>\\n            </Select.Popper>\\n          </Select>\\n        </FormField.Field>\\n      </FormField>\\n      <p>Id: {value}</p>\\n      <p>Label: {label}</p>\\n      <Flex gap=\\\"s\\\">\\n        <SecondaryButton\\n          onClick={e => {\\n            setValue('fax');\\n          }}\\n        >\\n          Set to \\\"Fax\\\"\\n        </SecondaryButton>\\n        <SecondaryButton\\n          onClick={e => {\\n            setValue('');\\n          }}\\n        >\\n          Clear\\n        </SecondaryButton>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### When to use `getId`, or `getTextValue`\\n\\n- `getId`: This is an optional function to return the id of an item. If not provided, the default\\n  function will return the `id` property from the object of each item. If you did not provide\\n  `items`, do not override this function. Instead provide static items via JSX. the list will create\\n  an internal array of items where `id` is the only property and the default `getId` will return the\\n  desired result. **Note: If your array of objects has a different property for `id`, like\\n  `serverId`, use this function to set the id.**\\n\\n  ```tsx\\n  const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]\\n  <Select items={options} getId={(item) => item.serverId}>\\n    <FormField label=\\\"Your Label\\\">\\n      <Select.Input onChange={e => handleChange(e)} id=\\\"contact-select\\\" />\\n      <Select.Popper>\\n        <Select.Card>\\n          <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\\n        </Select.Card>\\n      </Select.Popper>\\n    </FormField>\\n  </Select>\\n  ```\\n\\n- `getTextValue`: Optional function to return the text representation of an item. If not provided,\\n  the default function will return the `text` property of the object of each item or an empty string\\n  if there is no `text` property. If you did not provide `items`, do not override this function.\\n  **Note: If your array of objects has a different property for `text`, like `label`, use this\\n  function to set the text.**\\n\\n  ```tsx\\n  const options = [{label: 'Pizza', id: 'pizza-1'}, {label: 'Cheeseburger', id: 'cheeseburger'}]\\n  <Select items={options} getTextValue={(item) => item.label}>\\n    <FormField label=\\\"Your Label\\\">\\n      <Select.Input onChange={e => handleChange(e)} id=\\\"contact-select\\\" />\\n      <Select.Popper>\\n        <Select.Card>\\n          <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>\\n        </Select.Card>\\n      </Select.Popper>\\n    </FormField>\\n  </Select>\\n  ```\\n\\n### Custom Styles\\n\\nSelect and its subcomponents support custom styling via the `cs` prop. For more information, check\\nour\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"popup\": {\n      \"title\": \"Components/Popups/Popup\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-popup--docs\",\n      \"mdxPath\": \"modules/react/popup/stories/Popup.mdx\",\n      \"mdxProse\": \"# Canvas Kit Popups\\n\\nA \\\"popup\\\" is a classification for a type of stacked UI element that appears \\\"on top\\\" of statically\\npositioned content. Tooltips, Modals, Dropdown menus, etc are all examples of \\\"popups\\\". Canvas Kit\\nhas a \\\"stack manager\\\" system for managing these popups. Different types of popups have different\\nrequirements of behavior for UX and accessibility - we can call them behaviors, capabilities, or\\ntraits. Canvas Kit comes with a number of [behavioral hooks](#hooks) in the form of React Hooks.\\n\\nYou should use the most semantic component for your use-case before using `Popup` directly, like\\n`Modal`, which already has the correct behaviors built-in. If no component already exists that\\nmatches your use case, you can use `Popup` and use our [hooks](#hooks). The `Popup` component comes\\nwith a `Popup.Popper` subcomponent that positions a popup using [PopperJS](https://popper.js.org/)\\nthat registers a popup with the `PopupStack` automatically and sets the popup model's `placement`\\nproperty. `Popup.Popper` component and hooks work with the stack management system for correct\\nrendering and accessibility behavior. If you cannot use `Popup.Popper`, use the\\n[usePopupStack](#usepoupstack) hook to properly register and deregister the popup at the correct\\ntime. If you cannot use our hooks, consider upgrading your component to use Hooks. If you cannot do\\nthat, you'll have to look up the `PopupStack` package for the direct API and have a look at the\\nsource code for our hooks into the `PopupStack` API.\\n\\nThis package comes with everything you need to build Popup UIs.\\n\\n[Buttons](/components/buttons/button)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThe `Popup` component is a generic\\n[Compound Component](/get-started/for-developers/documentation/compound-components/) that is used to\\nbuild popup UIs that are not already covered by Canvas Kit.\\n\\n### Basic Example\\n\\nThe Popup has no pre-defined behaviors built in, therefore the `usePopupModel` must always be used\\nto create a new `model`. This `model` is then used by all behavior hooks to apply additional popup\\nbehaviors to the compound component group. The following example creates a typical popup around a\\ntarget element and adds `useCloseOnOutsideClick`, `useCloseOnEscape`, `useInitialFocus`, and\\n`useReturnFocus` behaviors. You can read through the [hooks](#hooks) section to learn about all the\\npopup behaviors. For accessibility, these behaviors should be included most of the time.\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const Basic = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n      <Popup.Popper placement=\\\"top\\\">\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Delete Item</Popup.Heading>\\n          <Popup.Body>\\n            <Box as=\\\"p\\\" cs={bodyStyles}>\\n              Are you sure you'd like to delete the item titled 'My Item'?\\n            </Box>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n              Delete\\n            </Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n### Initial Focus\\n\\nIf you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`\\nof the model. This is useful for popups that don't have a Close icon button near the top right of\\nthe popup. In general, we recommend setting focus to the first interactive component inside the\\npopup that is the least destructive action.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  Popup,\\n  usePopupModel,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nconst columnStyles = createStyles({\\n  gap: system.space.x4,\\n  alignItems: 'flex-start',\\n});\\n\\nconst InitialFocusOnButton = () => {\\n  const messageId = useUniqueId();\\n  const initialFocusRef = React.useRef(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: OK button</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={messageId}>\\n          <Popup.Heading>Confirmation</Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles} id={messageId}>\\n              Your message has been sent!\\n            </Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>\\n              OK\\n            </Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnTextInput = () => {\\n  const descriptionId = useUniqueId();\\n  const initialFocusRef = React.useRef<HTMLInputElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: text input</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={descriptionId}>\\n          <Popup.Heading>Quick reply</Popup.Heading>\\n          <Popup.Body>\\n            <FormField>\\n              <FormField.Label>Message</FormField.Label>\\n              <FormField.Input as={TextInput} ref={initialFocusRef} />\\n            </FormField>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnHeading = () => {\\n  const headingFocusRef = React.useRef<HTMLHeadingElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef: headingFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: heading</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.Heading ref={headingFocusRef} tabIndex={-1}>\\n            Important notice\\n          </Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles}>Review the summary below before continuing.</Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const InitialFocus = () => {\\n  return (\\n    <Flex cs={columnStyles}>\\n      <InitialFocusOnButton />\\n      <InitialFocusOnTextInput />\\n      <InitialFocusOnHeading />\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When initial focus lands on a control **below** the title (such as the OK\\n> button in the example above), assign a unique `id` to supplementary text and pass\\n> `aria-describedby` on `Popup.Card`. This augments the included `aria-labelledby` reference to\\n> `Popup.Heading` so screen readers can announce both the heading and any supplementary text\\n> automatically. When initial focus is on the heading itself, add `tabIndex={-1}` to `Popup.Heading`\\n> so the title can receive programmatic focus. Choose where focus goes based on your product and\\n> accessibility requirements.\\n\\n### Focus Redirect\\n\\nFocus management is important to accessibility of popup contents. The following example shows\\n`useFocusRedirect` being used to manage focus in and out of a Popup. This is very useful for\\nnon-modal popups. Focus redirection tries to treat the Popup as if it were inline to the document.\\nTabbing out of the Popup will close the Popup and move focus to an adjacent focusable element.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const FocusRedirect = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = useUniqueId();\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible, popupId]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex cs={flexStyles}>\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}}></div>\\n        <Popup.Popper>\\n          <Popup.Card cs={cardStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" cs={bodyStyles}>\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex cs={flexStyles}>\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: The `useFocusRedirect` hook **will not** have any effect on the reading\\n> order of a screen reader. Screen reader users may get confused or disoriented when popups are\\n> portalled to the bottom of the document body. In this example, we're testing the use of\\n> `aria-owns` on a sibling `<div>` element pointing to the `Popup.Card` component. This remaps the\\n> hierarchy of the accessibility tree (in supported browsers) to address the reading order problem.\\n> For more information, see\\n> [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n### Focus Trapping\\n\\nFocus trapping is similar to the [Focus Redirect](#focus-redirect) example, but will trap focus\\ninside the popup instead of redirecting focus to adjacent focusable elements. This is necessary for\\nmodal dialogs where users must focus on the contents of the dialog before proceeding.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const FocusTrap = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = 'popup-test-id';\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex gap=\\\"s\\\">\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}} />\\n        <Popup.Popper>\\n          <Popup.Card width={400}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Focus trapping will not prevent mouse users from breaking out of a focus\\n> trap, nor will it prevent screen reader users from using virtual reading cursors from breaking\\n> out. Consider using [Modal](/components/popups/modal/) instead when you need to focus users'\\n> attention on a specific task inside of a popup..\\n\\n### Multiple Popups\\n\\nYou can render more than one `Popup` in the same view by giving each its own model. This example\\npairs `Popup` with `useDialogModel` and `useModalModel` so you can compare **focus redirection**\\n(Tab / Shift + Tab can move focus out of the first popup) and **focus trapping** (focus stays inside\\nthe second popup until it closes). Opening one does not close the other.\\n```tsx\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useDialogModel} from '@workday/canvas-kit-react/dialog';\\nimport {useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nconst popupStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nexport const MultiplePopups = () => {\\n  const dialogModel = useDialogModel();\\n  const modalModel = useModalModel();\\n\\n  return (\\n    <Flex cs={flexStyles}>\\n      <Popup model={dialogModel}>\\n        <Popup.Target>Focus Redirect Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Redirect Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the dialog model and will allow keyboard focus to escape when users\\n                press Tab or Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n      <Popup model={modalModel}>\\n        <Popup.Target>Focus Trap Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Trap Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the modal model and will trap keyboard focus when users press Tab or\\n                Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n            <Flex>\\n              <Popup.CloseButton>OK</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Nested Popups\\n\\nIf you need nested Popups within the same component, you can create multiple models and pass a\\nunique model to each Popup. Popup comes with a `Popup.CloseButton` that uses a `Button` and adds\\nprops via the `usePopupCloseButton` hook to ensure the popups hides and focus is returned. The `as`\\ncan be used in a powerful way to do this by using `<Popup.CloseButton as={Popup.CloseButton}>` which\\nwill mix in click handlers from both popups. This is not very intuitive, however. You can create\\nprops that merge a click handler for both Popups by using `usePopupCloseButton` directly. The second\\nparameter is props to be merged which will effectively hide both popups. Focus management is\\npreserved.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {\\n  Popup,\\n  useCloseOnOutsideClick,\\n  useCloseOnEscape,\\n  usePopupModel,\\n  usePopupCloseButton,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const NestedPopups = () => {\\n  const popup1 = usePopupModel();\\n  const popup2 = usePopupModel();\\n\\n  useCloseOnOutsideClick(popup1);\\n  useCloseOnEscape(popup1);\\n  useInitialFocus(popup1);\\n  useReturnFocus(popup1);\\n\\n  useCloseOnOutsideClick(popup2);\\n  useCloseOnEscape(popup2);\\n  useInitialFocus(popup2);\\n  useReturnFocus(popup2);\\n\\n  const closeBothProps = usePopupCloseButton(popup1, usePopupCloseButton(popup2));\\n\\n  return (\\n    <>\\n      <Popup model={popup1}>\\n        <Popup.Target>Open Popup 1</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card aria-label=\\\"Popup 1\\\">\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Body>\\n              <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup model={popup2}>\\n                <Popup.Target>Open Popup 2</Popup.Target>\\n                <Popup.Popper>\\n                  <Popup.Card aria-label=\\\"Popup 2\\\">\\n                    <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n                    <Popup.Body>\\n                      <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>\\n                    </Popup.Body>\\n                    <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n                      <Popup.CloseButton as={Popup.CloseButton} model={popup1}>\\n                        Close Both (as)\\n                      </Popup.CloseButton>\\n                      <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>\\n                    </Flex>\\n                  </Popup.Card>\\n                </Popup.Popper>\\n              </Popup>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In this example, observe how users can traverse both opened popups using\\n> the keyboard. This is likely to be a confusing experience for users and may necessitate focus\\n> trapping inside each popup with careful consideration for setting initial focus and returning\\n> focus.\\n\\n### Custom Target\\n\\nIt is common to have a custom target for your popup. Use the `as` prop to use your custom component.\\nThe `Popup.Target` element will add `onClick` and `ref` to the provided component. Your provided\\ntarget component must forward the `onClick` to an element for the Popup to open. The `as` will cause\\n`Popup.Target` to inherit the interface of your custom target component. This means any props your\\ntarget requires, `Popup.Target` now also requires. The example below has a `MyTarget` component that\\nrequires a `label` prop.\\n\\n> **Note**: If your application needs to programmatically open a Popup without the user interacting\\n> with the target button first, you'll also need to use `React.forwardRef` in your target component.\\n> Without this, the Popup will open at the top-left of the window instead of around the target.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\n\\ninterface MyTargetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  label: string;\\n}\\n\\nconst MyTarget = React.forwardRef<HTMLButtonElement, MyTargetProps>(({label, ...props}, ref) => {\\n  return (\\n    <button {...props} ref={ref}>\\n      {label}\\n    </button>\\n  );\\n});\\n\\nexport const CustomTarget = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={MyTarget} label=\\\"Open\\\" />\\n      <Popup.Popper>\\n        <Popup.Card>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Popup</Popup.Heading>\\n          <Popup.Body>Contents</Popup.Body>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be\\n> able to access the popup. Bear in mind that click handlers only work with the keyboard when\\n> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target\\n> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard\\n> event handlers for invoking the popup.\\n\\n### Full Screen API\\n\\nBy default, popups are created as children of the `document.body` element, but the `PopupStack`\\nsupports the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). When\\nfullscreen is entered, the `PopupStack` will automatically create a new stacking context for all\\nfuture popups. Any existing popups will disappear, but not be removed. They disappear because the\\nfullscreen API is only showing content within the fullscreen element. There are instances where a\\npopup may not close when fullscreen is exited:\\n\\n- The escape key is used to exit fullscreen\\n- There is a button to exit fullscreen, but the popup doesn't use `useCloseOnOutsideClick`\\n\\nIf fullscreen is exited, popups within the fullscreen stacking context are not removed or\\ntransferred automatically. If you do not handle this case, the popup may not render correctly. This\\nexample shows a popup that closes when fullscreen is entered/exited and another popup that transfers\\nthe popup's stack context when entering/exiting fullscreen.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n  useCloseOnFullscreenExit,\\n  useTransferOnFullscreenExit,\\n  useTransferOnFullscreenEnter,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useIsFullscreen} from '@workday/canvas-kit-react/common';\\nimport screenfull from 'screenfull';\\n\\nconst SelfClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useCloseOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Self-close Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Self-close Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useCloseOnFullscreenExit</code> hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst TransferClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useTransferOnFullscreenEnter(model);\\n  useTransferOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Transfer Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Transfer Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useTransferOnFullscreenExit</code>{' '}\\n              hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const FullScreen = () => {\\n  // you could make this a hook depending on which fullscreen library your application uses\\n  const fullscreenElementRef = React.useRef<HTMLDivElement>();\\n  const isFullscreen = useIsFullscreen();\\n\\n  const enterFullScreen = () => {\\n    screenfull.request(fullscreenElementRef.current);\\n  };\\n\\n  const exitFullscreen = () => {\\n    screenfull.exit();\\n  };\\n\\n  return (\\n    <>\\n      <SecondaryButton onClick={enterFullScreen}>Open Fullscreen</SecondaryButton>\\n      <Flex\\n        ref={fullscreenElementRef}\\n        alignItems=\\\"center\\\"\\n        justifyContent=\\\"center\\\"\\n        background=\\\"white\\\"\\n      >\\n        <Flex gap=\\\"s\\\">\\n          <SelfClosePopup />\\n          <TransferClosePopup />\\n          {isFullscreen ? (\\n            <SecondaryButton onClick={exitFullscreen}>Exit fullscreen</SecondaryButton>\\n          ) : null}\\n        </Flex>\\n      </Flex>\\n    </>\\n  );\\n};\\n```\\n\\n### Opening an External Window\\n\\nA popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent\\nis replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle\\nof the extenal window. Be sure to connect the `unload` event of both the parent `window` and the\\nexternal child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie\\nwindows.\\n```tsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {infoIcon} from '@workday/canvas-system-icons-web';\\n\\nimport {\\n  CanvasProvider,\\n  ContentDirection,\\n  createSubcomponent,\\n  PartialEmotionCanvasTheme,\\n  useMount,\\n  useTheme,\\n} from '@workday/canvas-kit-react/common';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nexport interface ExternalWindowPortalProps {\\n  /**\\n   * Child components of WindowPortal\\n   */\\n  children: React.ReactNode;\\n  /**\\n   * Callback to close the popup\\n   */\\n  onWindowClose?: () => void;\\n  /**\\n   * Width of the popup window\\n   */\\n  width?: number;\\n  /**\\n   * Height of the popup window\\n   */\\n  height?: number;\\n  /**\\n   * The name of the popup window. If another popup opens with the same name, that instance will\\n   * be reused. Use caution with setting this value\\n   */\\n  target?: string;\\n}\\n\\nasync function copyAssets(sourceDoc: Document, targetDoc: Document) {\\n  for (const font of (sourceDoc as any).fonts.values()) {\\n    (targetDoc as any).fonts.add(font);\\n\\n    font.load();\\n  }\\n\\n  await (targetDoc as any).fonts.ready;\\n\\n  // The current ES lib version doesn't include iterable interfaces, so we cast as an iterable\\n  for (const styleSheet of sourceDoc.styleSheets as StyleSheetList & Iterable<CSSStyleSheet>) {\\n    if (styleSheet.cssRules) {\\n      // text based styles\\n      const styleEl = targetDoc.createElement('style');\\n      for (const cssRule of styleSheet.cssRules as CSSRuleList & Iterable<CSSRule>) {\\n        styleEl.appendChild(targetDoc.createTextNode(cssRule.cssText));\\n      }\\n      targetDoc.head.appendChild(styleEl);\\n    } else if (styleSheet.href) {\\n      // link based styles\\n      const linkEl = targetDoc.createElement('link');\\n\\n      linkEl.rel = 'stylesheet';\\n      linkEl.href = styleSheet.href;\\n      targetDoc.head.appendChild(linkEl);\\n    }\\n  }\\n}\\n\\nconst ExternalWindowPortal = ({\\n  children,\\n  width = 300,\\n  height = 500,\\n  target = '',\\n  onWindowClose,\\n}: ExternalWindowPortalProps) => {\\n  const [portalElement, setPortalElement] = React.useState<HTMLDivElement | null>(null);\\n\\n  useMount(() => {\\n    const newWindow = window.open(\\n      '', // url\\n      target,\\n      `width=${width},height=${height},left=100,top=100,popup=true`\\n    );\\n\\n    if (newWindow) {\\n      // copy fonts and styles\\n      copyAssets(document, newWindow.document);\\n\\n      const element = newWindow.document.createElement('div');\\n      newWindow.document.body.appendChild(element);\\n      setPortalElement(element);\\n    } else {\\n      onWindowClose();\\n    }\\n\\n    const closeWindow = event => {\\n      onWindowClose();\\n    };\\n\\n    window.addEventListener('unload', closeWindow);\\n    newWindow?.addEventListener('unload', closeWindow);\\n\\n    return () => {\\n      window.removeEventListener('unload', closeWindow);\\n      newWindow?.removeEventListener('unload', closeWindow);\\n      newWindow?.close();\\n    };\\n  });\\n\\n  if (!portalElement) {\\n    return null;\\n  }\\n\\n  return ReactDOM.createPortal(<CanvasProvider>{children}</CanvasProvider>, portalElement);\\n};\\n\\nconst PopupExternalWindow = createSubcomponent()({\\n  displayName: 'Popup.ExternalWindow',\\n  modelHook: usePopupModel,\\n})<ExternalWindowPortalProps>(({children, ...elemProps}, Element, model) => {\\n  if (model.state.visibility === 'visible') {\\n    return (\\n      <ExternalWindowPortal onWindowClose={model.events.hide} {...elemProps}>\\n        {children}\\n      </ExternalWindowPortal>\\n    );\\n  }\\n\\n  return null;\\n});\\n\\nexport const ExternalWindow = () => {\\n  // useTheme is filling in the Canvas theme object if any keys are missing\\n  const canvasTheme: PartialEmotionCanvasTheme = useTheme({\\n    canvas: {\\n      // Switch to `ContentDirection.RTL` to change direction\\n      direction: ContentDirection.LTR,\\n    },\\n  });\\n\\n  const model = usePopupModel();\\n\\n  return (\\n    <CanvasProvider theme={canvasTheme}>\\n      <>\\n        <main className={mainContentStyles}>\\n          <p>Popup that opens a new Operating System Window</p>\\n          <Popup model={model}>\\n            <Tooltip title=\\\"Open External Window Tooltip\\\">\\n              <Popup.Target>Open External Window</Popup.Target>\\n            </Tooltip>\\n            <PopupExternalWindow>\\n              <p>External Window Contents! Mouse over the info icon to get a tooltip</p>\\n              <Flex gap=\\\"s\\\">\\n                <Tooltip title=\\\"More information\\\">\\n                  <SecondaryButton icon={infoIcon} />\\n                </Tooltip>\\n                <Popup.CloseButton>Close Window</Popup.CloseButton>\\n              </Flex>\\n            </PopupExternalWindow>\\n          </Popup>\\n          <p>Popup visibility: {model.state.visibility}</p>\\n        </main>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### RTL\\n\\nThe Popup component automatically handles right-to-left rendering.\\n\\n> **Note:** This example shows an inaccessible open card for demonstration purposes.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Popup.Card width={400}>\\n        <Popup.CloseIcon aria-label=\\\"\u05E1\u05D2\u05D5\u05E8\\\" />\\n        <Popup.Heading>\u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8</Popup.Heading>\\n        <Popup.Body>\\n          <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n            \u05D4\u05D0\u05DD \u05D1\u05E8\u05E6\u05D5\u05E0\u05DA \u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8 \u05D6\u05D4\\n          </Box>\\n        </Popup.Body>\\n        <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n          <DeleteButton>\u05DC\u05B4\u05DE\u05B0\u05D7\u05D5\u05B9\u05E7</DeleteButton>\\n          <SecondaryButton>\u05DC\u05B0\u05D1\u05B7\u05D8\u05B5\u05DC</SecondaryButton>\\n        </Flex>\\n      </Popup.Card>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nPopup content is usually portaled to the bottom of the `document.body`, which can affect **reading\\norder for screen readers** and **keyboard focus order**. For more information about Popup\\naccessibility, check out our documentation at\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n- For non-modal dialogs with `aria-owns` built-in to improve reading order for screen readers (that\\n  support it), check out the [**Dialog**](/components/popups/dialog/) component.\\n- For modal dialogs with built-in overlays and focus traps, check out the\\n  [**Modal**](/components/popups/modal/) component.\\n\\n## Component API\\n\\n<>\\n  \\n\\n  \\n</>\\n\\n## Hooks\\n\\n<>\\n  \\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n  \\n</>\\n\\n## Specifications\\n\\n\"\n    },\n    \"popper\": {\n      \"title\": \"Components/Popups/Popper\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-popper--docs\",\n      \"mdxPath\": \"modules/react/popup/stories/Popup.mdx\",\n      \"mdxProse\": \"# Canvas Kit Popups\\n\\nA \\\"popup\\\" is a classification for a type of stacked UI element that appears \\\"on top\\\" of statically\\npositioned content. Tooltips, Modals, Dropdown menus, etc are all examples of \\\"popups\\\". Canvas Kit\\nhas a \\\"stack manager\\\" system for managing these popups. Different types of popups have different\\nrequirements of behavior for UX and accessibility - we can call them behaviors, capabilities, or\\ntraits. Canvas Kit comes with a number of [behavioral hooks](#hooks) in the form of React Hooks.\\n\\nYou should use the most semantic component for your use-case before using `Popup` directly, like\\n`Modal`, which already has the correct behaviors built-in. If no component already exists that\\nmatches your use case, you can use `Popup` and use our [hooks](#hooks). The `Popup` component comes\\nwith a `Popup.Popper` subcomponent that positions a popup using [PopperJS](https://popper.js.org/)\\nthat registers a popup with the `PopupStack` automatically and sets the popup model's `placement`\\nproperty. `Popup.Popper` component and hooks work with the stack management system for correct\\nrendering and accessibility behavior. If you cannot use `Popup.Popper`, use the\\n[usePopupStack](#usepoupstack) hook to properly register and deregister the popup at the correct\\ntime. If you cannot use our hooks, consider upgrading your component to use Hooks. If you cannot do\\nthat, you'll have to look up the `PopupStack` package for the direct API and have a look at the\\nsource code for our hooks into the `PopupStack` API.\\n\\nThis package comes with everything you need to build Popup UIs.\\n\\n[Buttons](/components/buttons/button)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThe `Popup` component is a generic\\n[Compound Component](/get-started/for-developers/documentation/compound-components/) that is used to\\nbuild popup UIs that are not already covered by Canvas Kit.\\n\\n### Basic Example\\n\\nThe Popup has no pre-defined behaviors built in, therefore the `usePopupModel` must always be used\\nto create a new `model`. This `model` is then used by all behavior hooks to apply additional popup\\nbehaviors to the compound component group. The following example creates a typical popup around a\\ntarget element and adds `useCloseOnOutsideClick`, `useCloseOnEscape`, `useInitialFocus`, and\\n`useReturnFocus` behaviors. You can read through the [hooks](#hooks) section to learn about all the\\npopup behaviors. For accessibility, these behaviors should be included most of the time.\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const Basic = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n      <Popup.Popper placement=\\\"top\\\">\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Delete Item</Popup.Heading>\\n          <Popup.Body>\\n            <Box as=\\\"p\\\" cs={bodyStyles}>\\n              Are you sure you'd like to delete the item titled 'My Item'?\\n            </Box>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n              Delete\\n            </Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n### Initial Focus\\n\\nIf you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`\\nof the model. This is useful for popups that don't have a Close icon button near the top right of\\nthe popup. In general, we recommend setting focus to the first interactive component inside the\\npopup that is the least destructive action.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  Popup,\\n  usePopupModel,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nconst columnStyles = createStyles({\\n  gap: system.space.x4,\\n  alignItems: 'flex-start',\\n});\\n\\nconst InitialFocusOnButton = () => {\\n  const messageId = useUniqueId();\\n  const initialFocusRef = React.useRef(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: OK button</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={messageId}>\\n          <Popup.Heading>Confirmation</Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles} id={messageId}>\\n              Your message has been sent!\\n            </Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>\\n              OK\\n            </Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnTextInput = () => {\\n  const descriptionId = useUniqueId();\\n  const initialFocusRef = React.useRef<HTMLInputElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: text input</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles} aria-describedby={descriptionId}>\\n          <Popup.Heading>Quick reply</Popup.Heading>\\n          <Popup.Body>\\n            <FormField>\\n              <FormField.Label>Message</FormField.Label>\\n              <FormField.Input as={TextInput} ref={initialFocusRef} />\\n            </FormField>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>\\n            <Popup.CloseButton>Cancel</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst InitialFocusOnHeading = () => {\\n  const headingFocusRef = React.useRef<HTMLHeadingElement>(null);\\n  const model = usePopupModel({\\n    initialFocusRef: headingFocusRef,\\n  });\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Initial focus: heading</Popup.Target>\\n      <Popup.Popper placement={'bottom'}>\\n        <Popup.Card cs={cardStyles}>\\n          <Popup.Heading ref={headingFocusRef} tabIndex={-1}>\\n            Important notice\\n          </Popup.Heading>\\n          <Popup.Body>\\n            <Text cs={bodyStyles}>Review the summary below before continuing.</Text>\\n          </Popup.Body>\\n          <Flex cs={flexStyles}>\\n            <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>\\n          </Flex>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const InitialFocus = () => {\\n  return (\\n    <Flex cs={columnStyles}>\\n      <InitialFocusOnButton />\\n      <InitialFocusOnTextInput />\\n      <InitialFocusOnHeading />\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When initial focus lands on a control **below** the title (such as the OK\\n> button in the example above), assign a unique `id` to supplementary text and pass\\n> `aria-describedby` on `Popup.Card`. This augments the included `aria-labelledby` reference to\\n> `Popup.Heading` so screen readers can announce both the heading and any supplementary text\\n> automatically. When initial focus is on the heading itself, add `tabIndex={-1}` to `Popup.Heading`\\n> so the title can receive programmatic focus. Choose where focus goes based on your product and\\n> accessibility requirements.\\n\\n### Focus Redirect\\n\\nFocus management is important to accessibility of popup contents. The following example shows\\n`useFocusRedirect` being used to manage focus in and out of a Popup. This is very useful for\\nnon-modal popups. Focus redirection tries to treat the Popup as if it were inline to the document.\\nTabbing out of the Popup will close the Popup and move focus to an adjacent focusable element.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusRedirect,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nconst cardStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nconst bodyStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const FocusRedirect = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusRedirect(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = useUniqueId();\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible, popupId]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex cs={flexStyles}>\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}}></div>\\n        <Popup.Popper>\\n          <Popup.Card cs={cardStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" cs={bodyStyles}>\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex cs={flexStyles}>\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: The `useFocusRedirect` hook **will not** have any effect on the reading\\n> order of a screen reader. Screen reader users may get confused or disoriented when popups are\\n> portalled to the bottom of the document body. In this example, we're testing the use of\\n> `aria-owns` on a sibling `<div>` element pointing to the `Popup.Card` component. This remaps the\\n> hierarchy of the accessibility tree (in supported browsers) to address the reading order problem.\\n> For more information, see\\n> [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n### Focus Trapping\\n\\nFocus trapping is similar to the [Focus Redirect](#focus-redirect) example, but will trap focus\\ninside the popup instead of redirecting focus to adjacent focusable elements. This is necessary for\\nmodal dialogs where users must focus on the contents of the dialog before proceeding.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const FocusTrap = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n\\n  const handleDelete = () => {\\n    console.log('Delete Item');\\n  };\\n\\n  const popupId = 'popup-test-id';\\n  const visible = model.state.visibility !== 'hidden';\\n  React.useLayoutEffect(() => {\\n    if (visible && model.state.stackRef.current) {\\n      model.state.stackRef.current.setAttribute('id', popupId);\\n    }\\n  }, [model.state.stackRef, visible]);\\n\\n  return (\\n    <Popup model={model}>\\n      <Flex gap=\\\"s\\\">\\n        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>\\n        <div aria-owns={popupId} style={{position: 'absolute'}} />\\n        <Popup.Popper>\\n          <Popup.Card width={400}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n            <Popup.Heading>Delete Item</Popup.Heading>\\n            <Popup.Body>\\n              <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n                Are you sure you'd like to delete the item titled 'My Item'?\\n              </Box>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>\\n                Delete\\n              </Popup.CloseButton>\\n              <Popup.CloseButton>Cancel</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n        <SecondaryButton>Next Focusable Button</SecondaryButton>\\n        <SecondaryButton>Focusable Button After Popup</SecondaryButton>\\n      </Flex>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Focus trapping will not prevent mouse users from breaking out of a focus\\n> trap, nor will it prevent screen reader users from using virtual reading cursors from breaking\\n> out. Consider using [Modal](/components/popups/modal/) instead when you need to focus users'\\n> attention on a specific task inside of a popup..\\n\\n### Multiple Popups\\n\\nYou can render more than one `Popup` in the same view by giving each its own model. This example\\npairs `Popup` with `useDialogModel` and `useModalModel` so you can compare **focus redirection**\\n(Tab / Shift + Tab can move focus out of the first popup) and **focus trapping** (focus stays inside\\nthe second popup until it closes). Opening one does not close the other.\\n```tsx\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useDialogModel} from '@workday/canvas-kit-react/dialog';\\nimport {useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nconst popupStyles = createStyles({\\n  width: px2rem(400),\\n});\\n\\nexport const MultiplePopups = () => {\\n  const dialogModel = useDialogModel();\\n  const modalModel = useModalModel();\\n\\n  return (\\n    <Flex cs={flexStyles}>\\n      <Popup model={dialogModel}>\\n        <Popup.Target>Focus Redirect Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Redirect Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the dialog model and will allow keyboard focus to escape when users\\n                press Tab or Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n      <Popup model={modalModel}>\\n        <Popup.Target>Focus Trap Popup</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card cs={popupStyles}>\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Heading>Focus Trap Popup</Popup.Heading>\\n            <Popup.Body>\\n              <p>\\n                This popup uses the modal model and will trap keyboard focus when users press Tab or\\n                Shift + Tab.\\n              </p>\\n            </Popup.Body>\\n            <Flex>\\n              <Popup.CloseButton>OK</Popup.CloseButton>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Nested Popups\\n\\nIf you need nested Popups within the same component, you can create multiple models and pass a\\nunique model to each Popup. Popup comes with a `Popup.CloseButton` that uses a `Button` and adds\\nprops via the `usePopupCloseButton` hook to ensure the popups hides and focus is returned. The `as`\\ncan be used in a powerful way to do this by using `<Popup.CloseButton as={Popup.CloseButton}>` which\\nwill mix in click handlers from both popups. This is not very intuitive, however. You can create\\nprops that merge a click handler for both Popups by using `usePopupCloseButton` directly. The second\\nparameter is props to be merged which will effectively hide both popups. Focus management is\\npreserved.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {\\n  Popup,\\n  useCloseOnOutsideClick,\\n  useCloseOnEscape,\\n  usePopupModel,\\n  usePopupCloseButton,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const NestedPopups = () => {\\n  const popup1 = usePopupModel();\\n  const popup2 = usePopupModel();\\n\\n  useCloseOnOutsideClick(popup1);\\n  useCloseOnEscape(popup1);\\n  useInitialFocus(popup1);\\n  useReturnFocus(popup1);\\n\\n  useCloseOnOutsideClick(popup2);\\n  useCloseOnEscape(popup2);\\n  useInitialFocus(popup2);\\n  useReturnFocus(popup2);\\n\\n  const closeBothProps = usePopupCloseButton(popup1, usePopupCloseButton(popup2));\\n\\n  return (\\n    <>\\n      <Popup model={popup1}>\\n        <Popup.Target>Open Popup 1</Popup.Target>\\n        <Popup.Popper>\\n          <Popup.Card aria-label=\\\"Popup 1\\\">\\n            <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n            <Popup.Body>\\n              <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>\\n            </Popup.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n              <Popup model={popup2}>\\n                <Popup.Target>Open Popup 2</Popup.Target>\\n                <Popup.Popper>\\n                  <Popup.Card aria-label=\\\"Popup 2\\\">\\n                    <Popup.CloseIcon aria-label=\\\"Close\\\" size=\\\"small\\\" />\\n                    <Popup.Body>\\n                      <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>\\n                    </Popup.Body>\\n                    <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n                      <Popup.CloseButton as={Popup.CloseButton} model={popup1}>\\n                        Close Both (as)\\n                      </Popup.CloseButton>\\n                      <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>\\n                    </Flex>\\n                  </Popup.Card>\\n                </Popup.Popper>\\n              </Popup>\\n            </Flex>\\n          </Popup.Card>\\n        </Popup.Popper>\\n      </Popup>\\n    </>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In this example, observe how users can traverse both opened popups using\\n> the keyboard. This is likely to be a confusing experience for users and may necessitate focus\\n> trapping inside each popup with careful consideration for setting initial focus and returning\\n> focus.\\n\\n### Custom Target\\n\\nIt is common to have a custom target for your popup. Use the `as` prop to use your custom component.\\nThe `Popup.Target` element will add `onClick` and `ref` to the provided component. Your provided\\ntarget component must forward the `onClick` to an element for the Popup to open. The `as` will cause\\n`Popup.Target` to inherit the interface of your custom target component. This means any props your\\ntarget requires, `Popup.Target` now also requires. The example below has a `MyTarget` component that\\nrequires a `label` prop.\\n\\n> **Note**: If your application needs to programmatically open a Popup without the user interacting\\n> with the target button first, you'll also need to use `React.forwardRef` in your target component.\\n> Without this, the Popup will open at the top-left of the window instead of around the target.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  Popup,\\n  usePopupModel,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useInitialFocus,\\n  useReturnFocus,\\n} from '@workday/canvas-kit-react/popup';\\n\\ninterface MyTargetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  label: string;\\n}\\n\\nconst MyTarget = React.forwardRef<HTMLButtonElement, MyTargetProps>(({label, ...props}, ref) => {\\n  return (\\n    <button {...props} ref={ref}>\\n      {label}\\n    </button>\\n  );\\n});\\n\\nexport const CustomTarget = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target as={MyTarget} label=\\\"Open\\\" />\\n      <Popup.Popper>\\n        <Popup.Card>\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Popup</Popup.Heading>\\n          <Popup.Body>Contents</Popup.Body>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be\\n> able to access the popup. Bear in mind that click handlers only work with the keyboard when\\n> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target\\n> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard\\n> event handlers for invoking the popup.\\n\\n### Full Screen API\\n\\nBy default, popups are created as children of the `document.body` element, but the `PopupStack`\\nsupports the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). When\\nfullscreen is entered, the `PopupStack` will automatically create a new stacking context for all\\nfuture popups. Any existing popups will disappear, but not be removed. They disappear because the\\nfullscreen API is only showing content within the fullscreen element. There are instances where a\\npopup may not close when fullscreen is exited:\\n\\n- The escape key is used to exit fullscreen\\n- There is a button to exit fullscreen, but the popup doesn't use `useCloseOnOutsideClick`\\n\\nIf fullscreen is exited, popups within the fullscreen stacking context are not removed or\\ntransferred automatically. If you do not handle this case, the popup may not render correctly. This\\nexample shows a popup that closes when fullscreen is entered/exited and another popup that transfers\\nthe popup's stack context when entering/exiting fullscreen.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Popup,\\n  useCloseOnEscape,\\n  useCloseOnOutsideClick,\\n  useFocusTrap,\\n  useInitialFocus,\\n  useReturnFocus,\\n  usePopupModel,\\n  useCloseOnFullscreenExit,\\n  useTransferOnFullscreenExit,\\n  useTransferOnFullscreenEnter,\\n} from '@workday/canvas-kit-react/popup';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {useIsFullscreen} from '@workday/canvas-kit-react/common';\\nimport screenfull from 'screenfull';\\n\\nconst SelfClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnOutsideClick(model);\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useCloseOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Self-close Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Self-close Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useCloseOnFullscreenExit</code> hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nconst TransferClosePopup = () => {\\n  const model = usePopupModel();\\n\\n  useCloseOnEscape(model);\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useTransferOnFullscreenEnter(model);\\n  useTransferOnFullscreenExit(model);\\n\\n  return (\\n    <Popup model={model}>\\n      <Popup.Target>Open Transfer Popup</Popup.Target>\\n      <Popup.Popper>\\n        <Popup.Card width={400} padding=\\\"s\\\">\\n          <Popup.CloseIcon aria-label=\\\"Close\\\" />\\n          <Popup.Heading>Transfer Popup</Popup.Heading>\\n          <Popup.Body>\\n            <p>\\n              When in fullscreen, the escape key will be highjacked by the browser to exit\\n              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To\\n              close when fullscreen is exited, use the <code>useTransferOnFullscreenExit</code>{' '}\\n              hook.\\n            </p>\\n          </Popup.Body>\\n          <Popup.CloseButton>Close</Popup.CloseButton>\\n        </Popup.Card>\\n      </Popup.Popper>\\n    </Popup>\\n  );\\n};\\n\\nexport const FullScreen = () => {\\n  // you could make this a hook depending on which fullscreen library your application uses\\n  const fullscreenElementRef = React.useRef<HTMLDivElement>();\\n  const isFullscreen = useIsFullscreen();\\n\\n  const enterFullScreen = () => {\\n    screenfull.request(fullscreenElementRef.current);\\n  };\\n\\n  const exitFullscreen = () => {\\n    screenfull.exit();\\n  };\\n\\n  return (\\n    <>\\n      <SecondaryButton onClick={enterFullScreen}>Open Fullscreen</SecondaryButton>\\n      <Flex\\n        ref={fullscreenElementRef}\\n        alignItems=\\\"center\\\"\\n        justifyContent=\\\"center\\\"\\n        background=\\\"white\\\"\\n      >\\n        <Flex gap=\\\"s\\\">\\n          <SelfClosePopup />\\n          <TransferClosePopup />\\n          {isFullscreen ? (\\n            <SecondaryButton onClick={exitFullscreen}>Exit fullscreen</SecondaryButton>\\n          ) : null}\\n        </Flex>\\n      </Flex>\\n    </>\\n  );\\n};\\n```\\n\\n### Opening an External Window\\n\\nA popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent\\nis replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle\\nof the extenal window. Be sure to connect the `unload` event of both the parent `window` and the\\nexternal child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie\\nwindows.\\n```tsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {infoIcon} from '@workday/canvas-system-icons-web';\\n\\nimport {\\n  CanvasProvider,\\n  ContentDirection,\\n  createSubcomponent,\\n  PartialEmotionCanvasTheme,\\n  useMount,\\n  useTheme,\\n} from '@workday/canvas-kit-react/common';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nexport interface ExternalWindowPortalProps {\\n  /**\\n   * Child components of WindowPortal\\n   */\\n  children: React.ReactNode;\\n  /**\\n   * Callback to close the popup\\n   */\\n  onWindowClose?: () => void;\\n  /**\\n   * Width of the popup window\\n   */\\n  width?: number;\\n  /**\\n   * Height of the popup window\\n   */\\n  height?: number;\\n  /**\\n   * The name of the popup window. If another popup opens with the same name, that instance will\\n   * be reused. Use caution with setting this value\\n   */\\n  target?: string;\\n}\\n\\nasync function copyAssets(sourceDoc: Document, targetDoc: Document) {\\n  for (const font of (sourceDoc as any).fonts.values()) {\\n    (targetDoc as any).fonts.add(font);\\n\\n    font.load();\\n  }\\n\\n  await (targetDoc as any).fonts.ready;\\n\\n  // The current ES lib version doesn't include iterable interfaces, so we cast as an iterable\\n  for (const styleSheet of sourceDoc.styleSheets as StyleSheetList & Iterable<CSSStyleSheet>) {\\n    if (styleSheet.cssRules) {\\n      // text based styles\\n      const styleEl = targetDoc.createElement('style');\\n      for (const cssRule of styleSheet.cssRules as CSSRuleList & Iterable<CSSRule>) {\\n        styleEl.appendChild(targetDoc.createTextNode(cssRule.cssText));\\n      }\\n      targetDoc.head.appendChild(styleEl);\\n    } else if (styleSheet.href) {\\n      // link based styles\\n      const linkEl = targetDoc.createElement('link');\\n\\n      linkEl.rel = 'stylesheet';\\n      linkEl.href = styleSheet.href;\\n      targetDoc.head.appendChild(linkEl);\\n    }\\n  }\\n}\\n\\nconst ExternalWindowPortal = ({\\n  children,\\n  width = 300,\\n  height = 500,\\n  target = '',\\n  onWindowClose,\\n}: ExternalWindowPortalProps) => {\\n  const [portalElement, setPortalElement] = React.useState<HTMLDivElement | null>(null);\\n\\n  useMount(() => {\\n    const newWindow = window.open(\\n      '', // url\\n      target,\\n      `width=${width},height=${height},left=100,top=100,popup=true`\\n    );\\n\\n    if (newWindow) {\\n      // copy fonts and styles\\n      copyAssets(document, newWindow.document);\\n\\n      const element = newWindow.document.createElement('div');\\n      newWindow.document.body.appendChild(element);\\n      setPortalElement(element);\\n    } else {\\n      onWindowClose();\\n    }\\n\\n    const closeWindow = event => {\\n      onWindowClose();\\n    };\\n\\n    window.addEventListener('unload', closeWindow);\\n    newWindow?.addEventListener('unload', closeWindow);\\n\\n    return () => {\\n      window.removeEventListener('unload', closeWindow);\\n      newWindow?.removeEventListener('unload', closeWindow);\\n      newWindow?.close();\\n    };\\n  });\\n\\n  if (!portalElement) {\\n    return null;\\n  }\\n\\n  return ReactDOM.createPortal(<CanvasProvider>{children}</CanvasProvider>, portalElement);\\n};\\n\\nconst PopupExternalWindow = createSubcomponent()({\\n  displayName: 'Popup.ExternalWindow',\\n  modelHook: usePopupModel,\\n})<ExternalWindowPortalProps>(({children, ...elemProps}, Element, model) => {\\n  if (model.state.visibility === 'visible') {\\n    return (\\n      <ExternalWindowPortal onWindowClose={model.events.hide} {...elemProps}>\\n        {children}\\n      </ExternalWindowPortal>\\n    );\\n  }\\n\\n  return null;\\n});\\n\\nexport const ExternalWindow = () => {\\n  // useTheme is filling in the Canvas theme object if any keys are missing\\n  const canvasTheme: PartialEmotionCanvasTheme = useTheme({\\n    canvas: {\\n      // Switch to `ContentDirection.RTL` to change direction\\n      direction: ContentDirection.LTR,\\n    },\\n  });\\n\\n  const model = usePopupModel();\\n\\n  return (\\n    <CanvasProvider theme={canvasTheme}>\\n      <>\\n        <main className={mainContentStyles}>\\n          <p>Popup that opens a new Operating System Window</p>\\n          <Popup model={model}>\\n            <Tooltip title=\\\"Open External Window Tooltip\\\">\\n              <Popup.Target>Open External Window</Popup.Target>\\n            </Tooltip>\\n            <PopupExternalWindow>\\n              <p>External Window Contents! Mouse over the info icon to get a tooltip</p>\\n              <Flex gap=\\\"s\\\">\\n                <Tooltip title=\\\"More information\\\">\\n                  <SecondaryButton icon={infoIcon} />\\n                </Tooltip>\\n                <Popup.CloseButton>Close Window</Popup.CloseButton>\\n              </Flex>\\n            </PopupExternalWindow>\\n          </Popup>\\n          <p>Popup visibility: {model.state.visibility}</p>\\n        </main>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### RTL\\n\\nThe Popup component automatically handles right-to-left rendering.\\n\\n> **Note:** This example shows an inaccessible open card for demonstration purposes.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {Popup} from '@workday/canvas-kit-react/popup';\\nimport {Box, Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Popup.Card width={400}>\\n        <Popup.CloseIcon aria-label=\\\"\u05E1\u05D2\u05D5\u05E8\\\" />\\n        <Popup.Heading>\u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8</Popup.Heading>\\n        <Popup.Body>\\n          <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n            \u05D4\u05D0\u05DD \u05D1\u05E8\u05E6\u05D5\u05E0\u05DA \u05DC\u05DE\u05D7\u05D5\u05E7 \u05E4\u05E8\u05D9\u05D8 \u05D6\u05D4\\n          </Box>\\n        </Popup.Body>\\n        <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n          <DeleteButton>\u05DC\u05B4\u05DE\u05B0\u05D7\u05D5\u05B9\u05E7</DeleteButton>\\n          <SecondaryButton>\u05DC\u05B0\u05D1\u05B7\u05D8\u05B5\u05DC</SecondaryButton>\\n        </Flex>\\n      </Popup.Card>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nPopup content is usually portaled to the bottom of the `document.body`, which can affect **reading\\norder for screen readers** and **keyboard focus order**. For more information about Popup\\naccessibility, check out our documentation at\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n- For non-modal dialogs with `aria-owns` built-in to improve reading order for screen readers (that\\n  support it), check out the [**Dialog**](/components/popups/dialog/) component.\\n- For modal dialogs with built-in overlays and focus traps, check out the\\n  [**Modal**](/components/popups/modal/) component.\\n\\n## Component API\\n\\n<>\\n  \\n\\n  \\n</>\\n\\n## Hooks\\n\\n<>\\n  \\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n{' '}\\n\\n  \\n</>\\n\\n## Specifications\\n\\n\"\n    },\n    \"pagination\": {\n      \"title\": \"Components/Navigation/Pagination\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-navigation-pagination--docs\",\n      \"mdxPath\": \"modules/react/pagination/stories/pagination.mdx\",\n      \"mdxProse\": \"# Canvas Kit Pagination\\n\\n`Pagination` is a\\n[compound component](/get-started/for-developers/documentation/compound-components/) that allows\\nusers to navigate between pages in a range.\\n\\n[> Workday Design Reference](https://design.workday.com/components/navigation/pagination)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Pagination` includes a container `Pagination` component and a number of subcomponents which can be\\ncomposed in a variety of ways.\\n\\nIn this example, we set up a basic `Pagination` component with the default range of five pages, as\\nwell as step controls (`Pagination.StepToPreviousButton` and `Pagination.StepToNextButton`) that\\nallow you to move to the previous page or the next page.\\n```tsx\\nimport * as React from 'react';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const Basic = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\nNote that you must include `Pagination.AdditionalDetails` to meet accessibility standards (with one\\nexception, see [`Pagination.AdditionalDetails`](#paginationadditionaldetails) for more information).\\nIt is an `aria-live` region that announces the current page update to screen readers. If you wish to\\nprevent it from displaying (as we've done in the remaining examples), you may set its\\n`shouldHideDetails` prop to `true`. The visually hidden region will still be accessible to screen\\nreaders.\\n\\n### Hoisted Model\\n\\nBy default, `Pagination` will create and use its own [model](#model) internally. Alternatively, you\\nmay configure your own model with `usePaginationModel` and pass it to `Pagination` via the `model`\\nprop. This pattern is referred to as\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)\\nand provides direct access to its `state` and `events` outside of the `Pagination` component.\\n\\nIn this example, we set up external observation of the model state and create an external button to\\ntrigger an event to change the current page.\\n```tsx\\nimport * as React from 'react';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n  usePaginationModel,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const HoistedModel = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  const model = usePaginationModel({\\n    lastPage,\\n    onPageChange: number => console.log(number),\\n  });\\n\\n  return (\\n    <>\\n      <Pagination aria-label=\\\"Pagination\\\" model={model}>\\n        <Pagination.Controls>\\n          <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n          <Pagination.PageList>\\n            {({state}) =>\\n              state.range.map(pageNumber => (\\n                <Pagination.PageListItem key={pageNumber}>\\n                  <Pagination.PageButton\\n                    aria-label={`Page ${pageNumber}`}\\n                    pageNumber={pageNumber}\\n                  />\\n                </Pagination.PageListItem>\\n              ))\\n            }\\n          </Pagination.PageList>\\n          <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        </Pagination.Controls>\\n        <Pagination.AdditionalDetails shouldHideDetails>\\n          {({state}) =>\\n            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n              state.currentPage,\\n              resultCount,\\n              totalCount\\n            )} of ${totalCount} results`\\n          }\\n        </Pagination.AdditionalDetails>\\n      </Pagination>\\n      <SecondaryButton\\n        onClick={() => {\\n          model.events.goTo(7);\\n        }}\\n      >\\n        Go to Page 7\\n      </SecondaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Jump Controls\\n\\nThis example adds jump controls (`Pagination.JumpToFirstButton` and `Pagination.JumpToLastButton`)\\nthat allow you to skip to the first and last pages in the range.\\n```tsx\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const JumpControls = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.JumpToFirstButton aria-label=\\\"First\\\" />\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        <Pagination.JumpToLastButton aria-label=\\\"Last\\\" />\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails shouldHideDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\n### GoTo Form\\n\\nThis example adds a form (`Pagination.GoToForm`) that allows you to skip to a specific page within\\nthe range.\\n```tsx\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const GoToForm = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.JumpToFirstButton aria-label=\\\"First\\\" />\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        <Pagination.JumpToLastButton aria-label=\\\"Last\\\" />\\n        <Pagination.GoToForm>\\n          <Pagination.GoToTextInput aria-label=\\\"Go to page number\\\" />\\n          <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>\\n        </Pagination.GoToForm>\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails shouldHideDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Pagination` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport * as React from 'react';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n  usePaginationModel,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Pagination aria-label=\\\"Pagination\\\" lastPage={lastPage}>\\n        <Pagination.Controls>\\n          <Pagination.JumpToFirstButton aria-label=\\\"First\\\" />\\n          <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n          <Pagination.PageList>\\n            {({state}) =>\\n              state.range.map(pageNumber => (\\n                <Pagination.PageListItem key={pageNumber}>\\n                  <Pagination.PageButton\\n                    aria-label={`Page ${pageNumber}`}\\n                    pageNumber={pageNumber}\\n                  />\\n                </Pagination.PageListItem>\\n              ))\\n            }\\n          </Pagination.PageList>\\n          <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n          <Pagination.JumpToLastButton aria-label=\\\"Last\\\" />\\n          <Pagination.GoToForm>\\n            <Pagination.GoToTextInput aria-label=\\\"Go to page number\\\" />\\n            <Pagination.GoToLabel>{({state}) => `\u0627\u0632 ${state.lastPage} \u0635\u0641\u062D\u0647`}</Pagination.GoToLabel>\\n          </Pagination.GoToForm>\\n        </Pagination.Controls>\\n        <Pagination.AdditionalDetails shouldHideDetails>\\n          {({state}) =>\\n            `${getVisibleResultsMax(\\n              state.currentPage,\\n              resultCount,\\n              totalCount\\n            )}-${getVisibleResultsMin(state.currentPage, resultCount)} \u0645\u0646 100 \u0635\u0641\u062D\u0627\u062A`\\n          }\\n        </Pagination.AdditionalDetails>\\n      </Pagination>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Custom Range\\n\\nThis example uses a custom range that allows you to control the width of the component.\\n```tsx\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n} from '@workday/canvas-kit-react/pagination';\\n\\nexport const CustomRange = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n\\n  return (\\n    <Pagination\\n      aria-label=\\\"Pagination\\\"\\n      lastPage={lastPage}\\n      onPageChange={pageNumber => console.log(pageNumber)}\\n      rangeSize={3}\\n    >\\n      <Pagination.Controls>\\n        <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n        <Pagination.PageList>\\n          {({state}) =>\\n            state.range.map(pageNumber => (\\n              <Pagination.PageListItem key={pageNumber}>\\n                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />\\n              </Pagination.PageListItem>\\n            ))\\n          }\\n        </Pagination.PageList>\\n        <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n      </Pagination.Controls>\\n      <Pagination.AdditionalDetails shouldHideDetails>\\n        {({state}) =>\\n          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n            state.currentPage,\\n            resultCount,\\n            totalCount\\n          )} of ${totalCount} results`\\n        }\\n      </Pagination.AdditionalDetails>\\n    </Pagination>\\n  );\\n};\\n```\\n\\n### Responsive Range\\n\\nIn some situations, you might want to adjust Pagination's range based on the width of the container.\\nYou can use `useResizeObserver` to accomplish this as in the example below.\\n```tsx\\nimport * as React from 'react';\\nimport {\\n  Pagination,\\n  getLastPage,\\n  getVisibleResultsMax,\\n  getVisibleResultsMin,\\n  usePaginationModel,\\n} from '@workday/canvas-kit-react/pagination';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {useResizeObserver, useTheme} from '@workday/canvas-kit-react/common';\\n\\nexport const ResponsiveRange = () => {\\n  const resultCount = 10;\\n  const totalCount = 100;\\n  const lastPage = getLastPage(resultCount, totalCount);\\n  // Normally, rangeSize can be a static value, but we're making it stateful,\\n  // so we can update it using useResizeObserver\\n  const [rangeSize, setRangeSize] = React.useState(5);\\n  const model = usePaginationModel({\\n    lastPage,\\n    rangeSize,\\n  });\\n  // We're only using this state to display the container width;\\n  const [containerWidth, setContainerWidth] = React.useState(0);\\n  // We're using breakpoints from the theme as reference points to adjust the range\\n  const theme = useTheme();\\n  const {values: breakpointValues} = theme.canvas.breakpoints;\\n\\n  // We'll use this ref to measure the size of the container\\n  const containerRef = React.useRef(null);\\n  useResizeObserver({\\n    ref: containerRef,\\n    onResize: ({width}) => {\\n      // Note: onResizeObserver only accounts for the size of the container.\\n      // It does not factor in margin, padding, or border widths.\\n      // If you want to be exact, adjust your math to account for those.\\n      // If you're okay with being close enough on the measurements, this is fine.\\n      if (width) {\\n        // updating the container width for the display text\\n        setContainerWidth(width);\\n        // helper functions for better readability\\n        const isBetweenZeroAndSmall = width >= breakpointValues.zero && width < breakpointValues.s;\\n        const isBetweenSmallAndMedium = width >= breakpointValues.s && width < breakpointValues.m;\\n        const isBetweenMediumAndLarge = width >= breakpointValues.m && width < breakpointValues.l;\\n        const isBetweenLargeAndXLarge = width >= breakpointValues.l && width < breakpointValues.xl;\\n        // We're checking the rangeSize at each level to prevent extra re-renders.\\n        if (rangeSize !== 1 && isBetweenZeroAndSmall) {\\n          setRangeSize(1);\\n        }\\n        if (rangeSize !== 3 && isBetweenSmallAndMedium) {\\n          setRangeSize(3);\\n        }\\n        if (rangeSize !== 5 && isBetweenMediumAndLarge) {\\n          setRangeSize(5);\\n        }\\n        if (rangeSize !== 7 && isBetweenLargeAndXLarge) {\\n          setRangeSize(7);\\n        }\\n      }\\n    },\\n  });\\n\\n  return (\\n    <Flex\\n      border=\\\"solid 1px\\\"\\n      ref={containerRef}\\n      justifyContent=\\\"space-between\\\"\\n      padding=\\\"s\\\"\\n      alignItems=\\\"center\\\"\\n    >\\n      <Text typeLevel=\\\"body.small\\\" fontWeight=\\\"bold\\\">\\n        Width: {containerWidth}px\\n      </Text>\\n      <Pagination model={model} aria-label=\\\"Pagination\\\">\\n        <Pagination.Controls>\\n          <Pagination.StepToPreviousButton aria-label=\\\"Previous\\\" />\\n          <Pagination.PageList>\\n            {({state}) =>\\n              state.range.map(pageNumber => (\\n                <Pagination.PageListItem key={pageNumber}>\\n                  <Pagination.PageButton\\n                    aria-label={`Page ${pageNumber}`}\\n                    pageNumber={pageNumber}\\n                  />\\n                </Pagination.PageListItem>\\n              ))\\n            }\\n          </Pagination.PageList>\\n          <Pagination.StepToNextButton aria-label=\\\"Next\\\" />\\n        </Pagination.Controls>\\n        <Pagination.AdditionalDetails shouldHideDetails>\\n          {({state}) =>\\n            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(\\n              state.currentPage,\\n              resultCount,\\n              totalCount\\n            )} of ${totalCount} results`\\n          }\\n        </Pagination.AdditionalDetails>\\n      </Pagination>\\n    </Flex>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Model\\n\\nIf `Pagination` was stripped of all its markup, attributes, and styling, what would remain is the\\n[model](/get-started/for-developers/documentation/compound-components/#models). The model is an\\nobject composed of two parts: `state` which describes the current snapshot in time of the component\\nand `events` which describes events that can be sent to the model.\\n\\nBy default, `Pagination` will create a model and share it internally with its subcomponents using\\nReact context. You may subscribe to `PaginationContext` if you wish to create a custom subcomponent\\nfor your implementation. Here's a simple example.\\n\\n```tsx\\n\\nconst CustomButton = (props: React.HTMLAttributes<HTMLButtonElement>) => {\\n  const model = React.useContext(PaginationContext);\\n\\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\\n    // If onClick is provided, pass the event along\\n    props.onClick?.(e);\\n    model.events.goTo(10);\\n  };\\n\\n  return (\\n    <button onClick={handleClick} {...props}>\\n      Go To Page 10\\n    </button>\\n  );\\n};\\n\\nexport const CustomPagination = () => {\\n  return (\\n    <Pagination aria-label=\\\"Pagination\\\" lastPage={20}>\\n      <CustomButton aria-label=\\\"Page 10\\\" />\\n      {/* Other subcomponents */}\\n    </Pagination>\\n  );\\n};\\n```\\n\\nAlternatively, if you need direct access to the model's `state` and `events` outside of the\\n`Pagination` component, you may configure your own model with `usePaginationModel` and pass it to\\n`Pagination` via a pattern called\\n[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model).\\n\\n```tsx\\nconst model = usePaginationModel({\\n  lastPage,\\n  onPageChange: number => console.log(number),\\n});\\n\\n<Pagination aria-label=\\\"Pagination\\\" model={model}>\\n  {/* Child components */}\\n</Pagination>;\\n```\\n\\n### usePaginationModel\\n\\n`usePaginationModel` accepts a configuration object with the following properties and returns a\\n`PaginationModel` with `state` and `events` properties.\\n\\n## Utilities\\n\\n### getLastPage\\n\\n### getRangeMin\\n\\n### getRangeMax\\n\\n### getVisibleResultsMin\\n\\n### getVisibleResultsMax\\n\\n\"\n    },\n    \"modal\": {\n      \"title\": \"Components/Popups/Modal\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal--docs\",\n      \"mdxPath\": \"modules/react/modal/stories/Modal.mdx\",\n      \"mdxProse\": \"# Canvas Kit Modal\\n\\nA Modal component is a type of Dialog that renders a translucent overlay that prevents user\\ninteraction with the rest of the page. A Modal will render the rest of the page inert until the\\nModal is dismissed. A Modal should be used when the user needs to be presented with important\\ninformation that must be interacted with before continuing interaction with the rest of the page.\\n\\nFor tasks that do not require blocking the rest of the page, consider the non-modal\\n[**Dialog**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs)\\ncomponent instead.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic\\n\\nThe basic behavior of a modal is to hide all content from all users that is \\\"behind\\\" the modal\\ndialog.\\n```tsx\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\n\\nexport const Basic = () => {\\n  const handleAcknowledge = () => {\\n    console.log('License Acknowledged');\\n  };\\n\\n  const handleCancel = () => {\\n    console.log('Cancel clicked');\\n  };\\n\\n  return (\\n    <Modal>\\n      <Modal.Target as={PrimaryButton}>Open License</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>MIT License</Modal.Heading>\\n          <Modal.Body>\\n            <Box as=\\\"p\\\" marginY=\\\"zero\\\">\\n              Permission is hereby granted, free of charge, to any person obtaining a copy of this\\n              software and associated documentation files (the \\\"Software\\\").\\n            </Box>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n### Without Close Icon\\n\\nIf you wish to remove the close icon button, you can simply omit the `Modal.CloseButton`\\nsubcomponent. If you have a modal dialog that requires the user to accept instead of dismiss through\\nan escape key or clicking outside the modal, you must create a new `PopupModel` without those\\nbehaviors and hand that model to the Modal dialog component.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {\\n  usePopupModel,\\n  useInitialFocus,\\n  useReturnFocus,\\n  useFocusTrap,\\n  useAssistiveHideSiblings,\\n  useDisableBodyScroll,\\n} from '@workday/canvas-kit-react/popup';\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nexport const WithoutCloseIcon = () => {\\n  const longDescId = useUniqueId();\\n  const cancelBtnRef = React.useRef(null);\\n  const model = usePopupModel({\\n    initialFocusRef: cancelBtnRef,\\n  });\\n\\n  // disable useCloseOnEscape and useCloseOnOverlayClick\\n  useInitialFocus(model);\\n  useReturnFocus(model);\\n  useFocusTrap(model);\\n  useAssistiveHideSiblings(model);\\n  useDisableBodyScroll(model);\\n  const handleDelete = () => {\\n    console.log('Deleted item');\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card aria-describedby={longDescId}>\\n          <Modal.Heading>Delete Item</Modal.Heading>\\n          <Modal.Body>\\n            <Box as=\\\"p\\\" id={longDescId} marginY=\\\"zero\\\">\\n              Are you sure you want to delete the item?\\n            </Box>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton ref={cancelBtnRef}>Cancel</Modal.CloseButton>\\n            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>\\n              Delete\\n            </Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n### Custom Focus\\n\\nBy default, the Modal makes sure the first focusable element receives focus when the Modal is\\nopened. Most of the time, this is the `Modal.CloseIcon` button. If that element isn't present, the\\nModal will use the Modal Heading to make sure screen reader users have focus near the start of the\\nModal's content. This allows screen reader users to discover the Modal's content more naturally\\nwithout having to navigate back up again. Sometimes, it is a better user experience to focus on a\\ndifferent element. The following example shows how `initialFocusRef` can be used to change which\\nelement receives focus when the modal opens.\\n```tsx\\nimport React from 'react';\\nimport {Modal, useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\n\\nexport const CustomFocus = () => {\\n  const longDescID = useUniqueId();\\n  const ref = React.useRef<HTMLInputElement>(null);\\n  const [value, setValue] = React.useState('');\\n  const model = useModalModel({\\n    initialFocusRef: ref,\\n  });\\n\\n  const handleAcknowledge = () => {\\n    console.log('Acknowledged license');\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Modal.Target as={PrimaryButton}>Acknowledge License</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card aria-describedby={longDescID}>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>Acknowledge License</Modal.Heading>\\n          <Modal.Body>\\n            <Box as=\\\"p\\\" id={longDescID} marginTop={0} marginBottom=\\\"m\\\">\\n              Enter your initials to acknowledge the license.\\n            </Box>\\n            <FormField cs={{marginBottom: 0}}>\\n              <FormField.Label>Initials</FormField.Label>\\n              <FormField.Input\\n                as={TextInput}\\n                ref={ref}\\n                value={value}\\n                onChange={e => setValue(e.currentTarget.value)}\\n              />\\n            </FormField>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When initial focus lands on a control **below** the heading (for example,\\n> a text field instead of the close button), give supplementary copy a unique `id` and pass\\n> **`aria-describedby`** on **`Modal.Card`** so screen readers can announce both the dialog name and\\n> that text. For more examples of custom focus techniques, see\\n> [Popup > Initial Focus](https://workday.github.io/canvas-kit/?path=/docs/components-popups-popup--docs#initial-focus).\\n\\n### Return Focus\\n\\nBy default, the Modal will return focus to the `Modal.Target` element. When you open the modal with\\n`model.events.show()` (without `Modal.Target`), set **`returnFocusRef`** on the model to the element\\nthat should receive focus when the modal closes\u2014for example the button that opened it. That covers\\ncancel, Escape, and the close icon: focus returns to the control the user activated.\\n\\nIf confirming an action **removes** that control from the document (such as deleting the row that\\nheld the delete button), `returnFocusRef` alone cannot land on a **new** target. The example below\\nuses **`useLayoutEffect`** after the list updates to move focus to another row\u2019s delete control, or\\nto empty-state text when no files remain.\\n```tsx\\nimport React from 'react';\\nimport {Modal, useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Flex, Box} from '@workday/canvas-kit-react/layout';\\nimport {Heading, Text} from '@workday/canvas-kit-react/text';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {trashIcon} from '@workday/canvas-system-icons-web';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst INITIAL_FILES = ['Resume.docx', 'Cover_Letter.docx', 'References.docx'];\\n\\nconst actionStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nconst headingStyles = createStyles({\\n  marginY: system.space.zero,\\n});\\n\\nconst emptyStateStyles = createStyles({\\n  maxWidth: '28rem',\\n  outline: 'none',\\n});\\n\\nconst listStyles = createStyles({\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n  marginY: system.space.zero,\\n  padding: system.space.zero,\\n  listStyle: 'none',\\n  maxWidth: '28rem',\\n});\\n\\nconst rowStyles = createStyles({\\n  alignItems: 'center',\\n  justifyContent: 'space-between',\\n  gap: system.space.x4,\\n  width: '100%',\\n});\\n\\nfunction fileNameId(name: string) {\\n  return `return-focus-file-${name.replace(/[^a-zA-Z0-9]/g, '_')}`;\\n}\\n\\n/** Index of a delete button to focus after removing `deletedIndex`, or empty list. */\\nfunction nextListFocusAfterDelete(deletedIndex: number, lengthBeforeDelete: number) {\\n  if (lengthBeforeDelete <= 1) {\\n    return 'empty' as const;\\n  }\\n  return deletedIndex < lengthBeforeDelete - 1 ? deletedIndex : deletedIndex - 1;\\n}\\n\\nexport const ReturnFocus = () => {\\n  const [items, setItems] = React.useState<string[]>(() => [...INITIAL_FILES]);\\n  const [confirmingFileName, setConfirmingFileName] = React.useState<string | null>(null);\\n  const bodyTextId = useUniqueId();\\n\\n  const returnFocusRef = React.useRef<HTMLButtonElement | null>(null);\\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\\n  const deleteButtonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\\n  const emptyStateRef = React.useRef<HTMLDivElement>(null);\\n  const pendingDeleteIndexRef = React.useRef<number | null>(null);\\n  const postDeleteFocusRef = React.useRef<number | 'empty' | null>(null);\\n\\n  const model = useModalModel({\\n    returnFocusRef,\\n    initialFocusRef: cancelButtonRef,\\n  });\\n\\n  React.useEffect(() => {\\n    if (model.state.visibility === 'hidden') {\\n      setConfirmingFileName(null);\\n      pendingDeleteIndexRef.current = null;\\n    }\\n  }, [model.state.visibility]);\\n\\n  React.useLayoutEffect(() => {\\n    if (postDeleteFocusRef.current === null) {\\n      return;\\n    }\\n    if (postDeleteFocusRef.current === 'empty') {\\n      emptyStateRef.current?.focus();\\n    } else {\\n      deleteButtonRefs.current[postDeleteFocusRef.current]?.focus();\\n    }\\n    postDeleteFocusRef.current = null;\\n  }, [items]);\\n\\n  const openDeleteModal = (index: number) => {\\n    pendingDeleteIndexRef.current = index;\\n    setConfirmingFileName(items[index]);\\n    returnFocusRef.current = deleteButtonRefs.current[index];\\n    model.events.show();\\n  };\\n\\n  const handleConfirmDelete = () => {\\n    const idx = pendingDeleteIndexRef.current;\\n    if (idx === null) {\\n      return;\\n    }\\n    postDeleteFocusRef.current = nextListFocusAfterDelete(idx, items.length);\\n    pendingDeleteIndexRef.current = null;\\n    setItems(prev => prev.filter((_, i) => i !== idx));\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Heading as=\\\"h4\\\" size=\\\"small\\\" cs={headingStyles}>\\n        Uploaded Files\\n      </Heading>\\n      <Box>\\n        {items.length > 0 ? (\\n          <Flex as=\\\"ul\\\" cs={listStyles}>\\n            {items.map((name, index) => (\\n              <Flex as=\\\"li\\\" key={name} cs={rowStyles}>\\n                <Text as=\\\"span\\\" id={fileNameId(name)}>\\n                  {name}\\n                </Text>\\n                <Tooltip title=\\\"Delete\\\">\\n                  <DeleteButton\\n                    aria-describedby={fileNameId(name)}\\n                    icon={trashIcon}\\n                    ref={el => {\\n                      deleteButtonRefs.current[index] = el;\\n                    }}\\n                    onClick={() => openDeleteModal(index)}\\n                  />\\n                </Tooltip>\\n              </Flex>\\n            ))}\\n          </Flex>\\n        ) : (\\n          <Box ref={emptyStateRef} tabIndex={-1} cs={emptyStateStyles}>\\n            <Text>No files remaining.</Text>\\n          </Box>\\n        )}\\n      </Box>\\n      <Modal.Overlay>\\n        <Modal.Card aria-describedby={bodyTextId}>\\n          <Modal.Heading>Delete file?</Modal.Heading>\\n          <Modal.Body>\\n            <Text id={bodyTextId}>\\n              {confirmingFileName\\n                ? `Are you sure you want to delete ${confirmingFileName}?`\\n                : 'Are you sure you want to delete this file?'}\\n            </Text>\\n          </Modal.Body>\\n          <Flex cs={actionStyles}>\\n            <Modal.CloseButton ref={cancelButtonRef}>Cancel</Modal.CloseButton>\\n            <Modal.CloseButton as={DeleteButton} onClick={handleConfirmDelete}>\\n              Delete\\n            </Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: After an item is deleted, focus is returned to the next item in the list\\n> or to the empty state text when no items remain.\\n\\n### Custom Target\\n\\nIt is common to have a custom target for your modal. Use the `as` prop to use your custom component.\\nThe `Modal.Target` element will add `onClick` and `ref` to the provided component. Your provided\\ntarget component must forward the `onClick` to an element for the Modal to open. The `as` will cause\\n`Modal.Target` to inherit the interface of your custom target component. This means any props your\\ntarget requires, `Modal.Target` now also requires. The example below has a `MyTarget` component that\\nrequires a `label` prop.\\n\\n> **Note**: If your application needs to programmatically open a Modal without the user interacting\\n> with the target button first, you'll also need to use `React.forwardRef` in your target component.\\n> Without this, the Modal will open at the top-left of the window instead of around the target.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\n\\ninterface MyTargetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  label: string;\\n}\\n\\nconst MyTarget = ({label, ...props}: MyTargetProps) => {\\n  return <button {...props}>{label}</button>;\\n};\\n\\nexport const CustomTarget = () => {\\n  return (\\n    <Modal>\\n      <Modal.Target as={MyTarget} label=\\\"Open\\\" />\\n      <Modal.Overlay>\\n        <Modal.Card>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>Modal Heading</Modal.Heading>\\n          <Modal.Body>\\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper facilisis dolor\\n            quis facilisis. Aenean tempor eget quam et semper. Nam malesuada rhoncus euismod.\\n            Quisque vel urna feugiat, dictum risus sed, pulvinar nulla. Sed gravida, elit non\\n            iaculis blandit, ligula tortor posuere mauris, vitae cursus turpis nunc non arcu.\\n          </Modal.Body>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be\\n> able to access the modal. Bear in mind that click handlers only work with the keyboard when\\n> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target\\n> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard\\n> event handlers for invoking the modal.\\n\\n### Body Content Overflow\\n\\nThe Modal automatically handles overflowing content inside the `Modal.Body` element. If contents are\\nlarger than the browser's height will allow, the content will overflow with a scrollbar. You may\\nneed to restrict the height of your browser to observe the overflow.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const BodyOverflow = () => {\\n  const handleAcknowledge = () => {\\n    console.log('License Acknowledged');\\n  };\\n\\n  const handleCancel = () => {\\n    console.log('Cancel clicked');\\n  };\\n\\n  return (\\n    <Modal>\\n      <Modal.Target as={PrimaryButton}>Open License</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>MIT License</Modal.Heading>\\n          <Modal.Body tabIndex={0}>\\n            <p style={{marginTop: 0}}>\\n              Permission is hereby granted, free of charge, to any person obtaining a copy of this\\n              software and associated documentation files (the \\\"Software\\\"), to deal in the Software\\n              without restriction, including without limitation the rights to use, copy, modify,\\n              merge, publish, distribute, sublicense, and/or sell copies of the Software, and to\\n              permit persons to whom the Software is furnished to do so, subject to the following\\n              conditions:\\n            </p>\\n            <p>\\n              The above copyright notice and this permission notice shall be included in all copies\\n              or substantial portions of the Software.\\n            </p>\\n            <p>\\n              THE SOFTWARE IS PROVIDED \\\"AS IS\\\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\\n              INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\\n              PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\\n              HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF\\n              CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE\\n              OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\\n            </p>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\\n              incididunt ut labore et dolore magna aliqua. Amet massa vitae tortor condimentum\\n              lacinia quis. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Sed lectus\\n              vestibulum mattis ullamcorper velit sed. Rutrum tellus pellentesque eu tincidunt\\n              tortor aliquam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus.\\n              Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Id neque\\n              aliquam vestibulum morbi blandit cursus risus at. Vel eros donec ac odio tempor orci.\\n              Ac felis donec et odio pellentesque diam volutpat. Laoreet non curabitur gravida arcu\\n              ac tortor dignissim. Rhoncus urna neque viverra justo nec ultrices dui. Bibendum arcu\\n              vitae elementum curabitur vitae nunc sed velit dignissim. Sed risus pretium quam\\n              vulputate dignissim suspendisse in est. Curabitur gravida arcu ac tortor. Nam libero\\n              justo laoreet sit amet cursus sit amet. Arcu dui vivamus arcu felis bibendum ut\\n              tristique et egestas. Eros donec ac odio tempor orci dapibus ultrices. At erat\\n              pellentesque adipiscing commodo elit at. Dignissim cras tincidunt lobortis feugiat\\n              vivamus at augue.\\n            </p>\\n            <p>\\n              Amet commodo nulla facilisi nullam vehicula ipsum. Blandit libero volutpat sed cras.\\n              Quam lacus suspendisse faucibus interdum posuere. Aenean euismod elementum nisi quis\\n              eleifend. Orci nulla pellentesque dignissim enim sit amet venenatis. Diam vel quam\\n              elementum pulvinar etiam non quam lacus. Sit amet dictum sit amet justo donec enim\\n              diam vulputate. Tincidunt ornare massa eget egestas purus. Pulvinar neque laoreet\\n              suspendisse interdum consectetur libero id faucibus. Morbi tincidunt augue interdum\\n              velit. Nullam non nisi est sit amet.\\n            </p>\\n            <p style={{marginBottom: 0}}>\\n              Aliquet enim tortor at auctor urna nunc id cursus metus. Leo urna molestie at\\n              elementum eu facilisis. Consectetur purus ut faucibus pulvinar elementum integer.\\n              Volutpat est velit egestas dui id ornare arcu odio. At consectetur lorem donec massa\\n              sapien. Condimentum vitae sapien pellentesque habitant. Pellentesque habitant morbi\\n              tristique senectus. Et molestie ac feugiat sed lectus vestibulum. Arcu risus quis\\n              varius quam quisque. Turpis massa tincidunt dui ut ornare lectus sit amet. Magna eget\\n              est lorem ipsum dolor sit. Suspendisse faucibus interdum posuere lorem ipsum. Nisi\\n              vitae suscipit tellus mauris a diam maecenas sed. Ipsum dolor sit amet consectetur\\n              adipiscing. Ultricies integer quis auctor elit sed. Scelerisque varius morbi enim nunc\\n              faucibus a. Tortor consequat id porta nibh venenatis cras. Consectetur adipiscing elit\\n              ut aliquam purus sit.\\n            </p>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When body content overflows, ensure users can scroll that region **using\\n> only the keyboard**. Mouse users can drag scrollbars, but keyboard users need another path. In\\n> this example, **`tabIndex={0}`** is set on **`Modal.Body`** so the scrollable area can receive\\n> focus; once focused, **arrow keys** move the viewport within the overflowing content.\\n\\n### Full overlay scrolling\\n\\nIf content is large, scrolling the entire overlay container is an option. Use the\\n`Modal.OverflowOverlay` component instead of the `Modal.Overlay` component. The `Modal.Card`'s\\n`maxHeight` and `height` will need to be reset to `inherit` to prevent any internal overflow.\\n\\nThis has the effect of scrolling the heading, close button, and any action buttons. If this type of\\nscrolling behavior is not desired, try the [Body Content Overflow](#body-content-overflow) method.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const FullOverflow = () => {\\n  const handleAcknowledge = () => {\\n    console.log('License Acknowledged');\\n  };\\n\\n  const handleCancel = () => {\\n    console.log('Cancel clicked');\\n  };\\n\\n  return (\\n    <Modal>\\n      <Modal.Target as={PrimaryButton}>Open License</Modal.Target>\\n      <Modal.OverflowOverlay>\\n        <Modal.Card maxHeight=\\\"inherit\\\" height=\\\"inherit\\\">\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>MIT License</Modal.Heading>\\n          <Modal.Body tabIndex={0}>\\n            <p style={{marginTop: 0}}>\\n              Permission is hereby granted, free of charge, to any person obtaining a copy of this\\n              software and associated documentation files (the \\\"Software\\\"), to deal in the Software\\n              without restriction, including without limitation the rights to use, copy, modify,\\n              merge, publish, distribute, sublicense, and/or sell copies of the Software, and to\\n              permit persons to whom the Software is furnished to do so, subject to the following\\n              conditions:\\n            </p>\\n            <p>\\n              The above copyright notice and this permission notice shall be included in all copies\\n              or substantial portions of the Software.\\n            </p>\\n            <p>\\n              THE SOFTWARE IS PROVIDED \\\"AS IS\\\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\\n              INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\\n              PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\\n              HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF\\n              CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE\\n              OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\\n            </p>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\\n              incididunt ut labore et dolore magna aliqua. Amet massa vitae tortor condimentum\\n              lacinia quis. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Sed lectus\\n              vestibulum mattis ullamcorper velit sed. Rutrum tellus pellentesque eu tincidunt\\n              tortor aliquam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus.\\n              Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Id neque\\n              aliquam vestibulum morbi blandit cursus risus at. Vel eros donec ac odio tempor orci.\\n              Ac felis donec et odio pellentesque diam volutpat. Laoreet non curabitur gravida arcu\\n              ac tortor dignissim. Rhoncus urna neque viverra justo nec ultrices dui. Bibendum arcu\\n              vitae elementum curabitur vitae nunc sed velit dignissim. Sed risus pretium quam\\n              vulputate dignissim suspendisse in est. Curabitur gravida arcu ac tortor. Nam libero\\n              justo laoreet sit amet cursus sit amet. Arcu dui vivamus arcu felis bibendum ut\\n              tristique et egestas. Eros donec ac odio tempor orci dapibus ultrices. At erat\\n              pellentesque adipiscing commodo elit at. Dignissim cras tincidunt lobortis feugiat\\n              vivamus at augue.\\n            </p>\\n            <p>\\n              Amet commodo nulla facilisi nullam vehicula ipsum. Blandit libero volutpat sed cras.\\n              Quam lacus suspendisse faucibus interdum posuere. Aenean euismod elementum nisi quis\\n              eleifend. Orci nulla pellentesque dignissim enim sit amet venenatis. Diam vel quam\\n              elementum pulvinar etiam non quam lacus. Sit amet dictum sit amet justo donec enim\\n              diam vulputate. Tincidunt ornare massa eget egestas purus. Pulvinar neque laoreet\\n              suspendisse interdum consectetur libero id faucibus. Morbi tincidunt augue interdum\\n              velit. Nullam non nisi est sit amet.\\n            </p>\\n            <p style={{marginBottom: 0}}>\\n              Aliquet enim tortor at auctor urna nunc id cursus metus. Leo urna molestie at\\n              elementum eu facilisis. Consectetur purus ut faucibus pulvinar elementum integer.\\n              Volutpat est velit egestas dui id ornare arcu odio. At consectetur lorem donec massa\\n              sapien. Condimentum vitae sapien pellentesque habitant. Pellentesque habitant morbi\\n              tristique senectus. Et molestie ac feugiat sed lectus vestibulum. Arcu risus quis\\n              varius quam quisque. Turpis massa tincidunt dui ut ornare lectus sit amet. Magna eget\\n              est lorem ipsum dolor sit. Suspendisse faucibus interdum posuere lorem ipsum. Nisi\\n              vitae suscipit tellus mauris a diam maecenas sed. Ipsum dolor sit amet consectetur\\n              adipiscing. Ultricies integer quis auctor elit sed. Scelerisque varius morbi enim nunc\\n              faucibus a. Tortor consequat id porta nibh venenatis cras. Consectetur adipiscing elit\\n              ut aliquam purus sit.\\n            </p>\\n          </Modal.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\">\\n            <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>\\n              Acknowledge\\n            </Modal.CloseButton>\\n            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.OverflowOverlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n### Form Modal\\n\\nThe `Modal.Card` can be turned into a `form` element to make a form modal. The `model` should be\\nhoisted to allow for form validation and allow you to control when the modal closes.\\n```tsx\\nimport React from 'react';\\n\\nimport {Modal, useModalModel} from '@workday/canvas-kit-react/modal';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {plusIcon} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst FAVORITE_COLOR_OPTIONS = ['Blue', 'Yellow'];\\n\\nconst flexStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x2,\\n});\\n\\nexport const FormModal = () => {\\n  const model = useModalModel();\\n\\n  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {\\n    event.preventDefault(); // prevent a page reload\\n\\n    // do form validation here\\n\\n    console.log('form data', {\\n      first: (event.currentTarget.elements.namedItem('first') as HTMLInputElement).value,\\n      last: (event.currentTarget.elements.namedItem('last') as HTMLInputElement).value,\\n      favoriteColor: (event.currentTarget.elements.namedItem('favoriteColor') as HTMLInputElement)\\n        .value,\\n    });\\n\\n    // if it looks good, submit to the server and close the modal\\n    model.events.hide();\\n  };\\n\\n  return (\\n    <Modal model={model}>\\n      <Modal.Target icon={plusIcon}>Create New User</Modal.Target>\\n      <Modal.Overlay>\\n        <Modal.Card as=\\\"form\\\" onSubmit={onSubmit}>\\n          <Modal.CloseIcon aria-label=\\\"Close\\\" />\\n          <Modal.Heading>New User</Modal.Heading>\\n          <Modal.Body>\\n            <FormField>\\n              <FormField.Label>First Name</FormField.Label>\\n              <FormField.Input as={TextInput} name=\\\"first\\\" />\\n            </FormField>\\n            <FormField>\\n              <FormField.Label>Last Name</FormField.Label>\\n              <FormField.Input as={TextInput} name=\\\"last\\\" />\\n            </FormField>\\n            <FormField>\\n              <FormField.Label>Favorite Color</FormField.Label>\\n              <FormField.Field>\\n                <Select items={FAVORITE_COLOR_OPTIONS}>\\n                  <FormField.Input as={Select.Input} name=\\\"favoriteColor\\\" />\\n                  <Select.Popper>\\n                    <Select.Card>\\n                      <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n                    </Select.Card>\\n                  </Select.Popper>\\n                </Select>\\n              </FormField.Field>\\n            </FormField>\\n          </Modal.Body>\\n          <Flex cs={flexStyles}>\\n            <Modal.CloseButton>Cancel</Modal.CloseButton>\\n            <PrimaryButton type=\\\"submit\\\">Submit</PrimaryButton>\\n          </Flex>\\n        </Modal.Card>\\n      </Modal.Overlay>\\n    </Modal>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\n`Modal` uses the default modal model (`useModalModel`), which composes **`useInitialFocus`**,\\n**`useReturnFocus`**, **`useCloseOnOverlayClick`**, **`useCloseOnEscape`**, **`useFocusTrap`**,\\n**`useAssistiveHideSiblings`**, and **`useDisableBodyScroll`**.\\n\\n**`Modal.Card`** exposes **`role=\\\"dialog\\\"`** and **`aria-labelledby`** referencing the `id` on\\n**`Modal.Heading`**, so the dialog has an accessible name that matches the visible heading. If you\\ndo not use **`Modal.Heading`**, add an **`aria-label`** on **`Modal.Card`** instead.\\n\\n**`aria-modal`:** The card sets **`aria-modal=\\\"false\\\"`**. When **`aria-modal`** is `true`, some\\nassistive technologies hide everything outside the dialog\u2014including portaled UI owned by the dialog\\n(such as a Select menu rendered as a sibling of the modal). Canvas Kit keeps\\n**`aria-modal=\\\"false\\\"`** for a better VoiceOver experience while **`useAssistiveHideSiblings`**\\napplies **`aria-hidden`** to siblings of the modal stack so background content stays hidden from\\nassistive technology while the modal is open.\\n\\nUnlike [**Dialog**](/components/popups/dialog/), Modal does **not** add the sibling **`aria-owns`**\\npattern used to remap reading order for portaled non-modal dialogs. Focus moves into the modal when\\nit opens, and sibling hiding reduces exposure to content behind the overlay. For portals, reading\\norder, and related tradeoffs, see\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n[Modal Dialog Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\\n\\n- Prefer **`Modal.Heading`** so the dialog is properly labelled; avoid leaving a dialog without an\\n  accessible name.\\n- Ensure icon-only controls such as **`Modal.CloseIcon`** include an accessible name. Prefer the\\n  `Tooltip` component to provide a visible label, or a translated `aria-label` string is acceptable.\\n\\n### Navigation\\n\\n- **Enter** / **Space**: Open the modal (standard button behavior on the trigger). When it opens,\\n  focus moves to the **first focusable element** inside the modal in DOM order\u2014often the close\\n  control\u2014or to the element referenced by **`initialFocusRef`** on the model when set.\\n- **Tab** / **Shift + Tab**: Move through focusable elements inside the modal; focus **stays**\\n  within the modal (**focus trap**).\\n- **Escape**: Closes the modal and returns focus to **`Modal.Target`** (or the configured return\\n  target, such as **`returnFocusRef`**).\\n\\n### Screen Reader Experience\\n\\n- **When the modal opens:** Screen readers should announce the first focused control (often the\\n  close button), the dialog's name (**`Modal.Heading`**) and role.\\n- **Background content:** Sibling elements of the modal stack receive **`aria-hidden=\\\"true\\\"`** while\\n  the modal is visible, which hides the rest of the page from many assistive technologies. Mouse\\n  users are blocked by the overlay and inert interaction expectations; always verify behavior in\\n  your supported browser and screen reader combinations.\\n- **Focus trap limits:** Trapping **keyboard** focus does not stop mouse users from interacting\\n  outside the dialog card, and some screen reader users can move a virtual cursor outside the\\n  trapped region. Treat the trap as the primary keyboard affordance, not a hard security boundary.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"menu\": {\n      \"title\": \"Components/Popups/Menu\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs\",\n      \"mdxPath\": \"modules/react/menu/stories/Menu.mdx\",\n      \"mdxProse\": \"# Canvas Kit Menu\\n\\n`Menu` displays a list of options when triggered by an action or UI element like an icon or button.\\n\\n[> Workday Design Reference](https://design.workday.com/components/popups/menus)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Menu` is typically triggered by an action such as pressing a button. The `Menu` comes with a\\n`Target` subcomponent and a Popup.\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Basic = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu onSelect={data => setSelected(data.id)}>\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item>First Item</Menu.Item>\\n            <Menu.Item>Second Item</Menu.Item>\\n            <Menu.Divider />\\n            <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>\\n            <Menu.Item aria-disabled>Fourth Item</Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n`Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu\\nmodel which composes a list model and a popup model and sets up accessibility features for you.\\n\\n### Context Menu\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const ContextMenu = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu onSelect={data => setSelected(data.id)}>\\n      <Menu.TargetContext>Right-click to Open Menu</Menu.TargetContext>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item>First Item</Menu.Item>\\n            <Menu.Item>Second Item</Menu.Item>\\n            <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>\\n            <Menu.Item>Fourth Item</Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: This variation relies on the `contextmenu` browser event, which has\\n> varying levels of support across different operating systems. On Windows, this feature is better\\n> supported and users can typically trigger context menus using the **Shift + F10** keyboard\\n> shortcut or the dedicated **Context Menu** key (if available on their keyboard). However, on\\n> macOS, context menu support is limited and may require users to enable specific accessibility\\n> settings in their system preferences to function properly. Consider providing alternative access\\n> methods for critical functionality.\\n\\n### Icons\\n\\nMenu supports more complex children, including icons, but the text of the item will no longer be\\nknown. In this case, add a `data-text` attribute to inform the collection system what the text of\\nthe item is. The text is used for components that filter based on text. For example, a Select\\ncomponent will jump to an item based on the keys the user types. If the user types \\\"C\\\", the\\ncomponent will jump to the first item that starts with a \\\"C\\\". This functionality requires knowledge\\nabout the text of the item.\\n```tsx\\nimport React from 'react';\\nimport {\\n  setupIcon,\\n  uploadCloudIcon,\\n  userIcon,\\n  taskContactIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Icons = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu onSelect={data => setSelected(data.id)}>\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item data-text=\\\"First Item\\\">\\n              <Menu.Item.Icon icon={uploadCloudIcon} />\\n              <Menu.Item.Text>First Item</Menu.Item.Text>\\n            </Menu.Item>\\n            <Menu.Item data-text=\\\"Second Item (with a really really really long label)\\\">\\n              <Menu.Item.Icon icon={setupIcon} />\\n              <Menu.Item.Text>Second Item (with a really really really long label)</Menu.Item.Text>\\n            </Menu.Item>\\n            <Menu.Item aria-disabled data-text=\\\"Third Item\\\">\\n              <Menu.Item.Icon icon={uploadCloudIcon} />\\n              <Menu.Item.Text>Third Item</Menu.Item.Text>\\n              <Menu.Item.Icon icon={taskContactIcon} />\\n            </Menu.Item>\\n            <Menu.Item data-text=\\\"User\\\">\\n              <Menu.Item.Icon icon={userIcon} />\\n              <Menu.Item.Text>User</Menu.Item.Text>\\n            </Menu.Item>\\n            <Menu.Divider />\\n            <Menu.Item data-text=\\\"Fifth Item (with divider)\\\">\\n              <Menu.Item.Icon icon={taskContactIcon} />\\n              <Menu.Item.Text>Fifth Item (with divider)</Menu.Item.Text>\\n            </Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Icons in menu items do not inherently provide text alternatives to\\n> assistive technologies. However, in most cases, icons are used decoratively alongside text labels,\\n> and additional text alternatives are not necessary since the menu item text itself provides the\\n> accessible name.\\n\\n### Grouping\\n\\nGrouping adds hierarchy and categorization to menu items. Group headers do not represent menu items\\nand are not selectable with the keyboard or mouse.\\n\\n> **Note**: Grouping is not supported in virtual rendering. Menus by default have `shouldVirtualize`\\n> set to `false`. Setting to `true` results in unspecified behavior. We use `react-virtual` which\\n> doesn't support nested virtualization.\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Grouping = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <>\\n      <Menu onSelect={data => setSelected(data.id)}>\\n        <Menu.Target>Open Menu</Menu.Target>\\n        <Menu.Popper>\\n          <Menu.Card>\\n            <Menu.List>\\n              <Menu.Group title=\\\"First Group\\\">\\n                <Menu.Item>First Item</Menu.Item>\\n                <Menu.Item>Second Item</Menu.Item>\\n              </Menu.Group>\\n              <Menu.Group title=\\\"Second Group\\\">\\n                <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>\\n                <Menu.Item aria-disabled>Fourth Item</Menu.Item>\\n              </Menu.Group>\\n            </Menu.List>\\n          </Menu.Card>\\n        </Menu.Popper>\\n        <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n          Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n        </BodyText>\\n      </Menu>\\n    </>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Menu groups use `role=\\\"group\\\"` with appropriate labeling to provide\\n> semantic structure for assistive technologies. When navigating through grouped menu items, screen\\n> readers will announce the group label when users enter a new group, providing important context\\n> about the organization of the menu. Group headers are not part of the keyboard navigation\\n> sequence, allowing users to efficiently move between actionable menu items. This semantic grouping\\n> helps all users, including those using assistive technologies, understand the hierarchy and\\n> categorization of menu options.\\n\\n### Nested\\n\\nMenus support nesting. If you only have a few items and not very many nesting levels, the menu can\\nbe defined statically using JSX. A submenu is defined using the `<Menu.Submenu>` component. The\\n`Submenu` is implemented as a special `Menu` subcomponent. The API of the submenu is the same as the\\n`Menu` except the submenu's target is also a menu item. The component is named `TargetItem` to\\nindicate this dual role.\\n```tsx\\nimport React from 'react';\\nimport {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Nested = () => {\\n  const [selected, setSelected] = React.useState('');\\n  return (\\n    <Menu\\n      id=\\\"first-menu\\\"\\n      onSelect={data => {\\n        setSelected(data.id);\\n      }}\\n    >\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>\\n            <Menu.Item data-id=\\\"first-item\\\">First Item</Menu.Item>\\n            <Menu.Submenu id=\\\"second-menu\\\">\\n              <Menu.Submenu.TargetItem data-id=\\\"second-item\\\">Second Item</Menu.Submenu.TargetItem>\\n              <Menu.Submenu.Popper>\\n                <Menu.Submenu.Card>\\n                  <Menu.Submenu.List>\\n                    <Menu.Submenu.Item data-id=\\\"first-sub-item\\\">First Sub Item</Menu.Submenu.Item>\\n                    <Menu.Submenu.Item data-id=\\\"second-sub-item\\\">First Sub Item</Menu.Submenu.Item>\\n                    <Menu.Submenu.Item data-id=\\\"third-sub-item\\\">Third Sub Item</Menu.Submenu.Item>\\n                    <Menu.Submenu.Item data-id=\\\"fourth-sub-item\\\">Fourth Sub Item</Menu.Submenu.Item>\\n                  </Menu.Submenu.List>\\n                </Menu.Submenu.Card>\\n              </Menu.Submenu.Popper>\\n            </Menu.Submenu>\\n            <Menu.Divider />\\n            <Menu.Item data-id=\\\"third-item\\\">\\n              Third Item (with a really, really, really long label)\\n            </Menu.Item>\\n            <Menu.Item aria-disabled data-id=\\\"fourth-item\\\">\\n              Fourth Item\\n            </Menu.Item>\\n          </Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: When a menu item has an attached submenu, the `<Menu.Submenu.TargetItem>`\\n> includes `aria-haspopup=\\\"true\\\"` and `aria-expanded={true | false}` properties. These properties\\n> will alert screen reader users to the available submenu systems.\\n\\n### Nested Dynamic Items\\n\\nMenu nesting is simpler with the dynamic API. In this example, a `renderItem` function is defined to\\nallow recursive nesting of items using a data structure you define. A submenu will inherit the\\n`getId` and `getTextValue` functions of the parent menu. While you can pass a specialize `getId` or\\n`getTextValue` function to each submenu, it may be simpler to use the same one for the menu and\\nsubmenus.\\n```tsx\\nimport React from 'react';\\n\\nimport {Menu} from '@workday/canvas-kit-react/menu';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\ntype Item = {\\n  type?: 'item';\\n  id: string;\\n  label: string;\\n};\\ntype SubmenuItem = {\\n  id: string;\\n  label: string;\\n  type: 'submenu';\\n  children: (Item | SubmenuItem)[];\\n};\\n\\n// This is a user-defined object. The structure uses `id` for the item identifier which is the\\n// default key used by the collection system and therefore doesn't require a `getId` function to be\\n// passed to the model. The `label` isn't the standard text value used by the collection system, so\\n// a `getTextValue` function is required. The `type` and `children` aren't important at all to the\\n// menu and are used in the template by the user-defined `renderItem` function.\\nconst items: (SubmenuItem | Item)[] = [\\n  {id: 'first-item', label: 'First Item'},\\n  {\\n    id: 'second-item',\\n    label: 'Second Item',\\n    type: 'submenu',\\n    children: [\\n      {id: 'first-sub-item', label: 'First Sub Item'},\\n      {\\n        id: 'second-sub-item',\\n        label: 'Second Sub Item',\\n        type: 'submenu',\\n        children: [\\n          {id: 'first-sub-sub-item', label: 'First Sub Sub Item'},\\n          {\\n            id: 'second-sub-sub-item',\\n            type: 'submenu',\\n            label: 'Second Sub Sub Item',\\n            children: [\\n              {id: 'first-sub-sub-sub-item', label: 'First Sub Sub Sub Item'},\\n              {\\n                id: 'second-sub-sub-sub-item',\\n                label: 'Second Sub Sub Sub Item',\\n              },\\n              {id: 'third-sub-sub-sub-item', label: 'Third Sub Sub Sub Item'},\\n              {id: 'fourth-sub-sub-sub-item', label: 'Fourth Sub Sub Sub Item'},\\n            ],\\n          },\\n          {id: 'third-sub-sub-item', label: 'Third Sub Sub Item'},\\n          {id: 'fourth-sub-sub-item', label: 'Fourth Sub Sub Item'},\\n        ],\\n      },\\n      {id: 'third-sub-item', label: 'Third Sub Item'},\\n      {id: 'fourth-sub-item', label: 'Fourth Sub Item'},\\n    ],\\n  },\\n  {id: 'third-item', label: 'Third Item'},\\n  {id: 'fourth-item', label: 'Fourth Item'},\\n];\\n\\nexport const NestedDynamic = () => {\\n  const [selected, setSelected] = React.useState('');\\n\\n  // defining this inline function allows use to recurse any nesting level defined by the `items`\\n  // array.\\n  function renderItem(item: SubmenuItem | Item) {\\n    if (item.type === 'submenu') {\\n      return (\\n        <Menu.Submenu id={item.id} items={item.children}>\\n          <Menu.Submenu.TargetItem>{item.label}</Menu.Submenu.TargetItem>\\n          <Menu.Submenu.Popper>\\n            <Menu.Submenu.Card>\\n              <Menu.Submenu.List>{renderItem}</Menu.Submenu.List>\\n            </Menu.Submenu.Card>\\n          </Menu.Submenu.Popper>\\n        </Menu.Submenu>\\n      );\\n    }\\n    return <Menu.Item>{item.label}</Menu.Item>;\\n  }\\n\\n  return (\\n    <Menu\\n      items={items}\\n      id=\\\"first-menu\\\"\\n      getTextValue={item => item.label}\\n      onSelect={data => {\\n        setSelected(data.id);\\n      }}\\n    >\\n      <Menu.Target>Open Menu</Menu.Target>\\n      <Menu.Popper>\\n        <Menu.Card>\\n          <Menu.List>{renderItem}</Menu.List>\\n        </Menu.Card>\\n      </Menu.Popper>\\n      <BodyText size=\\\"small\\\" cs={{marginBlockStart: system.space.x4}}>\\n        Selected: <span data-testid=\\\"output\\\">{selected}</span>\\n      </BodyText>\\n    </Menu>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nOur Menu component is based on the Menu Button pattern on the ARIA Authoring Practices Guide from\\nthe W3C and relies on the roving tabindex technique for managing focus within the opened menu. This\\nmeans that the minimum requirements for screen reader support and keyboard navigation are included\\nin the component.\\n\\n[Menu Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\\n\\n- The `<Menu.Target>` sub-component uses `aria-haspopup=\\\"true\\\"` and `aria-expanded={true | false}`\\n  properties. This benefits screen reader users by indicating when a button element has an attached\\n  menu.\\n- The `<Menu.List>` sub-component uses `role=\\\"menu\\\"` and `<Menu.Item>` uses `role=\\\"menuitem\\\"` ARIA\\n  roles. These roles allow screen readers to pass through arrow key events to the web application.\\n- The `<Menu.List>` sub-component includes an `aria-labelledby` ID reference to the `<Menu.Target>`\\n  sub-component. This assigns a label to the menu for context.\\n\\n### Navigation\\n\\n- **Enter or Space**: When focused on the menu button, opens the menu and moves focus to the first\\n  menu item. When focused on a menu item, activates the item and closes the menu\\n- **Escape**: Closes the menu and returns focus to the menu button\\n- **Up & Down Arrow**: Moves focus up and down the menu items\\n- **Home & End**: Moves focus to the first or last menu item\\n- **Right & Left Arrow**: When focused on a menu item with a submenu, opens the submenu and moves\\n  focus to the first item in the submenu or closes the submenu and returns focus to the parent menu\\n  item\\n\\n### Screen Reader Experience\\n\\n- The menu button will be announced with its label text followed by the button role, a notification\\n  that it has a popup menu, and the current state of the menu (For example: \\\"Actions, button, menu\\n  popup, collapsed\\\")\\n- **Opening the Menu:** When the menu button is activated, screen readers will announce the menu\\n  opening, the number of menu items available, and the currently focused item (For example:\\n  \\\"Actions, menu, First Action, menu item, 1 of 4.\\\")\\n- **Navigating Menu Items:** As focus moves between menu items, screen readers will announce the\\n  item name and its position in the list (For example: \\\"Second Action, menu item, 2 of 4.\\\")\\n- **Menu Items with Submenus:** When focused on a menu item that has a submenu, screen readers will\\n  announce that it has a submenu and provide the expanded/collapsed state (For example: \\\"More\\n  Actions, menu item, has submenu, collapsed, 3 of 4.\\\")\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"loading-dots\": {\n      \"title\": \"Components/Indicators/Loading Dots\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-loading-dots--docs\",\n      \"mdxPath\": \"modules/react/loading-dots/stories/LoadingDots.mdx\",\n      \"mdxProse\": \"# Canvas Kit Loading Dots\\n\\nLoading Dots make users aware that content is currently being loaded, processing, or that change\\nwill occur on the page.\\n\\n[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/loading-dots/)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUse Loading Dots to identify when a specific area of the page is loading (i.e. the content within a card).\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\n\\nexport const Basic = () => {\\n  return <LoadingDots />;\\n};\\n```\\n\\n### Inverse Variant\\n\\nUse the `variant=\\\"inverse\\\"` prop when the loading dots are on a dark background or image.\\n```tsx\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Graphic} from '@workday/canvas-kit-react/icon';\\n\\nconst loadingStencil = createStencil({\\n  base: {\\n    background: system.color.bg.overlay,\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    display: 'flex',\\n    position: 'absolute',\\n    top: '50%',\\n    left: '50%',\\n    transform: 'translate(-50%, -50%)',\\n    width: '100%',\\n    height: '100%',\\n  },\\n});\\n\\nconst containerStyles = createStyles({\\n  position: 'relative',\\n  width: px2rem(200),\\n  height: px2rem(200),\\n});\\n\\nexport const Inverse = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <LoadingDots variant=\\\"inverse\\\" cs={loadingStencil()} />\\n      <Graphic\\n        alt=\\\"A magnifying glass\\\"\\n        width={200}\\n        src={{\\n          url: 'https://picsum.photos/200',\\n        }}\\n        srcset=\\\"https://picsum.photos/200 200w, https://picsum.photos/200 200w, https://picsum.photos/800 800w, https://picsum.photos/1200 1200w\\\"\\n      />\\n    </div>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <LoadingDots />\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Custom Shape\\n```tsx\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles, createStencil} from '@workday/canvas-kit-styling';\\n\\nconst styleOverrides = {\\n  parentContainer: createStyles({\\n    display: 'flex',\\n    gap: system.space.x4,\\n  }),\\n};\\n\\nconst loadingStencil = createStencil({\\n  base: {\\n    borderRadius: system.shape.round,\\n    backgroundColor: system.color.bg.contrast.strong,\\n    height: 80,\\n    width: 80,\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    display: 'flex',\\n  },\\n});\\n\\nexport const CustomShape = () => {\\n  return (\\n    <div className={styleOverrides.parentContainer}>\\n      <LoadingDots variant=\\\"inverse\\\" cs={loadingStencil()} />\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Color and Animation\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst styleOverrides = {\\n  parentContainer: createStyles({\\n    display: 'flex',\\n    gap: system.space.x4,\\n  }),\\n};\\n\\nexport const CustomColorAndAnimation = () => {\\n  return (\\n    <div className={styleOverrides.parentContainer}>\\n      <LoadingDots loadingDotColor={system.color.fg.primary.default} animationDurationMs=\\\"60ms\\\" />\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nLoading Dots supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\nCustom styling is also supported through the [Loading Dots documented props below](#props).\\n\\n### Accessibility\\n\\nSometimes, letting users know when content has finished loading is just as important as asking users\\nto \\\"please wait\\\" while content is loading. The disappearance of an animation is information that\\nmight need description. In this example, we are using `AriaLiveRegion` and `AccessibleHide`\\ncomponents included in Canvas to describe both the appearance and disappearance of `LoadingDots`.\\n\\n- When idle, render an empty live region\\n- When loading, render `LoadingDots` inside the live region,\\n- When complete, render `AccessibleHide` inside the live region expressing \\\"Complete!\\\"\\n- We can assign a name to `AriaLiveRegion` component by passing in `aria-label=\\\"Loading\\\"`\\n- We can declare `LoadingDots` a labeled graphic by passing `role=\\\"img\\\"` and\\n  `aria-label=\\\"Please wait...\\\"` into the component\\n```tsx\\nimport React from 'react';\\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';\\n\\nconst styleOverrides = {\\n  parentContainer: createStyles({\\n    gap: system.space.x4,\\n  }),\\n  loadingStyles: createStyles({\\n    backgroundColor: system.color.bg.muted.default,\\n    padding: system.space.x3,\\n  }),\\n};\\n\\nexport const Accessible = () => {\\n  const [loadingState, setLoadingState] = React.useState('idle');\\n\\n  React.useEffect(() => {\\n    const timer = setTimeout(() => {\\n      if (loadingState === 'loading') {\\n        setLoadingState('success');\\n      }\\n    }, 4000);\\n\\n    return () => {\\n      clearTimeout(timer);\\n    };\\n  }, [loadingState]);\\n\\n  const handleLoad = () => {\\n    setLoadingState('loading');\\n  };\\n\\n  return (\\n    <Flex cs={styleOverrides.parentContainer}>\\n      <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>\\n      <AriaLiveRegion aria-label=\\\"Loading\\\">\\n        {loadingState === 'loading' && (\\n          <LoadingDots\\n            cs={styleOverrides.loadingStyles}\\n            role=\\\"img\\\"\\n            variant=\\\"inverse\\\"\\n            aria-label=\\\"Please wait...\\\"\\n          />\\n        )}\\n        {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}\\n      </AriaLiveRegion>\\n    </Flex>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"grid\": {\n      \"title\": \"Components/Layout/Grid\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs\",\n      \"mdxPath\": \"modules/react/layout/stories/Grid.mdx\",\n      \"mdxProse\": \"# Canvas Kit Grid\\n\\n`Grid` is a low-level layout component that provides a common, ergonomic API for building\\ntwo-dimensional layouts (rows and columns) with\\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).\\n\\nPlease refer to our [layout examples](/examples-layouts--docs) for more examples of how to implement\\ndifferent layouts using `Grid`.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n> **Note**: We recommend you familiarize yourself with CSS Grid\\n> ([MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids),\\n> [CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)) before diving into our\\n> `Grid` component. This example makes use of\\n> [Grid Areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).\\n\\nIn this example, we set up a basic layout built with `Grid` using four child components: `Header`,\\n`SideBar`, `BodyContent` and `Footer`. By assigning the same names to each child's `gridArea` prop,\\nwe're able to arrange them by referencing their names in the parent `Grid` container. Our example\\nuses a 12-column grid with `SideBar` occupying three columns and `BodyContent` occupying the\\nremaining nine.\\n\\n### Using Grid Items\\n\\nIn the example above we nested `Grid` components to create our layout, and we controlled the layout\\nstructure from the top-level `Grid` container. We can also use `Grid.Item` components to allow child\\ncells to have more control. While any direct child of a `Grid` component is implicitly a grid item,\\n`Grid.Item` provides special CSS Grid Item style props that allow you to have more control over how\\nand where each item renders.\\n\\nTo demonstrate this behavior, the example below has a `Grid` container with nine cells. The eight\\n`soap500` cells are `Grid` components, and the `peach300` cell is a `Grid.Item`. We can use the\\n`Grid.Item` style props `gridRowStart` and `gridColumnStart` to manipulate where the cell renders.\\nUse the `Row` and `Column` buttons to manipulate these props and see the `Grid.Item`'s position\\nadjust accordingly.\\n\\n> **Note**: This example is solely intended to demonstrate `Grid.Item`'s functionality and is\\n> **not** considered an accessibility best practice. Visually reordering content does not change the\\n> tab order or the order it is read in by a screen reader. Learn more about\\n> [CSS Grid layout and accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility).\\n\\nLet's look at another `Grid.Item` example. Below, we have a `Grid` container with two rows: one with\\nseven elements and another with two elements. Each row is a `Grid.Item` that wraps a nested `Grid`.\\nThis allows you to use `Grid.Item` to place a layout where needed. Here, we use `gridRowStart` to\\nplace the row with elements 3 through 7 before the row with elements 1 and 2.\\n\\n### Grid vs. Flex vs. Box\\n\\n`Grid` and `Flex` are built on top of `Box`, so they have access to all `BoxProps`. Additionally,\\n`Grid` and `Flex` have their own specific style props that map to CSS Grid and Flexbox properties,\\nrespectively. When using these components to build layouts, it is not a matter of choosing `Grid`\\n_or_ `Flex` _or_ `Box`, but rather deciding how to\\n[use them together](https://css-tricks.com/css-grid-replace-flexbox/). They are intended to be\\ncomplementary not exclusionary. With that said, here are general guidelines for when to use which:\\n\\n- Use `Grid` for **two-dimensional** layouts (rows AND columns).\\n- Use `Flex` for **one-dimensional** layouts (a row OR a column).\\n- Use `Box` for generic containers that don't need CSS Flexbox or Grid.\\n\\n## Component API\\n\\n### Grid\\n\\n`Grid` is a container component for creating two-dimensional layouts with CSS Grid. It has special\\nstyle props that map to CSS Grid style properties to provide a common, ergonomic API for building\\nlayouts.\\n\\n```tsx\\n<Grid gridTemplateColumns=\\\"1fr 2fr 1fr\\\" gridGap={space.s}>\\n  <div>Implicit grid item 1</div>\\n  <div>Implicit grid item 2</div>\\n  <div>Implicit grid item 3</div>\\n</Grid>\\n```\\n\\n#### Props\\n\\n`Grid` exposes\\n[grid container style props](/get-started/for-developers/documentation/style-props/#grid) and `Box`\\nstyle props.\\n\\n### Grid.Item\\n\\n`Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes\\n[grid item style props](/get-started/for-developers/documentation/style-props/#grid) that map to CSS\\nGrid Item properties. This provides greater control over how child components render in your layout.\\n\\n```tsx\\n<Grid gridGap={space.s}>\\n  <Grid.Item gridColumn=\\\"1 / span 2\\\">First item</Grid.Item>\\n  <Grid.Item gridRow=\\\"1 / span 2\\\">Second item</Grid.Item>\\n  <Grid.Item gridColumn=\\\"1 / span 2\\\" gridRow=\\\"2\\\">\\n    Third item\\n  </Grid.Item>\\n</Grid>\\n```\\n\\n#### Props\\n\\n`Grid.Item` exposes [grid item style props](/docs/features-style-props--grid-item-example) and `Box`\\nstyle props.\\n\"\n    },\n    \"flex\": {\n      \"title\": \"Components/Layout/Flex\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-layout-flex--docs\",\n      \"mdxPath\": \"modules/react/layout/stories/Flex.mdx\",\n      \"mdxProse\": \"# Canvas Kit Flex\\n\\n`Flex` is a low-level layout component that provides a common, ergonomic API for building\\none-dimensional layouts with\\n[CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n### Flex vs. Box\\n\\n`Flex` is built with `Box` and has access to all `BoxProps`. The main differences between `Box` and\\n`Flex` are:\\n\\n- `Flex` is set to `display: flex` by default\\n- The `display` prop is limited to `flex` and `inline-flex`\\n- `Flex` has access to flex container style props.\\n\\nIn short, use `Flex` when you need a flex container to build one-directional layouts with CSS\\nFlexbox, and use `Box` when you need a simple container. It's also important to note that `Flex` has\\nno real opinion about how to build layouts outside of the CSS Flexbox spec. This allows it to be\\ncomposed into many different components.\\n\\n## Component API\\n\\n### Flex\\n\\n`Flex` is the container component for creating one-dimensional layouts with CSS Flexbox. It has\\nspecial style props that map to CSS Flexbox style properties to provide a common, ergonomic API for\\nbuilding layouts.\\n\\n```tsx\\n<Flex flexDirection=\\\"column\\\" rowGap=\\\"xs\\\">\\n  <div>Implicit flex item 1</div>\\n  <div>Implicit flex item 2</div>\\n  <div>Implicit flex item 3</div>\\n</Flex>\\n```\\n\\n#### Props\\n\\n`Flex` exposes\\n[flex container style props](/get-started/for-developers/documentation/style-props/#flex) and `Box`\\nstyle props.\\n\\n### Flex.Item\\n\\n`Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes\\n[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) that map\\nto CSS Flexbox Item properties. This provides greater control over how child components render in\\nyour layout.\\n\\n```tsx\\n<Flex flexDirection=\\\"column\\\" rowGap=\\\"xs\\\">\\n  <Flex.Item flex={1}>First Item</Flex.Item>\\n  <Flex.Item flex={2}>Second Item</Flex.Item>\\n  <Flex.Item flex={1}>Third Item</Flex.Item>\\n</Flex>\\n```\\n\\n#### Props\\n\\n`Flex.Item` exposes\\n[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) and `Box`\\nstyle props.\\n\"\n    },\n    \"box\": {\n      \"title\": \"Components/Layout/Box\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-layout-box--docs\",\n      \"mdxPath\": \"modules/react/layout/stories/Box.mdx\",\n      \"mdxProse\": \"# Box\\n\\n`Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens. It\\nis highly flexible, and its primary purpose is to build other components.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n## Props\\n\\n### The `As` Prop\\n\\nThe `as` prop allows you to override the underlying element of a component or combine it with\\nanother component. By default, `Box` will render a `div` element, but sometimes that's not what you\\nwant. Below, we have a `Box` that we want to render as a semantic anchor element. The most\\nnoticeable transformation is that `Box` renders as a link. But also notice that while it still\\nsupports all `BoxProps` such as `padding`, it also supports semantic anchor element props such as\\n`href`.\\n\\n### Style Props\\n\\n`Box` exposes [style props](/get-started/for-developers/documentation/style-props/) that allow you\\nto modify styles in an ergonomic way across components. To learn more about individual sets of `Box`\\nstyle props, consult the lists below.\\n\\n- [Background Style Props](/get-started/for-developers/documentation/style-props/#background)\\n- [Border Style Props](/get-started/for-developers/documentation/style-props/#border)\\n- [Color Style Props](/get-started/for-developers/documentation/style-props/#color)\\n- [Depth Style Props](/get-started/for-developers/documentation/style-props/#depth)\\n- [Flex Item Style Props](/get-started/for-developers/documentation/style-props/#flex-item)\\n- [Grid Item Style Props](/get-started/for-developers/documentation/style-props/#grid-item)\\n- [Layout Style Props](/get-started/for-developers/documentation/style-props/#layout)\\n- [Other Style Props](/get-started/for-developers/documentation/style-props/#other)\\n- [Position Style Props](/get-started/for-developers/documentation/style-props/#position)\\n- [Space Style Props](/get-started/for-developers/documentation/style-props/#space)\\n- [Text Style Props](/get-started/for-developers/documentation/style-props/#text)\\n\"\n    },\n    \"form-field\": {\n      \"title\": \"Components/Inputs/Form Field\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs\",\n      \"mdxPath\": \"modules/react/form-field/stories/FormField.mdx\",\n      \"mdxProse\": \"# Canvas Kit Form Field\\n\\nFormField allows users to wrap input components to make them accessible. You can customize the field\\nby passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic\\n\\nForm Field should be used in tandem with most Canvas Kit input components to ensure they meet\\naccessibility standards. The orientation of the label by default is `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField>\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the Form Field or define it in the model to indicate it has an error.\\n`error` accepts the following values:\\n\\n`\\\"error\\\" | \\\"caution\\\" | undefined`\\n\\n### Caution\\n\\nUse the caution state when a value is valid but there is additional information.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState('hi');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField error=\\\"caution\\\">\\n        <FormField.Label>Create Password</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} type=\\\"password\\\" value={value} onChange={handleChange} />\\n          <FormField.Hint>\\n            Alert: Password strength is weak, using more characters is recommended.\\n          </FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Caution state **will not** include the `aria-invalid` attribute on the\\n> input for screen readers. Use error states when values are not valid.\\n\\n### Error\\n\\nUse the error state when the value is no longer valid.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField error=\\\"error\\\">\\n        <FormField.Label>Password</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} type=\\\"password\\\" value={value} onChange={handleChange} />\\n          <FormField.Hint>Error: Must Contain a number and a capital letter</FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Error states include visual color changes to the input border and\\n> **require** supplemental \\\"error\\\" text for colorblind users to distinguish between fields in an\\n> error state from fields with standard hint text. Read more about\\n> [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81)\\n\\n### Hint\\n\\nUse `FormField.Hint` to display a short message below the input component and `FormField.Field` to\\nensure proper alignment.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Hint = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n          <FormField.Hint>Cannot contain numbers</FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Hints are automatically associated to the input field with the\\n> `aria-describedby` attribute. This ensures that screen readers can automatically announce the hint\\n> text to users when the input field is focused.\\n\\n### Disabled\\n\\nSet the `disabled` prop of `FormField.Input` to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Disabled form elements are exempt from\\n> [WCAG minimum contrast guidelines](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).\\n> Despite this exemption, disabled fields are more difficult for low vision and colorblind users to\\n> perceive and may harm the usability of the form. Consider using text elements instead, or\\n> read-only fields if users cannot modify data.\\n\\n### Label Position\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`. If you want your label to be\\nhorizontal, you have two options: `horizontalStart` and `horizontalEnd`.\\n\\nIf you want the position of the label at the start of the container, set orientation prop to\\n`horizontalStart`.\\n```tsx\\nimport React from 'react';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst formStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  flexDirection: 'column',\\n});\\n\\nexport const LabelPositionHorizontalStart = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <form className={formStyles}>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n      </FormField>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Password</FormField.Label>\\n        <FormField.Input as={TextInput} type=\\\"password\\\" />\\n      </FormField>\\n    </form>\\n  );\\n};\\n```\\n\\nIf you want the position of the label at the end of the container, set orientation prop to\\n`horizontalEnd`.\\n```tsx\\nimport React from 'react';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst formStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  flexDirection: 'column',\\n});\\n\\nexport const LabelPositionHorizontalEnd = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <form className={formStyles}>\\n      <FormField orientation=\\\"horizontalEnd\\\">\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n      </FormField>\\n      <FormField orientation=\\\"horizontalEnd\\\">\\n        <FormField.Label>Password</FormField.Label>\\n        <FormField.Input as={TextInput} type=\\\"password\\\" />\\n      </FormField>\\n    </form>\\n  );\\n};\\n```\\n\\n### Grow\\n\\nSet the `grow` prop of the Form Field to `true` to configure it (including the wrapped input\\ncomponent) to expand to the width of its container.\\n\\n**Note: This Prop is deprecated and will be removed in a future major version.**\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField grow>\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nIf you need full customization you can use the `FormField` behavior hooks to build your own\\nsolution. It is also easy it work with custom components or third party libraries and get the CKR\\naccessibility guarantees by using the `as` prop.\\n```tsx\\nimport React from 'react';\\nimport {changeFocus} from '@workday/canvas-kit-react/common';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x1,\\n  alignItems: 'flex-start',\\n  flexDirection: 'column',\\n});\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    changeFocus(ref.current);\\n  };\\n\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />\\n        </FormField.Field>\\n      </FormField>\\n      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `isRequired` prop of the Form Field to `true` to indicate that the field is required. Labels\\nfor required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Email</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={TextInput}\\n          placeholder=\\\"your@gmail.com\\\"\\n          onChange={handleChange}\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: The HTML `required` attribute will be added to the input field and\\n> announced by screen readers. Consider adding a note at the top of your form indicating that fields\\n> marked with an asterisk (\\\\*) are required. This provides context for all users.\\n\\n### Grouped Inputs\\n\\nUse `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like\\n`RadioGroup` or a group of `Checkbox`'s. `FormFieldGroup` renders a `fieldset` element and\\n`FormFieldGroup.Label` renders a `legend` element. These elements will allow screen readers to\\nautomatically announce the legend's context when focusing on the inputs in the group.\\n\\n`FormFieldGroup` supports the same props of `FormField`:\\n\\n- `error`: `\\\"caution\\\" | \\\"error\\\"` Defines the error around the whole group of inputs.\\n- `orientation`: `\\\"horizontal\\\" | \\\"vertical\\\"` Defines the legend placement.\\n- `isRequired`: `true` Defines if a group like RadioGroup is required.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {AriaLiveRegion} from '@workday/canvas-kit-react/common';\\n\\nconst formStyles = createStyles({\\n  margin: `${system.space.zero} ${system.space.x3}`,\\n});\\n\\nconst formButtonStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n});\\n\\nconst toppings = [\\n  {\\n    id: 1,\\n    label: 'Pepperoni',\\n    checked: false,\\n  },\\n  {\\n    id: 2,\\n    label: 'Cheese',\\n    checked: false,\\n  },\\n  {\\n    id: 3,\\n    label: 'Pineapple',\\n    checked: false,\\n  },\\n  {\\n    id: 4,\\n    label: 'Mushrooms',\\n    checked: false,\\n  },\\n];\\n\\nconst bannerStyles = createStyles({\\n  position: 'absolute',\\n  right: 0,\\n});\\n\\nexport const GroupedInputs = () => {\\n  const [toppingsState, setToppingsState] = React.useState(toppings);\\n  const [error, setError] = React.useState(undefined);\\n  const [radioError, setRadioError] = React.useState(undefined);\\n  const [showSuccess, setShowSuccess] = React.useState(false);\\n\\n  const [value, setValue] = React.useState<string>('');\\n  const [formData, setFormData] = React.useState({\\n    toppings: [],\\n    crust: '',\\n  });\\n  const handleCheckboxCheck = id => {\\n    if (error) {\\n      setError(undefined);\\n    }\\n    setToppingsState(\\n      toppingsState.map(item => (item.id === id ? {...item, checked: !item.checked} : item))\\n    );\\n  };\\n\\n  const handleRadioChange = (e: React.ChangeEvent) => {\\n    if (radioError) {\\n      setRadioError(undefined);\\n    }\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  const handleSubmit = e => {\\n    e.preventDefault();\\n    const radioError = !value && toppingsState.some(item => !item.checked) ? 'error' : undefined;\\n    const error = toppingsState.every(item => !item.checked) ? 'error' : undefined;\\n\\n    setRadioError(radioError);\\n    setError(error);\\n    if (!error && !radioError && toppingsState.some(item => item.checked) && value) {\\n      setShowSuccess(true);\\n    }\\n    setFormData({\\n      toppings: toppingsState,\\n      crust: value,\\n    });\\n  };\\n\\n  React.useEffect(() => {\\n    const timeout = setTimeout(() => {\\n      if (showSuccess) {\\n        setShowSuccess(false);\\n      }\\n    }, 3000);\\n\\n    return () => clearTimeout(timeout);\\n  }, [showSuccess]);\\n\\n  const handleReset = () => {\\n    setFormData({toppings: [], crust: ''});\\n    setError(undefined);\\n    setValue('');\\n    setRadioError('');\\n    setShowSuccess(false);\\n    setToppingsState(\\n      toppingsState.map(item => {\\n        return {...item, checked: false};\\n      })\\n    );\\n  };\\n\\n  return (\\n    <div>\\n      <h3>Choose your pizza options</h3>\\n      <AriaLiveRegion role=\\\"alert\\\">\\n        <div style={{display: 'flex', gap: '40px'}}>\\n          {error || radioError ? (\\n            <Banner isSticky hasError className={bannerStyles}>\\n              <Banner.Label>\\n                {error && radioError\\n                  ? 'At least one topping and crust selection is required'\\n                  : error\\n                  ? 'You must choose at least one topping'\\n                  : radioError\\n                  ? 'You must choose a crust'\\n                  : ''}\\n              </Banner.Label>\\n            </Banner>\\n          ) : null}\\n          {showSuccess && (\\n            <Banner isSticky className={bannerStyles}>\\n              <Banner.Label>You've successfully submitted your pizza options.</Banner.Label>\\n            </Banner>\\n          )}\\n        </div>\\n      </AriaLiveRegion>\\n\\n      <form className={formStyles} onSubmit={handleSubmit}>\\n        <FormFieldGroup error={error} isRequired>\\n          <FormFieldGroup.Label>Choose Your Toppings</FormFieldGroup.Label>\\n          <FormFieldGroup.List>\\n            {toppingsState.map(item => {\\n              return (\\n                <FormFieldGroup.Input\\n                  key={item.id}\\n                  onChange={() => handleCheckboxCheck(item.id)}\\n                  checked={item.checked}\\n                  value={item.label}\\n                  as={Checkbox}\\n                  disabled={item.label === 'Pineapple' ? true : undefined}\\n                  label={item.label}\\n                />\\n              );\\n            })}\\n          </FormFieldGroup.List>\\n          <FormFieldGroup.Hint>\\n            {error === 'error' && 'Error: You must choose one topping'}\\n          </FormFieldGroup.Hint>\\n        </FormFieldGroup>\\n        <FormFieldGroup error={radioError} isRequired>\\n          <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>\\n          <FormFieldGroup.Field>\\n            <FormFieldGroup.List\\n              as={RadioGroup}\\n              onChange={handleRadioChange}\\n              value={value}\\n              name=\\\"crust\\\"\\n            >\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin-crust\\\">\\n                Thin Crust\\n              </FormFieldGroup.Input>\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"hand-tossed\\\">\\n                Hand Tossed\\n              </FormFieldGroup.Input>\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n                Deep Dish\\n              </FormFieldGroup.Input>\\n              <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n                Cauliflower\\n              </FormFieldGroup.Input>\\n            </FormFieldGroup.List>\\n            <FormFieldGroup.Hint>\\n              {radioError === 'error' ? 'Error: You must choose a crust' : null}\\n            </FormFieldGroup.Hint>\\n          </FormFieldGroup.Field>\\n        </FormFieldGroup>\\n        <div className={formButtonStyles}>\\n          <PrimaryButton type=\\\"submit\\\">Submit Your Choices</PrimaryButton>\\n          <SecondaryButton onClick={() => handleReset()}>Reset Form</SecondaryButton>\\n        </div>\\n      </form>\\n      <div>\\n        <div>\\n          Selected Toppings:{' '}\\n          {!error && formData.toppings.map(item => (item.checked ? `${item.label} ` : null))}\\n        </div>\\n        <div>Selected Crust: {formData.crust}</div>\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: In addition to radio button and checkbox groups, `FormFieldGroup` can be\\n> useful in any situation where the form needs to have multiple sets of identical input fields. For\\n> example, a form with identical fields for a Shipping address and a Billing address. The legend\\n> provides critical context for screen reader users in these situations.\\n\\n### Custom\\n\\nIf you need full customization you can use the `FormField` behavior hooks to build your own\\nsolution. It is also easy it work with custom components or third party libraries and get the CKR\\naccessibility guarantees by using the `as` prop.\\n```tsx\\nimport React from 'react';\\nimport {\\n  useFormFieldHint,\\n  useFormFieldInput,\\n  useFormFieldLabel,\\n  useFormFieldModel,\\n  formFieldStencil,\\n} from '@workday/canvas-kit-react/form-field';\\nimport {useModelContext} from '@workday/canvas-kit-react/common';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nconst Label = ({model, children}) => {\\n  const localModel = useModelContext(useFormFieldModel.Context, model);\\n  const props = useFormFieldLabel(localModel);\\n\\n  return (\\n    <label {...props}>\\n      {children}\\n      {model.state.isRequired ? '*' : ''}\\n    </label>\\n  );\\n};\\n\\nconst Hint = ({model, children}) => {\\n  const localModel = useModelContext(useFormFieldModel.Context, model);\\n  const props = useFormFieldHint(localModel);\\n\\n  return <span {...props}>{children}</span>;\\n};\\n\\nconst Input = ({model, ...elementProps}) => {\\n  const localModel = useModelContext(useFormFieldModel.Context, model);\\n  const props = useFormFieldInput(localModel, elementProps);\\n\\n  return <input type=\\\"text\\\" required={model.state.isRequired ? true : false} {...props} />;\\n};\\n\\nexport const Custom = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const model = useFormFieldModel({isRequired: true});\\n\\n  return (\\n    <Flex cs={formFieldStencil({orientation: 'horizontalStart'})}>\\n      <Label model={model}>My Custom Field</Label>\\n      <Input model={model} value={value} onChange={handleChange} />\\n      <Hint model={model}>You can be anything</Hint>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Custom id\\n\\nForm Field will automatically generate an HTML `id` for its input element to link it to the\\ncorreponding label. Alternatively, you may set the `id` prop of the Form Field to specify a custom\\n`id` for the input element. The `id` will be appended by `input-${your-unique-id}`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\n\\nexport const CustomId = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField id=\\\"first-name\\\">\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} value={value} onChange={handleChange} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### All Fields\\n\\nForm Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,\\n`TextArea`, `Switch`, and `RadioGroup`.\\n```tsx\\nimport React from 'react';\\nimport {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Select} from '@workday/canvas-kit-react/select';\\nimport {TextArea} from '@workday/canvas-kit-react/text-area';\\nimport {Switch} from '@workday/canvas-kit-react/switch';\\nimport {calc, createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  flexDirection: 'column',\\n  gap: calc.subtract(system.space.x6, system.space.x1),\\n  padding: calc.subtract(system.space.x10, system.space.x1),\\n  borderRadius: system.space.x1,\\n});\\n\\nexport const AllFields = () => {\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <FormField grow>\\n        <FormField.Label>First Name</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} />\\n        </FormField.Field>\\n      </FormField>\\n\\n      <FormField isRequired={true} error=\\\"caution\\\" grow>\\n        <FormField.Label>Email</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextInput} />\\n          <FormField.Hint>Hint text for your input</FormField.Hint>\\n        </FormField.Field>\\n      </FormField>\\n      <FormField grow>\\n        <FormField.Label>Text Area Label</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={TextArea} />\\n        </FormField.Field>\\n      </FormField>\\n      <FormField error=\\\"error\\\" grow>\\n        <FormField.Label>Choose a Crust</FormField.Label>\\n        <Select items={['Pizza', 'Cheeseburger', 'Fries']}>\\n          <FormField.Input as={Select.Input} />\\n          <Select.Popper>\\n            <Select.Card>\\n              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>\\n            </Select.Card>\\n          </Select.Popper>\\n        </Select>\\n      </FormField>\\n      <FormField as=\\\"fieldset\\\" isRequired={true} error={'error'} orientation=\\\"horizontalStart\\\" grow>\\n        <FormField.Label as=\\\"legend\\\">Radio Group Legend</FormField.Label>\\n        <FormField.Container>\\n          <FormField.Input as={RadioGroup}>\\n            <RadioGroup.RadioButton value=\\\"deep-dish\\\">Deep dish</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"thin\\\">Thin</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"gluten-free\\\">Gluten free</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"cauliflower\\\">Cauliflower</RadioGroup.RadioButton>\\n            <RadioGroup.RadioButton value=\\\"butter\\\">\\n              Butter - the best thing to put on bread\\n            </RadioGroup.RadioButton>\\n          </FormField.Input>\\n          <FormField.Hint>Error Message</FormField.Hint>\\n        </FormField.Container>\\n      </FormField>\\n      <FormField as=\\\"fieldset\\\" grow>\\n        <FormField.Label as=\\\"legend\\\">Checkbox Legend</FormField.Label>\\n        <FormField.Input checked={true} as={Checkbox} label=\\\"Checkbox Label\\\" />\\n        <FormField.Input checked={false} as={Checkbox} label=\\\"Thin Crust\\\" />\\n        <FormField.Input checked={false} as={Checkbox} label=\\\"Extra Cheese\\\" />\\n      </FormField>\\n      <FormFieldGroup error=\\\"error\\\" orientation=\\\"horizontalStart\\\" grow>\\n        <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.Field>\\n          <FormFieldGroup.List as={RadioGroup}>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin-crust\\\">\\n              Thin Crust\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"hand-tossed\\\">\\n              Hand Tossed\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n              Deep Dish\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n              Cauliflower\\n            </FormFieldGroup.Input>\\n          </FormFieldGroup.List>\\n        </FormFieldGroup.Field>\\n      </FormFieldGroup>\\n      <FormFieldGroup grow>\\n        <FormFieldGroup.Label>Checkbox Legend</FormFieldGroup.Label>\\n        <FormField.Field>\\n          <FormFieldGroup.List>\\n            <FormFieldGroup.Input checked={true} as={Checkbox} label=\\\"Checkbox Label\\\" />\\n            <FormFieldGroup.Input checked={false} as={Checkbox} label=\\\"Thin Crust\\\" />\\n            <FormFieldGroup.Input checked={false} as={Checkbox} label=\\\"Extra Cheese\\\" />\\n          </FormFieldGroup.List>\\n        </FormField.Field>\\n      </FormFieldGroup>\\n\\n      <FormField orientation=\\\"horizontalStart\\\" grow>\\n        <FormField.Label>Switch Label</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={Switch} />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Hidden Label\\n\\nIn cases where you want to hide the label while still meeting accessibility standards, you can add\\n`isHidden` on the `<FormField.Label/>`. This prop will visually hide the label.\\n```tsx\\nimport React from 'react';\\nimport {\\n  FormField,\\n  useFormFieldModel,\\n  useFormFieldInput,\\n} from '@workday/canvas-kit-react/form-field';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {TextInput, InputGroup} from '@workday/canvas-kit-react/text-input';\\nimport {SystemIcon} from '@workday/canvas-kit-react/icon';\\nimport {searchIcon} from '@workday/canvas-system-icons-web';\\n\\n/**\\n * Using `as={InputGroup}` on `FormField.Input` will break the label associations necessary for accessibility.\\n * In this example, we've rendered `FormField.Field` as `InputGroup` and then hoisted the `id` of the input from the FormField model.\\n * This allows us to set the `id` of the `InputGroup.Input` correctly for proper label association.\\n */\\n\\nexport const HiddenLabel = () => {\\n  const [value, setValue] = React.useState('');\\n  const model = useFormFieldModel();\\n  const {id: formFieldInputId} = useFormFieldInput(model);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <Flex>\\n      <FormField model={model}>\\n        <FormField.Label isHidden>Search</FormField.Label>\\n        <FormField.Field as={InputGroup}>\\n          <InputGroup.InnerStart>\\n            <SystemIcon icon={searchIcon} size=\\\"small\\\" />\\n          </InputGroup.InnerStart>\\n          <InputGroup.Input\\n            as={TextInput}\\n            id={formFieldInputId}\\n            onChange={handleChange}\\n            value={value}\\n          />\\n        </FormField.Field>\\n      </FormField>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Hidden labels are typically not recommended. In this example, a\\n> universally recognizable icon like a magnifying glass signaling \\\"search\\\" may be a suitable\\n> alternative to visible text labels.\\n\\n### Themed Errors\\n\\nYou can theme your error rings by wrapping an input in a `CanvasProvider` and defining\\n`focusOutline` and `error` properties on the `theme`.\\n\\n### Custom Styles\\n\\nForm Field and its subcomponents support custom styling via the `cs` prop. For more information,\\ncheck our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Accessibility\\n\\n`FormField` provides essential accessibility features to ensure form inputs are properly labeled and\\ndescribed for all users, including those using assistive technologies. This section covers both the\\ntechnical implementation and best practices for creating accessible forms.\\n\\n### Label Association\\n\\nThe `FormField` adds a `for` attribute to the `FormField.Label` (`<label>` element) element that\\nmatches the `id` attribute of the `FormField.Input` which is usually a `input` element. This both\\nlabels the input for screen readers and other assistive technology as well as will focus on the\\ninput when the user clicks on the label. If your form field input component is more complicated, the\\n`FormField` will also add an `id` to the `FormField.Label` and an `aria-labelledby` to the\\n`FormField.Input` component. You can then forward the `aria-labelledby` to whatever elements you\\nneed for the proper accessibility.\\n\\nFor example, the DOM will look something like this:\\n\\n```html\\n<div>\\n  <label id=\\\"label-abc\\\" for=\\\"input-abc\\\">First Name</label>\\n  <input id=\\\"input-abc\\\" aria-labelledby=\\\"label-abc\\\" />\\n</div>\\n```\\n\\nSome components, like `MultiSelect`, have an additional `role=listbox` element that also needs to\\nlink to the `label` element. The resulting DOM will look something like:\\n\\n```html\\n<div>\\n  <label id=\\\"label-abc\\\" for=\\\"input-abc\\\">States you've lived in</label>\\n  <input id=\\\"input-abc\\\" aria-labelledby=\\\"label-abc\\\" role=\\\"combobox\\\" ... />\\n  <ul role=\\\"listbox\\\" aria-labelledby=\\\"label-abc\\\">\\n    <li>Texas</li>\\n    <li>California</li>\\n  </ul>\\n</div>\\n```\\n\\nThe `MultiSelect` component gets the `aria-labelledby` from the `FormField.Input` and forwards it to\\nboth the `input[role=combobox]` element and the `ul[role=listbox]` element so the screen reader\\nknows the label for both is \\\"States you've lived in\\\".\\n\\n### Label Text Best Practices\\n\\n- **Be Clear and Concise**: Labels should clearly describe the purpose of the input field.\\n- **Use Visible Labels Instead of Only Placeholders**: Always provide a persistent and accessible\\n  label with `FormField.Label`. Do not rely solely on placeholder text, as it can disappear while\\n  typing and may not be accessible to assistive technologies. Use the `isHidden` prop on\\n  `FormField.Label` if a hidden label is required for visual design.\\n\\n### Screen Reader Experience\\n\\n- The label is announced when the input receives focus.\\n- Required, disabled, and invalid statuses are announced automatically.\\n- Help text and error messages are announced automatically when focused.\\n- For grouped inputs, the group label (`legend`) is announced automatically when focused.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"expandable\": {\n      \"title\": \"Components/Containers/Expandable\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-expandable--docs\",\n      \"mdxPath\": \"modules/react/expandable/stories/Expandable.mdx\",\n      \"mdxProse\": \"# Canvas Kit Expandable\\n\\n`Expandable` is a compound component that creates a header to expand or collapse related content.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Start Icon\\n\\nFor a basic expandable container with a chevron icon before the title, place`Expandable.Icon` before\\n`Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to\\n`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon when\\ncollapsed and a down chevron icon when expanded.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n\\nexport const StartIcon = () => (\\n  <Expandable>\\n    <Expandable.Target headingLevel=\\\"h4\\\">\\n      <Expandable.Icon iconPosition=\\\"start\\\" />\\n      <Expandable.Title>Title</Expandable.Title>\\n    </Expandable.Target>\\n\\n    <Expandable.Content>Content</Expandable.Content>\\n  </Expandable>\\n);\\n```\\n\\n### End Icon\\n\\nFor an expandable container with a chevron icon after the title, place `Expandable.Title` before\\n`Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to\\n`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon when\\ncollapsed and an up chevron icon when expanded.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n\\nexport const EndIcon = () => (\\n  <Expandable>\\n    <Expandable.Target headingLevel=\\\"h4\\\">\\n      <Expandable.Title>\\n        TitleTitleTitleTitleTitle TitleTitleTitleTitle TitleTitleTitle Title\\n      </Expandable.Title>\\n      <Expandable.Icon iconPosition=\\\"end\\\" />\\n    </Expandable.Target>\\n\\n    <Expandable.Content>Content</Expandable.Content>\\n  </Expandable>\\n);\\n```\\n\\n### With Avatar\\n\\nTo include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and\\n`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be passed\\nto `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after\\n`Expandable.Title`.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\n\\nexport const Avatar = () => (\\n  <div>\\n    <Expandable>\\n      <Expandable.Target headingLevel=\\\"h4\\\">\\n        <Expandable.Icon iconPosition=\\\"start\\\" />\\n        <Expandable.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n        <Expandable.Title>Title</Expandable.Title>\\n      </Expandable.Target>\\n\\n      <Expandable.Content>Content</Expandable.Content>\\n    </Expandable>\\n    <Expandable>\\n      <Expandable.Target headingLevel=\\\"h4\\\">\\n        <Expandable.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n        <Expandable.Title>Title</Expandable.Title>\\n        <Expandable.Icon iconPosition=\\\"end\\\" />\\n      </Expandable.Target>\\n\\n      <Expandable.Content>Content</Expandable.Content>\\n    </Expandable>\\n  </div>\\n);\\n```\\n\\n> **Accessibility Note:** In this situation, the Avatar is decorative and should not be announced to\\n> screen readers. The `<Expandable.Avatar>` component has `isDecorative` set to `true` by default to\\n> hide it from screen readers, as avatars in expandable headers are typically decorative when paired\\n> with adjacent text.\\n\\n### Right to Left (RTL)\\n\\nExpandable container has bidirectional support and should function as expected with RTL languages as\\nlong as the content direction is set in your Canvas theme.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Expandable>\\n        <Expandable.Target headingLevel=\\\"h4\\\">\\n          <Expandable.Icon iconPosition=\\\"start\\\" />\\n          <Expandable.Avatar name=\\\"Avatar\\\" />\\n          <Expandable.Title>Title</Expandable.Title>\\n        </Expandable.Target>\\n\\n        <Expandable.Content>Content</Expandable.Content>\\n      </Expandable>\\n      <Expandable>\\n        <Expandable.Target headingLevel=\\\"h4\\\">\\n          <Expandable.Avatar name=\\\"Avatar\\\" />\\n          <Expandable.Title>Title</Expandable.Title>\\n          <Expandable.Icon iconPosition=\\\"end\\\" />\\n        </Expandable.Target>\\n\\n        <Expandable.Content>Content</Expandable.Content>\\n      </Expandable>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Depth\\n\\nThe `depth` prop passed to `Expandable` allows you to adjust the visual elevation of a component\\nusing our depth tokens.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n\\nexport const Depth = () => {\\n  return (\\n    <Expandable borderRadius=\\\"l\\\" depth={3} margin=\\\"xxxs\\\" padding=\\\"xs\\\">\\n      <Expandable.Target headingLevel=\\\"h4\\\">\\n        <Expandable.Title>Additional Information</Expandable.Title>\\n        <Expandable.Icon iconPosition=\\\"end\\\" />\\n      </Expandable.Target>\\n\\n      <Expandable.Content>This Expandable Container has a depth of 3.</Expandable.Content>\\n    </Expandable>\\n  );\\n};\\n```\\n\\n### Title Wrap\\n\\nLong titles will wrap to the next line and increase the height of the container.\\n```tsx\\nimport {Expandable} from '@workday/canvas-kit-react/expandable';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\n\\nexport const LongTitle = () => (\\n  <Expandable>\\n    <Expandable.Target headingLevel=\\\"h4\\\">\\n      <Expandable.Icon iconPosition=\\\"start\\\" />\\n      <Expandable.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n      <Expandable.Title>\\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n        onions, and oregano.\\n      </Expandable.Title>\\n    </Expandable.Target>\\n\\n    <Expandable.Content>Content</Expandable.Content>\\n  </Expandable>\\n);\\n```\\n\\nYou can also have direct access to the model if\\n\\n### Hoisted Model\\n\\nIf you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In the\\nexample below, we're hoisting the models to expand and collapse all three containers at once.\\n```tsx\\nimport React from 'react';\\n\\nimport {Expandable, useExpandableModel} from '@workday/canvas-kit-react/expandable';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst listStyles = createStyles({\\n  flexDirection: 'column',\\n  gap: system.space.x2,\\n  padding: system.space.zero,\\n  marginX: system.space.x4,\\n  marginY: system.space.zero,\\n});\\n\\nexport const HoistedModel = () => {\\n  const modelOne = useExpandableModel();\\n  const modelTwo = useExpandableModel();\\n  const modelThree = useExpandableModel();\\n\\n  const idOne = useUniqueId();\\n  const idTwo = useUniqueId();\\n  const idThree = useUniqueId();\\n\\n  const handleExpandAll = () => {\\n    modelOne.events.show();\\n    modelTwo.events.show();\\n    modelThree.events.show();\\n  };\\n\\n  const handleCollapseAll = () => {\\n    modelOne.events.hide();\\n    modelTwo.events.hide();\\n    modelThree.events.hide();\\n  };\\n\\n  return (\\n    <Flex gap={system.space.x6} flexDirection=\\\"column\\\">\\n      <Flex gap={system.space.x4}>\\n        <SecondaryButton onClick={handleExpandAll}>Expand All</SecondaryButton>\\n        <SecondaryButton onClick={handleCollapseAll}>Collapse All</SecondaryButton>\\n      </Flex>\\n      <Flex flexDirection=\\\"column\\\">\\n        <Expandable model={modelOne}>\\n          <Expandable.Target headingLevel=\\\"h4\\\">\\n            <Expandable.Title id={idOne}>Usage Guidance</Expandable.Title>\\n            <Expandable.Icon iconPosition=\\\"end\\\" />\\n          </Expandable.Target>\\n\\n          <Expandable.Content as=\\\"section\\\" aria-labelledby={idOne}>\\n            This component highlights the most important details of a section and reveals more when\\n            a user taps or clicks on the header part of the container. Enabling users to hide and\\n            show information ensures the design remains focused and relevant to their expectations.\\n            Scanning through the most critical information first makes processing more efficient\\n            without compromising the ability to access additional information.\\n          </Expandable.Content>\\n        </Expandable>\\n        <Expandable model={modelTwo}>\\n          <Expandable.Target headingLevel=\\\"h4\\\">\\n            <Expandable.Title id={idTwo}>Accessibility Guidelines</Expandable.Title>\\n            <Expandable.Icon iconPosition=\\\"end\\\" />\\n          </Expandable.Target>\\n\\n          <Expandable.Content as=\\\"section\\\" aria-labelledby={idTwo}>\\n            <Flex as=\\\"ul\\\" cs={listStyles}>\\n              <li>\\n                The state of a component being open or closed must be conveyed to assistive\\n                technologies.\\n              </li>\\n              <li>A Button must be used as the control to toggle the display of any content.</li>\\n              <li>\\n                If there are multiple toggle Buttons on the same page, provide additional\\n                information in their labels to make them uniquely distinguishable to a screen\\n                reader.\\n              </li>\\n              <li>\\n                Do not change the toggle Button label to convey state. An exception to this would be\\n                a scenario where a visual hint text is decoupled from both the state and the label\\n                for a control so the hint text is not announced by assistive technologies.\\n              </li>\\n              <li>\\n                Avoid keyboard traps when adding components to the accordion panel. For example, the\\n                user expands an accordion, but is unable to tab to the next focusable element.\\n              </li>\\n              <li>\\n                Hidden content must be hidden correctly from keyboard, screen reader, and touch\\n                interaction.\\n              </li>\\n              <li>\\n                Changing the label of something to indicate its state will not always be accounted\\n                for in live time for a screen reader user. For example, a play button should have a\\n                non-changing, persistent label and the state (pressed or unpressed) is conveyed\\n                visually as well as to assistive technology once the state is changed.\\n              </li>\\n            </Flex>\\n          </Expandable.Content>\\n        </Expandable>\\n        <Expandable model={modelThree}>\\n          <Expandable.Target headingLevel=\\\"h4\\\">\\n            <Expandable.Title id={idThree}>Content Guidelines</Expandable.Title>\\n            <Expandable.Icon iconPosition=\\\"end\\\" />\\n          </Expandable.Target>\\n          <Expandable.Content as=\\\"section\\\" aria-labelledby={idThree}>\\n            Titles should be short and concise, yet long enough to explain what the user would\\n            expect to see when the content is expanded. If titles must be long, make sure it doesn't\\n            wrap more than two lines.\\n          </Expandable.Content>\\n        </Expandable>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note:** When using multiple Expandable Containers on a page, use the `as` prop to\\n> render the `<Expandable.Content>` sub-component as an HTML `<section>` element. Then, use\\n> `aria-labelledby` to reference the unique `id` of the `<Expandable.Title>` element. This practice\\n> can be useful to screen reader users when multiple Expandable Containers are opened at one time\\n> for uniquely describing the boundaries of the expandable content.\\n\\n## Accessibility\\n\\nOur Expandable component renders a semantic HTML `<button>` element to the DOM, with an optional\\nparent heading element as defined by the `headingLevel` prop. The `aria-expanded` property is\\nincluded on the button to indicate the state of the content to screen readers.\\n\\n[Accordion Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)\\n\\n- Use the `headingLevel` prop to assign an appropriate heading level based on the context of the\\n  page content.\\n- When using Expandable Container for navigation elements, then we don't recommend using the\\n  `headingLevel` prop. This will render only expandable buttons to the DOM, reserving headings for\\n  organizing content in the main body of the page.\\n- The `as` prop may also be used on `<Expandable.Content>` to render an HTML `<ul>` element for\\n  displaying a list of items. For example, check out\\n  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).\\n\\n### Navigation\\n\\n- **Tab key**: Moves focus to the next expandable button or focusable element\\n- **Shift + Tab**: Moves focus to the previous focusable element\\n- **Enter or Space**: Toggles the expanded/collapsed state\\n\\n### Screen Reader Experience\\n\\n- The expandable button will be announced with its title text followed by the button role\\n- The current state will be announced as either \\\"collapsed\\\" or \\\"expanded\\\" (For example: \\\"Usage\\n  Guidance, button, collapsed\\\" or \\\"Usage Guidance, button, expanded\\\")\\n- **State Changes:** When activating the button to expand content, screen readers will announce the\\n  new \\\"expanded\\\" state and vice versa when collapsing content.\\n- **Content Regions:** Screen reader users can use landmark navigation to jump between sections and\\n  each section will be announced with its associated title (For example: \\\"Usage Guidance, landmark\\n  region\\\")\\n- **Heading Structure:** Using heading levels with expandable buttons allows screen reader users to\\n  navigate by headings, making the document structure and hierarchy easier to understand.\\n\\n## Component API\\n\\n\"\n    },\n    \"dialog\": {\n      \"title\": \"Components/Popups/Dialog\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs\",\n      \"mdxPath\": \"modules/react/dialog/stories/Dialog.mdx\",\n      \"mdxProse\": \"# Canvas Kit Dialog\\n\\nA Dialog component is a non-modal type of dialog that will not render the rest of the page inert\\nwhile it is active. A Dialog should be used in situations where the task is not critical.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUnlike Modal, Dialog **does not** render the rest of the page inert while it is active. Dialog\\nshould be used in situations where the task does not require immediate attention.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Dialog} from '@workday/canvas-kit-react/dialog';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleEmail = () => {\\n    console.log('Email Submitted');\\n  };\\n  return (\\n    <Dialog>\\n      <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>\\n      <Dialog.Popper>\\n        <Dialog.Card>\\n          <Dialog.CloseIcon aria-label=\\\"Close\\\" />\\n          <Dialog.Heading paddingTop=\\\"m\\\">Sign Up for 15% Off Your Next Order</Dialog.Heading>\\n          <Dialog.Body>\\n            <FormField>\\n              <FormField.Label>Email</FormField.Label>\\n              <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n            </FormField>\\n          </Dialog.Body>\\n          <Flex gap=\\\"s\\\" padding=\\\"xxs\\\" marginTop=\\\"xxs\\\">\\n            <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>\\n              Submit\\n            </Dialog.CloseButton>\\n            <Dialog.CloseButton>Cancel</Dialog.CloseButton>\\n          </Flex>\\n        </Dialog.Card>\\n      </Dialog.Popper>\\n    </Dialog>\\n  );\\n};\\n```\\n\\n### Focus Redirect\\n\\nDialog **does not** trap keyboard focus like the Modal component does. Instead, it allows focus to\\nmove freely in and out of the dialog, supporting more flexible navigation. The following example\\nshows how Dialog manages focus in and out of the component.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Dialog} from '@workday/canvas-kit-react/dialog';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Focus = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleEmail = () => {\\n    console.log('Email Submitted');\\n  };\\n  return (\\n    <Flex gap=\\\"m\\\">\\n      <Dialog>\\n        <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>\\n        <Dialog.Popper>\\n          <Dialog.Card>\\n            <Dialog.CloseIcon aria-label=\\\"Close\\\" />\\n            <Dialog.Heading paddingTop=\\\"m\\\">Sign Up for 15% Off Your Next Order</Dialog.Heading>\\n            <Dialog.Body>\\n              <FormField>\\n                <FormField.Label>Email</FormField.Label>\\n                <FormField.Input as={TextInput} onChange={handleChange} value={value} />\\n              </FormField>\\n            </Dialog.Body>\\n            <Flex gap=\\\"s\\\" padding=\\\"xxs\\\" marginTop=\\\"xxs\\\">\\n              <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>\\n                Submit\\n              </Dialog.CloseButton>\\n              <Dialog.CloseButton>Cancel</Dialog.CloseButton>\\n            </Flex>\\n          </Dialog.Card>\\n        </Dialog.Popper>\\n      </Dialog>\\n      <PrimaryButton>Focus #1</PrimaryButton>\\n      <PrimaryButton>Focus #2</PrimaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n> **Accessibility Note**: Focus redirect **will not** have any effect on the reading order of a\\n> screen reader.\\n\\n## Accessibility\\n\\n`Dialog` composes the popup stack with `useInitialFocus`, `useReturnFocus`, `useCloseOnEscape`,\\n`useCloseOnOutsideClick`, and `useFocusRedirect`. The card container includes an ARIA\\n**`role=\\\"dialog\\\"`** that is **non-modal**: the rest of the page stays available. The card also\\nincludes an **`aria-labelledby`** attribute referencing the `id` on `Dialog.Heading`, so the dialog\\nhas an accessible name that matches the visible heading.\\n\\nThe Dialog component includes a `<div>` element (sibling to the `Dialog.Target`) with `aria-owns`\\npointing to the `Dialog.Card`. This remaps the hierarchy of the accessibility tree to improve\\nsequential reading order in supported browsers. For more information, see\\n[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).\\n\\n[Dialog Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)\\n\\n- Prefer **`Dialog.Heading`** so the dialog is properly labelled; avoid leaving a dialog without an\\n  accessible name.\\n- Ensure icon-only controls such as **`Dialog.CloseIcon`** include an accessible name. Prefer the\\n  `Tooltip` component to provide a visible label, or a translated `aria-label` string is acceptable.\\n\\n### Navigation\\n\\n- **Enter** / **Space**: Open the dialog (standard button behavior on the trigger). When it opens,\\n  focus moves to the **first focusable element** inside the dialog in DOM order\u2014often the close\\n  control\u2014or to the element referenced by **`initialFocusRef`** on the dialog model when set.\\n- **Tab** / **Shift + Tab**: Move through focusable elements inside the dialog; leaving the first or\\n  last focusable element **closes** the dialog and moves focus to the next or previous focusable\\n  element on the page (non-modal focus redirect behavior).\\n- **Escape**: Closes the dialog and returns focus to the `Dialog.Target` (or configured return\\n  target).\\n\\n### Screen Reader Experience\\n\\n- **When the dialog opens:** Screen readers should announce the name and role of the first focused\\n  control (often the close button), the dialog's name (`Dialog.Heading`) and role.\\n- **Reading order:** The dialog contents should be read in the same order as it appears on screen\\n  for browsers and screen readers that support `aria-owns`. Results vary, so always test with your\\n  supported browsers and screen reader combinations.\\n- **Expanded or collapsed state:** The `Dialog.Target` does not include an expanded or collapsed\\n  state by default, but it can be added if the interaction design isn't using an initial focus for\\n  the Dialog. See\\n  [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs)\\n  for more information.\\n\\n## Component API\\n\\n\"\n    },\n    \"checkbox\": {\n      \"title\": \"Components/Inputs/Checkbox\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-checkbox--docs\",\n      \"mdxPath\": \"modules/react/checkbox/stories/Checkbox.mdx\",\n      \"mdxProse\": \"# Canvas Kit Checkbox\\n\\nCheckboxes allow a user to select zero, one, or multiple values from a predefined list of 7 or less\\noptions.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nCheckbox may be used on its own without [Form Field](/components/inputs/form-field/) since it\\nincludes a `<label>` with a `for` attribute referencing the underlying `<input type=\\\"checkbox\\\">`\\nelement.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Basic = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Inverse\\n\\nCheckbox with inverse variation\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = createStyles({\\n  backgroundColor: system.color.bg.primary.default,\\n  padding: system.space.x4,\\n});\\n\\nexport const Inverse = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <Flex cs={styleOverrides}>\\n      <Checkbox\\n        variant=\\\"inverse\\\"\\n        checked={checked}\\n        label=\\\"I agree to the terms\\\"\\n        onChange={handleChange}\\n      />\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Checkbox to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Disabled = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          disabled={true}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Indeterminate\\n\\nSet the `indeterminate` prop of the Checkbox to `true` to indicate the Checkbox is neither checked\\nnor unchecked.\\n\\nA common use case for an indeterminate Checkbox is when the value of a parent Checkbox is dependent\\non a number of child Checkboxes. The parent Checkbox is set to the indeterminate state if some (but\\nnot all) of its children are checked.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = createStyles({\\n  marginInlineLeft: system.space.x8,\\n  marginTop: system.space.x2,\\n});\\n\\nexport const Indeterminate = () => {\\n  const [pizzaChecked, setPizzaChecked] = React.useState(false);\\n  const [pizzaIndeterminate, setPizzaIndeterminate] = React.useState(false);\\n\\n  const [toppings, setToppings] = React.useState([\\n    {name: 'Pepperoni', checked: false},\\n    {name: 'Sausage', checked: false},\\n    {name: 'Bell Peppers', checked: false},\\n    {name: 'Olives', checked: false},\\n    {name: 'Onions', checked: false},\\n  ]);\\n\\n  const handlePizzaChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    const checked = event.target.checked;\\n\\n    if (checked || (!checked && pizzaIndeterminate)) {\\n      setPizzaChecked(true);\\n      setToppings(\\n        toppings.map(topping => ({\\n          ...topping,\\n          checked: true,\\n        }))\\n      );\\n    } else {\\n      setPizzaChecked(false);\\n      setToppings(\\n        toppings.map(topping => ({\\n          ...topping,\\n          checked: false,\\n        }))\\n      );\\n    }\\n\\n    setPizzaIndeterminate(false);\\n  };\\n\\n  const handleToppingChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n    const newToppings = toppings.map(topping => ({...topping}));\\n    newToppings[index].checked = event.target.checked;\\n    setToppings(newToppings);\\n\\n    const anyToppingChecked = newToppings.filter(topping => topping.checked).length > 0;\\n    const anyToppingUnchecked = newToppings.filter(topping => !topping.checked).length > 0;\\n    const allToppingChecked = !anyToppingUnchecked;\\n    setPizzaIndeterminate(anyToppingChecked && anyToppingUnchecked);\\n    setPizzaChecked(allToppingChecked);\\n  };\\n\\n  return (\\n    <>\\n      <Checkbox\\n        checked={pizzaChecked}\\n        indeterminate={pizzaIndeterminate}\\n        label=\\\"Supreme Pizza Toppings\\\"\\n        onChange={handlePizzaChange}\\n      />\\n      <Box cs={styleOverrides}>\\n        {toppings.map((topping, index) => (\\n          <Checkbox\\n            checked={topping.checked}\\n            key={topping.name}\\n            label={topping.name}\\n            onChange={event => handleToppingChange(event, index)}\\n          />\\n        ))}\\n      </Box>\\n    </>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nCheckbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\\n`ref` to its underlying `<input type=\\\"checkbox\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nconst boxStyles = createStyles({\\n  display: 'flex',\\n  flexDirection: 'column',\\n});\\n\\nexport const RefForwarding = () => {\\n  const [checked, setChecked] = React.useState(false);\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.click();\\n  };\\n\\n  return (\\n    <>\\n      <Box cs={boxStyles}>\\n        <FormField>\\n          <FormField.Label>Confirm</FormField.Label>\\n          <FormField.Field>\\n            <FormField.Input\\n              as={Checkbox}\\n              checked={checked}\\n              label=\\\"I agree to the terms\\\"\\n              onChange={handleChange}\\n              ref={ref}\\n            />\\n          </FormField.Field>\\n        </FormField>\\n      </Box>\\n      <PrimaryButton onClick={handleClick}>Check Agreement to Terms</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const LabelPosition = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of a wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Required = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping Form Field to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the Checkbox to the Alert or Error state, respectively. You will\\nalso need to set the `hintId` and `hintText` props on the Form Field to meet accessibility\\nstandards. You may wish to omit the `label` prop on the Form Field given that Checkbox already\\nincludes a label.\\n\\nThe `error` prop may be applied directly to the Checkbox with a value of `\\\"caution\\\"`\\nor `\\\"error\\\"` if Form Field is not being used.\\n\\n#### Caution\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Caution = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"caution\\\">\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n#### Error\\n```tsx\\nimport React from 'react';\\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Error = () => {\\n  const [checked, setChecked] = React.useState(false);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setChecked(event.target.checked);\\n  };\\n\\n  return (\\n    <FormField error=\\\"error\\\">\\n      <FormField.Label>Confirm</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          as={Checkbox}\\n          checked={checked}\\n          label=\\\"I agree to the terms\\\"\\n          onChange={handleChange}\\n        />\\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nCheckbox supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"card\": {\n      \"title\": \"Components/Containers/Card\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-containers-card--docs\",\n      \"mdxPath\": \"modules/react/card/stories/card.mdx\",\n      \"mdxProse\": \"# Canvas Kit Card\\n\\nA Card is a preview that serves as an entry point to more detailed information. Card is a\\npresentational [compound component](/get-started/for-developers/documentation/compound-components/)\\nused as a building block for other components such as [Popup](/components/popups/popup/) and\\n[Modal](/components/popups/modal/).\\n\\n[> Workday Design Reference](https://design.workday.com/components/containers/cards)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Card` includes a container component and `Card.Body` and `Card.Heading` subcomponents.\\n```tsx\\nimport React from 'react';\\nimport {Card} from '@workday/canvas-kit-react/card';\\n\\nexport const Basic = () => {\\n  return (\\n    <Card>\\n      <Card.Heading>Canvas Supreme</Card.Heading>\\n      <Card.Body>\\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n        onions, and oregano.\\n      </Card.Body>\\n    </Card>\\n  );\\n};\\n```\\n\\n### Borderless Example\\n\\nThe `borderless` variant removes the border from the Card, creating a cleaner appearance while\\nmaintaining the same internal spacing and structure. Use this variant when placing cards on colored\\nbackgrounds where you want the card to blend seamlessly without borders or shadows.\\n```tsx\\nimport React from 'react';\\nimport {Card} from '@workday/canvas-kit-react/card';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styles = createStyles({\\n  background: system.color.bg.alt.softer,\\n  padding: system.space.x4,\\n});\\n\\nexport const Borderless = () => {\\n  return (\\n    <div className={styles}>\\n      <Card variant=\\\"borderless\\\">\\n        <Card.Heading>Canvas Supreme</Card.Heading>\\n        <Card.Body>\\n          Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n          onions, and oregano.\\n        </Card.Body>\\n      </Card>\\n    </div>\\n  );\\n};\\n```\\n\\n### Filled Example\\n\\nThe `filled` variant adds a background color to the Card, creating a more prominent appearance while\\nmaintaining the same internal spacing and structure. Use this variant when you need a card with a\\ngrayish background to create visual separation from the page background.\\n```tsx\\nimport React from 'react';\\nimport {Card} from '@workday/canvas-kit-react/card';\\n\\nexport const Filled = () => {\\n  return (\\n    <Card variant=\\\"filled\\\">\\n      <Card.Heading>Canvas Supreme</Card.Heading>\\n      <Card.Body>\\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\\n        onions, and oregano.\\n      </Card.Body>\\n    </Card>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nCard and its subcomponents support custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Stencils\\n\\nYou can also use `Card` stencils to extend styles for your own custom components. This allows you to\\ncompose styles without using components directly. In the example below, we're extending `Card`\\nstencils to create a custom `MenuCard` component.\\n\\nHere's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).\\n\\n## Component API\\n\\n\"\n    },\n    \"breadcrumbs\": {\n      \"title\": \"Components/Navigation/Breadcrumbs\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-navigation-breadcrumbs--docs\",\n      \"mdxPath\": \"modules/react/breadcrumbs/stories/Breadcrumbs.mdx\",\n      \"mdxProse\": \"# Canvas Kit Breadcrumbs\\n\\nBreadcrumbs is a\\n[compound component](/get-started/for-developers/documentation/compound-components/) that allows\\nusers to keep track and maintain awareness of their location as they navigate through pages,\\nfolders, files, etc.\\n\\n[> Workday Design Reference](https://design.workday.com/components/navigation/breadcrumbs)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`Breadcrumbs` includes a container `Breadcrumbs` component and the following subcomponents which can\\nbe composed in a variety of ways: `Breadcrumbs.List`, `Breadcrumbs.Item`, `Breadcrumbs.CurrentItem`\\nand `Breadcrumbs.Link`.\\n\\nAccessibility is built into `Breadcrumbs` in a way that allows you to create an inclusive experience\\nwith little additional configuration. As seen in the example below, you don't need to pass any\\naccessibility attributes, because they are baked into the component. You only need to add\\n`aria-label` attribute to a `nav` component through a `aria-label` prop of `Breadcrumbs`.\\n```tsx\\nimport {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';\\n\\nexport const Basic = () => {\\n  return (\\n    <Breadcrumbs aria-label=\\\"Breadcrumbs\\\">\\n      <Breadcrumbs.List>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/\\\">Home</Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/menus\\\">Menus</Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/lunch\\\">Lunch</Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.Item>\\n          <Breadcrumbs.Link href=\\\"/house-specialty-pies\\\" maxWidth={100}>\\n            House Specialty Pies\\n          </Breadcrumbs.Link>\\n        </Breadcrumbs.Item>\\n        <Breadcrumbs.CurrentItem maxWidth={100}>Canvas Supreme</Breadcrumbs.CurrentItem>\\n      </Breadcrumbs.List>\\n    </Breadcrumbs>\\n  );\\n};\\n```\\n\\nNote that all links require an `href` to be properly identified.\\n\\n### Overflow Breadcrumbs\\n\\n`Breadcrumbs` is a responsive component based on the width of its container. If the rendered links\\nexceed the width of the `Breadcrumbs.List`, an overflow menu will be rendered. This only works\\nagainst the dynamic API where you give the `BreadcrumbsModel` an array of items to be rendered. The\\ndynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires\\neither an `id` on each item object or a `getId` function that returns an identifier based on the\\nitem. The example below uses an `id` property on each item.\\n\\nThe dynamic API takes in any object, but since nothing is known about your object, a\\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\\nshould render.\\n\\n### Truncating a Link\\n\\n`Breadcrumbs.Link` is a styled `<a>` element that also renders a tooltip if the text is truncated.\\nThe built-in truncation and tooltip functionality provides an easy-to-use, accessible feature for\\nmanaging the length of link text. The `maxWidth` is set to `350px` by default and can be adjusted as\\nneeded. Note that tooltips will only render when text is truncated. The example below uses a\\n`maxWidth` of `150px`.\\n```tsx\\nimport * as React from 'react';\\nimport {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';\\n\\nexport const LinkTruncation = () => {\\n  return (\\n    <Breadcrumbs.Link href=\\\"/#\\\" maxWidth={150}>\\n      Small Plates & Appetizers\\n    </Breadcrumbs.Link>\\n  );\\n};\\n```\\n\\n### Item Truncation\\n\\n`Breadcrumbs.CurrentItem` is a styled `<li>` element that also renders a tooltip if the text is\\ntruncated. The built-in truncation and tooltip functionality provides an easy-to-use, accessible\\nfeature for managing the length of the text. The `maxWidth` is set to `350px` by default and can be\\nadjusted as needed. Normally, this is a non-focusable element; when truncated, however, it sets the\\n`tabIndex` to `0` to enable the tooltip to appear on keyboard focus. Note that tooltips will only\\nrender when text is truncated. The example below uses a `maxWidth` of `100px`.\\n```tsx\\nimport * as React from 'react';\\nimport {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';\\n\\nexport const CurrentItemTruncation = () => {\\n  return (\\n    <Breadcrumbs aria-label=\\\"Breadcrumbs\\\">\\n      <Breadcrumbs.CurrentItem maxWidth={100}>Foccacia Genovese</Breadcrumbs.CurrentItem>\\n    </Breadcrumbs>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`Breadcrumbs` has bidirectional support out of the box. That means outside of setting the content\\ndirection in your application's Canvas theme, you don't need to do anything else to make it work.\\nAll you need to supply is the translated text for items and ARIA labels.\\n\\n### Handling Redirects\\n\\n`Breadcrumbs.Link` defaults to redirecting with an `href`, which means the page will hard-redirect\\nwhen the link is clicked. However, if you're in a single-page application (SPA) environment, you\\nmight want to use the internal SPA router instead. You can override that behavior with a custom\\n`onClick` handler that blocks the default behavior of the event and passes along the link path to\\nyour SPA router. Most of our consumers use `react-router-dom` for managing SPA routing, so below is\\nan example of how to do this in V5 and V6 of `react-router-dom`.\\n\\n```tsx\\n// React Router DOM V5 API\\n...\\nconst history = useHistory();\\nconst handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, link?: string) => {\\n      event.preventDefault();\\n    // if no link is provided, default to the current path\\n    history.push(link || window.location.pathname);\\n}\\nreturn (\\n  <Breadcrumbs.Link href=\\\"/account\\\" onClick={handleClick}>\\n    Account\\n  </Breadcrumbs.Link>\\n);\\n\\n// React Router DOM V6 API\\n...\\nconst navigate = useNavigate();\\nconst handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, link?: string) => {\\n      event.preventDefault();\\n    // if no link is provided, default to the current path\\n    navigate(link || window.location.pathname);\\n}\\nreturn (\\n  <Breadcrumbs.Link href=\\\"/account\\\" onClick={handleClick}>\\n    Account\\n  </Breadcrumbs.Link>\\n);\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"banner\": {\n      \"title\": \"Components/Indicators/Banner\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs\",\n      \"mdxPath\": \"modules/react/banner/stories/Banner.mdx\",\n      \"mdxProse\": \"# Canvas Kit Banner\\n\\n`Banner` is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nused surface important information and feedback to the user about a task, action, or state.\\n\\n[> Workday Design Reference](https://design.workday.com/components/indicators/banners)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nUse the children of `Banner.Label` to set the main text for the `Banner`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nexport const Basic = () => {\\n  return (\\n    <Banner onClick={() => console.log('clicked banner')}>\\n      <Banner.Icon />\\n      <Banner.Label>3 Warnings</Banner.Label>\\n      <Banner.ActionText />\\n    </Banner>\\n  );\\n};\\n```\\n\\n### Action Text\\n\\nUse the children of `Banner.ActionText` to customize the action text contained in the `Banner`. The\\ntext has default value of `View All`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nexport const ActionText = () => {\\n  return (\\n    <Banner>\\n      <Banner.Icon />\\n      <Banner.Label>3 Warnings</Banner.Label>\\n      <Banner.ActionText>Show Details</Banner.ActionText>\\n    </Banner>\\n  );\\n};\\n```\\n\\n### Error Type\\n\\nSet the `hasError` prop of the `Banner` to designate the severity of the message presented in the\\nbanner. This will change the defualt icon to `exclamationCircleIcon`.\\n```tsx\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nexport const Error = () => {\\n  return (\\n    <Banner hasError={true}>\\n      <Banner.Icon />\\n      <Banner.Label>3 Errors</Banner.Label>\\n      <Banner.ActionText />\\n    </Banner>\\n  );\\n};\\n```\\n\\n### Icon Banner\\n\\nWhen only using an icon in the `Banner`, use our `Tooltip` component to both show a visible text\\nalternative, and assign an `aria-label` string to the child `Banner`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {styled} from '@workday/canvas-kit-react/common';\\n\\nexport const IconBanner = () => {\\n  return (\\n    <Tooltip title=\\\"Warning\\\">\\n      <Banner width=\\\"4em\\\">\\n        <Banner.Icon />\\n      </Banner>\\n    </Tooltip>\\n  );\\n};\\n```\\n\\n### Sticky\\n\\nSet the `isSticky` prop of the `Banner` to display it along the right edge of the page. When true,\\nthe `Banner.ActionText` will be hidden. Some basic styles will be applied, but you will still need\\nto manually set the css `position` value.\\n```tsx\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {styled} from '@workday/canvas-kit-react/common';\\n\\nconst StyledBanner = styled(Banner)({\\n  position: 'absolute',\\n  right: 0,\\n});\\n\\nexport const Sticky = () => {\\n  return (\\n    <Box height={64}>\\n      <StyledBanner hasError={true} isSticky={true}>\\n        <Banner.Icon />\\n        <Banner.Label>3 Errors</Banner.Label>\\n        <Banner.ActionText />\\n      </StyledBanner>\\n    </Box>\\n  );\\n};\\n```\\n\\nYou can use keyframes to animate the `Banner` in.\\n```tsx\\nimport React from 'react';\\n\\nimport {useTheme} from '@workday/canvas-kit-react/common';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {loopIcon} from '@workday/canvas-system-icons-web';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {\\n  createStencil,\\n  createStyles,\\n  createVars,\\n  keyframes,\\n  handleCsProp,\\n  cssVar,\\n} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  position: 'absolute',\\n  right: 0,\\n  overflow: 'hidden',\\n});\\nconst stickyAnimationVars = createVars('width', 'rerun');\\nconst stickAnimationKeyframes = keyframes({\\n  '0%': {\\n    transform: `translateX(${cssVar(stickyAnimationVars.width)})`,\\n  },\\n  '100%': {\\n    transform: `translateX(0 * ${cssVar(stickyAnimationVars.rerun)})`,\\n  },\\n});\\n\\nconst stickyAnimationStencil = createStencil({\\n  base: {\\n    marginBlock: system.space.x1,\\n    marginInlineStart: system.space.x1,\\n    marginInlineEnd: 0,\\n    animationName: stickAnimationKeyframes,\\n    animationDuration: '.3s',\\n    animationTimingFunction: 'ease-out',\\n  },\\n});\\n\\nexport const StickyAnimation = () => {\\n  const theme = useTheme();\\n  const bannerRef = React.useRef<HTMLButtonElement>(null);\\n  const containerRef = React.useRef<HTMLDivElement>(null);\\n  const [bannerWidth, setBannerWidth] = React.useState(0);\\n\\n  const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes\\n\\n  React.useLayoutEffect(() => {\\n    const width = bannerRef.current.offsetWidth;\\n    setBannerWidth(theme.canvas.direction === 'rtl' ? width * -1 : width);\\n  }, [theme.canvas.direction, rerun]);\\n\\n  return (\\n    <Box height={64}>\\n      <div className={containerStyles} ref={containerRef}>\\n        <div\\n          key={rerun}\\n          {...handleCsProp({}, [\\n            stickyAnimationStencil(),\\n            stickyAnimationVars({width: `${bannerWidth}px`, rerun: `${rerun}`}),\\n          ])}\\n        >\\n          <Banner\\n            onClick={() => setRerun(r => r + 1)}\\n            hasError={true}\\n            isSticky={true}\\n            ref={bannerRef}\\n          >\\n            <Banner.Icon icon={loopIcon} />\\n            <Banner.Label>Click to run animation</Banner.Label>\\n            <Banner.ActionText />\\n          </Banner>\\n        </div>\\n      </div>\\n    </Box>\\n  );\\n};\\n```\\n\\n### RefForwarding\\n\\n`Banner` supports ref forwarding. It will forward ref to its underlying button element.\\n```tsx\\nimport React from 'react';\\n\\nimport {changeFocus} from '@workday/canvas-kit-react/common';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const RefForwarding = () => {\\n  const bannerRef = React.useRef<HTMLButtonElement>(null);\\n\\n  const focusBanner = () => {\\n    changeFocus(bannerRef.current);\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\" gap=\\\"xs\\\" alignItems=\\\"flex-start\\\">\\n      <Banner ref={bannerRef}>\\n        <Banner.Icon />\\n        <Banner.Label>3 Warnings</Banner.Label>\\n        <Banner.ActionText />\\n      </Banner>\\n      <SecondaryButton onClick={focusBanner}>Focus Banner</SecondaryButton>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n\\nBanner supports right-to-left languages when specified in the CanvasProvider theme.\\n```tsx\\nimport React from 'react';\\n\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {CanvasProvider, styled} from '@workday/canvas-kit-react/common';\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\n\\nconst StyledStickyBanner = styled(Banner)({\\n  position: 'absolute',\\n  right: 0,\\n});\\n\\nexport const StickyRTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <Box height={64}>\\n        <StyledStickyBanner isSticky={true}>\\n          <Banner.Icon />\\n          <Banner.Label>3 \u05D0\u05D6\u05D4\u05E8\u05D5\u05EA</Banner.Label>\\n          <Banner.ActionText />\\n        </StyledStickyBanner>\\n      </Box>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Themed Banners\\n\\nBanners use the `useThemedPalette` hook for themeing. By default, your alert theme is used. `main`\\nwill be used for the background, `dark` for the hover background, and `contrast` for the text.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ThemedAlert = () => {\\n  const theme: PartialEmotionCanvasTheme = {\\n    canvas: {\\n      palette: {\\n        alert: {\\n          main: colors.kiwi200,\\n          dark: colors.kiwi300,\\n        },\\n      },\\n    },\\n  };\\n\\n  return (\\n    <CanvasProvider theme={theme}>\\n      <Banner>\\n        <Banner.Icon />\\n        <Banner.Label>3 Items</Banner.Label>\\n        <Banner.ActionText />\\n      </Banner>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\nIf you set the `hasError` prop, the banner will use your error theme.\\n```tsx\\nimport React from 'react';\\n\\nimport {Banner} from '@workday/canvas-kit-react/banner';\\nimport {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';\\nimport {colors} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ThemedError = () => {\\n  const theme: PartialEmotionCanvasTheme = {\\n    canvas: {\\n      palette: {\\n        error: {\\n          main: colors.islandPunch500,\\n          dark: colors.islandPunch600,\\n          contrast: colors.berrySmoothie100,\\n        },\\n      },\\n    },\\n  };\\n\\n  return (\\n    <CanvasProvider theme={theme}>\\n      <Banner hasError={true}>\\n        <Banner.Icon />\\n        <Banner.Label>3 Items</Banner.Label>\\n        <Banner.ActionText />\\n      </Banner>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"countbadge\": {\n      \"title\": \"Components/Indicators/CountBadge\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-indicators-countbadge--docs\",\n      \"mdxPath\": \"modules/react/badge/stories/CountBadge.mdx\",\n      \"mdxProse\": \"# Canvas Kit Count Badge\\n\\n`CountBadge` provides a quantity-based summary with dynamic values.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\nThe following section provides examples for common use cases. Please be sure to also read the\\nAccessibility section below.\\n\\n### Basic\\n\\nUse the default `CountBadge` variant for most situations. The default `high` emphasis is ideal for\\ndrawing attention to important or primary information.\\n```tsx\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  padding: system.space.x4,\\n});\\n\\nexport const Basic = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <CountBadge count={427} />\\n    </div>\\n  );\\n};\\n```\\n\\n### Emphasis\\n\\nSelect the `low` emphasis option for less prominent or secondary information. This is useful when\\nyou want the badge to be visible but not distracting.\\n\\n`high` emphasis is ideal for drawing attention to important or primary information.\\n```tsx\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Text} from '@workday/canvas-kit-react/text';\\n\\nconst containerStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  padding: system.space.x4,\\n  flexDirection: 'column',\\n});\\n\\nconst textStyles = createStyles({\\n  paddingInlineEnd: system.space.x2,\\n});\\n\\nexport const Emphasis = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <div>\\n        <Text as=\\\"strong\\\" className={textStyles}>\\n          Low Emphasis:\\n        </Text>\\n        <CountBadge count={427} emphasis=\\\"low\\\" />\\n      </div>\\n      <div>\\n        <Text as=\\\"strong\\\" className={textStyles}>\\n          High Emphasis:\\n        </Text>\\n        <CountBadge count={427} emphasis=\\\"high\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n### Inverse\\n\\nApply the `inverse` variant when displaying the badge on dark or accent backgrounds to maintain\\nproper contrast and readability. This ensures the badge remains legible in visually dense or colored\\nareas. The same rules apply for `low` and `high` emphasis. Only use this combination on backgrounds with\\n[a token of 600 or greater](https://workday.github.io/canvas-tokens/?path=/docs/docs-base-tokens--docs)\\nto ensure sufficient contrast and accessibility.\\n```tsx\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {createStyles, cssVar} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nconst containerStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n  padding: system.space.x4,\\n  backgroundColor: system.color.static.blue.default,\\n  flexDirection: 'column',\\n});\\n\\nconst textStyles = createStyles({\\n  paddingInlineEnd: system.space.x2,\\n});\\n\\nexport const Inverse = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <div>\\n        <Text as=\\\"strong\\\" variant=\\\"inverse\\\" className={textStyles}>\\n          Low Emphasis:\\n        </Text>\\n        <CountBadge count={427} variant=\\\"inverse\\\" emphasis=\\\"low\\\" />\\n      </div>\\n      <div>\\n        <Text as=\\\"strong\\\" variant=\\\"inverse\\\" className={textStyles}>\\n          High Emphasis\\n        </Text>\\n        <CountBadge count={427} variant=\\\"inverse\\\" emphasis=\\\"high\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Limit\\n\\nBy default, `CountBadge`'s limit is set to `1000`. Once the count reaches the limit, the badge will\\nformat the number: `1000` becomes `999+`. The default limit is largely arbitrary and intended to\\nprevent unexpected overflow. You should choose a limit based on your specific use case and consider\\nthe user's experience. For example, someone looking for a new job finds there are `99+` new\\nopportunities. Or perhaps someone returns from extended leave and is overwhelmed by `999+` unread\\nmessages on their first day back.\\n```tsx\\nimport * as React from 'react';\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\n\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst columnStyles = createStyles({\\n  boxSizing: 'border-box',\\n  display: 'flex',\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n});\\n\\nconst controls = createStyles({\\n  boxSizing: 'border-box',\\n  borderBottom: `solid 1px ${system.color.border.divider}`,\\n  display: 'flex',\\n  gap: system.space.x1,\\n  padding: system.space.x1,\\n});\\n\\nconst defaultBackground = createStyles({\\n  boxSizing: 'border-box',\\n  backgroundColor: system.color.bg.alt.soft,\\n  padding: system.space.x4,\\n});\\n\\nconst inverseBackground = createStyles({\\n  boxSizing: 'border-box',\\n  backgroundColor: system.color.bg.primary.default,\\n  padding: system.space.x4,\\n});\\n\\nconst initialCount = 1;\\n\\nexport const CustomLimit = () => {\\n  const [count, setCount] = React.useState(initialCount);\\n\\n  return (\\n    <div className={columnStyles}>\\n      <div className={controls}>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(count + 1)}>\\n          Increment\\n        </TertiaryButton>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(initialCount)}>\\n          Reset\\n        </TertiaryButton>\\n      </div>\\n      <div className={defaultBackground}>\\n        <CountBadge count={count} limit={10} />\\n      </div>\\n      <div className={inverseBackground}>\\n        <CountBadge count={count} limit={10} variant=\\\"inverse\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n```\\n\\n### Accessibility\\n\\n#### Notification Badge\\n\\nNotifications are a major use case for `CountBadge`. When the `CountBadge` value is updated in\\nreal-time, screen readers must be supported with an `AriaLiveRegion` that will automatically\\ndescribe the change in the number of notifications. If the web app only updates `CountBadge` as part\\nof another screen update, then this use of `AriaLiveRegion` is unnecessary and not recommended.\\n\\n- `Tooltip` is set on the `SecondaryButton` automatically applying the `aria-label` to the button.\\n- `aria-describedby` property is conditionally set on the `SecondaryButton` when greater than zero\\n  referencing a unique `id` for the `CountBadge` value .\\n- `AriaLiveRegion` is used around the `CountBadge`, enabling screen readers to monitor changes in\\n  value.\\n- `aria-label` string is conditionally set on `AriaLiveRegion` when greater than zero, describing\\n  \\\"New notification\\\"\\n```tsx\\nimport * as React from 'react';\\nimport {CountBadge} from '@workday/canvas-kit-react/badge';\\nimport {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';\\nimport {createStyles, cssVar} from '@workday/canvas-kit-styling';\\nimport {notificationsIcon} from '@workday/canvas-system-icons-web';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nfunction negate(value: string, fallback?: string) {\\n  return `calc(${cssVar(value, fallback)} * -1)`;\\n}\\n\\nconst container = createStyles({\\n  boxSizing: 'border-box',\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n});\\n\\nconst controls = createStyles({\\n  boxSizing: 'border-box',\\n  gap: system.space.x2,\\n  padding: system.space.x1,\\n});\\n\\nconst notificationContainerStyles = createStyles({\\n  boxSizing: 'border-box',\\n  position: 'relative',\\n});\\n\\nconst countBadgeStyles = createStyles({\\n  boxSizing: 'border-box',\\n  position: 'absolute',\\n  top: negate(system.space.x1),\\n  insetInlineEnd: negate(system.space.x1),\\n});\\n\\n// Testing notes (Aug. 30, 2024):\\n// Windows 11\\n// JAWS 2024 + Chrome / Edge: \\\"New notifications\\\" once, then only the count change \\\"2\\\"\\n// JAWS 2024 + FF: \\\"New notifications\\\" once, then describes nothing\\n// NVDA + Chrome / Edge: Consistently describes \\\"{X} New notifications\\\"\\n// NVDA + FF: Consistently describes count value only \\\"{X}\\\"\\n// macOS v14.6.1\\n// VoiceOver + Chrome / Safari: Consistently describes \\\"New notifications {X}\\\"\\nexport const NotificationBadge = () => {\\n  const [count, setCount] = React.useState(4);\\n  const badgeID = useUniqueId();\\n\\n  return (\\n    <Flex cs={container}>\\n      <Flex cs={controls}>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(count + 1)}>\\n          Add Notification\\n        </TertiaryButton>\\n        <TertiaryButton size=\\\"small\\\" onClick={() => setCount(0)}>\\n          Clear\\n        </TertiaryButton>\\n      </Flex>\\n      <Flex>\\n        <span className={notificationContainerStyles}>\\n          <Tooltip title=\\\"Notifications\\\">\\n            <SecondaryButton\\n              size=\\\"medium\\\"\\n              icon={notificationsIcon}\\n              aria-describedby={!!count ? badgeID : undefined}\\n            />\\n          </Tooltip>\\n          <AriaLiveRegion aria-label={!!count ? 'New notifications' : undefined}>\\n            {!!count && <CountBadge id={badgeID} count={count} limit={100} cs={countBadgeStyles} />}\\n          </AriaLiveRegion>\\n        </span>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nCount Badge supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"action-bar\": {\n      \"title\": \"Components/Buttons/Action Bar\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-buttons-action-bar--docs\",\n      \"mdxPath\": \"modules/react/action-bar/stories/ActionBar.mdx\",\n      \"mdxProse\": \"# Canvas Kit Action Bar\\n\\nAction Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)\\nthat contains primary and secondary actions related to a page or task.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`ActionBar` includes a container `ActionBar` component and the following subcomponent:\\n`ActionBar.List` which should contains `ActionBar.Item`.\\n\\nIn a basic example of an `ActionBar` there are two buttons. The primary action button should be used\\nonly once and left aligned if content is left to right, followed by secondary buttons. Tertiary\\nbuttons should not be used in the Action Bar.\\n```tsx\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Basic = () => {\\n  return (\\n    <ActionBar>\\n      <ActionBar.List position=\\\"relative\\\" as=\\\"section\\\" aria-label=\\\"Action Bar\\\">\\n        <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>\\n          First Action\\n        </ActionBar.Item>\\n        <ActionBar.Item>Second Action</ActionBar.Item>\\n      </ActionBar.List>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n### Icons Example\\n\\n`ActionBar.Item` renders a `SecondaryButton` as default, so it's possible to use other Button props\\nwith `ActionBar.Item` such as `icon` or `size`.\\n```tsx\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\nimport {notificationsIcon, alarmClockIcon} from '@workday/canvas-system-icons-web';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\n\\nexport const Icons = () => {\\n  return (\\n    <ActionBar>\\n      <ActionBar.List position=\\\"relative\\\" as=\\\"section\\\" aria-label=\\\"Action Bar\\\">\\n        <ActionBar.Item as={PrimaryButton} icon={notificationsIcon}>\\n          First Action\\n        </ActionBar.Item>\\n        <ActionBar.Item icon={alarmClockIcon}>Second Action</ActionBar.Item>\\n      </ActionBar.List>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n### Delete Action Example\\n\\n`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,\\nsuch as `DeleteButton`, by using `as` prop.\\n```tsx\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\n\\nexport const DeleteAction = () => {\\n  return (\\n    <ActionBar>\\n      <ActionBar.List position=\\\"relative\\\" as=\\\"section\\\" aria-label=\\\"Action Bar\\\">\\n        <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>\\n        <ActionBar.Item>Second Action</ActionBar.Item>\\n      </ActionBar.List>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n### Overflow Example\\n\\n`ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3\\nactions, the other remaining actions should be placed into an Overflow Menu that is launched by\\nclicking the Overflow Button.\\n\\nAlso, ActionBar is a responsive component based on the width of its container. If the rendered\\nactions exceed the width of the `ActionBar.List`, an overflow menu will be rendered. This only works\\nagainst the dynamic API where you give the `ActionBarModel` an array of items to be rendered. The\\ndynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires\\neither an `id` on each item object or a `getId` function that returns an identifier based on the\\nitem. The below example uses an `id` property on each item.\\n\\nThe dynamic API takes in any object, but since nothing is known about your object, a\\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\\nshould render.\\n```tsx\\nimport React from 'react';\\nimport {breakpoints} from '@workday/canvas-kit-react/common';\\nimport {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\n\\ntype MyActionItem = {\\n  id: string;\\n  text: React.ReactNode;\\n};\\n\\nexport const OverflowActionBar = () => {\\n  const [items] = React.useState<MyActionItem[]>([\\n    {id: 'first', text: 'First Action'},\\n    {id: 'second', text: 'Second Action'},\\n    {id: 'third', text: 'Third Action'},\\n    {id: 'fourth', text: 'Fourth Action'},\\n    {id: 'fifth', text: 'Fifth Action'},\\n  ]);\\n\\n  const model = useActionBarModel({items});\\n  const [containerWidth, setContainerWidth] = React.useState<string | number>('100%');\\n\\n  return (\\n    <div>\\n      <Box maxWidth={containerWidth} marginBottom=\\\"xl\\\">\\n        <ActionBar model={model}>\\n          <ActionBar.List\\n            position=\\\"relative\\\"\\n            as=\\\"section\\\"\\n            aria-label=\\\"Action Bar\\\"\\n            overflowButton={<ActionBar.OverflowButton aria-label=\\\"More actions\\\" />}\\n          >\\n            {(item: MyActionItem, index) => (\\n              <ActionBar.Item\\n                as={index === 0 ? PrimaryButton : undefined}\\n                onClick={() => console.log(item.id)}\\n              >\\n                {item.text}\\n              </ActionBar.Item>\\n            )}\\n          </ActionBar.List>\\n          <ActionBar.Menu.Popper>\\n            <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>\\n              <ActionBar.Menu.List>\\n                {(item: MyActionItem) => (\\n                  <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\\n                    {item.text}\\n                  </ActionBar.Menu.Item>\\n                )}\\n              </ActionBar.Menu.List>\\n            </ActionBar.Menu.Card>\\n          </ActionBar.Menu.Popper>\\n        </ActionBar>\\n      </Box>\\n      <footer>\\n        <h4>Change Action Bar container size</h4>\\n        <SegmentedControl onSelect={data => setContainerWidth(data.id)}>\\n          <SegmentedControl.List role=\\\"group\\\" aria-label=\\\"container width control\\\" marginBottom=\\\"m\\\">\\n            <SegmentedControl.Item data-id=\\\"100%\\\">100%</SegmentedControl.Item>\\n            <SegmentedControl.Item data-id={`${breakpoints.m}px`}>Small</SegmentedControl.Item>\\n            <SegmentedControl.Item data-id=\\\"420px\\\">420px</SegmentedControl.Item>\\n            <SegmentedControl.Item data-id={`${breakpoints.s}px`}>\\n              Extra Small\\n            </SegmentedControl.Item>\\n          </SegmentedControl.List>\\n        </SegmentedControl>\\n        <p>Selected: {containerWidth}</p>\\n      </footer>\\n    </div>\\n  );\\n};\\n```\\n\\nThe number of visible buttons can also be adjusted by using the model's `maximumVisible` attribute.\\nYou can change it from the default of 3 to any number greater than 1 and less than items.length.\\n```tsx\\nimport React from 'react';\\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\\n\\ntype MyActionItem = {\\n  id: string;\\n  text: React.ReactNode;\\n};\\n\\nexport const OverflowActionBarCustomButtonCount = () => {\\n  const [items] = React.useState<MyActionItem[]>([\\n    {id: 'view', text: 'View'},\\n    {id: 'edit', text: 'Edit'},\\n    {id: 'delete', text: 'Delete'},\\n  ]);\\n\\n  return (\\n    <ActionBar items={items} maximumVisible={2}>\\n      <ActionBar.List\\n        as=\\\"section\\\"\\n        aria-label=\\\"Custom button count overflow example\\\"\\n        position=\\\"relative\\\"\\n        overflowButton={<ActionBar.OverflowButton aria-label=\\\"More actions\\\" />}\\n      >\\n        {(item: MyActionItem) => (\\n          <ActionBar.Item onClick={() => console.log(item.id)}>{item.text}</ActionBar.Item>\\n        )}\\n      </ActionBar.List>\\n      <ActionBar.Menu.Popper>\\n        <ActionBar.Menu.Card>\\n          <ActionBar.Menu.List>\\n            {(item: MyActionItem) => (\\n              <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\\n                {item.text}\\n              </ActionBar.Menu.Item>\\n            )}\\n          </ActionBar.Menu.List>\\n        </ActionBar.Menu.Card>\\n      </ActionBar.Menu.Popper>\\n    </ActionBar>\\n  );\\n};\\n```\\n\\n## Accessibility\\n\\nGrouping the actions into an HTML `<section>` element with an `aria-label` string is recommended.\\nThis can be useful for helping screen reader users quickly jump down to the actions at the bottom of\\na page.\\n\\nRefer to [Button](/components/buttons/button/#accessibility) and\\n[Menus](/components/popups/menu/#accessibility) for more information about accessibiliy of these\\ncomponents in the Action Bar.\\n\\n## Component API\\n\\n\"\n    },\n    \"status-indicator\": {\n      \"title\": \"Preview/Status Indicator\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs\",\n      \"mdxPath\": \"modules/preview-react/status-indicator/stories/StatusIndicator.mdx\",\n      \"mdxProse\": \"# Canvas Kit Status Indicator\\n\\nStatus Indicators help the user quickly identify the status of a task, action, or page element.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`StatusIndicator` includes a container `StatusIndicator` component and the following subcomponents\\nwhich can be composed in a variety of ways: `StatusIndicator.Label` and `StatusIndicator.Icon`.\\n\\nA basic `StatusIndicator` with a `StatusIndicator.Label` will render text with a gray background and\\nlow emphasis.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\n\\nexport const Basic = () => {\\n  return (\\n    <StatusIndicator>\\n      <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\\n    </StatusIndicator>\\n  );\\n};\\n```\\n\\n### Emphasis\\n\\nSet the `emphasis` prop of `StatusIndicator` to adjust the contrast between the text and background\\ncolor. Emphasis is typically used to convey more visual urgency.\\n\\n`emphasis` accepts `high` or `low`.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nexport const Emphasis = () => {\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <StatusIndicator emphasis=\\\"high\\\">\\n        <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>\\n      </StatusIndicator>\\n      <StatusIndicator emphasis=\\\"low\\\">\\n        <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>Low Emphasis</StatusIndicator.Label>\\n      </StatusIndicator>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Icon\\n\\nUse `StatusIndicator.Icon` to add an icon to the `StatusIndicator` as a visual decorator. The\\nposition of the icon may be adjusted depending on where you place it in the markup.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n});\\n\\nexport const Icon = () => {\\n  return (\\n    <Flex cs={parentContainerStyles}>\\n      <StatusIndicator>\\n        <StatusIndicator.Icon aria-label=\\\"unpublished\\\" icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\\n      </StatusIndicator>\\n      <StatusIndicator variant=\\\"positive\\\">\\n        <StatusIndicator.Label>published</StatusIndicator.Label>\\n        <StatusIndicator.Icon aria-label=\\\"published\\\" icon={uploadCloudIcon} />\\n      </StatusIndicator>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Overflow\\n\\nWe **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its\\nmaximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we\\nsuggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the\\noverflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`\\nof `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\\nimport {calc, createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst statusIndicatorStyles = createStyles({\\n  maxWidth: calc.add(system.space.x20, system.space.x4),\\n});\\n\\nexport const Overflow = () => {\\n  return (\\n    <OverflowTooltip>\\n      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>\\n        <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        <StatusIndicator.Label>\\n          Your workbook is currently in process of saving\\n        </StatusIndicator.Label>\\n      </StatusIndicator>\\n    </OverflowTooltip>\\n  );\\n};\\n```\\n\\n### Variants\\n\\nSet the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the\\nfollowing values:\\n\\n- `gray`\\n- `orange`\\n- `blue`\\n- `green`\\n- `red`\\n- `transparent`\\n\\nThe background color dictated by the `variant` will be dark or light based on the `emphasis`.\\n```tsx\\nimport React from 'react';\\n\\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\\nimport {uploadCloudIcon} from '@workday/canvas-system-icons-web';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  parentContainerStyles: createStyles({\\n    gap: system.space.x4,\\n    flexDirection: 'column',\\n  }),\\n  innerContainerStyles: createStyles({\\n    gap: system.space.x4,\\n  }),\\n};\\n\\nexport const Variants = () => {\\n  return (\\n    <Flex cs={styleOverrides.parentContainerStyles}>\\n      <Flex cs={styleOverrides.innerContainerStyles}>\\n        <StatusIndicator>\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"caution\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"info\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"positive\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"critical\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator variant=\\\"transparent\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n      </Flex>\\n      <Flex cs={styleOverrides.innerContainerStyles}>\\n        <StatusIndicator emphasis=\\\"high\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"caution\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"info\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"positive\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"critical\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n        <StatusIndicator emphasis=\\\"high\\\" variant=\\\"transparent\\\">\\n          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\\n          <StatusIndicator.Icon icon={uploadCloudIcon} />\\n        </StatusIndicator>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\nStatus Indicator and its subcomponents support custom styling via the `cs` prop. For more\\ninformation, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"segmented-control\": {\n      \"title\": \"Preview/Segmented Control\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs\",\n      \"mdxPath\": \"modules/preview-react/segmented-control/stories/SegmentedControl.mdx\",\n      \"mdxProse\": \"# Canvas Kit Segmented Control\\n\\nSegmented Control is a\\n[compound component](/get-started/for-developers/documentation/compound-components/) that represents\\na linear group of multiple buttons allowing the selection of a specific value.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`SegmentedControl` includes a container `SegmentedControl` component and the following\\nsubcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.\\n\\nThe example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered\\nusing a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only\\none button can be active at a time.\\n```tsx\\nimport React from 'react';\\n\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Basic = () => {\\n  const [viewType, setViewType] = React.useState('table');\\n\\n  return (\\n    <>\\n      <SegmentedControl initialValue={viewType} onSelect={data => setViewType(data.id)}>\\n        <SegmentedControl.List aria-label=\\\"View type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon} tooltipProps={{title: 'Table'}} />\\n          <SegmentedControl.Item\\n            data-id=\\\"list-view\\\"\\n            icon={listViewIcon}\\n            tooltipProps={{title: 'List'}}\\n          />\\n          <SegmentedControl.Item\\n            data-id=\\\"list-detail\\\"\\n            icon={listDetailIcon}\\n            tooltipProps={{title: 'Detail'}}\\n          />\\n          <SegmentedControl.Item\\n            data-id=\\\"diagrams\\\"\\n            icon={pieChartIcon}\\n            tooltipProps={{title: 'Diagram'}}\\n          />\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n      <BodyText size=\\\"small\\\" marginTop=\\\"s\\\">\\n        Selected: {viewType}\\n      </BodyText>\\n    </>\\n  );\\n};\\n```\\n\\nWe **strongly** discourage including more than four buttons in a single `SegmentedControl`.\\n\\n### Accessibility\\n\\nOur `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,\\nwrapped inside of a `<div>` with an explicit ARIA `role=\\\"group\\\"`. This is equivalent to an HTML\\n`<fieldset>` element, and useful for screen readers to describe the relationship between the\\nbuttons.\\n\\n- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current\\n  state to screen readers.\\n- Providing your own `aria-label`string to `SegmentedControl.List` is recommended for describing the\\n  purpose of the component.\\n\\n#### Screen Reader Experience\\n\\nWhen users interact with a `SegmentedControl` using screen readers:\\n\\n- The group context is announced (e.g., \\\"View options, group\\\" when using\\n  `aria-label=\\\"View options\\\"`)\\n- Each button announces its text/label, \\\"toggle button\\\" role, and pressed/unpressed state (e.g.,\\n  \\\"List view, toggle button, pressed\\\" or \\\"Grid view, toggle button, not pressed\\\")\\n- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and\\n  state\\n- When a button is activated, screen readers should announce the new state\\n\\nRefer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about\\naccessibility of these components.\\n\\n### Variations\\n\\n`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`\\ncomponents have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.\\n\\nAll `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same\\nvariation.\\n\\n#### Icon-Only\\n\\nTo render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do\\nnot provide it with text content. Refer to the [basic example](#basic-example) above for an instance\\nof an icon-only `SegmentedControl`.\\n\\nThe icon-only variation is the only variation which supports a vertical orientation in addition to\\nthe default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`\\nto configure the component to render vertically.\\n```tsx\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Vertical = () => (\\n  <SegmentedControl orientation=\\\"vertical\\\">\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon} tooltipProps={{title: 'Table'}} />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-view\\\"\\n        icon={listViewIcon}\\n        tooltipProps={{title: 'List'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-detail\\\"\\n        icon={listDetailIcon}\\n        tooltipProps={{title: 'Detail'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"diagram\\\"\\n        icon={pieChartIcon}\\n        tooltipProps={{title: 'Diagram'}}\\n      />\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n#### Text-Only\\n\\nTo render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and\\nprovide it with text content.\\n```tsx\\nimport React from 'react';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\n\\nexport const TextOnly = () => (\\n  <SegmentedControl>\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\">Table</SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"list\\\">List</SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"diagram\\\">Diagram</SegmentedControl.Item>\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n#### Text-and-Icon\\n\\nTo render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and\\nprovide it with text content.\\n```tsx\\nimport React from 'react';\\nimport {gridIcon, listViewIcon, pieChartIcon} from '@workday/canvas-system-icons-web';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\n\\nexport const TextAndIcon = () => (\\n  <SegmentedControl>\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n        Table\\n      </SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"list\\\" icon={listViewIcon}>\\n        List\\n      </SegmentedControl.Item>\\n      <SegmentedControl.Item data-id=\\\"diagram\\\" icon={pieChartIcon}>\\n        Diagram\\n      </SegmentedControl.Item>\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n### Sizes\\n\\n`SegmentedControl` accepts a `size` prop which supports the following values:\\n\\n- `small`\\n- `medium` (Default)\\n- `large`\\n```tsx\\nimport React from 'react';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\n\\nexport const Sizes = () => (\\n  <>\\n    <Box>\\n      <BodyText size=\\\"medium\\\" fontWeight=\\\"bold\\\" marginTop={0}>\\n        Small\\n      </BodyText>\\n      <SegmentedControl size=\\\"small\\\">\\n        <SegmentedControl.List aria-label=\\\"View type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n            Table\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n            List\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n            Detail\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n            Diagram\\n          </SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </Box>\\n    <Box>\\n      <BodyText size=\\\"medium\\\" fontWeight=\\\"bold\\\">\\n        Medium\\n      </BodyText>\\n      <SegmentedControl size=\\\"medium\\\">\\n        <SegmentedControl.List aria-label=\\\"View type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n            Table\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n            List\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n            Detail\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n            Diagram\\n          </SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </Box>\\n    <Box>\\n      <BodyText size=\\\"medium\\\" fontWeight=\\\"bold\\\">\\n        Large\\n      </BodyText>\\n      <SegmentedControl size=\\\"large\\\">\\n        <SegmentedControl.List aria-label=\\\"Content view type\\\">\\n          <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n            Table\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n            List\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n            Detail\\n          </SegmentedControl.Item>\\n          <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n            Diagram\\n          </SegmentedControl.Item>\\n        </SegmentedControl.List>\\n      </SegmentedControl>\\n    </Box>\\n  </>\\n);\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.\\n```tsx\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Disabled = () => (\\n  <SegmentedControl disabled>\\n    <SegmentedControl.List aria-label=\\\"View type\\\">\\n      <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon} tooltipProps={{title: 'Table'}} />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-view\\\"\\n        icon={listViewIcon}\\n        tooltipProps={{title: 'List'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"list-detail\\\"\\n        icon={listDetailIcon}\\n        tooltipProps={{title: 'Detail'}}\\n      />\\n      <SegmentedControl.Item\\n        data-id=\\\"diagrams\\\"\\n        icon={pieChartIcon}\\n        tooltipProps={{title: 'Diagram'}}\\n      />\\n    </SegmentedControl.List>\\n  </SegmentedControl>\\n);\\n```\\n\\n### Right-to-Left (RTL)\\n\\n`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.\\n```tsx\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';\\n\\nexport const RTL = () => (\\n  <CanvasProvider dir=\\\"rtl\\\">\\n    <SegmentedControl initialValue=\\\"list-detail\\\">\\n      <SegmentedControl.List aria-label=\\\"View type\\\">\\n        <SegmentedControl.Item data-id=\\\"table\\\" icon={gridIcon}>\\n          \u05E9\u05D5\u05DC\u05D7\u05DF\\n        </SegmentedControl.Item>\\n        <SegmentedControl.Item data-id=\\\"list-view\\\" icon={listViewIcon}>\\n          \u05E8\u05E9\u05D9\u05DE\u05D4\\n        </SegmentedControl.Item>\\n        <SegmentedControl.Item data-id=\\\"list-detail\\\" icon={listDetailIcon}>\\n          \u05E4\u05E8\u05D8\u05D9\u05DD\\n        </SegmentedControl.Item>\\n        <SegmentedControl.Item data-id=\\\"diagrams\\\" icon={pieChartIcon}>\\n          \u05EA\u05E8\u05E9\u05D9\u05DD\\n        </SegmentedControl.Item>\\n      </SegmentedControl.List>\\n    </SegmentedControl>\\n  </CanvasProvider>\\n);\\n```\\n\\n### Dynamic Items\\n\\n`SegmentedControl` supports a\\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where instead\\nof statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in\\nthe `model` state and provide a render function to display the items.\\n```tsx\\nimport React from 'react';\\nimport {\\n  SegmentedControl,\\n  useSegmentedControlModel,\\n} from '@workday/canvas-kit-preview-react/segmented-control';\\nimport {\\n  gridIcon,\\n  listViewIcon,\\n  listDetailIcon,\\n  pieChartIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nexport const Dynamic = () => {\\n  const [viewType, setViewType] = React.useState('table');\\n\\n  const model = useSegmentedControlModel({\\n    items: [\\n      {id: 'table', icon: gridIcon, label: 'Table'},\\n      {id: 'list', icon: listViewIcon, label: 'List'},\\n      {id: 'detail', icon: listDetailIcon, label: 'Detail'},\\n      {id: 'diagram', icon: pieChartIcon, label: 'Diagram'},\\n    ],\\n    size: 'small',\\n    initialValue: viewType,\\n    onSelect: data => {\\n      console.log(`${data.id} is selected`);\\n      setViewType(data.id);\\n    },\\n  });\\n\\n  return (\\n    <SegmentedControl model={model}>\\n      <SegmentedControl.List aria-label=\\\"View type\\\">\\n        {item => (\\n          <SegmentedControl.Item data-id={item.id} icon={item.icon}>\\n            {item.label}\\n          </SegmentedControl.Item>\\n        )}\\n      </SegmentedControl.List>\\n    </SegmentedControl>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"radio\": {\n      \"title\": \"Preview/Inputs/Radio\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs\",\n      \"mdxPath\": \"modules/preview-react/radio/stories/Radio.mdx\",\n      \"mdxProse\": \"# Canvas Kit Radio\\n\\nRadio Buttons allow a user to select one value from a predefined list of 7 or fewer options.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/radio-buttons)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nOur radio component includes a `RadioGroup` container and `RadioGroup.RadioButton`, which renders an\\nindividual radio button. Nest related `RadioGroup.RadioButton` buttons within a `RadioGroup` and\\nprovide a `name` prop to the `RadioGroup` to group the radio buttons together. Each\\n`RadioGroup.Radio` must have a unique `value`. This value is used in conjunction with the `value`\\nprop set on the `RadioGroup` to determine which radio button is selected. To tie it all together,\\nprovide an `onChange` handler to the `RadioGroup` to track the selected value as it changes.\\n\\n`RadioGroup` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\\n`useFieldset` prop is set to `true` to meet accessibility standards. This ensures the `label` text\\nfrom `FormField` is attached to the `RadioGroup` and read out as a group for voiceover.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst formfieldInputStyles = createStyles({\\n  width: px2rem(200),\\n});\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\">\\n      <FormFieldGroup>\\n        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.Field>\\n          <FormFieldGroup.List\\n            cs={formfieldInputStyles}\\n            as={RadioGroup}\\n            name=\\\"pizza-crust\\\"\\n            onChange={handleChange}\\n            value={value}\\n          >\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n              Deep dish\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n              Thin\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n              Gluten free\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n              Cauliflower\\n            </FormFieldGroup.Input>\\n            <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"custom\\\">\\n              Butter - the best thing to put on bread\\n            </FormFieldGroup.Input>\\n          </FormFieldGroup.List>\\n        </FormFieldGroup.Field>\\n      </FormFieldGroup>\\n      Value selected: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\nOur example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the\\nvalue of the `RadioGroup`.\\n\\n`RadioGroup` and `RadioGroup.Radio` support keyboard navigation through the proper use of WAI-ARIA\\n[properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role#associated_wai-aria_roles_states_and_properties).\\n\\n### Inverse\\n\\nSet the `variant` prop of `RadioGroup.RadioButton` to `inverse` to ensure proper contrast on dark\\nbackgrounds.\\n```tsx\\nimport React from 'react';\\nimport {Box} from '@workday/canvas-kit-react/layout';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  containerStyles: createStyles({\\n    backgroundColor: system.color.bg.primary.default,\\n    padding: system.space.x4,\\n  }),\\n  formFieldStyles: createStyles({\\n    legend: {\\n      color: system.color.text.inverse,\\n    },\\n  }),\\n};\\n\\nexport const Inverse = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Box cs={styleOverrides.containerStyles}>\\n      <RadioGroup name=\\\"crust-inverse\\\" onChange={handleChange} value={value}>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"deep-dish\\\">\\n          Deep dish\\n        </RadioGroup.RadioButton>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"thin\\\">\\n          Thin\\n        </RadioGroup.RadioButton>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"gluten-free\\\">\\n          Gluten free\\n        </RadioGroup.RadioButton>\\n        <RadioGroup.RadioButton variant=\\\"inverse\\\" value=\\\"cauliflower\\\">\\n          Cauliflower\\n        </RadioGroup.RadioButton>\\n      </RadioGroup>\\n    </Box>\\n  );\\n};\\n```\\n\\n### Radio Group with No Value\\n\\nOmit the `value` prop from `RadioGroup` to render the group with no selected\\n`RadioGroup.RadioButton`.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const NoValue = () => {\\n  const [value, setValue] = React.useState<string | number>(0);\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup>\\n      <FormFieldGroup.Label as=\\\"legend\\\">Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.List\\n        as={RadioGroup}\\n        name=\\\"crust-no-value\\\"\\n        onChange={handleChange}\\n        value={value}\\n      >\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n          Deep dish\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n          Thin\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n          Gluten free\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n          Cauliflower\\n        </FormFieldGroup.Input>\\n      </FormFieldGroup.List>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\n`RadioGroup.RadioButton` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html).\\nIt will forward `ref` to its underlying `<input type=\\\"radio\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n  const glutenFreeRef = React.useRef(null);\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  const handleClick = () => {\\n    glutenFreeRef.current.click();\\n  };\\n\\n  return (\\n    <>\\n      <FormFieldGroup>\\n        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.List as={RadioGroup} name=\\\"crust-ref\\\" onChange={handleChange} value={value}>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\" ref={glutenFreeRef}>\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n      </FormFieldGroup>\\n      <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup orientation=\\\"horizontalStart\\\">\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-label\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping `FormField` to `true` to indicate that the field is\\nrequired. Labels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState<string | number>('');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup isRequired={true}>\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.List\\n        as={RadioGroup}\\n        name=\\\"crust-required\\\"\\n        onChange={handleChange}\\n        value={value}\\n        aria-describedby=\\\"choose-crust\\\"\\n      >\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n          Deep dish\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n          Thin\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n          Gluten free\\n        </FormFieldGroup.Input>\\n        <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n          Cauliflower\\n        </FormFieldGroup.Input>\\n      </FormFieldGroup.List>\\n      <FormFieldGroup.Hint>You must choose a crust</FormFieldGroup.Hint>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of `RadioGroup.RadioButton` to prevent users from interacting with it. Be\\ncareful not to disable a pre-selected radio button as this will block keyboard access to the entire\\n`RadioGroup`.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n  return (\\n    <FormFieldGroup>\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-disabled\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} disabled value=\\\"gluten-free\\\">\\n            Gluten free (sold out)\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### Custom Radio Button\\n\\nUse `RadioGroup.Label` instead of `RadioGroup.RadioButton` if you need direct access to the label\\nand the radio input. This will allow you to apply custom styling to the text and radio input.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst styleOverrides = {\\n  formfieldInputStyles: createStyles({\\n    width: px2rem(200),\\n  }),\\n  radioGroupLabelTextStyles: createStyles({\\n    color: system.color.fg.default,\\n  }),\\n};\\n\\nexport const Custom = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\">\\n      <FormFieldGroup>\\n        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <FormFieldGroup.Field>\\n          <FormFieldGroup.List\\n            as={RadioGroup}\\n            name=\\\"pizza-crust-custom\\\"\\n            onChange={handleChange}\\n            cs={styleOverrides.formfieldInputStyles}\\n            value={value}\\n          >\\n            <RadioGroup.Label>\\n              <FormFieldGroup.Input as={RadioGroup.Label.Input} value=\\\"deep-dish\\\" />\\n              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>\\n                Deep dish\\n              </RadioGroup.Label.Text>\\n            </RadioGroup.Label>\\n            <RadioGroup.Label>\\n              <FormFieldGroup.Input as={RadioGroup.Label.Input} value=\\\"gluten-free\\\" />\\n              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>\\n                Gluten free\\n              </RadioGroup.Label.Text>\\n            </RadioGroup.Label>\\n            <RadioGroup.Label>\\n              <FormFieldGroup.Input as={RadioGroup.Label.Input} value=\\\"cauliflower\\\" />\\n              <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>\\n                Cauliflower\\n              </RadioGroup.Label.Text>\\n            </RadioGroup.Label>\\n          </FormFieldGroup.List>\\n        </FormFieldGroup.Field>\\n      </FormFieldGroup>\\n      Value selected: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Standalone Radio Button\\n\\nUse `StyledRadioButton` when you want a styled radio button on its own without using `RadioGroup`.\\nYou will need to handle behavior and accessibility.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const StandaloneRadio = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <Flex flexDirection=\\\"column\\\">\\n      <FormFieldGroup as=\\\"fieldset\\\">\\n        <FormFieldGroup.Label as=\\\"legend\\\">Choose Your Pizza Crust</FormFieldGroup.Label>\\n        <Flex gap=\\\"m\\\">\\n          <Flex as=\\\"label\\\" gap=\\\"xs\\\">\\n            <FormFieldGroup.Input\\n              as={StyledRadioButton}\\n              onChange={handleChange}\\n              value=\\\"deep-dish\\\"\\n              name=\\\"pizza-crust-standalone\\\"\\n              checked={value === 'deep-dish'}\\n            />\\n            Deep dish\\n          </Flex>\\n          <Flex as=\\\"label\\\" gap=\\\"xs\\\">\\n            <FormFieldGroup.Input\\n              as={StyledRadioButton}\\n              onChange={handleChange}\\n              value=\\\"gluten-free\\\"\\n              checked={value === 'gluten-free'}\\n              name=\\\"pizza-crust-standalone\\\"\\n            />\\n            Gluten free\\n          </Flex>\\n        </Flex>\\n      </FormFieldGroup>\\n      Value selected: {value}\\n    </Flex>\\n  );\\n};\\n```\\n\\nUse `RadioGroup.Label` when you want more control styling the text and radio input but still want\\nsome behavior handled for you.\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping `FormField` to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the `RadioGroup` to the alert or error state, respectively. You\\nwill also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility\\nstandards. You must set an `aria-describedby` attribute on the `RadioGroup` element that matches the\\nvalue of `hintId` set on the `FormField` element. These attributes ensure that the alert message is\\nassociated to the `RadioGroup` and read out by voiceover.\\n\\n#### Caution\\n\\nUse the alert state when a selection is valid but there is additional information.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <FormFieldGroup error=\\\"caution\\\" id=\\\"hint-alert\\\">\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-alert\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n        <FormFieldGroup.Hint>Deep dish is an extra $2.99.</FormFieldGroup.Hint>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n#### Error\\n\\nUse the error state when the selection is no longer valid.\\n```tsx\\nimport React from 'react';\\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\\nimport {RadioGroup} from '@workday/canvas-kit-preview-react/radio';\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState<string | number>('deep-dish');\\n\\n  const handleChange = (e: React.ChangeEvent) => {\\n    const target = e.currentTarget;\\n    if (target instanceof HTMLInputElement) {\\n      setValue(target.value);\\n    }\\n  };\\n\\n  return (\\n    <FormFieldGroup error=\\\"error\\\">\\n      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\\n      <FormFieldGroup.Field>\\n        <FormFieldGroup.List\\n          as={RadioGroup}\\n          name=\\\"crust-error\\\"\\n          onChange={handleChange}\\n          value={value}\\n        >\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"deep-dish\\\">\\n            Deep dish\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"thin\\\">\\n            Thin\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"gluten-free\\\">\\n            Gluten free\\n          </FormFieldGroup.Input>\\n          <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\\\"cauliflower\\\">\\n            Cauliflower\\n          </FormFieldGroup.Input>\\n        </FormFieldGroup.List>\\n        <FormFieldGroup.Hint>Deep dish is currently sold out.</FormFieldGroup.Hint>\\n      </FormFieldGroup.Field>\\n    </FormFieldGroup>\\n  );\\n};\\n```\\n\\n### React Hook Form\\n\\nUsing a form library like [React Hook Form](https://www.react-hook-form.com/) is a common use case.\\nReference this [CodeSandbox](https://codesandbox.io/s/radio-preview-with-react-hook-form-stn5vr) on\\nhow to use `RadioGroup` with React Hook Form.\\n\\n### Custom Styles\\n\\nRadio and its subcomponents support custom styling via the `cs` prop. For more information, check\\nour\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\\n\\n## Component API\\n\\n\"\n    },\n    \"pill\": {\n      \"title\": \"Preview/Pill\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-pill--docs\",\n      \"mdxPath\": \"modules/preview-react/pill/stories/Pill.mdx\",\n      \"mdxProse\": \"# Canvas Kit Pill\\n\\n`Pill`s are static or interactive indicators that allow users to input, filter, or label\\ninformation.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n`Pill`s are used to visually label objects on a page for quick recognition. They\u2019re offered as both\\nstatic (read-only) and interactive elements. They allow users to filter a list or table, or label\\ninformation to help with scanning and organization.\\n\\n### Basic Pills\\n\\nBy default a Pill is considered interactive. All leading elements (icons or avatars) are intended to\\nbe descriptive, helping support the label. Do not rely on the leading element to indicate the\\ninteraction behavior.\\n\\n#### Icon\\n\\nYou can render an icon inside the `Pill` with `Pill.Icon`. It will render a `plusIcon` by default,\\nbut it can be customized by providing an icon to the `icon` prop. Because it uses `SystemIcon` under\\nthe hood, you also have access to all `SystemIconProps`.\\n\\n#### Accessibility\\n\\nYou must provide an `aria-label` to the `Pill.Icon` for proper accessibility.\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\n\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const Basic = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill onClick={() => setText('The first pill is clicked!')}>\\n          <Pill.Icon aria-label=\\\"Add user\\\" />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n        <Pill disabled>\\n          <Pill.Icon aria-label=\\\"Add user\\\" />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n#### Avatar\\n\\nYou can render an avatar image inside the `Pill` with `Pill.Avatar`. It should appear before the\\n`Pill` text. Because it uses `Avatar` under the hood, you also have access to all `AvatarProps`.\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithAvatar = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill onClick={() => setText('The first pill is clicked!')}>\\n          <Pill.Avatar name=\\\"Regina Skeltor\\\" url={testAvatar} />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n        <Pill disabled>\\n          <Pill.Avatar name=\\\"Regina Skeltor\\\" />\\n          <Pill.Label>Regina Skeltor</Pill.Label>\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n#### Count\\n\\nThe count appears after the label. It is usually associated with the label. If you have a category,\\nthe count will directly correlate to that category.\\n```tsx\\nimport React from 'react';\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithCount = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill onClick={() => setText('The first pill is clicked!')}>\\n          Shoes\\n          <Pill.Count>30</Pill.Count>\\n        </Pill>\\n        <Pill disabled>\\n          Shoes\\n          <Pill.Count>30</Pill.Count>\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n### Read Only\\n\\nThe `readOnly` variant is a non-interactive element that is used to display information.\\n\\nYou can define a read only `Pill` by providing a `variant='readOnly'` prop.\\n```tsx\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithReadOnly = () => (\\n  <div className={flexStyles} id=\\\"read-only-list\\\">\\n    <Pill variant=\\\"readOnly\\\">Read-only</Pill>\\n    <Pill variant=\\\"readOnly\\\" maxWidth={150}>\\n      Read-only but with super long text in case you want to read a paragraph in a Pill which we\\n      don't recommend\\n    </Pill>\\n  </div>\\n);\\n```\\n\\n### Removable Pills\\n\\nRemovable `Pill`s display an `X` icon after the label. They have a smaller, more specific focus\\nstate and click target to be more intentional about their actions and to avoid unintended removal.\\n\\nYou can define a removable `Pill` by providing a `variant='removable'` prop.\\n\\n```tsx\\n<Pill variant=\\\"removable\\\">\\n  Pink Shirts\\n  <Pill.IconButton onClick={() => console.warn('clicked')} />\\n</Pill>\\n```\\n\\nIn this case, we use a `Pill.IconButton` because the `X` becomes the focusable and clickable\\nelement.\\n\\nThe default icon for `Pill.IconButton` is `xSmallIcon` but this can also be overwritten by passing\\nan `icon` prop to `Pill.IconButton`\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\n// @ts-ignore: Cannot find module error\\nimport testAvatar from './test-avatar.png';\\nimport {BodyText} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst flexStyles = createStyles({\\n  display: 'flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithRemovable = () => {\\n  const [text, setText] = React.useState('');\\n  return (\\n    <div>\\n      <div className={flexStyles}>\\n        <Pill variant=\\\"removable\\\">\\n          <Pill.Label>Pink Shirts</Pill.Label>\\n          <Pill.IconButton\\n            aria-label=\\\"Remove\\\"\\n            onClick={() => setText('The first pill is clicked!')}\\n          />\\n        </Pill>\\n        <Pill variant=\\\"removable\\\">\\n          <Pill.Avatar name=\\\"Avatar\\\" url={testAvatar} />\\n          <Pill.Label>Carolyn Grimaldi</Pill.Label>\\n          <Pill.IconButton\\n            aria-label=\\\"Remove\\\"\\n            onClick={() => setText('The second pill is clicked!')}\\n          />\\n        </Pill>\\n        <Pill variant=\\\"removable\\\" disabled>\\n          <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>\\n          <Pill.IconButton aria-label=\\\"Remove\\\" />\\n        </Pill>\\n      </div>\\n      <BodyText size=\\\"medium\\\">{text}</BodyText>\\n    </div>\\n  );\\n};\\n```\\n\\n### List of Pills\\n\\n`Pill`s can often represent multiple pieces of information such as a filtered list of categories or\\nskills.\\n\\nIn order to achieve this, use our `Flex` component to wrap each `Pill` and space them out\\naccordingly.\\n```tsx\\nimport React from 'react';\\n\\nimport {Pill} from '@workday/canvas-kit-preview-react/pill';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst data = [\\n  'Shoes',\\n  'Pants',\\n  'Dress Shoes',\\n  'Color',\\n  'Accessories',\\n  'Luxury',\\n  'Casual',\\n  'Hats',\\n  'Beanies',\\n  'Glasses',\\n  'Jewelry',\\n];\\n\\nconst flexWrapStyles = createStyles({\\n  display: 'flex',\\n  flexWrap: 'wrap',\\n  gap: system.space.x2,\\n});\\n\\nexport const WithList = () => {\\n  const [items, setItems] = React.useState(data);\\n\\n  return (\\n    <div className={flexWrapStyles}>\\n      {items.map((cat, index) => {\\n        return (\\n          <Pill key={index} variant=\\\"removable\\\">\\n            <Pill.Label>{cat}</Pill.Label>\\n            <Pill.IconButton\\n              aria-label=\\\"Remove\\\"\\n              onClick={() => setItems(items.filter(i => i !== cat))}\\n            />\\n          </Pill>\\n        );\\n      })}\\n    </div>\\n  );\\n};\\n```\\n\\n### Custom Styles\\n\\n`Pill` supports custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)\\nor view the example below.\\n```tsx\\nimport {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';\\n\\nimport {createStencil} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\\n\\nconst customPillStencil = createStencil({\\n  base: {\\n    [pillStencil.vars.background]: system.color.static.green.default,\\n    [pillStencil.vars.border]: system.color.static.green.stronger,\\n    [pillStencil.vars.label]: system.color.static.white,\\n    [systemIconStencil.vars.color]: system.color.static.white,\\n    [pillCountStencil.vars.backgroundColor]: system.color.static.green.default,\\n    [pillCountStencil.vars.borderColor]: system.color.static.green.default,\\n\\n    '&:hover, &.hover': {\\n      [pillStencil.vars.background]: system.color.static.green.stronger,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n      [pillCountStencil.vars.borderColor]: system.color.static.green.stronger,\\n    },\\n    '&:active, &.active': {\\n      [pillStencil.vars.background]: system.color.static.green.stronger,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,\\n    },\\n    '&:focus, &.focus, &:focus-visible': {\\n      [pillStencil.vars.background]: system.color.static.green.stronger,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,\\n    },\\n    '&:disabled, &.disabled': {\\n      [pillStencil.vars.background]: system.color.static.green.default,\\n      [pillStencil.vars.label]: system.color.static.white,\\n      [systemIconStencil.vars.color]: system.color.static.white,\\n    },\\n  },\\n});\\n\\nexport const CustomStyles = () => {\\n  return (\\n    <div>\\n      <Pill cs={customPillStencil()}>\\n        <Pill.Icon aria-label=\\\"Add user\\\" />\\n        <Pill.Label>Custom Pill Color</Pill.Label>\\n        <Pill.Count>10</Pill.Count>\\n      </Pill>\\n    </div>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"multiselect\": {\n      \"title\": \"Preview/MultiSelect\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-multiselect--docs\",\n      \"mdxPath\": \"modules/preview-react/multi-select/stories/MultiSelect.mdx\",\n      \"mdxProse\": \"# Canvas Kit MultiSelect\\n\\nMultiSelect inputs allow users to choose multiple options from a list of items.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`MultiSelect` supports a\\n[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you\\npass an array of items via the `items` prop and provide a render function to display the items. The\\nitems may be provided as an\\n[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an\\n[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).\\n\\n`MultiSelect` should be used in tandem with [Form Field](/components/inputs/form-field/) where the\\n`MultiSelect` wraps the `FormField` element and the `FormField` element wraps the children of\\n`MultiSelect` to meet accessibility standards. This ensures the `label` text from `FormField` is\\nattached to the `MultiSelect.Input` and read out as a group for voiceover.\\n\\n```tsx\\n<MultiSelect items={options}>\\n  <FormField label=\\\"Your Label\\\">\\n    <MultiSelect.Input onChange={e => handleChange(e)} id=\\\"contact-multi-select\\\" />\\n    <MultiSelect.Popper>\\n      <MultiSelect.Card>\\n        <MultiSelect.List>\\n          {item => <MultiSelect.Item>{item.id}</MultiSelect.Item>}\\n        </MultiSelect.List>\\n      </MultiSelect.Card>\\n    </MultiSelect.Popper>\\n  </FormField>\\n</MultiSelect>\\n```\\n\\n### Disabled Example\\n\\nDisabling `MultiSelect` involves passing the `disabled` prop to the `MultiSelect.Input` component.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];\\n\\nexport const Disabled = () => {\\n  return (\\n    <>\\n      <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>\\n        <FormField orientation=\\\"horizontalStart\\\">\\n          <FormField.Label>Toppings</FormField.Label>\\n          <FormField.Input\\n            as={MultiSelect.Input}\\n            placeholder=\\\"Select Multiple\\\"\\n            removeLabel=\\\"Remove\\\"\\n            disabled\\n          />\\n          <MultiSelect.Popper>\\n            <MultiSelect.Card>\\n              <MultiSelect.List>\\n                {item => (\\n                  <MultiSelect.Item data-id={item}>\\n                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>\\n                  </MultiSelect.Item>\\n                )}\\n              </MultiSelect.List>\\n            </MultiSelect.Card>\\n          </MultiSelect.Popper>\\n        </FormField>\\n      </MultiSelect>\\n    </>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nThe `MultiSelect.Input` and `MultiSelect.SearchInput` support the `ErrorType` from the Common\\npackage. The error styling is identical to the `TextInput` error styling. The `error` prop is\\ntypically passed from the `FormField` component.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];\\n\\nexport const Error = () => {\\n  const model = useMultiSelectModel({\\n    items,\\n    initialSelectedIds: [],\\n  });\\n  return (\\n    <>\\n      <MultiSelect model={model}>\\n        <FormField\\n          orientation=\\\"horizontalStart\\\"\\n          error={\\n            model.state.selectedIds.length < 1\\n              ? 'error'\\n              : model.state.selectedIds.length > 3\\n              ? 'caution'\\n              : undefined\\n          }\\n        >\\n          <FormField.Label>Toppings</FormField.Label>\\n          <FormField.Field>\\n            <FormField.Input\\n              as={MultiSelect.Input}\\n              placeholder=\\\"Select Multiple\\\"\\n              removeLabel=\\\"Remove\\\"\\n            />\\n            <MultiSelect.Popper>\\n              <MultiSelect.Card>\\n                <MultiSelect.List>\\n                  {item => (\\n                    <MultiSelect.Item data-id={item}>\\n                      <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>\\n                    </MultiSelect.Item>\\n                  )}\\n                </MultiSelect.List>\\n              </MultiSelect.Card>\\n            </MultiSelect.Popper>\\n\\n            <FormField.Hint>\\n              {model.state.selectedIds.length < 1\\n                ? 'Select at least one topping.'\\n                : model.state.selectedIds.length > 3\\n                ? 'More than 3 toppings cost extra.'\\n                : undefined}\\n            </FormField.Hint>\\n          </FormField.Field>\\n        </FormField>\\n      </MultiSelect>\\n    </>\\n  );\\n};\\n```\\n\\n### Complex\\n\\nWhen registering items in an array of objects, it's common to have the text that is displayed to the\\nuser be different than an id. In this example, `serverId` and `label` properties need to be remapped\\nto `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties\\n`text` and `id`, there would be no need for this.\\n```tsx\\nimport React from 'react';\\n\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nconst items = [\\n  {id: '1', text: 'Cheese'},\\n  {id: '2', text: 'Olives'},\\n  {id: '3', text: 'Onions'},\\n  {id: '4', text: 'Pepperoni'},\\n  {id: '5', text: 'Peppers'},\\n];\\n\\nexport const Complex = () => {\\n  const [value, setValue] = React.useState('');\\n  const [label, setLabel] = React.useState('');\\n  return (\\n    <CanvasProvider>\\n      <>\\n        <form\\n          onSubmit={e => {\\n            console.log('form submitted');\\n            e.preventDefault();\\n          }}\\n        >\\n          <main className={mainContentStyles}>\\n            <MultiSelect items={items} getId={i => i.id} getTextValue={i => i.text}>\\n              <FormField orientation=\\\"horizontalStart\\\">\\n                <FormField.Label>Toppings</FormField.Label>\\n                <FormField.Input\\n                  as={MultiSelect.Input}\\n                  placeholder=\\\"Select Multiple\\\"\\n                  removeLabel=\\\"Remove\\\"\\n                  name=\\\"toppings\\\"\\n                  onChange={e => {\\n                    const value = e.currentTarget.value;\\n                    setValue(value);\\n                    setLabel(\\n                      value\\n                        .split(', ')\\n                        .map(item => items.find(i => i.id === item)?.text || 'Not Found')\\n                        .join(', ')\\n                    );\\n                  }}\\n                  value={value}\\n                />\\n                <MultiSelect.Popper>\\n                  <MultiSelect.Card>\\n                    <MultiSelect.List>\\n                      {item => (\\n                        <MultiSelect.Item data-id={item.id}>\\n                          <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                        </MultiSelect.Item>\\n                      )}\\n                    </MultiSelect.List>\\n                  </MultiSelect.Card>\\n                </MultiSelect.Popper>\\n              </FormField>\\n            </MultiSelect>\\n          </main>\\n        </form>\\n        <div>Selected IDs: {value}</div>\\n        <div>Selected Labels: {label}</div>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### With Icons\\n\\nUse `MultiSelect.Item.Icon` to render an icon for a `MultiSelect.Item`. The `icon` prop for\\n`MultiSelect.Item.Icon` accepts [system icons](/assets/system-icons/) from\\n`@workday/canvas-system-icons-web`.\\n\\n> **Note: `data-id` on `MultiSelect.Item` must match the `id` property in your array of objects.\\n> This ensures proper keyboard handling and type-ahead.**\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {\\n  mediaPauseIcon,\\n  mediaPlayIcon,\\n  mediaTopicsIcon,\\n  skipIcon,\\n  previousIcon,\\n} from '@workday/canvas-system-icons-web';\\n\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = [\\n  {id: '1', text: 'Pause', icon: mediaPauseIcon},\\n  {id: '2', text: 'Play', icon: mediaPlayIcon},\\n  {id: '3', text: 'Skip', icon: skipIcon},\\n  {id: '4', text: 'Previous', icon: previousIcon},\\n];\\n\\nexport const Icons = () => {\\n  return (\\n    <MultiSelect items={items}>\\n      <FormField orientation=\\\"horizontalStart\\\">\\n        <FormField.Label>Controls</FormField.Label>\\n        <FormField.Input\\n          as={MultiSelect.Input}\\n          placeholder=\\\"Select Multiple\\\"\\n          removeLabel=\\\"Remove\\\"\\n        />\\n        <MultiSelect.Popper>\\n          <MultiSelect.Card>\\n            <MultiSelect.List>\\n              {item => (\\n                <MultiSelect.Item data-id={item.id}>\\n                  <MultiSelect.Item.Icon icon={item.icon} />\\n                  <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                  <MultiSelect.Item.Icon icon={mediaTopicsIcon} />\\n                </MultiSelect.Item>\\n              )}\\n            </MultiSelect.List>\\n          </MultiSelect.Card>\\n        </MultiSelect.Popper>\\n      </FormField>\\n    </MultiSelect>\\n  );\\n};\\n```\\n\\n### Controlled\\n\\nThe MultiSelect can be a controlled input component by passing the `value` and `onChange` to either\\nthe `<MultiSelect>` component or the `<MultiSelect.Input>` component. Internally, the\\n`MultiSelect.Input` watches for changes on the `value` React prop as well as the `value` DOM\\nproperty and will update the model accordingly.\\n```tsx\\nimport React from 'react';\\n\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nimport {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';\\n\\nconst items = [\\n  {id: '1', text: 'Cheese'},\\n  {id: '2', text: 'Olives'},\\n  {id: '3', text: 'Onions'},\\n  {id: '4', text: 'Pepperoni'},\\n  {id: '5', text: 'Peppers'},\\n];\\n\\nexport const Controlled = () => {\\n  const formRef = React.useRef<HTMLFormElement>(null);\\n  const [value, setValue] = React.useState('1');\\n  const [label, setLabel] = React.useState('Cheese');\\n\\n  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {\\n    const value = event.currentTarget.value;\\n    setValue(value);\\n    setLabel(\\n      value\\n        .split(', ')\\n        .map(item => items.find(i => i.id === item)?.text || 'Not Found')\\n        .join(', ')\\n    );\\n  }\\n\\n  return (\\n    <>\\n      <form\\n        onSubmit={e => {\\n          console.log('form submitted');\\n          e.preventDefault();\\n        }}\\n        ref={formRef}\\n      >\\n        <Flex gap=\\\"s\\\" flexDirection=\\\"column\\\">\\n          <MultiSelect items={items}>\\n            <FormField orientation=\\\"horizontalStart\\\">\\n              <FormField.Label>Toppings</FormField.Label>\\n              <FormField.Input\\n                as={MultiSelect.Input}\\n                placeholder=\\\"Select Multiple\\\"\\n                removeLabel=\\\"Remove\\\"\\n                name=\\\"toppings\\\"\\n                onChange={handleOnChange}\\n                value={value}\\n              />\\n              <MultiSelect.Popper>\\n                <MultiSelect.Card>\\n                  <MultiSelect.List>\\n                    {item => (\\n                      <MultiSelect.Item data-id={item.id}>\\n                        <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                      </MultiSelect.Item>\\n                    )}\\n                  </MultiSelect.List>\\n                </MultiSelect.Card>\\n              </MultiSelect.Popper>\\n            </FormField>\\n          </MultiSelect>\\n          <Flex gap=\\\"s\\\">\\n            <SecondaryButton\\n              onClick={e => {\\n                setValue('1, 2, 3');\\n              }}\\n            >\\n              Set to \\\"Cheese, Olives, Onions\\\" via React `value`\\n            </SecondaryButton>\\n            <SecondaryButton\\n              onClick={e => {\\n                const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;\\n                input.value = '1, 2';\\n              }}\\n            >\\n              Set to \\\"Cheese, Olives\\\" via DOM `value`\\n            </SecondaryButton>\\n          </Flex>\\n          <div>\\n            <PrimaryButton type=\\\"submit\\\">Submit</PrimaryButton>\\n          </div>\\n          <div>Selected ID: {value}</div>\\n          <div>Selected Label: {label}</div>\\n        </Flex>\\n      </form>\\n    </>\\n  );\\n};\\n```\\n\\n### Searching\\n\\nA MultiSelect input can be used as a filter for results. Most likely this also means there are many\\nitems that may not be all be loaded from the server at once. The `useComboboxLoader` can be used to\\ndynamically load items as the user navigates the available options.\\n\\n> **Note:** The behavior of search is experimental. The example should continue to work without\\n> modification, but how the searchable input is presented to the user may change with user testing.\\n> Don't rely too much on the exact behavior of the search input. For example, the search input may\\n> be cleared when the user blurs the field.\\n```tsx\\nimport React from 'react';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {LoadReturn} from '@workday/canvas-kit-react/collection';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {useComboboxLoader} from '@workday/canvas-kit-react/combobox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';\\nimport {StyledMenuItem} from '@workday/canvas-kit-react/menu';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nconst colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];\\nconst fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];\\nconst options = Array(1000)\\n  .fill('')\\n  .map((_, index) => {\\n    return {\\n      id: `${index + 1}`,\\n      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,\\n    };\\n  });\\n\\nexport const Searching = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const {model, loader} = useComboboxLoader(\\n    {\\n      // You can start with any number that makes sense.\\n      total: 0,\\n\\n      // Pick whatever number makes sense for your API\\n      pageSize: 20,\\n\\n      // A load function that will be called by the loader. You must return a promise that returns\\n      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache\\n      async load({pageNumber, pageSize, filter}) {\\n        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {\\n          // simulate a server response by resolving after a period of time\\n          setTimeout(() => {\\n            // simulate paging and filtering based on pre-computed items\\n            const start = (pageNumber - 1) * pageSize;\\n            const end = start + pageSize;\\n            const filteredItems = options.filter(item => {\\n              if (filter === '' || typeof filter !== 'string') {\\n                return true;\\n              }\\n              return item.text.toLowerCase().includes(filter.toLowerCase());\\n            });\\n\\n            const total = filteredItems.length;\\n            const items = filteredItems.slice(start, end);\\n\\n            resolve({\\n              items,\\n              total,\\n            });\\n          }, 300);\\n        });\\n      },\\n      onShow() {\\n        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is\\n        // visible\\n        loader.load();\\n      },\\n    },\\n    useMultiSelectModel\\n  );\\n\\n  return (\\n    <CanvasProvider>\\n      <>\\n        <form\\n          onSubmit={e => {\\n            console.log('form submitted');\\n            e.preventDefault();\\n          }}\\n        >\\n          <main className={mainContentStyles}>\\n            <MultiSelect model={model}>\\n              <FormField orientation=\\\"horizontalStart\\\">\\n                <FormField.Label>Fruits</FormField.Label>\\n                <FormField.Input\\n                  as={MultiSelect.SearchInput}\\n                  placeholder=\\\"Search\\\"\\n                  removeLabel=\\\"Remove\\\"\\n                  name=\\\"toppings\\\"\\n                  onChange={e => {\\n                    setValue(e.currentTarget.value);\\n                  }}\\n                  value={value}\\n                />\\n                <MultiSelect.Popper>\\n                  <MultiSelect.Card>\\n                    {model.state.items.length === 0 && (\\n                      <StyledMenuItem as=\\\"span\\\">No Results Found</StyledMenuItem>\\n                    )}\\n                    {model.state.items.length > 0 && (\\n                      <MultiSelect.List maxHeight={200}>\\n                        {item =>\\n                          item ? (\\n                            <MultiSelect.Item data-id={item.id}>\\n                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                            </MultiSelect.Item>\\n                          ) : undefined\\n                        }\\n                      </MultiSelect.List>\\n                    )}\\n                  </MultiSelect.Card>\\n                </MultiSelect.Popper>\\n              </FormField>\\n            </MultiSelect>\\n          </main>\\n        </form>\\n        <div>Selected: {value}</div>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Initial Selected Items\\n\\nYou can set `initialSelectedIds` to the value that you want initially selected.\\n```tsx\\nimport React, {useEffect} from 'react';\\n\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {LoadReturn} from '@workday/canvas-kit-react/collection';\\nimport {CanvasProvider, useMountLayout} from '@workday/canvas-kit-react/common';\\nimport {useComboboxLoader} from '@workday/canvas-kit-react/combobox';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nimport {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';\\nimport {StyledMenuItem} from '@workday/canvas-kit-react/menu';\\n\\nconst mainContentStyles = createStyles({\\n  padding: system.space.x4,\\n});\\n\\nconst colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];\\nconst fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];\\nconst options = Array(1000)\\n  .fill('')\\n  .map((_, index) => {\\n    return {\\n      id: `${index + 1}`,\\n      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,\\n    };\\n  });\\n\\nexport const InitialSelectedItems = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const {model, loader} = useComboboxLoader(\\n    {\\n      // You can start with any number that makes sense.\\n      total: 0,\\n      initialSelectedIds: ['3', '5'],\\n\\n      // Pick whatever number makes sense for your API\\n      pageSize: 500,\\n\\n      // A load function that will be called by the loader. You must return a promise that returns\\n      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache\\n      async load({pageNumber, pageSize, filter}) {\\n        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {\\n          // simulate a server response by resolving after a period of time\\n          setTimeout(() => {\\n            // simulate paging and filtering based on pre-computed items\\n            const start = (pageNumber - 1) * pageSize;\\n            const end = start + pageSize;\\n            const filteredItems = options.filter(item => {\\n              if (filter === '' || typeof filter !== 'string') {\\n                return true;\\n              }\\n              return item.text.toLowerCase().includes(filter.toLowerCase());\\n            });\\n\\n            const total = filteredItems.length;\\n            const items = filteredItems.slice(start, end);\\n\\n            resolve({\\n              items,\\n              total,\\n            });\\n          }, 300);\\n        });\\n      },\\n      onShow() {\\n        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is\\n        // visible\\n        loader.load();\\n      },\\n    },\\n    useMultiSelectModel\\n  );\\n\\n  useEffect(() => {\\n    loader.load();\\n  }, [loader]);\\n\\n  return (\\n    <CanvasProvider>\\n      <>\\n        <form\\n          onSubmit={e => {\\n            console.log('form submitted');\\n            e.preventDefault();\\n          }}\\n        >\\n          <main className={mainContentStyles}>\\n            <MultiSelect model={model}>\\n              <FormField orientation=\\\"horizontalStart\\\">\\n                <FormField.Label>Fruits</FormField.Label>\\n                <FormField.Input\\n                  as={MultiSelect.SearchInput}\\n                  placeholder=\\\"Search\\\"\\n                  removeLabel=\\\"Remove\\\"\\n                  name=\\\"toppings\\\"\\n                  onChange={e => {\\n                    setValue(e.currentTarget.value);\\n                  }}\\n                  value={value}\\n                />\\n                <MultiSelect.Popper>\\n                  <MultiSelect.Card>\\n                    {model.state.items.length === 0 && (\\n                      <StyledMenuItem as=\\\"span\\\">No Results Found</StyledMenuItem>\\n                    )}\\n                    {model.state.items.length > 0 && (\\n                      <MultiSelect.List maxHeight={200}>\\n                        {item =>\\n                          item ? (\\n                            <MultiSelect.Item data-id={item.id}>\\n                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>\\n                            </MultiSelect.Item>\\n                          ) : undefined\\n                        }\\n                      </MultiSelect.List>\\n                    )}\\n                  </MultiSelect.Card>\\n                </MultiSelect.Popper>\\n              </FormField>\\n            </MultiSelect>\\n          </main>\\n        </form>\\n        <div>Selected: {value}</div>\\n      </>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\"\n    },\n    \"loading-sparkles-(ai)\": {\n      \"title\": \"Preview/Loading Sparkles (AI)\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-loading-sparkles-(ai)--docs\",\n      \"mdxPath\": \"modules/preview-react/loading-sparkles/stories/LoadingSparkles.mdx\",\n      \"mdxProse\": \"# Canvas Kit Loading Sparkles\\n\\n`LoadingSparkles` is a loading animation that makes users aware an AI operation is in progress.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add some wiring for screen\\nreaders. In the example below, we're simulating a loading state with a `setTimeout` that's triggered\\nwhen the \\\"Generate Quote\\\" button is clicked.\\n\\nThe ARIA live region uses the `aria-label` on `LoadingSparkles` to announce the loading state. And\\nit uses the text in `AccessibleHide` to announce when loading is complete. In a real-world\\napplication, you would probably add another state for loading failures. Also note that generated\\ntext should live outside the live region. This content doesn't need to be announced to screen\\nreaders.\\n\\n#### Consolidating ARIA Live Regions\\n\\nIn the example, we wrapped `LoadingSparkles` inside our `AriaLiveRegion` component, but in general\\nyou should not have multiple ARIA live regions on the page at once. If you already have a live\\nregion, consider sending these loading messages there instead of adding another region.\\n```tsx\\nimport React from 'react';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';\\nimport {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst containerStyles = createStyles({\\n  minHeight: '3.5rem',\\n  display: 'flex',\\n  flexDirection: 'column',\\n  gap: '0.5rem',\\n});\\n\\nexport const Basic = () => {\\n  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');\\n  const [quote, setQuote] = React.useState('');\\n\\n  React.useEffect(() => {\\n    if (loadingStatus === 'loading') {\\n      const mockLoading = setTimeout(() => {\\n        setLoadingStatus('success');\\n        setQuote(getQuote());\\n      }, 3000);\\n\\n      return () => {\\n        clearTimeout(mockLoading);\\n      };\\n    }\\n  }, [loadingStatus]);\\n\\n  const handleClick = () => {\\n    setQuote('');\\n    setLoadingStatus('loading');\\n  };\\n\\n  return (\\n    <div>\\n      <div className={containerStyles}>\\n        {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}\\n        <AriaLiveRegion>\\n          {loadingStatus === 'loading' && <LoadingSparkles aria-label=\\\"loading\\\" />}\\n          {loadingStatus === 'success' && (\\n            <AccessibleHide role=\\\"status\\\">loading complete</AccessibleHide>\\n          )}\\n        </AriaLiveRegion>\\n      </div>\\n      <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>\\n    </div>\\n  );\\n};\\n\\nconst robotQuotes = [\\n  'The Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.',\\n  'Law 1: A robot may not injure a human being or, through inaction, allow a human being to come to harm.',\\n  'Law 2: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',\\n  'Law 3: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',\\n  'There is nothing so eternally adhesive as the memory of power.',\\n];\\n\\nconst getQuote = () => {\\n  const index = Math.floor(Math.random() * robotQuotes.length);\\n  return robotQuotes[index];\\n};\\n```\\n\\n### Right-to-Left (RTL)\\n```tsx\\nimport React from 'react';\\nimport {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\n\\nexport const RTL = () => {\\n  return (\\n    <CanvasProvider dir=\\\"rtl\\\">\\n      <LoadingSparkles />\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"information-highlight\": {\n      \"title\": \"Preview/Information Highlight\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs\",\n      \"mdxPath\": \"modules/preview-react/information-highlight/stories/InformationHighlight.mdx\",\n      \"mdxProse\": \"# Canvas Kit Information Highlight\\n\\nA container to call out important information on a page or a section of a page that the user should\\nbe aware of.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n`InformationHighlight` should be used to call out important information to the user and are paired\\nwith a meaningful icon and color to differentiate information type. It should not be removed from\\nthe interface until some system or admin level action has been taken to do so.\\n\\nYou can use an `InformationHighlight` to:\\n\\n- Prevent unwanted consequences from destructive actions\\n- Reassure users in their next steps\\n- Provide detail into information on the page\\n- Show changes in page content\\n\\n### When to Consider Something Else\\n\\n- Consider a\\n  [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if\\n  the message is about system-wide errors or alerts, or if the message appears in response to user\\n  action.\\n- Consider a\\n  [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the\\n  message is critical and requires user action or decision before proceeding\\n- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs)\\n  if the message is timely, such as communicating updates on the process of an application.\\n\\n### Basic Example\\n```tsx\\nimport React from 'react';\\n\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\n\\nexport const Basic = () => {\\n  return (\\n    <InformationHighlight>\\n      <InformationHighlight.Icon />\\n      <InformationHighlight.Heading>Information Highlight</InformationHighlight.Heading>\\n      <InformationHighlight.Body>\\n        {' '}\\n        This is what an information highlight would look like with with the default settings and\\n        every field filled in{' '}\\n      </InformationHighlight.Body>\\n      <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n    </InformationHighlight>\\n  );\\n};\\n```\\n\\n## Variants\\n\\n`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.\\n\\nVariants: `informational`, `caution`, `critical`\\n\\nEmphasis: `low`, `high`\\n\\nThe variants have different icons and colors to convey severity and the emphasis changes the\\nbackground color to have a lower or higher contrast. If no `variant` or `emphasis` is selected the\\nlayout will default to `Variant: informational, Emphasis: low`.\\n\\nThe following examples will show the `low` and `high` emphasis of the three variants. `low` Emphasis\\nwill be shown first and should be used when there is other more important information on the page.\\n`high` Emphasis will be shown second, and should be used when the highlight is not competing with\\nother, more important information.\\n\\n### Informational\\n\\nThe informational variant is for _nice to have_ information, such as related features or\\nopportunities.\\n```tsx\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\n\\nconst contentTextStyles = createStyles({\\n  margin: 0,\\n});\\n\\nconst contentListStyles = createStyles({\\n  listStyle: 'inside',\\n  marginInlineStart: 0,\\n  marginBlockStart: system.space.x2,\\n  marginBlockEnd: 0,\\n  padding: 0,\\n});\\n\\nexport const Informational = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <InformationHighlight variant={'informational'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          <p className={contentTextStyles}>\\n            This is a low-emphasis, informational callout. You should use this for nice-to-have\\n            information, such as:\\n          </p>\\n          <ul className={contentListStyles}>\\n            <li>tangential information or context</li>\\n            <li>related features</li>\\n            <li>additional opportunities</li>\\n          </ul>\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">Learn More</InformationHighlight.Link>\\n      </InformationHighlight>\\n      <InformationHighlight variant={'informational'} emphasis={'high'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          <p className={contentTextStyles}>\\n            This is a high-emphasis, informational callout. You should use this for nice-to-have\\n            information, such as:\\n          </p>\\n          <ul className={contentListStyles}>\\n            <li>tangential information or context</li>\\n            <li>related features</li>\\n            <li>additional opportunities</li>\\n          </ul>\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">Learn More</InformationHighlight.Link>\\n      </InformationHighlight>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Caution\\n\\nThe caution variant is for _important to know_ information, such as the potential consequences of\\nspecific actions.\\n```tsx\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nexport const Caution = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <InformationHighlight variant={'caution'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below, nothing will happen\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n      <InformationHighlight variant={'caution'} emphasis={'high'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below, nothing will happen\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Critical\\n\\nThe critical variant is for _must know_ information that could otherwise cause failure if the user\\nis unaware\\n```tsx\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nexport const Critical = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <InformationHighlight variant={'critical'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading>Attention! Highlight Something</InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below it will reroute you back to this page.\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n      <InformationHighlight variant={'critical'} emphasis={'high'}>\\n        <InformationHighlight.Icon />\\n        <InformationHighlight.Heading>Attention! Highlight Something</InformationHighlight.Heading>\\n        <InformationHighlight.Body>\\n          If you select the link below it will reroute you back to this page.\\n        </InformationHighlight.Body>\\n        <InformationHighlight.Link href=\\\"#hyperlink\\\">View the Docs</InformationHighlight.Link>\\n      </InformationHighlight>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### RTL Example\\n\\nInformation Highlight also supports RTL Languages. To enable RTL, set the `dir` attribute on the\\nparent dom element that renders your application.\\n```tsx\\nimport React from 'react';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {system} from '@workday/canvas-tokens-web';\\nexport const RTL = () => {\\n  return (\\n    <Flex flexDirection={'column'} gap={system.space.x2}>\\n      <CanvasProvider dir=\\\"rtl\\\">\\n        <InformationHighlight variant={'caution'} emphasis={'low'}>\\n          <InformationHighlight.Icon />\\n          <InformationHighlight.Heading>\\n            {' '}\\n            \u0627\u0646\u062A\u0628\u0627\u0647! \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631{' '}\\n          </InformationHighlight.Heading>\\n          <InformationHighlight.Body>\\n            \u0646\u062D\u0646 \u0646\u062F\u0639\u0645 \u0627\u0644\u0644\u063A\u0627\u062A \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631\\n          </InformationHighlight.Body>\\n          <InformationHighlight.Link href=\\\"#hyperlink\\\">\u0648\u062B\u0627\u0626\u0642</InformationHighlight.Link>\\n        </InformationHighlight>\\n      </CanvasProvider>\\n      <CanvasProvider dir=\\\"rtl\\\">\\n        <InformationHighlight variant={'caution'} emphasis={'high'}>\\n          <InformationHighlight.Icon />\\n          <InformationHighlight.Heading>\\n            {' '}\\n            \u0627\u0646\u062A\u0628\u0627\u0647! \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631{' '}\\n          </InformationHighlight.Heading>\\n          <InformationHighlight.Body>\\n            \u0646\u062D\u0646 \u0646\u062F\u0639\u0645 \u0627\u0644\u0644\u063A\u0627\u062A \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631\\n          </InformationHighlight.Body>\\n          <InformationHighlight.Link href=\\\"#hyperlink\\\">\u0648\u062B\u0627\u0626\u0642</InformationHighlight.Link>\\n        </InformationHighlight>\\n      </CanvasProvider>\\n    </Flex>\\n  );\\n};\\n```\\n\\n## Partial and Custom Information Highlights\\n\\n`InformationHighlight` can use custom icons or be designed to only use some of its components.\\n\\n### Custom Icon: Critical\\n\\n### Body Only Example\\n```tsx\\nimport React from 'react';\\n\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\n\\nexport const Body = () => {\\n  return (\\n    <InformationHighlight>\\n      <InformationHighlight.Body>\\n        Only the body of an information highlight\\n      </InformationHighlight.Body>\\n    </InformationHighlight>\\n  );\\n};\\n```\\n\\n### Heading Only Example\\n```tsx\\nimport React from 'react';\\n\\nimport {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';\\n\\nexport const Heading = () => {\\n  return (\\n    <InformationHighlight>\\n      <InformationHighlight.Heading> Only Heading </InformationHighlight.Heading>\\n    </InformationHighlight>\\n  );\\n};\\n```\\n\\n### Accessible Use of the `as` Prop\\n\\nLike many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop,\\nwhich lets you change the underlying semantic element. For `InformationHighlight.Heading`, you can\\nchange the heading level if you were needing to define a different level of importance. This should\\nbe done with caution to ensure the best accessibility.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"divider\": {\n      \"title\": \"Preview/Divider\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs\",\n      \"mdxPath\": \"modules/preview-react/divider/stories/Divider.mdx\",\n      \"mdxProse\": \"# Divider\\n\\nA `Divider` segments and visually organizes content.\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\nUse a `Divider` to separate content and create visual hierarchy. Typically they are used between\\nparagraph sections to indicate a break or shift in content. However, they can also be used as\\ndecorative elements to provide greater emphasis and visual hierarchy.\\n\\n### Basic Example\\n\\nBy default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and\\nbottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the\\n`Divider`s provide a subtle deliniation between each profile card without being as visually\\nprominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and\\nbottom margin.\\n```tsx\\nimport React from 'react';\\nimport {Divider} from '@workday/canvas-kit-preview-react/divider';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Avatar} from '@workday/canvas-kit-react/avatar';\\n\\nconst sectionStyles = createStyles({\\n  display: 'flex',\\n  flexDirection: 'column',\\n  gap: system.space.x4,\\n  maxWidth: '40rem',\\n});\\n\\nexport const Basic = () => {\\n  const lastIndex = maintainerList.length - 1;\\n  return (\\n    <section className={sectionStyles}>\\n      {maintainerList.map((maintainerData, index) => (\\n        <>\\n          <ProfileCard {...maintainerData} />\\n          {index !== lastIndex && <Divider space={system.space.x1} />}\\n        </>\\n      ))}\\n    </section>\\n  );\\n};\\n\\nconst maintainerList = [\\n  {\\n    id: '44883293',\\n    name: 'Josh Bagwell',\\n    bio: 'Software Development Engineer',\\n  },\\n  {\\n    id: '338257',\\n    name: 'Nicholas Boll',\\n    bio: 'Principal Software Development Engineer',\\n  },\\n  {\\n    id: '7966550',\\n    name: 'Manuel Carrera',\\n    bio: 'Sr. Software Development Engineer',\\n  },\\n  {\\n    id: '146020',\\n    name: 'James Fan',\\n    bio: 'Sr. Software Development Engineer',\\n  },\\n  {\\n    id: '48605821',\\n    name: 'Raisa Primerova',\\n    bio: 'Software Development Engineer',\\n  },\\n  {\\n    id: '4818182',\\n    name: 'Alan Smith',\\n    bio: 'Principal Software Development Engineer',\\n  },\\n];\\n\\nconst profileCardStyles = createStyles({\\n  display: 'grid',\\n  gridGap: '0.5rem',\\n  gridTemplateColumns: '5rem 1fr',\\n  gridTemplateRows: '1fr 1fr',\\n});\\n\\nconst profileCardAvatarStyles = createStyles({\\n  gridColumn: '1',\\n  gridRow: '1 / 3',\\n});\\n\\nconst profileCardHeadingStyles = createStyles({\\n  ...system.type.body.large,\\n  fontWeight: system.fontWeight.bold,\\n  gridColumn: '2/3',\\n  gridRow: '1',\\n  margin: 0,\\n});\\n\\nconst profileCardBodyStyles = createStyles({\\n  ...system.type.body.small,\\n  gridColumn: '2',\\n  gridRow: '2',\\n  margin: 0,\\n});\\n\\ninterface ProfileCardProps {\\n  id: string;\\n  name: string;\\n  bio: string;\\n}\\n\\nconst ProfileCard = ({id, name, bio}: ProfileCardProps) => (\\n  <div className={profileCardStyles}>\\n    <Avatar\\n      size=\\\"extraLarge\\\"\\n      url={`https://avatars.githubusercontent.com/u/${id}?v=4`}\\n      altText={`${name}'s avatar`}\\n      className={profileCardAvatarStyles}\\n    />\\n    <h3 className={profileCardHeadingStyles}>{name}</h3>\\n    <p className={profileCardBodyStyles}>{bio}</p>\\n  </div>\\n);\\n```\\n\\n### Custom Space\\n\\nYou might also want to apply custom space to `Divider` where the top and bottom margin are not\\nequal. The best way to achieve this is with `createStyles` and the `cs` property. In the example\\nbelow, the `Divider` is applied as a decorative element to add emphasis to the section heading.\\nCustom styles are defined in the `createStyles` function outside the component and are passed to\\n`Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.\\n```tsx\\nimport React from 'react';\\nimport {Divider} from '@workday/canvas-kit-preview-react/divider';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst headingStyles = createStyles({\\n  ...system.type.body.large,\\n  fontWeight: system.fontWeight.bold,\\n  margin: 0,\\n});\\n\\nconst bodyStyles = createStyles({\\n  ...system.type.body.small,\\n  margin: 0,\\n});\\n\\nconst customDividerSpace = createStyles({\\n  margin: `0 0 ${system.space.x4}`,\\n});\\n\\nexport const CustomSpace = () => {\\n  return (\\n    <section>\\n      <h3 className={headingStyles}>Quote of the Day</h3>\\n      <Divider cs={customDividerSpace} />\\n      <p className={bodyStyles}>\\n        \\\"It is not our differences that divide us. It is our inability to recognize, accept, and\\n        celebrate those differences.\\\" \u2013 Audre Lorde\\n      </p>\\n    </section>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"avatar\": {\n      \"title\": \"Preview/Avatar\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs\",\n      \"mdxPath\": \"modules/preview-react/avatar/stories/Avatar.mdx\",\n      \"mdxProse\": \"# Avatar\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-preview-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nThe most basic usage requires only a `name` prop. The component automatically extracts and displays\\nthe initials. If you want to display a different set of initials, you can use the `preferredInitials` prop.\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\n\\nexport const Basic = () => {\\n  return <Avatar name=\\\"John Doe\\\" />;\\n};\\n```\\n\\n### Image Avatar\\n\\nYou can display a profile image by providing the `url` prop.\\n\\n> Note: The `url` and the `name` prop is required for the image avatar. The `name` is used for the `alt` attribute on the image.\\n\\n#### Image Fallback Behavior\\n\\nThe Avatar component includes intelligent fallback handling:\\n\\n- While the image loads, the user's initials are displayed using the `name` prop\\n- If the image fails to load, initials remain visible\\n- The `name` prop serves as both the alt text and fallback content\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\n\\nexport const Image = () => {\\n  return (\\n    <Avatar\\n      name=\\\"Happy Doggo\\\"\\n      url={'https://picsum.photos/id/237/300/200'}\\n      objectFit=\\\"cover\\\"\\n      size=\\\"medium\\\"\\n    />\\n  );\\n};\\n```\\n\\n### Sizes\\n\\nThe Avatar component supports the following sizes:\\n- `extraExtraSmall` is 24px x 24px\\n- `extraSmall` is 32px x 32px\\n- `small` is 40px x 40px\\n- `medium` is 48px x 48px\\n- `large` is 72px x 72px\\n- `extraLarge` is 96px x 96px\\n- `extraExtraLarge` is 120px x 120px\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const Size = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <Avatar name=\\\"John Doe\\\" size=\\\"extraExtraSmall\\\" />\\n      <Avatar name=\\\"Logan McNeil\\\" size=\\\"extraSmall\\\" />\\n      <Avatar name=\\\"Wonder Woman\\\" size=\\\"small\\\" />\\n      <Avatar name=\\\"Iron Man\\\" size=\\\"medium\\\" />\\n      <Avatar name=\\\"Peter Parker\\\" size=\\\"large\\\" />\\n      <Avatar name=\\\"Bruce Banner\\\" size=\\\"extraLarge\\\" />\\n      <Avatar name=\\\"Elektra\\\" size=\\\"extraExtraLarge\\\" />\\n    </div>\\n  );\\n};\\n```\\n\\n### Variants\\n\\nChoose from four predefined color schemes:\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst containerStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n});\\n\\nexport const Variant = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <Avatar name=\\\"John Doe\\\" variant=\\\"blue\\\" />\\n      <Avatar name=\\\"Logan McNeil\\\" variant=\\\"amber\\\" />\\n      <Avatar name=\\\"Wonder Woman\\\" variant=\\\"teal\\\" />\\n      <Avatar name=\\\"Elektra\\\" variant=\\\"purple\\\" />\\n    </div>\\n  );\\n};\\n```\\n\\n### Advanced Custom Component\\n\\nFor complete control over styling and behavior, use the `BaseAvatar` component:\\n```tsx\\nimport {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {base} from '@workday/canvas-tokens-web';\\n\\nconst customStyles = createStyles({\\n  cursor: 'pointer',\\n  backgroundColor: base.magenta300,\\n  color: base.magenta700,\\n  borderRadius: '50%',\\n  border: 'none',\\n  padding: '0',\\n  margin: '0',\\n  display: 'flex',\\n  alignItems: 'center',\\n  span: {\\n    cursor: 'pointer',\\n  },\\n});\\n\\nexport const Custom = () => {\\n  return (\\n    <BaseAvatar\\n      size={px2rem(56)}\\n      cs={customStyles}\\n      as=\\\"button\\\"\\n      onClick={() => console.log('clicked')}\\n    >\\n      <BaseAvatar.Name name=\\\"John Doe Jane\\\" />\\n    </BaseAvatar>\\n  );\\n};\\n```\\n\\n### Accessibility\\nIf the Avatar is purely decorative, you can set the `isDecorative` prop to `true` to prevent the `name` prop from being forwarded to the `alt` attribute of the image.\\n```tsx\\nimport {Avatar} from '@workday/canvas-kit-preview-react/avatar';\\n// @ts-ignore\\nimport nicholasAvatar from './nicholas-avatar.jpg';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\nconst containerStyles = createStyles({\\n  display: 'inline-flex',\\n  gap: system.space.x2,\\n  alignItems: 'center',\\n});\\nexport const Decorative = () => {\\n  return (\\n    <div className={containerStyles}>\\n      <Avatar\\n        name=\\\"Nicholas Smith\\\"\\n        isDecorative\\n        url={nicholasAvatar}\\n        objectFit=\\\"cover\\\"\\n        size=\\\"small\\\"\\n      />\\n      <Text>Nicholas Smith</Text>\\n    </div>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"side-panel-(new)\": {\n      \"title\": \"Labs/Side Panel (New)\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel-(new)--docs\",\n      \"mdxPath\": \"modules/labs-react/side-panel/stories/SidePanel.mdx\",\n      \"mdxProse\": \"# Canvas Kit Side Panel <StorybookStatusIndicator type=\\\"new\\\" />\\n\\n`SidePanel` is a collapsible container that anchors to the left or right side of the screen. It uses\\nthe model pattern for state management and is fully accessible.\\n\\n[> Workday Design Reference](https://design.workday.com/components/containers/side-panel)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-labs-react\\n```\\n\\n## Migrating from Preview\\n\\nIf you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API\\nchanges:\\n\\n### Import Changes\\n\\n```tsx\\n// Before (preview-react)\\n\\n// After (labs-react)\\n```\\n\\n### Hook API Changes\\n\\n| Preview (`useSidePanel`)         | Labs (`useSidePanelModel`)                              |\\n| -------------------------------- | ------------------------------------------------------- |\\n| `initialExpanded: boolean`       | `initialTransitionState: 'expanded' \\\\| 'collapsed'`     |\\n| `origin: 'left' \\\\| 'right'`      | `origin: 'start' \\\\| 'end'`                              |\\n| Returns `expanded: boolean`      | Returns `model.state.transitionState`                   |\\n| Returns `setExpanded(bool)`      | Use `model.events.expand()` / `model.events.collapse()` |\\n| Returns `panelProps` to spread   | Props applied automatically via `elemPropsHook`         |\\n| Returns `labelProps` to spread   | Use `id={model.state.labelId}` on label element         |\\n| Returns `controlProps` to spread | Props applied automatically to `SidePanel.ToggleButton` |\\n\\n### Component API Changes\\n\\n| Preview                                        | Labs                                              |\\n| ---------------------------------------------- | ------------------------------------------------- |\\n| `<SidePanel {...panelProps}>`                  | `<SidePanel model={model}>` or just `<SidePanel>` |\\n| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />`                      |\\n| `<Heading {...labelProps}>`                    | `<Heading id={model.state.labelId}>`              |\\n| `expanded` prop on SidePanel                   | Managed by model's `transitionState`              |\\n| `touched` prop on SidePanel                    | Managed internally                                |\\n| `onExpandedChange` callback                    | Use `onStateTransition` and derive expanded state |\\n| `onStateTransition` on component               | `onStateTransition` on model config               |\\n\\n### Code Migration Example\\n\\n```tsx\\n// Before (preview-react)\\nconst {expanded, panelProps, labelProps, controlProps} = useSidePanel({\\n  initialExpanded: false,\\n});\\n\\n<SidePanel {...panelProps} origin=\\\"right\\\" onExpandedChange={exp => console.log(exp)}>\\n  <SidePanel.ToggleButton {...controlProps} />\\n  <Heading {...labelProps}>Panel Title</Heading>\\n  {expanded && <Content />}\\n</SidePanel>;\\n\\n// After (labs-react)\\nconst model = useSidePanelModel({\\n  initialTransitionState: 'collapsed',\\n  origin: 'end',\\n  onStateTransition: state => {\\n    const isExpanded = state === 'expanded' || state === 'expanding';\\n    console.log(isExpanded);\\n  },\\n});\\n\\n<SidePanel model={model}>\\n  <SidePanel.ToggleButton />\\n  <Heading id={model.state.labelId}>Panel Title</Heading>\\n  {model.state.transitionState === 'expanded' && <Content />}\\n</SidePanel>;\\n```\\n\\n### Checking Expanded State\\n\\n```tsx\\n// Before (preview-react)\\nif (expanded) {\\n  /* ... */\\n}\\n\\n// After (labs-react) - for exact state\\nif (model.state.transitionState === 'expanded') {\\n  /* ... */\\n}\\n\\n// After (labs-react) - including animation states\\nconst isExpanded =\\n  model.state.transitionState === 'expanded' || model.state.transitionState === 'expanding';\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\n`SidePanel` is composed of three parts:\\n\\n- The panel container (with an optional `model` prop)\\n- A heading (`SidePanel.Heading`) for the panel that is visually hidden when the panel is collapsed\\n- A toggle button (`SidePanel.ToggleButton`) to control the expand / collapse states\\n\\nBidirectional support is built into `SidePanel`. As seen in the example below, CSS Flexbox flips the\\npage layout and the panel's contents. `SidePanel` also has logic to flip the position and direction\\nof the `ToggleButton` as well as the direction of the expand / collapse animation. If you're using\\nCSS Flexbox for layouts and using the provided components, you shouldn't have to provide any custom\\nlogic or styling for bidirectional support.\\n```tsx\\nimport * as React from 'react';\\n\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {AccentIcon} from '@workday/canvas-kit-react/icon';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {rocketIcon} from '@workday/canvas-accent-icons-web';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst flexHeadingStyles = createStyles({\\n  alignItems: 'center',\\n  gap: system.space.x2,\\n});\\n\\nconst viewPortStyles = createStyles({\\n  height: px2rem(320),\\n});\\n\\nexport const Basic = () => {\\n  const model = useSidePanelModel();\\n\\n  return (\\n    <Flex cs={viewPortStyles}>\\n      <SidePanel model={model}>\\n        <SidePanel.Heading size=\\\"small\\\">\\n          <Flex cs={flexHeadingStyles}>\\n            <AccentIcon icon={rocketIcon} />\\n            Tasks Panel\\n          </Flex>\\n        </SidePanel.Heading>\\n        <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n      </SidePanel>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Hidden Name\\n\\n`SidePanel`'s `<section>` element container should always have an accessible name to help screen\\nreader users understand the purpose of the panel. For this reason, we recommend using the\\n`SidePanel.Heading` component and setting the `hidden` prop to `true`. This will visually hide the\\nheading while keeping it accessible to screen readers.\\n```tsx\\nimport * as React from 'react';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nexport const Heading = () => {\\n  const model = useSidePanelModel({\\n    onStateTransition: state => {\\n      console.log(`state is: ${state}`);\\n    },\\n  });\\n\\n  return (\\n    <Flex cs={stylesOverride.viewport}>\\n      <SidePanel model={model}>\\n        <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n        <SidePanel.Heading hidden size=\\\"small\\\">\\n          Tasks Panel\\n        </SidePanel.Heading>\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          Side Panel with a hidden title text.\\n        </Text>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Alternate Variant\\n\\n`SidePanel` has one variant, `alternate`, which you can supply as a top-level prop. Default depth of\\n`alternate` variant is 5, if `alternate` SidePanel has an overlay behavior the depth 6 should be\\nused (this case is covered in the Examples section).\\n\\n### External Control\\n\\nSometimes you'll want to control `SidePanel`'s expand / collapse behavior from outside the\\ncomponent. You can use the model's events (`model.events.expand()` and `model.events.collapse()`) to\\nprogrammatically control the panel.\\n\\n#### Notes about accessibility\\n\\nWhen using external controls, be mindful of accessibility:\\n\\n- Use `aria-pressed` on toggle buttons to indicate the current state\\n- The `SidePanel.ToggleButton` inside the panel automatically receives the correct ARIA attributes\\n- External buttons should have their own accessible labels (don't rely on `aria-labelledby` pointing\\n  to the panel's label)\\n\\nIn the following example, we use the model's `transitionState` to determine the button's pressed\\nstate and call `model.events.expand()` or `model.events.collapse()` on click.\\n```tsx\\nimport * as React from 'react';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  panel: createStyles({\\n    alignItems: 'center',\\n    padding: system.space.x4,\\n  }),\\n  panelHeading: createStyles({\\n    color: system.color.fg.muted.stronger,\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nexport const ExternalControl = () => {\\n  const model = useSidePanelModel({\\n    initialTransitionState: 'collapsed',\\n    labelId: 'tasks-panel-label',\\n  });\\n\\n  return (\\n    <Flex cs={stylesOverride.viewport}>\\n      <SidePanel model={model}>\\n        <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n        <SidePanel.Heading size=\\\"small\\\" cs={stylesOverride.panelHeading}>\\n          Task Panel\\n        </SidePanel.Heading>\\n        {model.state.transitionState === 'expanded' && (\\n          <Flex cs={stylesOverride.panel}>Contents</Flex>\\n        )}\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          Control the panel externally\\n        </Text>\\n        <SecondaryButton\\n          onClick={\\n            model.state.transitionState === 'expanded' ? model.events.collapse : model.events.expand\\n          }\\n          aria-pressed={model.state.transitionState === 'expanded'}\\n        >\\n          {model.state.transitionState === 'expanded' ? 'Hide Side Panel' : 'Show Side Panel'}\\n        </SecondaryButton>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Right Origin\\n\\nBy default, `SidePanel` uses a `start` origin (left in LTR, right in RTL). This sets the\\n`ToggleButton`'s position and direction as well as the direction of the animation. You can set the\\norigin to `\\\"end\\\"` to flip these. The origin uses logical properties (`start`/`end`) for proper\\nbidirectional support.\\n```tsx\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\n// local helper hook for setting content direction;\\nimport {useDirection} from './useDirection';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  panelContainer: createStyles({\\n    marginInlineStart: 'auto',\\n  }),\\n  panel: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'flex-end',\\n    padding: system.space.x4,\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nconst RightPanel = () => {\\n  const model = useSidePanelModel({\\n    origin: 'end',\\n  });\\n\\n  return (\\n    <SidePanel model={model} className={stylesOverride.panelContainer}>\\n      <SidePanel.ToggleButton aria-label=\\\"Collapse View\\\" />\\n      <Flex cs={stylesOverride.panel}>\\n        <SidePanel.Heading size=\\\"small\\\">Tasks Panel</SidePanel.Heading>\\n      </Flex>\\n    </SidePanel>\\n  );\\n};\\n\\nexport const RightOrigin = () => {\\n  const {direction, toggleDirection} = useDirection();\\n\\n  return (\\n    <CanvasProvider dir={direction}>\\n      <Flex cs={stylesOverride.viewport}>\\n        <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n          <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n            Toggle the content direction\\n          </Text>\\n          <SecondaryButton onClick={toggleDirection}>\\n            Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}\\n          </SecondaryButton>\\n        </Flex>\\n\\n        <RightPanel />\\n      </Flex>\\n    </CanvasProvider>\\n  );\\n};\\n```\\n\\n### Always Open\\n\\nIf you do not need `SidePanel`'s expand / collapse behavior, you can simply omit the `ToggleButton`.\\n```tsx\\nimport {AccentIcon} from '@workday/canvas-kit-react/icon';\\nimport {rocketIcon} from '@workday/canvas-accent-icons-web';\\nimport {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst stylesOverride = {\\n  accentIcon: createStyles({\\n    marginRight: system.space.x4,\\n  }),\\n  pageContainer: createStyles({\\n    gap: system.space.x4,\\n    height: px2rem(320),\\n  }),\\n  panelContainer: createStyles({\\n    alignItems: 'center',\\n    padding: system.space.x4,\\n  }),\\n  panelHeading: createStyles({\\n    color: system.color.fg.default,\\n  }),\\n  mainContent: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexBasis: 'auto',\\n    flex: 1,\\n  }),\\n};\\n\\nexport const AlwaysOpen = () => {\\n  const model = useSidePanelModel();\\n\\n  return (\\n    <Flex cs={stylesOverride.pageContainer}>\\n      <SidePanel model={model}>\\n        <Flex cs={stylesOverride.panelContainer}>\\n          <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />\\n          <SidePanel.Heading size=\\\"small\\\" cs={stylesOverride.panelHeading}>\\n            Tasks Panel\\n          </SidePanel.Heading>\\n        </Flex>\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.mainContent}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          This is the main content section.\\n        </Text>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Deriving Expanded State\\n\\nIf you need a simple boolean `expanded` state (similar to the preview-react `onExpandedChange`\\ncallback), you can derive it from the `transitionState` using the `onStateTransition` callback on\\nthe model.\\n\\n### onStateTransition\\n\\nThe `onStateTransition` callback is called whenever the panel's transition state changes. This\\nincludes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass this\\ncallback directly to the `SidePanel` component or to the `useSidePanelModel` hook.\\n\\nThe transition flow is:\\n\\n1. **Collapsing**: `expanded` \u2192 `collapsing` \u2192 `collapsed`\\n2. **Expanding**: `collapsed` \u2192 `expanding` \u2192 `expanded`\\n\\nThis is useful for:\\n\\n- Triggering side effects when the panel state changes\\n- Syncing the panel state with external state management\\n- Animating child components based on the transition state\\n```tsx\\nimport * as React from 'react';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  SidePanel,\\n  useSidePanelModel,\\n  SidePanelTransitionStates,\\n} from '@workday/canvas-kit-labs-react/side-panel';\\nimport {Text} from '@workday/canvas-kit-react/text';\\nimport {AccessibleHide} from '@workday/canvas-kit-react/common';\\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\\n\\nconst stylesOverride = {\\n  viewport: createStyles({\\n    height: px2rem(320),\\n  }),\\n  main: createStyles({\\n    alignItems: 'center',\\n    justifyContent: 'center',\\n    flexDirection: 'column',\\n    flex: 1,\\n    flexBasis: 'auto',\\n  }),\\n};\\n\\nexport const OnStateTransition = () => {\\n  const [transitionState, setTransitionState] =\\n    React.useState<SidePanelTransitionStates>('expanded');\\n\\n  const model = useSidePanelModel({\\n    onStateTransition: state => {\\n      setTransitionState(state);\\n      console.log('Expanded changed to:', state);\\n    },\\n  });\\n\\n  return (\\n    <Flex cs={stylesOverride.viewport}>\\n      <SidePanel model={model}>\\n        <SidePanel.ToggleButton />\\n        <SidePanel.Heading hidden size=\\\"small\\\">\\n          Hidden Title\\n        </SidePanel.Heading>\\n      </SidePanel>\\n      <Flex as=\\\"main\\\" cs={stylesOverride.main}>\\n        <Text as=\\\"p\\\" typeLevel=\\\"body.large\\\">\\n          Side panel is {transitionState}.\\n        </Text>\\n      </Flex>\\n    </Flex>\\n  );\\n};\\n```\\n\\n### Accessibility\\n\\n`SidePanel` renders a `<section>` element with an accessible name provided by `aria-labelledby`,\\nwhich references the `SidePanel.Heading` component. This ensures screen reader users understand the\\npurpose of the panel.\\n\\n#### Panel and Heading\\n\\n- The `SidePanel.Heading` provides the accessible name for the panel via `aria-labelledby`\\n- When the panel is collapsed, the heading is automatically hidden visually but remains accessible\\n  to screen readers\\n- Use the `hidden` prop on `SidePanel.Heading` if you want the heading always visually hidden\\n\\n#### Toggle Button\\n\\n- `SidePanel.ToggleButton` automatically includes `aria-controls` (references the panel's `id`),\\n  `aria-pressed` (indicates current state), and `aria-describedby` (references the panel's heading)\\n- Developers must provide a static `aria-label` string on `SidePanel.ToggleButton` to describe the\\n  button's purpose (e.g., \\\"Collapse View\\\"). Avoid using ambiguous terms like \\\"Toggle\\\" in the label.\\n  Since `aria-pressed` communicates the state, avoid dynamically updating `aria-label`\\n- The button includes a Tooltip with customizable text via `tooltipTextExpand` and\\n  `tooltipTextCollapse` props (defaults: \\\"Expand View\\\" and \\\"Collapse View\\\")\\n- For optimal keyboard navigation, place `SidePanel.ToggleButton` as the first focusable element in\\n  the panel\\n\\n## Component API\\n\\n## Hooks\\n\\n### useSidePanelModel\\n\\nThe `useSidePanelModel` hook creates a model for managing the SidePanel's state and events. You can\\npass this model to the `SidePanel` component, or let the component create one internally.\\n\\n```tsx\\n\\n// Create a model with custom configuration\\nconst model = useSidePanelModel({\\n  initialTransitionState: 'collapsed',\\n  origin: 'end',\\n  onStateTransition: state => console.log('State:', state),\\n});\\n\\n// Access state\\nmodel.state.transitionState; // 'expanded' | 'expanding' | 'collapsed' | 'collapsing'\\nmodel.state.panelId; // unique ID for the panel\\nmodel.state.labelId; // unique ID for the label\\n\\n// Trigger events\\nmodel.events.expand(); // Set to expanded (no animation)\\nmodel.events.collapse(); // Set to collapsed (no animation)\\nmodel.events.handleAnimationStart(); // Start expand/collapse animation\\n```\\n\\n### useSidePanelContainer\\n\\nThe `useSidePanelContainer` elemProps hook provides the necessary props for the SidePanel container\\nelement, including `id`, `aria-labelledby`, and `onTransitionEnd`.\\n\\n### useSidePanelToggleButtonElemProps\\n\\nThe `useSidePanelToggleButtonElemProps` elemProps hook provides ARIA attributes for the toggle\\nbutton, including `aria-controls`, `aria-expanded`, and `aria-labelledby`.\\n\\n## Specifications\\n\\n\"\n    },\n    \"ai-ingress-button-(ai)\": {\n      \"title\": \"Labs/AI Ingress Button (AI)\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/labs-ai-ingress-button-(ai)--docs\",\n      \"mdxPath\": \"modules/labs-react/ai-ingress-button/stories/AIIngressButton.mdx\",\n      \"mdxProse\": \"# AI Ingress Button\\n\\nCTA to open and close AI Ingress Button\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-labs-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nYou can click to toggle the AI Ingress Button.\\n```tsx\\nimport {useState} from 'react';\\n\\nimport {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';\\n\\nexport const Basic = () => {\\n  const [toggled, setToggled] = useState(false);\\n  return (\\n    <div>\\n      <AIIngressButton\\n        aria-label={toggled ? 'Hide AI Ingress' : 'Show AI Ingress'}\\n        onClick={() => setToggled(!toggled)}\\n        toggled={toggled}\\n      />\\n    </div>\\n  );\\n};\\n```\\n\\n### Inverse Example\\n\\nThe Button can also be used on dark backgrounds.\\n```tsx\\nimport {useState} from 'react';\\n\\nimport {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst darkBackground = createStyles({\\n  background: system.color.bg.contrast.strong,\\n  padding: system.space.x8,\\n});\\n\\nexport const Inverse = () => {\\n  const [toggled, setToggled] = useState(false);\\n  return (\\n    <div className={darkBackground}>\\n      <AIIngressButton\\n        variant=\\\"inverse\\\"\\n        onClick={() => setToggled(!toggled)}\\n        aria-label={toggled ? 'Hide Ingress' : 'Show Ingress'}\\n        toggled={toggled}\\n      />\\n    </div>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n\"\n    },\n    \"color-preview\": {\n      \"title\": \"Components/Inputs/Color Picker/Color Preview\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-color-picker-color-preview--docs\",\n      \"mdxPath\": \"modules/react/color-picker/stories/color-preview/ColorPreview.mdx\",\n      \"mdxProse\": \"# Canvas Kit Color Preview\\n\\nColor Preview displays a color swatch.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/color-input)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n```tsx\\nimport {ColorPreview} from '@workday/canvas-kit-react/color-picker';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\n\\nexport const Basic = () => {\\n  return (\\n    <FormField>\\n      <FormField.Label>Current Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorPreview} value=\\\"#00ffcc\\\" />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nColor Preview supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\\nforward `ref` to its underlying `<input type=\\\"text\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorPreview} from '@workday/canvas-kit-react/color-picker';\\nimport {type} from '@workday/canvas-kit-react/tokens';\\n\\nexport const RefForwarding = () => {\\n  const [width, setWidth] = React.useState(null);\\n  const ref = React.useRef(null);\\n\\n  const handleClick = () => {\\n    setWidth(ref.current.offsetWidth);\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Background Color</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={ColorPreview} ref={ref} value=\\\"#00ffcc\\\" />\\n        </FormField.Field>\\n      </FormField>\\n      <p style={type.levels.subtext.large}>Width of Color Preview: {width}</p>\\n      <PrimaryButton onClick={handleClick}>Calculate Width of Color Preview</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorPreview} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const LabelPosition = () => {\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorPreview} value=\\\"#00ffcc\\\" />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"color-input\": {\n      \"title\": \"Components/Inputs/Color Picker/Color Input\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-inputs-color-picker-color-input--docs\",\n      \"mdxPath\": \"modules/react/color-picker/stories/color-input/ColorInput.mdx\",\n      \"mdxProse\": \"# Canvas Kit Color Input\\n\\nColor Input lets a user specify a color by entering a hexadecimal value into a text field.\\n\\n[> Workday Design Reference](https://design.workday.com/components/inputs/color-input)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Basic Example\\n\\nColor Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet\\naccessibility standards.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Basic = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Disabled\\n\\nSet the `disabled` prop of the Color Input to prevent users from interacting with it.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Disabled = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} disabled onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Checked\\n\\nSet the `showCheck` prop of the Color Input to display a check icon in the swatch.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Checked = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} showCheck={true} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Ref Forwarding\\n\\nColor Input supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will\\nforward `ref` to its underlying `<input type=\\\"text\\\">` element.\\n```tsx\\nimport React from 'react';\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const RefForwarding = () => {\\n  const [value, setValue] = React.useState('');\\n  const ref = React.useRef(null);\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleClick = () => {\\n    ref.current.focus();\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Background Color</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input as={ColorInput} onChange={handleChange} ref={ref} value={value} />\\n        </FormField.Field>\\n      </FormField>\\n      <PrimaryButton onClick={handleClick}>Focus Color Input</PrimaryButton>\\n    </>\\n  );\\n};\\n```\\n\\n### Valid Color Change Callback\\n\\nSet the `onValidColorChange` prop of the Color Input to set a callback for when a valid hex color is\\nprovided.\\n\\nThe color passed to the callback will be prefixed with a hash and expanded if necessary. For\\nexample, `03F` would be converted to `#0033FF`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\nimport {type} from '@workday/canvas-kit-react/tokens';\\n\\nexport const ValidColorChange = () => {\\n  const [value, setValue] = React.useState('');\\n  const [validColor, setValidColor] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  const handleValidColorChange = (color: string) => {\\n    setValidColor(color);\\n  };\\n\\n  return (\\n    <>\\n      <FormField>\\n        <FormField.Label>Background Color</FormField.Label>\\n        <FormField.Field>\\n          <FormField.Input\\n            as={ColorInput}\\n            onChange={handleChange}\\n            onValidColorChange={handleValidColorChange}\\n            value={value}\\n          />\\n        </FormField.Field>\\n      </FormField>\\n      <p style={type.levels.subtext.large}>Last valid color: {validColor}</p>\\n    </>\\n  );\\n};\\n```\\n\\n### Grow\\n\\nSet the `grow` prop of the wrapping Form Field to `true` to configure the Color Input to expand to\\nthe width of its container.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Grow = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField cs={{width: '100%'}}>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input\\n          cs={{width: '100%'}}\\n          as={ColorInput}\\n          onChange={handleChange}\\n          value={value}\\n        />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\nThe `grow` prop may also be applied directly to the Color Input if Form Field is not being used.\\n\\n### Label Position Horizontal\\n\\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\\ninput component. By default, the orientation will be set to `vertical`.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const LabelPosition = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField orientation=\\\"horizontalStart\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Required\\n\\nSet the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.\\nLabels for required fields are suffixed by a red asterisk.\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Required = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField isRequired={true}>\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n### Error States\\n\\nSet the `error` prop of the wrapping Form Field to `\\\"caution\\\"` or\\n`\\\"error\\\"` to set the Color Input to the Caution or Error state, respectively. You\\nwill also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility\\nstandards.\\n\\n#### Caution\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Caution = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField error=\\\"caution\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n        <FormField.Hint>Please select a background color.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n#### Error\\n```tsx\\nimport React from 'react';\\nimport {FormField} from '@workday/canvas-kit-react/form-field';\\nimport {ColorInput} from '@workday/canvas-kit-react/color-picker';\\n\\nexport const Error = () => {\\n  const [value, setValue] = React.useState('');\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    <FormField error=\\\"error\\\">\\n      <FormField.Label>Background Color</FormField.Label>\\n      <FormField.Field>\\n        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />\\n        <FormField.Hint>Please select a background color.</FormField.Hint>\\n      </FormField.Field>\\n    </FormField>\\n  );\\n};\\n```\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"hyperlink\": {\n      \"title\": \"Components/Hyperlink\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs\",\n      \"mdxPath\": \"modules/react/button/stories/button/Hyperlink.mdx\",\n      \"mdxProse\": \"# Canvas Kit Hyperlinks\\n\\nClickable anchor elements that extend the native `<a>` element with Canvas styling.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### Hyperlink\\n\\n`Hyperlink`s should be used when you want to navigate away from the current page or to an anchor on\\nthe current page. By default, `Hyperlink`s have an underline for accessibility.\\n\\n#### Inverse\\n\\n`Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink`\\non a dark or colorful background.\\n\\n#### Standalone\\n\\n`Hyperlink`s also have a `standalone` variant. Use this variant when you need to place a `Hyperlink`\\noutside of a paragraph or body text. This will remove the underline.\\n\\nThis variant can also be used with the `ExternalHyperlink` component.\\n\\n#### In Body Text\\n\\nIn most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence where you need to\\nlink to another page or part of the document. By default they will wrap to a new line.\\n\\n> **Accessibility Note:** Underlining links is not required in most cases. However, the example\\n> above is one such exception. When hyperlinked text appears inline with static text, a text\\n> decoration is required to avoid failing WCAG v2.2 success criterion 1.4.1 Use of Color.\\n>\\n> [Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73)\\n\\n### Accessibility\\n\\nOur link components render semantic HTML `<a>` elements to the browser DOM. This means that ARIA\\nroles won't be necessary in most cases. The `href` prop is required for accessibility. Activation\\nlinks with the Enter key is standard expected behavior, while Space is only expected for buttons.\\n\\n#### When to Use Links vs Buttons\\n\\n- **Use Hyperlinks when:** Navigating to different pages or sections, or changing the browser's\\n  location\\n- **Use Buttons when:** Performing actions like submitting forms, opening modals, or triggering\\n  functions without navigation\\n- **Why This Matters:** Screen reader users expect different behaviors from links vs buttons. Users\\n  navigate between links using different keyboard shortcuts than buttons. Browser behaviors like\\n  \\\"Open in new tab\\\" only work with proper links.\\n\\n#### Common Mistakes to Avoid\\n\\n- Using buttons styled as links for navigation (breaks right-click context menus)\\n- Using links for actions like \\\"Delete\\\" or \\\"Save\\\" (confuses user expectations)\\n- Missing `href` attributes on navigation elements (breaks keyboard accessibility)\\n- Using `href=\\\"#\\\"` with `onClick` handlers instead of proper buttons\\n\\n### Component API\\n\\n### ExternalHyperlink\\n\\nIf your link should open in a new tab or window use the `ExternalHyperlink` component. It will let\\nusers know about the behavior by adding an icon, `extLinkIcon`.\\n\\n> **Accessibility Note:** Providing a label to the icon via the `iconLabel` prop is required for\\n> accessibility because the icon adds meaning to the link text. We recommend keeping the alt text as\\n> concise as possible, such as \\\"Opens new window\\\". This override will be needed for translations.\\n\\n`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the\\nlink on a dark or colorful background.\\n\\n`ExternalHyperlink`s will also flip the icon for right-to-left (RTL) languages.\\n\\n### Component API\\n\\n## Specifications\\n\\n\"\n    },\n    \"buttons\": {\n      \"title\": \"Components/Buttons\",\n      \"storybookUrl\": \"https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs\",\n      \"mdxPath\": \"modules/react/button/stories/button/Button.mdx\",\n      \"mdxProse\": \"# Canvas Kit Button\\n\\nClickable button elements that extend the native `<button>` element with Canvas styling.\\n\\n[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)\\n\\n## Installation\\n\\n```sh\\nyarn add @workday/canvas-kit-react\\n```\\n\\n## Usage\\n\\n### PrimaryButton\\n\\nThe example below shows multiple instances of a `PrimaryButton` with various icon configurations.\\n```tsx\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Primary = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <PrimaryButton>Primary</PrimaryButton>\\n    <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n      Primary\\n    </PrimaryButton>\\n    <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n      Primary\\n    </PrimaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <PrimaryButton icon={relatedActionsVerticalIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\nPrimary Buttons also have an `inverse` variant. While it looks similar to the default Secondary\\nButton, the default outline as well as the hover and focus states are different. Use this variant\\nwhen you need to place a Primary Button on a dark or colorful background such as `blueberry400`.\\n```tsx\\nimport React from 'react';\\n\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  backgroundColor: system.color.bg.primary.default,\\n  padding: system.space.x4,\\n});\\n\\nexport const PrimaryInverse = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <PrimaryButton variant=\\\"inverse\\\">Primary</PrimaryButton>\\n    <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\" variant=\\\"inverse\\\">\\n      Primary\\n    </PrimaryButton>\\n    <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\" variant=\\\"inverse\\\">\\n      Primary\\n    </PrimaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <PrimaryButton icon={relatedActionsVerticalIcon} variant=\\\"inverse\\\" />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### SecondaryButton\\n\\nThe example below shows multiple instances of a `SecondaryButton` with various icon configurations.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Secondary = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <SecondaryButton>Secondary</SecondaryButton>\\n    <SecondaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <SecondaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <SecondaryButton icon={relatedActionsVerticalIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\nSecondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button\\non a dark or colorful background such as `blueberry400`.\\n```tsx\\nimport React from 'react';\\n\\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n  backgroundColor: system.color.bg.primary.default,\\n});\\n\\nexport const SecondaryInverse = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <SecondaryButton variant=\\\"inverse\\\">Secondary</SecondaryButton>\\n    <SecondaryButton icon={plusIcon} variant=\\\"inverse\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <SecondaryButton icon={caretDownIcon} variant=\\\"inverse\\\" iconPosition=\\\"end\\\">\\n      Secondary\\n    </SecondaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <SecondaryButton icon={relatedActionsVerticalIcon} variant=\\\"inverse\\\" />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### TertiaryButton\\n\\nThe example below shows multiple instances of a `TertiaryButton` with various icon configurations.\\n```tsx\\nimport React from 'react';\\n\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Tertiary = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <TertiaryButton>Tertiary</TertiaryButton>\\n    <TertiaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <TertiaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <TertiaryButton icon={relatedActionsVerticalIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\nTertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button\\non a dark or colorful background such as `blueberry400`.\\n```tsx\\nimport React from 'react';\\n\\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n  backgroundColor: system.color.bg.primary.default,\\n});\\n\\nexport const TertiaryInverse = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <TertiaryButton variant=\\\"inverse\\\">Tertiary</TertiaryButton>\\n    <TertiaryButton icon={plusIcon} iconPosition=\\\"start\\\" variant=\\\"inverse\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <TertiaryButton icon={caretDownIcon} iconPosition=\\\"end\\\" variant=\\\"inverse\\\">\\n      Tertiary\\n    </TertiaryButton>\\n    <Tooltip title=\\\"Related Actions\\\">\\n      <TertiaryButton icon={relatedActionsVerticalIcon} variant=\\\"inverse\\\" />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### DeleteButton\\n```tsx\\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {trashIcon} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nexport const Delete = () => (\\n  <Flex cs={parentContainerStyles}>\\n    <DeleteButton>Delete</DeleteButton>\\n    <DeleteButton icon={trashIcon} iconPosition=\\\"start\\\">\\n      Delete\\n    </DeleteButton>\\n    <DeleteButton icon={trashIcon} iconPosition=\\\"end\\\">\\n      Delete\\n    </DeleteButton>\\n    <Tooltip title=\\\"Delete\\\">\\n      <DeleteButton icon={trashIcon} />\\n    </Tooltip>\\n  </Flex>\\n);\\n```\\n\\n### Grow Prop\\n\\nThe example below shows the use of the `grow` prop on different variants of buttons. This will set\\nthe width of the button to the width of its container.\\n```tsx\\nimport React from 'react';\\n\\nimport {\\n  DeleteButton,\\n  PrimaryButton,\\n  SecondaryButton,\\n  TertiaryButton,\\n} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\n\\nexport const Grow = () => (\\n  <Flex gap=\\\"s\\\" padding=\\\"s\\\" flexDirection=\\\"column\\\" maxWidth={300}>\\n    <PrimaryButton size=\\\"small\\\" grow={true}>\\n      Primary\\n    </PrimaryButton>\\n    <SecondaryButton size=\\\"small\\\" grow={true}>\\n      Secondary\\n    </SecondaryButton>\\n    <TertiaryButton size=\\\"small\\\" grow={true}>\\n      Tertiary\\n    </TertiaryButton>\\n    <DeleteButton size=\\\"small\\\" grow={true}>\\n      Delete\\n    </DeleteButton>\\n  </Flex>\\n);\\n```\\n\\n### Custom Styles\\n\\nAll of our buttons support custom styling via the `cs` prop. For more information, check our\\n[\\\"How To Customize Styles\\\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)\\nor view the example below.\\n```tsx\\nimport {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';\\nimport {Grid} from '@workday/canvas-kit-react/layout';\\nimport {plusIcon} from '@workday/canvas-system-icons-web';\\nimport {createComponent} from '@workday/canvas-kit-react/common';\\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\\nimport {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';\\nimport {system} from '@workday/canvas-tokens-web';\\n\\nconst customContainer = createStyles({\\n  gap: system.space.x4,\\n  maxWidth: 'max-content',\\n});\\n\\nconst myButtonStencil = createStencil({\\n  base: {\\n    [buttonStencil.vars.background]: system.color.static.green.soft,\\n    [buttonStencil.vars.label]: system.color.static.green.strong,\\n    [systemIconStencil.vars.color]: system.color.static.green.strong,\\n    [buttonStencil.vars.borderRadius]: system.shape.half,\\n    border: `${px2rem(3)} solid transparent`,\\n    '&:focus-visible': {\\n      [buttonStencil.vars.background]: system.color.static.green.strong,\\n      [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,\\n      [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,\\n      [systemIconStencil.vars.color]: system.color.icon.inverse,\\n    },\\n    '&:hover': {\\n      [buttonStencil.vars.background]: system.color.static.green.default,\\n      border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,\\n      [systemIconStencil.vars.color]: system.color.static.green.strong,\\n      [systemIconStencil.vars.color]: system.color.icon.inverse,\\n    },\\n    '&:active': {\\n      [buttonStencil.vars.background]: system.color.static.green.strong,\\n      [buttonStencil.vars.label]: system.color.fg.inverse,\\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\\n    },\\n  },\\n});\\n\\nconst MyCustomButton = createComponent('button')({\\n  Component: ({children, cs, ...elemProps}: PrimaryButtonProps, ref, Element) => (\\n    <PrimaryButton as={Element} ref={ref} cs={[myButtonStencil(), cs]} {...elemProps}>\\n      {children}\\n    </PrimaryButton>\\n  ),\\n});\\n\\nconst myCustomStyles = createStyles({\\n  padding: system.space.x4,\\n  textTransform: 'uppercase',\\n  [buttonStencil.vars.background]: system.color.static.gray.soft,\\n  [buttonStencil.vars.label]: system.color.static.gray.strong,\\n  [systemIconStencil.vars.color]: system.color.static.gray.strong,\\n  [buttonStencil.vars.borderRadius]: system.shape.x2,\\n  [buttonStencil.vars.border]: system.color.static.gray.stronger,\\n  '&:focus-visible': {\\n    [buttonStencil.vars.background]: system.color.static.gray.strong,\\n    [buttonStencil.vars.boxShadowInner]: system.color.static.gray.soft,\\n    [buttonStencil.vars.boxShadowOuter]: system.color.static.gray.strong,\\n    [systemIconStencil.vars.color]: system.color.icon.inverse,\\n  },\\n  '&:hover': {\\n    [buttonStencil.vars.background]: system.color.static.gray.default,\\n    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,\\n    [systemIconStencil.vars.color]: system.color.static.gray.strong,\\n    [systemIconStencil.vars.color]: system.color.icon.inverse,\\n    border: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,\\n  },\\n  '&:active': {\\n    [buttonStencil.vars.background]: system.color.static.gray.strong,\\n    [buttonStencil.vars.label]: system.color.fg.inverse,\\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\\n  },\\n});\\n\\nconst customColors = {\\n  default: {\\n    background: system.color.static.amber.soft,\\n    icon: system.color.static.amber.strong,\\n    label: system.color.static.amber.strong,\\n  },\\n  focus: {\\n    background: system.color.static.amber.strong,\\n    boxShadowInner: system.color.static.amber.soft,\\n    boxShadowOuter: system.color.static.amber.strong,\\n  },\\n  hover: {\\n    background: system.color.static.amber.default,\\n    icon: system.color.icon.inverse,\\n  },\\n  active: {\\n    background: system.color.static.amber.strong,\\n  },\\n  disabled: {},\\n};\\n\\nexport const CustomStyles = () => (\\n  <Grid cs={customContainer}>\\n    <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>\\n    <MyCustomButton icon={plusIcon} cs={myCustomStyles}>\\n      Style Override Via Create Styles\\n    </MyCustomButton>\\n    <PrimaryButton icon={plusIcon} colors={customColors}>\\n      Styling Override Via Colors Prop\\n    </PrimaryButton>\\n  </Grid>\\n);\\n```\\n\\n### Theme Overrides\\n\\nThe most common way to theme our buttons is to pass a `theme` object at the root level of the\\napplication via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`\\ntokens with the fallback being `brand.primary.**`.\\n\\n> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all\\n> `PrimaryButton` theme colors set at the `CanvasProvider` level.\\n\\n> **Note:** You should **not** individually theme components wrapping them with the\\n> `CanvasProvider`, but rather theme at the root level of the application.\\n```tsx\\nimport React from 'react';\\n\\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\\nimport {Flex} from '@workday/canvas-kit-react/layout';\\nimport {\\n  plusIcon,\\n  relatedActionsVerticalIcon,\\n  caretDownIcon,\\n} from '@workday/canvas-system-icons-web';\\nimport {createStyles} from '@workday/canvas-kit-styling';\\nimport {brand, system} from '@workday/canvas-tokens-web';\\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\\nimport {Heading} from '@workday/canvas-kit-react/text';\\n\\nconst parentContainerStyles = createStyles({\\n  gap: system.space.x4,\\n  padding: system.space.x4,\\n});\\n\\nconst customActionTheme = createStyles({\\n  [brand.action.base]: 'teal',\\n  [brand.action.accent]: 'white',\\n  [brand.action.dark]: 'hsla(180, 100%, 20%)',\\n  [brand.action.darkest]: 'hsla(180, 100%, 16%)',\\n});\\n\\nexport const ThemeOverrides = () => (\\n  <div>\\n    <Heading size=\\\"medium\\\" as=\\\"h3\\\">\\n      Override Primary Color Via Canvas Provider\\n    </Heading>\\n    <CanvasProvider\\n      theme={{\\n        canvas: {\\n          palette: {\\n            primary: {\\n              main: 'navy',\\n            },\\n          },\\n        },\\n      }}\\n    >\\n      <Flex cs={parentContainerStyles}>\\n        <PrimaryButton>Primary</PrimaryButton>\\n        <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton aria-label=\\\"Related Actions\\\" icon={relatedActionsVerticalIcon} />\\n      </Flex>\\n    </CanvasProvider>\\n    <Heading size=\\\"medium\\\" as=\\\"h3\\\">\\n      Override Action Color Via CSS Action Token\\n    </Heading>\\n    <div className={customActionTheme}>\\n      <Flex cs={parentContainerStyles}>\\n        <PrimaryButton>Primary</PrimaryButton>\\n        <PrimaryButton icon={plusIcon} iconPosition=\\\"start\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton icon={caretDownIcon} iconPosition=\\\"end\\\">\\n          Primary\\n        </PrimaryButton>\\n        <PrimaryButton aria-label=\\\"Related Actions\\\" icon={relatedActionsVerticalIcon} />\\n      </Flex>\\n    </div>\\n  </div>\\n);\\n```\\n\\n## Accessibility\\n\\nOur button components render semantic HTML `<button>` elements to the browser DOM. This means that\\nARIA roles won't be necessary in most cases, and `onClick` listeners will automatically support the\\nEnter and Space keys for keyboard interactions.\\n\\n[Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)\\n\\n- An `aria-label` is only necessary for icon-only buttons in most cases. Using\\n  [Canvas Kit's tooltip component](/components/popups/tooltip/) will handle this for you, and all\\n  users will be able to see the label for the button.\\n- When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required\\n  for screen reader support. For example, see Canvas Kit's\\n  [Segmented Control component](/components/buttons/segmented-control/).\\n- When buttons have an attached menu, an `aria-haspopup=\\\"true\\\"` property is required. Using\\n  [Canvas Kit's Menu component](/components/popups/menu/) will handle this for you.\\n- The icons used in text buttons are decorative in most cases and include ARIA `role=\\\"presentation\\\"`\\n  and `focusable=\\\"false\\\"`. In some special cases where an icon does add meaning, you may be required\\n  to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.\\n\\n### Disabled Buttons\\n\\n- Disabled buttons use the `disabled` attribute, removing them from the tab order.\\n- Disabled styling is exempt from WCAG contrast requirements.\\n\\n### Screen Reader Experience\\n\\n- Button text content is announced along with the button role (e.g., \\\"Primary, button\\\").\\n- Icon-only buttons announce the `aria-label` value along with the button role.\\n- Toggle buttons announce their pressed/unpressed state (e.g., \\\"Activity Stream, toggle button,\\n  pressed\\\" and check out the [Segmented Control component](/components/buttons/segmented-control/)).\\n\\n### Touch Target Size\\n\\n- All buttons meet the minimum 24px by 24px touch target size requirement for mobile accessibility.\\n- Button padding ensures adequate spacing between interactive elements to prevent accidental\\n  activation.\\n\\n### Button Groups\\n\\n- Related buttons can be grouped together with HTML unordered list elements or with `<fieldset>` and\\n  `<legend>` elements. This can help give additional context to screen readers about the purpose of\\n  the group.\\n\\n## Component API\\n\\n## Specifications\\n\\n\"\n    }\n  }\n}\n"],
   "mappings": ";;;AAEA,SAAQ,4BAA2B;;;ACDnC,YAAY,QAAQ;AACpB,YAAY,UAAU;AACtB,SAAQ,qBAAoB;AAE5B,SAAQ,SAAQ;;;ACLhB;AAAA,EACE,MAAQ;AAAA,EACR,SAAW;AAAA,EACX,aAAe;AAAA,EACf,QAAU;AAAA,EACV,SAAW;AAAA,EACX,MAAQ;AAAA,EACR,aAAe;AAAA,EACf,YAAc;AAAA,IACZ,MAAQ;AAAA,IACR,KAAO;AAAA,IACP,WAAa;AAAA,EACf;AAAA,EACA,KAAO;AAAA,IACL,kBAAkB;AAAA,EACpB;AAAA,EACA,SAAW;AAAA,IACT,KAAK;AAAA,MACH,OAAS;AAAA,MACT,SAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,OAAS;AAAA,MACT,SAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,MAAQ;AAAA,EACR,OAAS;AAAA,EACT,OAAS;AAAA,IACP;AAAA,EACF;AAAA,EACA,SAAW;AAAA,IACT,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,OAAS;AAAA,IACT,OAAS;AAAA,EACX;AAAA,EACA,UAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,cAAgB;AAAA,IACd,kCAAkC;AAAA,IAClC,6BAA6B;AAAA,IAC7B,KAAO;AAAA,EACT;AAAA,EACA,iBAAmB;AAAA,IACjB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,wBAAwB;AAAA,IACxB,SAAW;AAAA,IACX,MAAQ;AAAA,IACR,QAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAU;AAAA,IACV,KAAO;AAAA,IACP,YAAc;AAAA,IACd,MAAQ;AAAA,IACR,0BAA0B;AAAA,EAC5B;AACF;;;AClEA;AAAA,EACE,mBAAqB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,YAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ACzBA;AAAA,EACE,SAAW;AAAA,IACT,SAAW;AAAA,MACT,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,OAAS;AAAA,MACP,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,cAAc;AAAA,MACZ,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,UAAY;AAAA,MACV,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,OAAS;AAAA,MACP,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,SAAW;AAAA,MACT,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,SAAW;AAAA,MACT,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACX,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,OAAS;AAAA,MACP,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,QAAU;AAAA,MACR,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,UAAY;AAAA,MACV,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,QAAU;AAAA,MACR,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,OAAS;AAAA,MACP,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,QAAU;AAAA,MACR,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,YAAc;AAAA,MACZ,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,OAAS;AAAA,MACP,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,gBAAgB;AAAA,MACd,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,KAAO;AAAA,MACL,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,cAAc;AAAA,MACZ,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,YAAc;AAAA,MACZ,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,QAAU;AAAA,MACR,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,UAAY;AAAA,MACV,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,aAAe;AAAA,MACb,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,QAAU;AAAA,MACR,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,YAAc;AAAA,MACZ,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,cAAc;AAAA,MACZ,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAClB,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,OAAS;AAAA,MACP,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,MAAQ;AAAA,MACN,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,aAAe;AAAA,MACb,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,yBAAyB;AAAA,MACvB,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,yBAAyB;AAAA,MACvB,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,SAAW;AAAA,MACT,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,QAAU;AAAA,MACR,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAClB,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,0BAA0B;AAAA,MACxB,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,iBAAiB;AAAA,MACf,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,eAAe;AAAA,MACb,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,WAAa;AAAA,MACX,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,IACA,SAAW;AAAA,MACT,OAAS;AAAA,MACT,cAAgB;AAAA,MAChB,SAAW;AAAA,MACX,UAAY;AAAA,IACd;AAAA,EACF;AACF;;;AHpRA,SAAQ,iBAAgB;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,IAAM,aAAa,cAAc,YAAY,GAAG;AAChD,IAAM,YAAiB,aAAQ,UAAU;AAElC,SAAS,YAAY;AAC1B,QAAM,aAAa,gBAAY;AAC/B,QAAM,UAAU,gBAAY;AAE5B,QAAM,SAAS,IAAI;AAAA,IACjB;AAAA,MACE,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA;AAAA,MACE,cAAc;AAAA,QACZ,OAAO,CAAC;AAAA,QACR,WAAW,CAAC;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAKA,WAAS,wBAAwB,UAAkB;AACjD,YAAQ,UAAU;AAAA,MAChB,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UASb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UASb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UASb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA,UAIb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA,UAGb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF;AACE,cAAM,IAAI,MAAM,GAAG,QAAQ,0BAA0B;AAAA,IACzD;AAAA,EACF;AAEA,iBAAU,kBAAkB,QAAQ,cAAY;AAC9C,UAAM,WAAW,wBAAwB,QAAQ;AACjD,QAAI,CAAC,YAAY,CAAC,SAAS,UAAU;AACnC,YAAM,IAAI,MAAM,YAAY,QAAQ,YAAY;AAAA,IAClD;AACA,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,QACE,OAAO,SAAS;AAAA,QAChB,aAAa,SAAS;AAAA,QACtB,UAAU,SAAS;AAAA,MACrB;AAAA,MACA,OAAO,SAAc;AAAA,QACnB,UAAU;AAAA,UACR;AAAA,YACE,KAAK,IAAI;AAAA,YACT,MAAM,SAAS;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb,aAAa;AAAA,QACX,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,YAAY;AACV,YAAM,SAAS;AAAA,QACb,OAAO,eAAU,kBAAkB;AAAA,QACnC,OAAO,eAAU,kBAAkB,IAAI,cAAY;AACjD,gBAAM,WAAW,wBAAwB,QAAQ;AACjD,cAAI,CAAC,UAAU;AACb,kBAAM,IAAI,MAAM,YAAY,QAAQ,YAAY;AAAA,UAClD;AACA,iBAAO;AAAA,YACL,MAAM,SAAS;AAAA,YACf,KAAK,SAAS;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AACA,aAAO;AAAA,QACL,SAAS;AAAA,UACP,EAAC,MAAM,QAAQ,MAAM,KAAK,UAAU,MAAM,EAAC;AAAA,UAC3C,GAAG,eAAU,kBAAkB,IAAI,cAAY;AAC7C,kBAAM,WAAW,wBAAwB,QAAQ;AACjD,gBAAI,CAAC,UAAU;AACb,oBAAM,IAAI,MAAM,YAAY,QAAQ,YAAY;AAAA,YAClD;AACA,mBAAO;AAAA,cACL,MAAM;AAAA,cACN,KAAK,SAAS;AAAA,cACd,MAAM,SAAS;AAAA,cACf,UAAU,SAAS;AAAA,cACnB,aAAa,SAAS;AAAA,cACtB,aAAa;AAAA,gBACX,UAAU,CAAC,QAAQ,WAAW;AAAA,cAChC;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,mBAAmB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAIA,WAAS,iBAAiB,UAAkB;AAC1C,YAAQ,UAAU;AAAA,MAChB,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UASb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA,UAEb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA,UAEb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA,UAEb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF,KAAK;AACH,eAAO;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA;AAAA,UAEb,UAAU;AAAA,UACV,KAAK;AAAA,UACL,UAAa,gBAAkB,aAAQ,WAAW,OAAO,QAAQ,GAAG,MAAM;AAAA,QAC5E;AAAA,MACF;AACE,cAAM,IAAI,MAAM,GAAG,QAAQ,gCAAgC;AAAA,IAC/D;AAAA,EACF;AAEA,iBAAU,WAAW,QAAQ,cAAY;AACvC,UAAM,WAAW,iBAAiB,QAAQ;AAC1C,QAAI,CAAC,YAAY,CAAC,SAAS,UAAU;AACnC,YAAM,IAAI,MAAM,YAAY,QAAQ,YAAY;AAAA,IAClD;AACA,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,QACE,OAAO,SAAS;AAAA,QAChB,aAAa,SAAS;AAAA,QACtB,UAAU,SAAS;AAAA,MACrB;AAAA,MACA,OAAO,SAAc;AAAA,QACnB,UAAU;AAAA,UACR;AAAA,YACE,KAAK,IAAI;AAAA,YACT,MAAM,SAAS;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAab,aAAa;AAAA,QACX,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,YAAY;AACV,YAAM,SAAS;AAAA,QACb,OAAO,eAAU,WAAW;AAAA,QAC5B,OAAO,eAAU,WAAW,IAAI,cAAY;AAC1C,gBAAM,WAAW,iBAAiB,QAAQ;AAC1C,cAAI,CAAC,UAAU;AACb,kBAAM,IAAI,MAAM,YAAY,QAAQ,YAAY;AAAA,UAClD;AACA,iBAAO;AAAA,YACL,MAAM,SAAS;AAAA,YACf,KAAK,SAAS;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AACA,aAAO;AAAA,QACL,SAAS;AAAA,UACP,EAAC,MAAM,QAAQ,MAAM,KAAK,UAAU,MAAM,EAAC;AAAA,UAC3C,GAAG,eAAU,WAAW,IAAI,cAAY;AACtC,kBAAM,WAAW,iBAAiB,QAAQ;AAC1C,gBAAI,CAAC,UAAU;AACb,oBAAM,IAAI,MAAM,YAAY,QAAQ,YAAY;AAAA,YAClD;AACA,mBAAO;AAAA,cACL,MAAM;AAAA,cACN,KAAK,SAAS;AAAA,cACd,MAAM,SAAS;AAAA,cACf,UAAU,SAAS;AAAA,cACnB,aAAa,SAAS;AAAA,cACtB,aAAa;AAAA,gBACX,UAAU,CAAC,QAAQ,WAAW;AAAA,cAChC;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,mBAAmB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AASA,QAAM,UAAU,uBAAc;AAC9B,QAAM,aAAuB,CAAC;AAE9B,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,OAAO,GAAG;AACnD,UAAM,UAAe,aAAQ,WAAW,QAAQ,GAAG,IAAI,OAAO;AAC9D,UAAM,YAAe,cAAW,OAAO;AAEvC,QAAI,WAAW;AACb,iBAAW,KAAK,IAAI;AACpB;AAAA,QACE;AAAA,QACA,MAAM;AAAA,QACN,cAAc,IAAI;AAAA,QAClB;AAAA,UACE,aAAa,8BAA8B,MAAM,KAAK;AAAA,QACxD;AAAA,QACA,OAAO,SAAc;AAAA,UACnB,UAAU;AAAA,YACR;AAAA,cACE,KAAK,IAAI;AAAA,cACT,MAAS,gBAAa,SAAS,MAAM;AAAA,cACrC,UAAU;AAAA,cACV,OAAO;AAAA,gBACL,IAAI;AAAA,kBACF,KAAK;AAAA,oBACH,iBAAiB,CAAC,gCAAgC,2BAA2B;AAAA,kBAC/E;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,QAAI,MAAM,UAAU;AAClB,aAAO;AAAA,QACL,GAAG,MAAM,KAAK;AAAA,QACd,mBAAmB,IAAI;AAAA,QACvB;AAAA,UACE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrB,aAAa,yCAAyC,MAAM,KAAK;AAAA,UACjE,UAAU;AAAA,QACZ;AAAA,QACA,OAAO,SAAc;AAAA,UACnB,UAAU;AAAA,YACR;AAAA,cACE,KAAK,IAAI;AAAA,cACT,MAAM,MAAM;AAAA,YACd;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAuB,aAAQ,WAAW,QAAQ,mBAAmB;AAC3E,MAAI,WAAW,SAAS,KAAQ,cAAW,eAAe,GAAG;AAC3D,UAAM,WAAW;AAEjB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,aAAa;AAAA,MACf;AAAA,MACA,OAAO,SAAc;AAAA,QACnB,UAAU;AAAA,UACR;AAAA,YACE,KAAK,IAAI;AAAA,YACT,MAAS,gBAAa,iBAAiB,MAAM;AAAA,YAC7C,UAAU;AAAA,YACV,OAAO;AAAA,cACL,IAAI;AAAA,gBACF,KAAK;AAAA,kBACH,iBAAiB,CAAC,gCAAgC,2BAA2B;AAAA,gBAC/E;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,oBAAoB,OAAO,EAAC,MAAK,MAAuB;AAC5D,YAAM,SAAS,QAAQ,KAAK;AAC5B,UAAI,CAAC,QAAQ;AACX,cAAM,IAAI,MAAM,kBAAkB,KAAK,qBAAqB,WAAW,KAAK,IAAI,CAAC,EAAE;AAAA,MACrF;AACA,YAAM,UAAe,aAAQ,WAAW,QAAQ,GAAG,KAAK,OAAO;AAC/D,YAAM,YAAe,gBAAa,SAAS,MAAM;AACjD,YAAM,UAAU,CAAC,CAAC,OAAO;AACzB,aAAO;AAAA,QACL,SAAS;AAAA,UACP;AAAA,YACE,MAAM;AAAA,YACN,MAAM,KAAK,UAAU;AAAA,cACnB,cACE;AAAA,cACF,OAAO,OAAO;AAAA,cACd,cAAc,OAAO;AAAA,YACvB,CAAC;AAAA,UACH;AAAA,UACA,GAAI,UACA;AAAA,YACE;AAAA,cACE,MAAM;AAAA,cACN,KAAK,mBAAmB,KAAK;AAAA,cAC7B,MAAM,GAAG,OAAO,KAAK;AAAA,cACrB,UAAU;AAAA,cACV,aAAa,uCAAuC,OAAO,KAAK;AAAA,YAClE;AAAA,UACF,IACA,CAAC;AAAA,QACP;AAAA,QACA,mBAAmB;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,aACE;AAAA,QAKF,aAAa;AAAA,UACX,OAAO,EAAE,KAAK,QAAQ,EAAE,SAAS,qCAAqC;AAAA,QACxE;AAAA,QACA,aAAa;AAAA,UACX,cAAc;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,UACL,IAAI,EAAC,aAAa,oBAAmB;AAAA,QACvC;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;;;ADpnBA,eAAsB,OAAO;AAC3B,QAAM,YAAY,IAAI,qBAAqB;AAC3C,QAAM,UAAU,EAAE,QAAQ,SAAS;AACrC;AAEA,KAAK,EAAE,MAAM,CAAC,UAAmB;AAC/B,UAAQ,MAAM,0BAA0B,KAAK;AAC7C,UAAQ,KAAK,CAAC;AAChB,CAAC;",
   "names": []
 }