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

package/dist/commonjs/modal/lib/ModalHeading.js

@@ -19,25 +19,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalHeading = void 0;
+exports.ModalHeading = exports.modalHeadingStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const hooks_1 = require("./hooks");
-const ResponsiveModalHeading = common_1.styled(popup_1.Popup.Heading)(({ theme }) => {
-    const { canvas: canvasTheme } = common_1.getTheme(theme);
-    return {
-        [canvasTheme.breakpoints.down('s')]: {
-            marginBottom: tokens_1.space.zero,
-            padding: `${tokens_1.space.xxs} ${tokens_1.space.xxs} ${tokens_1.space.xxxs} ${tokens_1.space.xxs}`,
-        },
-    };
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.modalHeadingStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "72ed60", styles: "box-sizing:border-box;@media screen and (max-width: 768px){margin-block-end:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x1);}" }
+}, "modal-heading-52f13d");
 exports.ModalHeading = common_1.createSubcomponent('h2')({
     displayName: 'Modal.Heading',
     modelHook: hooks_1.useModalModel,
     elemPropsHook: hooks_1.useModalHeading,
 })((elemProps, Element) => {
-    return React.createElement(ResponsiveModalHeading, Object.assign({ as: Element }, elemProps));
+    return React.createElement(popup_1.Popup.Heading, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, exports.modalHeadingStencil())));
 });

package/dist/commonjs/modal/lib/ModalOverflowOverlay.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export declare const modalOverflowOverlayStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const ModalOverflowOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/modal/lib/ModalOverflowOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverflowOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverflowOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B,CAAC"}
+{"version":3,"file":"ModalOverflowOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverflowOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,2BAA2B,yIAKtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B,CAAC"}

package/dist/commonjs/modal/lib/ModalOverflowOverlay.js

@@ -18,22 +18,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalOverflowOverlay = void 0;
+exports.ModalOverflowOverlay = exports.modalOverflowOverlayStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const ModalOverlay_1 = require("./ModalOverlay");
-const styled_1 = __importDefault(require("@emotion/styled"));
 const hooks_1 = require("./hooks");
-const StyledOverlay = styled_1.default(ModalOverlay_1.ModalOverlay)({
-    '& > div': { maxHeight: 'inherit' }, // reset maxHeight of centering div
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.modalOverflowOverlayStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "528425", styles: "box-sizing:border-box;& > div{max-height:inherit;}overflow:hidden auto;" }
+}, "modal-overflow-overlay-2ac342");
 exports.ModalOverflowOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.OverflowOverlay',
     modelHook: hooks_1.useModalModel,
 })((elemProps, Element) => {
-    return React.createElement(StyledOverlay, Object.assign({ as: Element, overflowX: "hidden", overflowY: "auto" }, elemProps));
+    return React.createElement(ModalOverlay_1.ModalOverlay, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, exports.modalOverflowOverlayStencil())));
 });

package/dist/commonjs/modal/lib/ModalOverlay.d.ts

@@ -2,7 +2,12 @@ import React from 'react';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface ModalOverlayProps extends BoxProps {
 }
-export declare const ModalOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalOverlayProps, {
+export declare const modalOverlayContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    containerCenter: string;
+}, never>, {
+    containerCenter: string;
+}, never, never>;
+export declare const useModalOverlay: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -19,8 +24,10 @@ export declare const ModalOverlay: import("@workday/canvas-kit-react/common").El
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
+}, {
+    ref: undefined;
 }>;
-export declare const useModalOverlay: import("@workday/canvas-kit-react/common").BehaviorHook<{
+export declare const ModalOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalOverlayProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -37,7 +44,5 @@ export declare const useModalOverlay: import("@workday/canvas-kit-react/common")
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}, {
-    ref: undefined;
 }>;
 //# sourceMappingURL=ModalOverlay.d.ts.map

package/dist/commonjs/modal/lib/ModalOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AAyDtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;EAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAK5E,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AAWtD,eAAO,MAAM,4BAA4B;;;;gBAoCvC,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;EAQ1B,CAAC;AAgCH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC"}

package/dist/commonjs/modal/lib/ModalOverlay.js

@@ -3,70 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModalOverlay = exports.ModalOverlay = void 0;
+exports.ModalOverlay = exports.useModalOverlay = exports.modalOverlayContainerStencil = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
-const react_2 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const hooks_1 = require("./hooks");
-const fadeIn = react_2.keyframes `
-  from {
-    background: none;
-  }
-  to {
-    background: rgba(0,0,0,0.65);
-  }
-`;
-const Container = styled_1.default(layout_1.Box)({
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    background: 'rgba(0,0,0,0.65)',
-    animationName: `${fadeIn}`,
-    animationDuration: '0.3s',
-    // Allow overriding of animation in special cases
-    '.wd-no-animation &': {
-        animation: 'none',
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const fadeIn = canvas_kit_styling_1.keyframes({ name: "746311", styles: "0%{background:none;}100%{background:var(--cnvs-sys-color-bg-overlay);}" });
+exports.modalOverlayContainerStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        containerCenter: '',
     },
-}, ({ theme }) => {
-    const { canvas: canvasTheme } = common_1.getTheme(theme);
-    return {
-        [canvasTheme.breakpoints.down('s')]: {
-            height: '100%',
-        },
-    };
-});
-// 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_1.default('div')(({ theme }) => {
-    const { canvas: canvasTheme } = common_1.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',
-        },
-    };
-});
-exports.ModalOverlay = common_1.createSubcomponent('div')({
-    displayName: 'Modal.Overlay',
-    modelHook: hooks_1.useModalModel,
-})((elemProps, Element, model) => {
-    return model.state.visibility !== 'hidden' ? (react_1.default.createElement(OpenModalOverlay, Object.assign({ as: Element, model: model }, elemProps))) : null;
-});
+    base: { name: "09f317", styles: "box-sizing:border-box;position:fixed;top:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);width:100vw;height:100vh;background:var(--cnvs-sys-color-bg-overlay);animation-duration:0.3s;animation-name:animation-746311;.wd-no-animation &{animation:none;}& > div{max-height:100%;display:flex;position:absolute;left:var(--cnvs-sys-space-zero);top:var(--cnvs-sys-space-zero);justify-content:center;align-items:center;height:100%;width:var(--containerCenter-modal-overlay-container-8b6518);}@media screen and (max-width: 768px){height:100%;& > div{align-items:end;}}" }
+}, "modal-overlay-container-8b6518");
 exports.useModalOverlay = common_1.createElemPropsHook(popup_1.usePopupModel)(({ state }, ref) => {
     const elementRef = common_1.useForkRef(ref, state.stackRef);
     popup_1.usePopupStack(elementRef);
@@ -81,16 +33,12 @@ const OpenModalOverlay = common_1.createSubcomponent('div')({
     elemPropsHook: exports.useModalOverlay,
 })((elemProps, Element, model) => {
     const windowSize = common_1.useWindowSize();
-    const content = (react_1.default.createElement(Container, Object.assign({ as: Element }, elemProps),
-        react_1.default.createElement(ResponsiveContainer
+    const containerCenter = windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw';
+    const content = (react_1.default.createElement(layout_1.Box, Object.assign({}, layout_1.mergeStyles(elemProps, exports.modalOverlayContainerStencil({ containerCenter }))),
+        react_1.default.createElement(layout_1.Box
         // make sure the centering container is an even number of pixels to avoid sub-pixel
         // inaccuracies due to centering
-        , { 
-            // 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',
-            } }, elemProps.children)));
+        , null, elemProps.children)));
     // only render something on the client
     if (typeof window !== 'undefined') {
         return react_dom_1.default.createPortal(content, model.state.stackRef.current);
@@ -99,3 +47,9 @@ const OpenModalOverlay = common_1.createSubcomponent('div')({
         return null;
     }
 });
+exports.ModalOverlay = common_1.createSubcomponent('div')({
+    displayName: 'Modal.Overlay',
+    modelHook: hooks_1.useModalModel,
+})((elemProps, Element, model) => {
+    return model.state.visibility !== 'hidden' ? (react_1.default.createElement(OpenModalOverlay, Object.assign({ as: Element, model: model }, elemProps))) : null;
+});

package/dist/commonjs/popup/lib/Popper.js

@@ -76,10 +76,8 @@ const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, poppe
             enabled: true,
             phase: 'afterWrite',
             fn({ state }) {
-                if (placementRef.current !== state.placement) {
-                    setPlacement(state.placement);
-                    onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
-                }
+                setPlacement(state.placement);
+                onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
             },
         };
     }, [setPlacement, onPlacementChange]);

package/dist/commonjs/popup/lib/PopupBody.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export declare const popupBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const PopupBody: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../card/lib/CardBody").CardBodyProps & React.HTMLAttributes<HTMLDivElement>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/popup/lib/PopupBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupBody.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAKpB,CAAC"}
+{"version":3,"file":"PopupBody.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,gBAAgB,yIAK3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAKpB,CAAC"}

package/dist/commonjs/popup/lib/PopupBody.js

@@ -19,14 +19,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupBody = void 0;
+exports.PopupBody = exports.popupBodyStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const card_1 = require("@workday/canvas-kit-react/card");
 const hooks_1 = require("./hooks");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("../../layout");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.popupBodyStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "6a8871", styles: "box-sizing:border-box;overflow-y:auto;padding:var(--cnvs-sys-space-x2);" }
+}, "popup-body-1fee86");
 exports.PopupBody = common_1.createSubcomponent('div')({
     displayName: 'Popup.Body',
     modelHook: hooks_1.usePopupModel,
 })(elemProps => {
-    return React.createElement(card_1.Card.Body, Object.assign({ overflowY: "auto", padding: "xxs" }, elemProps));
+    return React.createElement(card_1.Card.Body, Object.assign({}, layout_1.mergeStyles(elemProps, exports.popupBodyStencil())));
 });

package/dist/commonjs/popup/lib/PopupCard.d.ts

@@ -6,6 +6,15 @@ export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexSty
 export interface PopupCardProps extends FlexAndBoxProps {
     children?: React.ReactNode;
 }
+export declare const popupCardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    maxHeight: string;
+    transformOriginHorizontal: string;
+    transformOriginVertical: string;
+}, never>, {
+    maxHeight: string;
+    transformOriginHorizontal: string;
+    transformOriginVertical: string;
+}, never, never>;
 export declare const PopupCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PopupCardProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA6BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAO7E,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA+CD,eAAO,MAAM,gBAAgB;;;;;;;;gBA6B3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA0BpB,CAAC"}

package/dist/commonjs/popup/lib/PopupCard.js

@@ -19,49 +19,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupCard = void 0;
+exports.PopupCard = exports.popupCardStencil = void 0;
 const React = __importStar(require("react"));
-const react_1 = require("@emotion/react");
 const card_1 = require("@workday/canvas-kit-react/card");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const getTransformFromPlacement_1 = require("./getTransformFromPlacement");
 const hooks_1 = require("./hooks");
-const popupAnimation = (transformOrigin) => {
-    const translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxs);
-    return react_1.keyframes `
-    0% {
-      opacity: 0;
-      transform: translate(${translate.x}px, ${translate.y}px);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0);
-    }
-  `;
-};
-const StyledPopupCard = common_1.styled(card_1.Card)(({ transformOrigin, theme }) => {
-    if (transformOrigin == null) {
-        return {};
-    }
-    return {
-        animation: popupAnimation(transformOrigin),
-        animationDuration: '150ms',
-        animationTimingFunction: 'ease-out',
-        transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-        [theme.canvas.breakpoints.down('s')]: {
-            animation: popupAnimation({ vertical: 'bottom', horizontal: 'center' }),
-            animationDuration: '150ms',
-            animationTimingFunction: 'ease-out',
-            transformOrigin: 'bottom center',
-        },
-        // Allow overriding of animation in special cases
-        '.wd-no-animation &': {
-            animation: 'none',
-        },
-    };
-});
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const translateVars = canvas_kit_styling_1.createVars({ id: "696a04", args: ["positionX", "positionY"] });
+/**
+ * Keyframe for the dots loading animation.
+ */
+const fadeIn = canvas_kit_styling_1.keyframes({ name: "c0610e", styles: "0%{opacity:1;transform:translate(var(--positionX-696a04), var(--positionY-696a04));}100%{opacity:1;transform:translate(0);}" });
 function getSpace(value) {
     if (value && value in tokens_1.space) {
         return tokens_1.space[value];
@@ -72,7 +44,7 @@ function getSpace(value) {
 }
 function getMaxHeight(margin) {
     // set the default margin offset to space.xl
-    let marginOffset = tokens_1.space.xl;
+    let marginOffset = canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10);
     if (margin) {
         // parse the margin prop
         if (typeof margin === 'string') {
@@ -89,15 +61,30 @@ function getMaxHeight(margin) {
     }
     return `calc(100vh - ${marginOffset})`;
 }
+exports.popupCardStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        maxHeight: '',
+        transformOriginHorizontal: '',
+        transformOriginVertical: '',
+    },
+    base: { name: "ed2f7f", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;position:relative;max-width:calc(100vw - var(--cnvs-sys-space-x8));flex-direction:column;box-shadow:var(--cnvs-sys-depth-5);min-height:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x6);max-height:var(--maxHeight-popup-card-36628b);overflow-y:auto;animation-name:animation-c0610e;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-36628b) var(--transformOriginHorizontal-popup-card-36628b);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;}" }
+}, "popup-card-36628b");
 exports.PopupCard = common_1.createSubcomponent('div')({
     displayName: 'Popup.Card',
     modelHook: hooks_1.usePopupModel,
     elemPropsHook: hooks_1.usePopupCard,
-})(({ children, ...elemProps }, Element, model) => {
+})(({ children, ref, ...elemProps }, Element, model) => {
     const transformOrigin = React.useMemo(() => {
         return getTransformFromPlacement_1.getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    // As is a Flex that will render an element of `Element`
-    const As = common_1.useConstant(() => layout_1.Flex.as(Element));
-    return (React.createElement(StyledPopupCard, Object.assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: `calc(100vw - ${tokens_1.space.l})`, flexDirection: "column", minHeight: 0, padding: "m", maxHeight: getMaxHeight(elemProps.margin), overflowY: "auto" }, tokens_1.type.levels.subtext.large, elemProps), children));
+    const translate = common_1.getTransformOrigin(transformOrigin, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2));
+    const cardMaxHeight = getMaxHeight(elemProps.margin);
+    return (React.createElement(card_1.Card, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, [
+        exports.popupCardStencil({
+            transformOriginHorizontal: transformOrigin.horizontal,
+            transformOriginVertical: transformOrigin.vertical,
+            maxHeight: cardMaxHeight,
+        }),
+        translateVars({ positionX: translate.x, positionY: translate.y }),
+    ])), children));
 });

package/dist/commonjs/popup/lib/PopupCloseIcon.d.ts

@@ -3,6 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {
 }
+export declare const popupCloseIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const PopupCloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PopupCloseIconProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/popup/lib/PopupCloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCloseIcon.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKhE,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;CAAG;AAE1F,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;EAiBzB,CAAC"}
+{"version":3,"file":"PopupCloseIcon.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAOhE,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;CAAG;AAE1F,eAAO,MAAM,qBAAqB,yIAMhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;EAczB,CAAC"}

package/dist/commonjs/popup/lib/PopupCloseIcon.js

@@ -3,17 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupCloseIcon = void 0;
+exports.PopupCloseIcon = exports.popupCloseIconStencil = void 0;
 const react_1 = __importDefault(require("react"));
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const common_1 = require("@workday/canvas-kit-react/common");
 const button_1 = require("@workday/canvas-kit-react/button");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const hooks_1 = require("./hooks");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("../../layout");
+exports.popupCloseIconStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "259736", styles: "box-sizing:border-box;position:absolute;inset-inline-end:var(--cnvs-sys-space-x1);top:var(--cnvs-sys-space-x1);" }
+}, "popup-close-icon-111273");
 exports.PopupCloseIcon = common_1.createSubcomponent('button')({
     displayName: 'Popup.CloseIcon',
     modelHook: hooks_1.usePopupModel,
     elemPropsHook: hooks_1.usePopupCloseButton,
 })(({ children, ...elemProps }, Element) => {
-    return (react_1.default.createElement(button_1.TertiaryButton, Object.assign({ as: Element, size: "medium", icon: canvas_system_icons_web_1.xIcon, type: "button", position: "absolute", insetInlineEnd: tokens_1.space.xxxs, top: tokens_1.space.xxxs }, elemProps)));
+    return (react_1.default.createElement(button_1.TertiaryButton, Object.assign({ as: Element, size: "medium", icon: canvas_system_icons_web_1.xIcon, type: "button" }, layout_1.mergeStyles(elemProps, exports.popupCloseIconStencil()))));
 });

package/dist/commonjs/popup/lib/PopupHeading.d.ts

@@ -4,6 +4,7 @@ import { Card } from '@workday/canvas-kit-react/card';
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
     children?: React.ReactNode;
 }
+export declare const popupHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const PopupHeading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", PopupHeadingProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/popup/lib/PopupHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupHeading.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAIpD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAUvB,CAAC"}
+{"version":3,"file":"PopupHeading.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAOpD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,yIAK9B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAUvB,CAAC"}

package/dist/commonjs/popup/lib/PopupHeading.js

@@ -19,15 +19,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupHeading = void 0;
+exports.PopupHeading = exports.popupHeadingStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const card_1 = require("@workday/canvas-kit-react/card");
 const hooks_1 = require("./hooks");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const layout_1 = require("../../layout");
+exports.popupHeadingStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "019f21", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);" }
+}, "popup-heading-3e49bb");
 exports.PopupHeading = common_1.createSubcomponent('h2')({
     displayName: 'Popup.Heading',
     modelHook: hooks_1.usePopupModel,
     elemPropsHook: hooks_1.usePopupHeading,
 })(({ children, ...elemProps }, Element) => {
-    return (React.createElement(card_1.Card.Heading, Object.assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
+    return (React.createElement(card_1.Card.Heading, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, exports.popupHeadingStencil())), children));
 });

package/dist/commonjs/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAgCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAgCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}

package/dist/commonjs/select/lib/Select.js

@@ -33,12 +33,14 @@ exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
     // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
     // the visible input
     react_1.default.useImperativeHandle(elementRef, () => {
-        localRef.current.focus = (options) => {
-            textInputProps.ref.current.focus(options);
-        };
-        localRef.current.blur = () => {
-            textInputProps.ref.current.blur();
-        };
+        if (localRef.current) {
+            localRef.current.focus = (options) => {
+                textInputProps.ref.current.focus(options);
+            };
+            localRef.current.blur = () => {
+                textInputProps.ref.current.blur();
+            };
+        }
         return localRef.current;
     }, [textInputProps.ref, localRef]);
     return (react_1.default.createElement(text_input_1.InputGroup, { "data-width": "ck-formfield-width" },
@@ -57,7 +59,7 @@ exports.SelectItem = common_1.createSubcomponent('li')({
 })(({ children, ...elemProps }, Element, _model) => {
     return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
-const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "2fefdf", styles: "max-height:18.75rem;" });
+const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "555ee5", styles: "max-height:18.75rem;" });
 exports.SelectCard = common_1.createSubcomponent('div')({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectCard_1.useSelectCard,

package/dist/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/text-input/index.js

@@ -11,7 +11,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputGroupModel = exports.InputGroup = void 0;
-__exportStar(require("./lib/InputIconContainer"), exports);
 __exportStar(require("./lib/TextInput"), exports);
 var InputGroup_1 = require("./lib/InputGroup");
 Object.defineProperty(exports, "InputGroup", { enumerable: true, get: function () { return InputGroup_1.InputGroup; } });

package/dist/commonjs/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"}