@workday/canvas-kit-mcp 15.1.0 → 15.1.2

package/dist/cli.js

@@ -18,7 +18,7 @@ import { z } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "15.1.0",
+  version: "15.1.2",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -465,6 +465,13 @@ var stories_config_default = {
       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';\n\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 {Graphic} from '@workday/canvas-kit-react/icon';\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';\n\nconst loadingStencil = createStencil({\n  base: {\n    background: system.color.surface.overlay.scrim,\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';\n\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\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 {createStencil, createStyles} from '@workday/canvas-kit-styling';\nimport {base, system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainer: createStyles({\n    display: 'flex',\n    gap: system.gap.md,\n  }),\n};\n\nconst loadingStencil = createStencil({\n  base: {\n    borderRadius: system.shape.full,\n    backgroundColor: system.color.surface.contrast.strong,\n    height: base.size1000,\n    width: base.size1000,\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 {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainer: createStyles({\n    display: 'flex',\n    gap: system.gap.md,\n  }),\n};\n\nexport const CustomColorAndAnimation = () => {\n  return (\n    <div className={styleOverrides.parentContainer}>\n      <LoadingDots\n        loadingDotColor={system.color.brand.fg.primary.default}\n        animationDurationMs=\"60ms\"\n      />\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';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainer: createStyles({\n    gap: system.gap.md,\n  }),\n  loadingStyles: createStyles({\n    backgroundColor: system.color.accent.muted.default,\n    padding: system.padding.sm,\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",
       accessibilityProse: "### 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';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {LoadingDots} from '@workday/canvas-kit-react/loading-dots';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainer: createStyles({\n    gap: system.gap.md,\n  }),\n  loadingStyles: createStyles({\n    backgroundColor: system.color.accent.muted.default,\n    padding: system.padding.sm,\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```"
     },
+    "information-highlight": {
+      title: "Components/Indicators/Information Highlight",
+      storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-indicators-information-highlight--docs",
+      mdxPath: "modules/react/information-highlight/stories/InformationHighlight.mdx",
+      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-react\n```\n\n## Usage\n\n### Basic Example\n```tsx\nimport React from 'react';\n\nimport {InformationHighlight} from '@workday/canvas-kit-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 {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst contentTextStyles = createStyles({\n  margin: 0,\n});\n\nconst contentListStyles = createStyles({\n  listStyle: 'inside',\n  marginInlineStart: 0,\n  marginBlockStart: system.gap.sm,\n  marginBlockEnd: 0,\n  padding: 0,\n});\n\nexport const Informational = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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 {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const Caution = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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 {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const Critical = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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 {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const RTL = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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-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-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## Component API\n\n## Specifications\n\n",
+      accessibilityProse: ""
+    },
     grid: {
       title: "Components/Layout/Grid",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs",
@@ -486,13 +493,6 @@ var stories_config_default = {
       mdxProse: "# Box\n\n> **Note**: Some of the content on this page may be outdated and may not follow the latest CK style\n> guidance. Please use care when making updates and carefully review any changes. Prefer using the\n> `createStyles` or `createStencil` utilities along with the latest design tokens to set styles.\n> This page will be updated soon.\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",
       accessibilityProse: ""
     },
-    "information-highlight": {
-      title: "Components/Indicators/Information Highlight",
-      storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-indicators-information-highlight--docs",
-      mdxPath: "modules/react/information-highlight/stories/InformationHighlight.mdx",
-      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-react\n```\n\n## Usage\n\n### Basic Example\n```tsx\nimport React from 'react';\n\nimport {InformationHighlight} from '@workday/canvas-kit-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 {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst contentTextStyles = createStyles({\n  margin: 0,\n});\n\nconst contentListStyles = createStyles({\n  listStyle: 'inside',\n  marginInlineStart: 0,\n  marginBlockStart: system.gap.sm,\n  marginBlockEnd: 0,\n  padding: 0,\n});\n\nexport const Informational = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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 {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const Caution = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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 {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const Critical = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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 {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const RTL = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm, flexDirection: 'column'}}>\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-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-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## Component API\n\n## Specifications\n\n",
-      accessibilityProse: ""
-    },
     "form-field": {
       title: "Components/Inputs/Form Field",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs",