@workday/canvas-kit-react 12.0.0-alpha.841-next.0 → 12.0.0-alpha.852-next.0

package/dist/es6/select/lib/hooks/useSelectInput.d.ts

@@ -86,7 +86,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
     readonly value: string | undefined;
     readonly role: "combobox";
-    readonly 'aria-haspopup': boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    readonly 'aria-haspopup': boolean | "grid" | "true" | "listbox" | "menu" | "false" | "dialog" | "tree" | undefined;
     readonly 'aria-expanded': boolean;
     readonly 'aria-autocomplete': "list";
     readonly 'aria-controls': `${string}-list`;

package/dist/es6/tabs/lib/TabsItem.d.ts

@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     tabIndex?: number;
 }
-export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
+export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "color" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "height" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "resize" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "width" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "fill" | "stroke" | "cs" | "as" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/dist/es6/text-input/index.d.ts

@@ -1,4 +1,3 @@
-export * from './lib/InputIconContainer';
 export * from './lib/TextInput';
 export { InputGroup, useInputGroupModel } from './lib/InputGroup';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/text-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/es6/text-input/index.js

@@ -1,3 +1,2 @@
-export * from './lib/InputIconContainer';
 export * from './lib/TextInput';
 export { InputGroup, useInputGroupModel } from './lib/InputGroup';

package/dist/es6/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAStD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AAkC5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAiBL,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAYtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AA4C5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}

package/dist/es6/toast/lib/Toast.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { ToastCloseIcon } from './ToastCloseIcon';
 import { ToastIcon } from './ToastIcon';
@@ -8,6 +7,9 @@ import { ToastMessage } from './ToastMessage';
 import { ToastLink } from './ToastLink';
 import { ToastBody } from './ToastBody';
 import { useToastModel } from './hooks/useToastModel';
+import { calc, createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 /**
  * The function helps set the correct aria attributes based on the mode
  * @param mode Defines what aria attributes will be added to the main container
@@ -39,6 +41,9 @@ const getAriaAttributes = (mode, id) => {
         }
     }
 };
+const toastStencil = createStencil({
+    base: { name: "cdbf88", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
+}, "toast-55513d");
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
  *
@@ -91,5 +96,5 @@ export const Toast = createContainer('div')({
         Link: ToastLink,
     },
 })(({ children, ...elemProps }, _, model) => {
-    return (React.createElement(Popup.Card, Object.assign({ as: Flex, width: 360, padding: "0" }, getAriaAttributes(model.state.mode, model.state.id), { flexDirection: "row", gap: "xxxs" }, elemProps), children));
+    return (React.createElement(Popup.Card, Object.assign({}, getAriaAttributes(model.state.mode, model.state.id), mergeStyles(elemProps, toastStencil())), children));
 });

package/dist/es6/toast/lib/ToastBody.d.ts

@@ -2,5 +2,6 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {
 }
+export declare const toastBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ToastBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastBodyProps>;
 //# sourceMappingURL=ToastBody.d.ts.map

package/dist/es6/toast/lib/ToastBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,SAAS,oFAmBpB,CAAC"}
+{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,gBAAgB,yIAU3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFASpB,CAAC"}

package/dist/es6/toast/lib/ToastBody.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
+import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+export const toastBodyStencil = createStencil({
+    base: { name: "758c52", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
+}, "toast-body-7d81ac");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Flex, Object.assign({ alignItems: "flex-start", flexDirection: "column", justifyContent: "center", paddingY: "s", ref: ref, as: Element, flexGrow: 1, gap: "xxxs" }, elemProps), children));
+        return (React.createElement(Flex, Object.assign({ ref: ref, as: Element }, mergeStyles(elemProps, toastBodyStencil())), children));
     },
 });

package/dist/es6/toast/lib/ToastCloseIcon.d.ts

@@ -2,5 +2,6 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {
 }
+export declare const toastCloseIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ToastCloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToastCloseIconProps>;
 //# sourceMappingURL=ToastCloseIcon.d.ts.map

package/dist/es6/toast/lib/ToastCloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,cAAc,4FAOzB,CAAC"}
+{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,yIAIhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+export const toastCloseIconStencil = createStencil({
+    base: { name: "721e6c", styles: "box-sizing:border-box;position:relative;" }
+}, "toast-close-icon-be7e9f");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',
     Component: (elemProps, ref, Element) => {
-        return (React.createElement(Popup.CloseIcon, Object.assign({ as: Element, ref: ref, size: "small", position: "relative" }, elemProps)));
+        return (React.createElement(Popup.CloseIcon, Object.assign({ as: Element, ref: ref, size: "small" }, mergeStyles(elemProps, toastCloseIconStencil()))));
     },
 });

package/dist/es6/toast/lib/ToastIcon.d.ts

@@ -1,5 +1,6 @@
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {
 }
+export declare const toastIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ToastIcon: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastIconProps>;
 //# sourceMappingURL=ToastIcon.d.ts.map

package/dist/es6/toast/lib/ToastIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,SAAS,oFAepB,CAAC"}
+{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yIAK3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFAKpB,CAAC"}

package/dist/es6/toast/lib/ToastIcon.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+export const toastIconStencil = createStencil({
+    base: { name: "78413e", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+}, "toast-icon-4b0701");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',
     Component: (elemProps, ref, Element) => {
-        return (React.createElement(SystemIcon, Object.assign({ colorHover: elemProps.color, marginY: "s", marginX: "xs", alignSelf: "start", ref: ref, as: Element }, elemProps)));
+        return React.createElement(SystemIcon, Object.assign({ ref: ref, as: Element }, handleCsProp(elemProps, toastIconStencil())));
     },
 });

package/dist/es6/toast/lib/ToastMessage.d.ts

@@ -2,6 +2,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Subtext } from '@workday/canvas-kit-react/text';
 export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {
 }
+export declare const toastMessageStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ToastMessage: import("@workday/canvas-kit-react/common").ElementComponentM<"p", ToastMessageProps, {
     state: {
         id: string;

package/dist/es6/toast/lib/ToastMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessage.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAEvD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,CAAC,EAAE,MAAM,CAAC;CAAG;AAExF,eAAO,MAAM,YAAY;;;;;;EAevB,CAAC"}
+{"version":3,"file":"ToastMessage.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAKvD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,CAAC,EAAE,MAAM,CAAC;CAAG;AAExF,eAAO,MAAM,mBAAmB,yIAM9B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;EAavB,CAAC"}

package/dist/es6/toast/lib/ToastMessage.js

@@ -2,8 +2,14 @@ import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { useToastModel } from './hooks/useToastModel';
 import { Subtext } from '@workday/canvas-kit-react/text';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { system } from '@workday/canvas-tokens-web';
+export const toastMessageStencil = createStencil({
+    base: { name: "d80f47", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+}, "toast-message-759382");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,
 })(({ children, ...elemProps }, Element, model) => {
-    return (React.createElement(Subtext, Object.assign({ size: "large", wordBreak: "break-word", marginY: "zero", id: model.state.id, as: Element }, elemProps), children));
+    return (React.createElement(Subtext, Object.assign({ size: "large", id: model.state.id, as: Element }, mergeStyles(elemProps, toastMessageStencil())), children));
 });

package/icon/lib/SystemIcon.tsx

@@ -49,7 +49,8 @@ export interface SystemIconStyles {
   /**
    * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
    * @default base.licorice200
-   * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * @deprecated `colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please
+   * use the following instead in your style overrides:
    * ```tsx
    * '&:hover': {
    *   [systemIconStencil.vars.color]: desiredColorHoverColor

package/modal/lib/ModalBody.tsx

@@ -1,32 +1,27 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  getTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
 
-const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    [canvasTheme.breakpoints.down('s')]: {
-      marginBottom: space.zero,
-      padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`,
+export const modalBodyStencil = createStencil({
+  base: {
+    '@media screen and (max-width: 768px)': {
+      marginBlockEnd: system.space.zero,
+      padding: `${system.space.x1} ${system.space.x2} ${system.space.x2}`,
     },
-  };
+  },
 });
 
 export const ModalBody = createSubcomponent('div')({
   displayName: 'Modal.Body',
   modelHook: useModalModel,
 })<ModalBodyProps>((elemProps, Element) => {
-  return <ResponsiveModalBody as={Element} {...elemProps} />;
+  return <Popup.Body as={Element} {...mergeStyles(elemProps, modalBodyStencil())} />;
 });

package/modal/lib/ModalCard.tsx

@@ -1,29 +1,27 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  StyledType,
-  styled,
-  getTheme,
-} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {useModalCard, useModalModel} from './hooks';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    margin: space.xl,
-    [canvasTheme.breakpoints.down('s')]: {
-      margin: space.s, // 16px all around margin on smaller screen sizes
-      padding: space.s, // brings total padding between edge and content to 24px
-      borderRadius: space.m, // 24px border radius on smaller devices.
+export const modalCardStencil = createStencil({
+  base: {
+    margin: system.space.x10,
+    width: calc.add(calc.multiply(system.space.x20, 5), system.space.x10),
+    borderWidth: system.space.zero,
+    boxShadow: system.depth[6],
+    '@media screen and (max-width: 768px)': {
+      margin: system.space.x4, // 16px all around margin on smaller screen sizes
+      padding: system.space.x4, // brings total padding between edge and content to 24px
+      borderRadius: system.space.x6, // 24px border radius on smaller devices.
     },
-  };
+  },
 });
 
 export const ModalCard = createSubcomponent('div')({
@@ -31,5 +29,5 @@ export const ModalCard = createSubcomponent('div')({
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
+  return <Popup.Card as={Element} {...mergeStyles(elemProps, modalCardStencil())} />;
 });

package/modal/lib/ModalHeading.tsx

@@ -1,27 +1,22 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  getTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalHeading, useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    [canvasTheme.breakpoints.down('s')]: {
-      marginBottom: space.zero,
-      padding: `${space.xxs} ${space.xxs} ${space.xxxs} ${space.xxs}`,
+export const modalHeadingStencil = createStencil({
+  base: {
+    '@media screen and (max-width: 768px)': {
+      marginBlockEnd: system.space.zero,
+      padding: `${system.space.x2} ${system.space.x2} ${system.space.x1}`,
     },
-  };
+  },
 });
 
 export const ModalHeading = createSubcomponent('h2')({
@@ -29,5 +24,5 @@ export const ModalHeading = createSubcomponent('h2')({
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <ResponsiveModalHeading as={Element} {...elemProps} />;
+  return <Popup.Heading as={Element} {...mergeStyles(elemProps, modalHeadingStencil())} />;
 });

package/modal/lib/ModalOverflowOverlay.tsx

@@ -1,18 +1,22 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 
 import {ModalOverlay} from './ModalOverlay';
-import styled from '@emotion/styled';
 import {useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
-const StyledOverlay = styled(ModalOverlay)<StyledType>({
-  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+export const modalOverflowOverlayStencil = createStencil({
+  base: {
+    '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+    overflow: 'hidden auto',
+  },
 });
 
 export const ModalOverflowOverlay = createSubcomponent('div')({
   displayName: 'Modal.OverflowOverlay',
   modelHook: useModalModel,
 })<ExtractProps<typeof ModalOverlay, never>>((elemProps, Element) => {
-  return <StyledOverlay as={Element} overflowX="hidden" overflowY="auto" {...elemProps} />;
+  return <ModalOverlay as={Element} {...mergeStyles(elemProps, modalOverflowOverlayStencil())} />;
 });

package/modal/lib/ModalOverlay.tsx

@@ -4,81 +4,62 @@ import ReactDOM from 'react-dom';
 import {
   createSubcomponent,
   createElemPropsHook,
-  StyledType,
   useWindowSize,
   useForkRef,
-  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/react';
-import styled from '@emotion/styled';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
+import {createStencil, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ModalOverlayProps extends BoxProps {}
 
-const fadeIn = keyframes`
-  from {
-    background: none;
-  }
-  to {
-    background: rgba(0,0,0,0.65);
-  }
-`;
+const fadeIn = keyframes({
+  '0%': {
+    background: 'none',
+  },
+  '100%': {
+    background: cssVar(system.color.bg.overlay),
+  },
+});
 
-const Container = styled(Box)<StyledType>(
-  {
+export const modalOverlayContainerStencil = createStencil({
+  vars: {
+    containerCenter: '',
+  },
+  base: ({containerCenter}) => ({
     position: 'fixed',
-    top: 0,
-    left: 0,
+    top: system.space.zero,
+    left: system.space.zero,
     width: '100vw',
     height: '100vh',
-    background: 'rgba(0,0,0,0.65)',
-    animationName: `${fadeIn}`,
+    background: system.color.bg.overlay,
     animationDuration: '0.3s',
+    animationName: fadeIn,
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
     },
-  },
-  ({theme}) => {
-    const {canvas: canvasTheme} = getTheme(theme);
-    return {
-      [canvasTheme.breakpoints.down('s')]: {
-        height: '100%',
+    // Responsive Container
+    '& > div': {
+      maxHeight: '100%',
+      display: 'flex',
+      position: 'absolute',
+      left: system.space.zero,
+      top: system.space.zero,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: containerCenter,
+    },
+    '@media screen and (max-width: 768px)': {
+      height: '100%',
+      '& > div': {
+        alignItems: 'end',
       },
-    };
-  }
-);
-
-// This centering container helps fix an issue with Chrome. Chrome doesn't normally do subpixel
-// positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
-// the Modal. The centering container forces a "center" pixel calculation by making sure the width
-// is always an even number
-const ResponsiveContainer = styled('div')(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    maxHeight: '100%',
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    [canvasTheme.breakpoints.down('s')]: {
-      alignItems: 'end',
     },
-  };
-});
-
-export const ModalOverlay = createSubcomponent('div')({
-  displayName: 'Modal.Overlay',
-  modelHook: useModalModel,
-})<ModalOverlayProps>((elemProps, Element, model) => {
-  return model.state.visibility !== 'hidden' ? (
-    <OpenModalOverlay as={Element} model={model} {...elemProps} />
-  ) : null;
+  }),
 });
 
 export const useModalOverlay = createElemPropsHook(usePopupModel)(({state}, ref) => {
@@ -97,18 +78,20 @@ const OpenModalOverlay = createSubcomponent('div')({
   elemPropsHook: useModalOverlay,
 })<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
+  const containerCenter = windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw';
   const content = (
-    <Container as={Element} {...elemProps}>
-      <ResponsiveContainer
-        // make sure the centering container is an even number of pixels to avoid sub-pixel
-        // inaccuracies due to centering
-        style={{
-          width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
-        }}
+    <Box {...mergeStyles(elemProps, modalOverlayContainerStencil({containerCenter}))}>
+      {/* This centering container helps fix an issue with Chrome. Chrome doesn't normally do
+      subpixel positioning, but seems to when using flexbox centering. This messes up Popper
+      calculations inside the Modal. The centering container forces a "center" pixel calculation
+      by making sure the width is always an even number */}
+      <Box
+      // make sure the centering container is an even number of pixels to avoid sub-pixel
+      // inaccuracies due to centering
       >
         {elemProps.children}
-      </ResponsiveContainer>
-    </Container>
+      </Box>
+    </Box>
   );
 
   // only render something on the client
@@ -118,3 +101,12 @@ const OpenModalOverlay = createSubcomponent('div')({
     return null;
   }
 });
+
+export const ModalOverlay = createSubcomponent('div')({
+  displayName: 'Modal.Overlay',
+  modelHook: useModalModel,
+})<ModalOverlayProps>((elemProps, Element, model) => {
+  return model.state.visibility !== 'hidden' ? (
+    <OpenModalOverlay as={Element} model={model} {...elemProps} />
+  ) : null;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.0-alpha.841-next.0",
+  "version": "12.0.0-alpha.852-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.841-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.841-next.0",
+    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.852-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.852-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "066c4b170850949586bf9f89370f5302a6c8f9a4"
+  "gitHead": "bbd7343aec2a6657b8eff4981a7aa4a6e47af161"
 }

package/popup/lib/Popper.tsx

@@ -154,10 +154,8 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
         enabled: true,
         phase: 'afterWrite',
         fn({state}) {
-          if (placementRef.current !== state.placement) {
-            setPlacement(state.placement);
-            onPlacementChange?.(state.placement);
-          }
+          setPlacement(state.placement);
+          onPlacementChange?.(state.placement);
         },
       };
     }, [setPlacement, onPlacementChange]);