@workday/canvas-kit-docs 13.0.0-alpha.950-next.0 → 13.0.0-alpha.996-next.0

package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {PopperController} from '../../../../../utils/storybook';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,
@@ -8,14 +7,12 @@ import {
   useCloseOnOutsideClick,
   useInitialFocus,
   useReturnFocus,
-  Placement,
 } from '@workday/canvas-kit-react/popup';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {createStyles, calc} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
-  const [placement, setPlacement] = React.useState<Placement>('top');
-  const [marginLeftBtn, setMarginLeftBtn] = React.useState(0);
-  const [marginRightBtn, setMarginRightBtn] = React.useState(0);
   const model = usePopupModel();
 
   useCloseOnOutsideClick(model);
@@ -27,56 +24,108 @@ export default () => {
     console.log('Delete Item');
   };
 
-  const handlePlacement = (placement: Placement) => {
-    setPlacement(placement);
-  };
-
-  const handleMarginLeftBtn = (marginLeftBtn: number) => {
-    setMarginLeftBtn(marginLeftBtn);
-  };
+  const grid = createStyles({
+    gridTemplateAreas: "'topButton topButton''leftButton rightButton''bottomButton bottomButton'",
+    height: calc.subtract('100vh', system.space.x16),
+    width: calc.subtract('100vw', system.space.x20),
+  });
 
-  const handleMarginRightBtn = (marginLeftBtn: number) => {
-    setMarginRightBtn(marginLeftBtn);
-  };
+  const topButton = createStyles({
+    gridArea: 'topButton',
+    justifySelf: 'center',
+  });
+  const rightButton = createStyles({
+    gridArea: 'rightButton',
+    justifySelf: 'right',
+    alignSelf: 'center',
+  });
+  const bottomButton = createStyles({
+    gridArea: 'bottomButton',
+    justifySelf: 'center',
+    alignSelf: 'end',
+  });
+  const leftButton = createStyles({
+    gridArea: 'leftButton',
+    justifySelf: 'left',
+    alignSelf: 'center',
+  });
 
   return (
-    <div style={{height: 1200}} data-testid="scroll-area-fallback-placement">
-      <PopperController
-        marginLeftBtn={marginLeftBtn}
-        marginRightBtn={marginRightBtn}
-        placement={placement}
-        onSetPlacement={handlePlacement}
-        onSetMarginLeftBtn={handleMarginLeftBtn}
-        onSetMarginRightBtn={handleMarginRightBtn}
-      >
-        <Flex width="100%" marginTop={240} justifyContent="center" alignItems="start">
-          <Popup model={model}>
-            <Popup.Target
-              as={DeleteButton}
-              style={{marginLeft: marginLeftBtn, marginRight: marginRightBtn}}
-            >
-              Delete Item
-            </Popup.Target>
-            <Popup.Popper placement={placement}>
-              <Popup.Card width={400}>
-                <Popup.CloseIcon aria-label="Close" />
-                <Popup.Heading>Delete Item</Popup.Heading>
-                <Popup.Body>
-                  <Box as="p" marginY="zero">
-                    Are you sure you'd like to delete the item titled 'My Item'?
-                  </Box>
-                </Popup.Body>
-                <Flex gap="s" padding="xxs" marginTop="xxs">
-                  <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
-                    Delete
-                  </Popup.CloseButton>
-                  <Popup.CloseButton>Cancel</Popup.CloseButton>
-                </Flex>
-              </Popup.Card>
-            </Popup.Popper>
-          </Popup>
-        </Flex>
-      </PopperController>
+    <div data-testid="scroll-area-fallback-placement">
+      <Grid cs={grid}>
+        <Popup>
+          <Popup.Target cs={topButton} as={DeleteButton}>
+            Placement Top
+          </Popup.Target>
+          <Popup.Popper placement="top">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+        <Popup>
+          <Popup.Target cs={leftButton} as={DeleteButton}>
+            Placement Left
+          </Popup.Target>
+          <Popup.Popper placement="left">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+        <Popup>
+          <Popup.Target cs={rightButton} as={DeleteButton}>
+            Placement Right
+          </Popup.Target>
+          <Popup.Popper placement="right">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+        <Popup>
+          <Popup.Target cs={bottomButton} as={DeleteButton}>
+            Placement Bottom
+          </Popup.Target>
+          <Popup.Popper placement="bottom">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+      </Grid>
     </div>
   );
 };

package/dist/mdx/react/select/Select.mdx

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  InformationHighlight,
-  SymbolDoc,
-  Specifications,
+	ExampleCodeBlock,
+	InformationHighlight,
+	SymbolDoc,
+	Specifications,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -20,7 +20,7 @@ import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
 import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
+import InitialSelectedItem from './examples/InitialSelectedItem';import { Table } from '@workday/canvas-kit-react/table';
 
 
 # Canvas Kit Select
@@ -305,7 +305,7 @@ prop as well as the `value` DOM property and will update the model accordingly.
 
 Select and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/switch/Switch.mdx

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  SymbolDoc,
-  Specifications,
-  InformationHighlight,
+	ExampleCodeBlock,
+	SymbolDoc,
+	Specifications,
+	InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -73,7 +73,7 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
 ### Custom Styles
 
 Switch supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/table/Table.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import BasicWithHeading from './examples/BasicWithHeading';
 import FixedColumn from './examples/FixedColumn';
@@ -62,7 +62,7 @@ You can also find several advanced Table examples in our Storybook Examples sect
 
 Table and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/BodyText.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/BodyText/Basic';
 
 # Canvas Kit Body Text
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Body Text supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Heading.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
 
 
 # Canvas Kit Heading
@@ -29,7 +29,7 @@ according to the [Canvas type hierarchy](/tokens/type/#type-styles).
 ### Custom Styles
 
 Heading supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Subtext.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Subtext/Basic';
 
 # Canvas Kit Subtext
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Subtext supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Text.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Text/Basic';
 import TypeLevel from './examples/Text/TypeLevel';
 import Variant from './examples/Text/Variant';
@@ -44,7 +44,7 @@ understanding of the text being rendered.
 ### Custom Styles
 
 Text supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Title.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Title/Basic';
 
 # Canvas Kit Title
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Title supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

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/dist/mdx/welcome.mdx

@@ -1,8 +1,8 @@
 import Readme from '../../../README.md';
 import Markdown from '../../../utils/storybook/Markdown.tsx';
-import {WelcomePage} from './welcomePage';
-import {InstallBlock} from './installBlock';
-import {version} from '../../../lerna.json';
+import { WelcomePage } from './welcomePage';
+import { InstallBlock } from './installBlock';
+import { version } from '../../../lerna.json';
 
 
 <WelcomePage />

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.950-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",
@@ -27,7 +27,7 @@
     "build:docs": "node ./utils/build-docs.js",
     "build:rebuild": "npm-run-all clean build",
     "build:specs": "node ./utils/build-specifications.js",
-    "build": "npm-run-all --parallel build:es6 build:mdx --parallel build:specs build:docs",
+    "build": "npm-run-all build:es6 build:mdx build:specs build:docs",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
     "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.950-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.950-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.950-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.950-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": "2fa9149392fa70e103e6d7e2323c91f09b187b0a"
+  "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 }));
-});