@workday/canvas-kit-docs 13.0.0-alpha.978-next.0 → 13.0.0-alpha.996-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/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.996-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "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.996-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.996-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.996-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.996-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "e9eabae8567dfb68fc849f0d966c67711bef438b"
+  "gitHead": "340f917ae60082f246c1ac4201408bf32fa4741f"
 }

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 });
-    },
-});

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

@@ -1,25 +0,0 @@
-import { BaseProps } from './Base';
-type Variant = 'emphasis' | 'caution' | 'attention';
-interface InformationHighlightProps extends BaseProps {
-    variant?: Variant;
-}
-export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
-    variant: import("./modelHook").Variant;
-}> & {} & {}, {
-    state: {
-        variant: import("./modelHook").Variant;
-    };
-    events: {};
-}> & {
-    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./Icon").IconProps, {
-        state: {
-            variant: import("./modelHook").Variant;
-        };
-        events: {};
-    }>;
-    Heading: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
-    Body: import("@workday/canvas-kit-react/common").ElementComponent<"p", unknown>;
-    Link: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
-};
-export {};
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAOvC,KAAK,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD,UAAU,yBAA0B,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4BD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;CAiB/B,CAAC"}

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

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { createContainer } from '@workday/canvas-kit-react/common';
-import { createModifiers, createStyles, cssVar } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
-import { Base } from './Base';
-import { Heading } from './Heading';
-import { Body } from './Body';
-import { Icon } from './Icon';
-import { Link } from './Link';
-import { useInformationHighlightModel } from './modelHook';
-const containerStyles = createStyles({
-    backgroundColor: base.soap100,
-    display: 'grid',
-    gridTemplateColumns: 'min-content',
-    columnGap: system.space.x4,
-    rowGap: system.space.x2,
-    padding: system.space.x4,
-    borderRadius: system.shape.x1,
-});
-const containerModifiers = createModifiers({
-    variant: {
-        emphasis: createStyles({
-            borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.blueberry400)}`,
-        }),
-        caution: createStyles({
-            borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.cantaloupe400)}`,
-        }),
-        attention: createStyles({
-            borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.cinnamon500)}`,
-        }),
-    },
-});
-export const InformationHighlight = createContainer('section')({
-    displayName: 'InformationHighlight',
-    modelHook: useInformationHighlightModel,
-    subComponents: {
-        Icon: Icon,
-        Heading: Heading,
-        Body: Body,
-        Link: Link,
-    },
-})((props, Element, model) => {
-    return (React.createElement(Base, { as: Element, cs: [containerStyles, containerModifiers({ variant: model.state.variant })], ...props }));
-});

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

@@ -1,19 +0,0 @@
-export type Variant = 'emphasis' | 'caution' | 'attention';
-export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
-    variant: Variant;
-}> & {} & {}) | undefined) => {
-    state: {
-        variant: Variant;
-    };
-    events: {};
-}) & import("@workday/canvas-kit-react/common").ModelExtras<{
-    variant: Variant;
-}, {}, {
-    variant: Variant;
-}, {}, {
-    state: {
-        variant: Variant;
-    };
-    events: {};
-}>;
-//# sourceMappingURL=modelHook.d.ts.map