@workday/canvas-kit-docs 13.0.0-alpha.978-next.0 → 13.0.0-alpha.998-next.0

package/dist/es6/mdx/versionsTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B,eAAO,MAAM,YAAY,yBAgCxB,CAAC"}
+{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsE1B,eAAO,MAAM,YAAY,yBAgCxB,CAAC"}

package/dist/es6/mdx/versionsTable.js

@@ -9,6 +9,10 @@ const allVersions = [
         versionNumber: version,
         documentation: 'https://github.com/Workday/canvas-kit',
     },
+    {
+        versionNumber: 11,
+        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v11/?path=/docs/welcome--page',
+    },
     {
         versionNumber: 10,
         documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v10/?path=/docs/welcome--page',

package/dist/mdx/preview-react/InformationHighlight/InformationHighlight.mdx

@@ -0,0 +1,109 @@
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+
+import * as InformationHighlight from './InformationHighlight.stories.ts';
+import Basic from './examples/Basic';
+import Body from './examples/Body';
+import Heading from './examples/Heading';
+import Informational from './examples/Informational';
+import Caution from './examples/Caution';
+import Critical from './examples/Critical';
+import IconCritical from './examples/CustomIconCritical';
+import RTL from './examples/RTL';
+
+
+# Canvas Kit Information Highlight
+
+A container to call out important information on a page or a section of a page that the user should be aware of.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+`InformationHighlight` should be used to call out important information to the user and are paired with a meaningful
+ icon and color to differentiate information type. It should not be removed from the interface until some system or admin level action has been taken to do so.
+
+You can use an `InformationHighlight` to:
+- Prevent unwanted consequences from destructive actions
+- Reassure users in their next steps
+- Provide detail into information on the page
+- Show changes in page content
+
+### When to Consider Something Else
+- Consider a [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if the message is about system-wide errors or alerts, or if the message appears in response to user action.
+- Consider a [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the message is critical and requires user action or decision before proceeding
+- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs) if the message is timely, such as communicating updates on the process of an application.
+### Basic Example
+<ExampleCodeBlock code={Basic} />
+
+
+## Variants
+`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.
+
+
+Variants: `informational`, `caution`, `critical`
+
+Emphasis: `low`, `high`
+
+
+The variants have different icons and colors to convey severity and the emphasis changes the background color to have a
+ lower or higher contrast. If no `variant` or `emphasis` is selected the layout will default to
+  `Variant: informational, Emphasis: low`.
+
+
+The following examples will show the `low` and `high` emphasis of the three variants.
+`low` Emphasis will be shown first and should be used when there is other more important information on the page.
+`high` Emphasis will be shown second, and should be used when the highlight is not competing with other, more important information.
+
+### Informational
+The informational variant is for _nice to have_ information, such as related features or opportunities.
+<ExampleCodeBlock code={Informational} />
+
+### Caution
+The caution variant is for _important to know_ information, such as the potential consequences of specific actions.
+
+<ExampleCodeBlock code={Caution} />
+
+
+### Critical
+The critical variant is for _must know_ information that could otherwise cause failure if the user is unaware
+
+<ExampleCodeBlock code={Critical} />
+
+
+### RTL Example
+ Information Highlight also supports RTL Languages. To enable RTL, add a custom theme with direction set to 'ContentDirection.RTL'
+<ExampleCodeBlock code={RTL} />
+
+## Partial and Custom Information Highlights
+
+`InformationHighlight` can use custom icons or be designed to only use some of its components.
+
+### Custom Icon: Critical
+<ExampleCodeBlock code={IconCritical} />
+
+### Body Only Example
+<ExampleCodeBlock code={Body} />
+
+### Heading Only Example
+<ExampleCodeBlock code={Heading} />
+
+### Accessible Use of the `as` Prop
+Like many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop, which lets you change
+the underlying semantic element. For `InformationHighlight.Heading`, you can change the heading level if you were
+needing to define a different level of importance. This should be done with caution to ensure the best accessibility.
+
+## Component API
+
+<SymbolDoc name="InformationHighlight" fileName="/preview-react/" />
+
+## Specifications
+
+<Specifications file="InformationHighlight.spec.tsx" name="InformationHighlight" />

package/dist/mdx/preview-react/InformationHighlight/examples/Basic.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+
+export default () => {
+  return (
+    <InformationHighlight>
+      <InformationHighlight.Icon />
+      <InformationHighlight.Heading>Information Highlight</InformationHighlight.Heading>
+      <InformationHighlight.Body>
+        {' '}
+        This is what an information highlight would look like with with the default settings and
+        every field filled in{' '}
+      </InformationHighlight.Body>
+      <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+    </InformationHighlight>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Body.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+
+export default () => {
+  return (
+    <InformationHighlight>
+      <InformationHighlight.Body>
+        Only the body of an information highlight
+      </InformationHighlight.Body>
+    </InformationHighlight>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Caution.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'caution'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below, nothing will happen
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'caution'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below, nothing will happen
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Critical.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'critical'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading>
+          {' '}
+          Attention! Highlight Something{' '}
+        </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'critical'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading>
+          {' '}
+          Attention! Highlight Something{' '}
+        </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/CustomIconCritical.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {chartIcon} from '@workday/canvas-system-icons-web';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'critical'} emphasis={'low'}>
+        <InformationHighlight.Icon icon={chartIcon} />
+        <InformationHighlight.Heading> Attention! Custom Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          A custom Icon can be added to the Information Highlight component
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'critical'} emphasis={'high'}>
+        <InformationHighlight.Icon icon={chartIcon} />
+        <InformationHighlight.Heading> Attention! Custom Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          A custom Icon can be added to the Information Highlight component
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Heading.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+
+export default () => {
+  return (
+    <InformationHighlight>
+      <InformationHighlight.Heading> Only Heading </InformationHighlight.Heading>
+    </InformationHighlight>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Informational.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'informational'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'informational'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/RTL.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <CanvasProvider theme={theme}>
+        <InformationHighlight variant={'caution'} emphasis={'low'}>
+          <InformationHighlight.Icon />
+          <InformationHighlight.Heading>
+            {' '}
+            انتباه! من اليمين إلى اليسار{' '}
+          </InformationHighlight.Heading>
+          <InformationHighlight.Body>
+            نحن ندعم اللغات من اليمين إلى اليسار
+          </InformationHighlight.Body>
+          <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
+        </InformationHighlight>
+      </CanvasProvider>
+      <CanvasProvider theme={theme}>
+        <InformationHighlight variant={'caution'} emphasis={'high'}>
+          <InformationHighlight.Icon />
+          <InformationHighlight.Heading>
+            {' '}
+            انتباه! من اليمين إلى اليسار{' '}
+          </InformationHighlight.Heading>
+          <InformationHighlight.Body>
+            نحن ندعم اللغات من اليمين إلى اليسار
+          </InformationHighlight.Body>
+          <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
+        </InformationHighlight>
+      </CanvasProvider>
+    </Flex>
+  );
+};

package/dist/mdx/react/button/button/Button.mdx

@@ -14,6 +14,7 @@ import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 import Grow from './examples/Grow';
 import CustomStyles from './examples/CustomStyles';
+import ThemeOverrides from './examples/ThemeOverrides';
 
 
 # Canvas Kit Button
@@ -91,6 +92,12 @@ or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 
+### Theme Overrides
+
+The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
+
+<ExampleCodeBlock code={ThemeOverrides} />
+
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying

package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Heading} from '@workday/canvas-kit-react/text';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
+
+export default () => (
+  <div>
+    <Heading size="medium" as="h3">
+      Override Primary Color
+    </Heading>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            action: {
+              main: 'teal',
+            },
+          },
+        },
+      }}
+    >
+      <Flex cs={parentContainerStyles}>
+        <PrimaryButton>Primary</PrimaryButton>
+        <PrimaryButton icon={plusIcon} iconPosition="start">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton icon={caretDownIcon} iconPosition="end">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+      </Flex>
+    </CanvasProvider>
+    <Heading size="medium" as="h3">
+      Override Action Color
+    </Heading>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            primary: {
+              main: 'navy',
+            },
+          },
+        },
+      }}
+    >
+      <Flex cs={parentContainerStyles}>
+        <PrimaryButton>Primary</PrimaryButton>
+        <PrimaryButton icon={plusIcon} iconPosition="start">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton icon={caretDownIcon} iconPosition="end">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+      </Flex>
+    </CanvasProvider>
+  </div>
+);

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,4 +1,5 @@
-import {ExampleCodeBlock, InformationHighlight} from '@workday/canvas-kit-docs';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 

package/index.ts

@@ -1,6 +1,5 @@
 export {ExampleCodeBlock} from './lib/ExampleCodeBlock';
 export * from './lib/specs';
-export * from './lib/InformationHighlight';
 export * from './lib/Specifications';
 export * from './lib/StylePropsTable';
 export * from './lib/docs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.978-next.0",
+  "version": "13.0.0-alpha.998-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,12 +44,12 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.978-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.978-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.978-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.978-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.998-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.998-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.998-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.998-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "e9eabae8567dfb68fc849f0d966c67711bef438b"
+  "gitHead": "d95041596e2b948c0a371f4c763746a98c58b2da"
 }

package/dist/es6/lib/InformationHighlight/Base.d.ts

@@ -1,5 +0,0 @@
-import { CSProps } from '@workday/canvas-kit-styling';
-export interface BaseProps extends CSProps {
-}
-export declare const Base: import("@workday/canvas-kit-react/common").ElementComponent<"div", BaseProps>;
-//# sourceMappingURL=Base.d.ts.map

package/dist/es6/lib/InformationHighlight/Base.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Base.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,SAAU,SAAQ,OAAO;CAAG;AAE7C,eAAO,MAAM,IAAI,+EAKf,CAAC"}

package/dist/es6/lib/InformationHighlight/Base.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { handleCsProp } from '@workday/canvas-kit-styling';
-export const Base = createComponent('div')({
-    displayName: 'Base',
-    Component: (props, ref, Element) => {
-        return React.createElement(Element, { ref: ref, ...handleCsProp(props) });
-    },
-});

package/dist/es6/lib/InformationHighlight/Body.d.ts

@@ -1,2 +0,0 @@
-export declare const Body: import("@workday/canvas-kit-react/common").ElementComponent<"p", unknown>;
-//# sourceMappingURL=Body.d.ts.map

package/dist/es6/lib/InformationHighlight/Body.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Body.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,2EAKf,CAAC"}

package/dist/es6/lib/InformationHighlight/Body.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
-import { Base } from './Base';
-const bodyStyles = createStyles({
-    ...system.type.subtext.large,
-    color: base.blackPepper300,
-    gridColumn: '2',
-    fontWeight: 400,
-    margin: 0,
-});
-export const Body = createComponent('p')({
-    displayName: 'Body',
-    Component: (props, ref, Element) => {
-        return React.createElement(Base, { as: Element, ref: ref, cs: bodyStyles, ...props });
-    },
-});

package/dist/es6/lib/InformationHighlight/Heading.d.ts

@@ -1,2 +0,0 @@
-export declare const Heading: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
-//# sourceMappingURL=Heading.d.ts.map

package/dist/es6/lib/InformationHighlight/Heading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Heading.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,OAAO,6EAKlB,CAAC"}

package/dist/es6/lib/InformationHighlight/Heading.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
-import { Base } from './Base';
-const headingStyles = createStyles({
-    ...system.type.body.small,
-    color: base.blackPepper400,
-    gridColumn: '2',
-    fontWeight: 700, // should use system.fontWeight.bold
-});
-export const Heading = createComponent('div')({
-    displayName: 'Heading',
-    Component: (props, ref, Element) => {
-        return React.createElement(Base, { as: Element, ref: ref, cs: headingStyles, ...props });
-    },
-});

package/dist/es6/lib/InformationHighlight/Icon.d.ts

@@ -1,13 +0,0 @@
-import { SystemIconProps } from '@workday/canvas-kit-react/icon';
-type Variant = 'emphasis' | 'caution' | 'attention';
-export interface IconProps extends SystemIconProps {
-    variant: Variant;
-}
-export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
-    state: {
-        variant: import("./modelHook").Variant;
-    };
-    events: {};
-}>;
-export {};
-//# sourceMappingURL=Icon.d.ts.map

package/dist/es6/lib/InformationHighlight/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAY3E,KAAK,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;AA6BpD,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,OAAO,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,IAAI;;;;;EAYf,CAAC"}

package/dist/es6/lib/InformationHighlight/Icon.js

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { createSubcomponent } from '@workday/canvas-kit-react/common';
-import { cssVar } from '@workday/canvas-kit-styling';
-import { infoIcon, exclamationCircleIcon, exclamationTriangleIcon, } from '@workday/canvas-system-icons-web';
-import { base } from '@workday/canvas-tokens-web';
-import { useInformationHighlightModel } from './modelHook';
-const iconStyles = {
-    emphasis: {
-        accent: cssVar(base.blueberry400),
-        fill: cssVar(base.blueberry400),
-        background: 'none',
-        accentHover: cssVar(base.blueberry400),
-        fillHover: cssVar(base.blueberry400),
-        backgroundHover: 'none',
-    },
-    caution: {
-        accent: cssVar(base.blackPepper400),
-        fill: cssVar(base.blackPepper400),
-        background: 'none',
-        accentHover: cssVar(base.blackPepper400),
-        fillHover: cssVar(base.blackPepper400),
-        backgroundHover: 'none',
-    },
-    attention: {
-        accent: cssVar(base.cinnamon500),
-        fill: cssVar(base.cinnamon500),
-        background: 'none',
-        accentHover: cssVar(base.cinnamon500),
-        fillHover: cssVar(base.cinnamon500),
-        backgroundHover: 'none',
-    },
-};
-const defaultIcons = {
-    emphasis: infoIcon,
-    caution: exclamationTriangleIcon,
-    attention: exclamationCircleIcon,
-};
-export const Icon = createSubcomponent('span')({
-    displayName: 'Icon',
-    modelHook: useInformationHighlightModel,
-})(({ icon, ...props }, Element, model) => {
-    return (React.createElement(SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], ...iconStyles[model.state.variant], ...props }));
-});

package/dist/es6/lib/InformationHighlight/Link.d.ts

@@ -1,2 +0,0 @@
-export declare const Link: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
-//# sourceMappingURL=Link.d.ts.map

package/dist/es6/lib/InformationHighlight/Link.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Link.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,IAAI,6EAKf,CAAC"}

package/dist/es6/lib/InformationHighlight/Link.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStyles, cssVar } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
-const linkStyles = createStyles({
-    ...system.type.subtext.large,
-    gridColumn: '2',
-    justifySelf: 'start',
-    color: `${cssVar(base.blueberry500)} !important`,
-    fontWeight: 500, // should use system.fontWeight.bold
-});
-export const Link = createComponent('div')({
-    displayName: 'Link',
-    Component: (props, ref, Element) => {
-        return React.createElement(ExternalHyperlink, { as: Element, ref: ref, className: linkStyles, ...props });
-    },
-});