@workday/canvas-kit-react 12.0.0-alpha.906-next.0 → 12.0.0-alpha.908-next.0

package/dist/commonjs/menu/lib/MenuOption.d.ts

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface MenuOptionProps {
+    /**
+     * Optionally pass index to menu item. This should be done if `Menu.Item` components were created
+     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+     * inserted out of order.
+     */
+    index?: number;
+    /**
+     * The label text of the MenuOption.
+     */
+    children?: React.ReactNode;
+    /**
+     * The name of the menu item. This name will be used in the `onSelect` callback in the model. If
+     * this property is not provided, it will default to a string representation of the the zero-based
+     * index of the Tab when it was initialized.
+     */
+    'data-id'?: string;
+    /**
+     * `aria-disabled` is used for keyboard and screen reader users to discover disabled content with
+     * the keyboard or screen reader caret tool. For more information, see
+     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+     */
+    'aria-disabled'?: boolean;
+}
+export declare const menuOptionStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>, never>;
+export declare const StyledMenuOption: import("@workday/canvas-kit-react/common").ElementComponent<"button", MenuOptionProps>;
+export declare const useMenuOption: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, {
+    role: string;
+    'aria-selected': boolean;
+    onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
+} & {
+    className: string;
+} & {
+    ref: (instance: HTMLElement | null) => void;
+    'data-id': string;
+    disabled: boolean | undefined;
+    item: null;
+    virtual: null;
+    'aria-setsize': number | undefined;
+    'aria-posinset': number | undefined;
+    style: React.CSSProperties;
+    id: string;
+}>;
+export declare const MenuOption: import("@workday/canvas-kit-react/common").ElementComponentM<"li", MenuOptionProps, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}> & {
+    Icon: (elemProps: SystemIconProps) => React.JSX.Element;
+    Text: ({ children }: React.PropsWithChildren) => React.JSX.Element;
+};
+//# sourceMappingURL=MenuOption.d.ts.map

package/dist/commonjs/menu/lib/MenuOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuOption.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAY9F,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,2QAe5B,CAAC;AAeH,eAAO,MAAM,gBAAgB,wFAS3B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAMM,gBAAgB,CAAC,WAAW,CAAC;;;;;;;;;;;;;EAuB5D,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAvDY,eAAe;yBAId,MAAM,iBAAiB;CAmEzD,CAAC"}

package/dist/commonjs/menu/lib/MenuOption.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuOption = exports.useMenuOption = exports.StyledMenuOption = exports.menuOptionStencil = void 0;
+const React = __importStar(require("react"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useMenuModel_1 = require("./useMenuModel");
+const MenuItem_1 = require("./MenuItem");
+exports.menuOptionStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: MenuItem_1.menuItemStencil,
+    base: { name: "e3032s", styles: "box-sizing:border-box;&:where([aria-selected=true]){& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus){--color-system-icon-583fae:var(--cnvs-brand-primary-accent);outline:none;background-color:var(--cnvs-brand-primary-base);color:var(--color-system-icon-583fae);}}" }
+}, "menu-option-af4ba2");
+const MenuOptionIcon = (elemProps) => {
+    return React.createElement(icon_1.SystemIcon, { "data-part": "menu-item-icon", ...elemProps });
+};
+const MenuOptionText = ({ children }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { "data-part": "menu-item-text" }, children),
+        React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, "data-part": "menu-item-selected" })));
+};
+exports.StyledMenuOption = (0, common_1.createComponent)('button')({
+    displayName: 'MenuOption',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.menuOptionStencil)()) }, typeof children === 'string' ? React.createElement(MenuOptionText, null, children) : children));
+    },
+});
+exports.useMenuOption = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useMenuModel_1.useMenuModel)((model, ref, elemProps = {}) => {
+    const id = elemProps['data-id'] || '';
+    const selected = (0, collection_1.isSelected)(id, model.state);
+    const onMouseDown = (event) => {
+        // Only left mouse button
+        if (event.button === 0) {
+            if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                model.events.select({ id });
+                if (model.state.mode === 'single') {
+                    model.events.hide(event);
+                }
+            }
+        }
+        // prevent focus changes
+        event.preventDefault();
+    };
+    return {
+        role: 'option',
+        'aria-selected': selected,
+        onMouseDown,
+    };
+}), collection_1.useListItemActiveDescendant, collection_1.useListItemRegister);
+exports.MenuOption = (0, common_1.createSubcomponent)('li')({
+    displayName: 'Menu.Item',
+    modelHook: useMenuModel_1.useMenuModel,
+    elemPropsHook: exports.useMenuOption,
+    subComponents: {
+        Icon: MenuOptionIcon,
+        Text: MenuOptionText,
+    },
+})(({ children, ...elemProps }, Element) => {
+    return (React.createElement(tooltip_1.OverflowTooltip, { placement: "left" },
+        React.createElement(exports.StyledMenuOption, { as: Element, ...elemProps }, children)));
+});

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

@@ -32,7 +32,7 @@ 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.modalBodyStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb56", styles: "box-sizing:border-box;@media screen and (max-width: 768px){margin-block-end:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);}" }
+    base: { name: "e30356", styles: "box-sizing:border-box;@media screen and (max-width: 768px){margin-block-end:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);}" }
 }, "modal-body-d624fe");
 exports.ModalBody = (0, common_1.createSubcomponent)('div')({
     displayName: 'Modal.Body',

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

@@ -32,7 +32,7 @@ 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.modalCardStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb53", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x10);width:calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));border-width:var(--cnvs-sys-space-zero);box-shadow:var(--cnvs-sys-depth-6);@media screen and (max-width: 768px){margin:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-space-x6);}" }
+    base: { name: "e30353", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x10);width:calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));border-width:var(--cnvs-sys-space-zero);box-shadow:var(--cnvs-sys-depth-6);@media screen and (max-width: 768px){margin:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-space-x6);}" }
 }, "modal-card-9eebe8");
 exports.ModalCard = (0, common_1.createSubcomponent)('div')({
     displayName: 'Modal.Card',

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

@@ -32,7 +32,7 @@ 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 = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb54", 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);}" }
+    base: { name: "e30354", 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 = (0, common_1.createSubcomponent)('h2')({
     displayName: 'Modal.Heading',

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

@@ -31,7 +31,7 @@ const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.modalOverflowOverlayStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb55", styles: "box-sizing:border-box;& > div{max-height:inherit;}overflow:hidden auto;" }
+    base: { name: "e30355", styles: "box-sizing:border-box;& > div{max-height:inherit;}overflow:hidden auto;" }
 }, "modal-overflow-overlay-2ac342");
 exports.ModalOverflowOverlay = (0, common_1.createSubcomponent)('div')({
     displayName: 'Modal.OverflowOverlay',

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

@@ -12,12 +12,12 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 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 fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "znlb51", styles: "0%{background:none;}100%{background:var(--cnvs-sys-color-bg-overlay);}" });
+const fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "e30351", styles: "0%{background:none;}100%{background:var(--cnvs-sys-color-bg-overlay);}" });
 exports.modalOverlayContainerStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         containerCenter: '',
     },
-    base: { name: "znlb52", 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-znlb51;.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;}}" }
+    base: { name: "e30352", 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-e30351;.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 = (0, common_1.createElemPropsHook)(popup_1.usePopupModel)(({ state }, ref) => {
     const elementRef = (0, common_1.useForkRef)(ref, state.stackRef);

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

@@ -32,7 +32,7 @@ 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 = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb2i", styles: "box-sizing:border-box;overflow-y:auto;padding:var(--cnvs-sys-space-x2);" }
+    base: { name: "e3032i", styles: "box-sizing:border-box;overflow-y:auto;padding:var(--cnvs-sys-space-x2);" }
 }, "popup-body-1fee86");
 exports.PopupBody = (0, common_1.createSubcomponent)('div')({
     displayName: 'Popup.Body',

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

@@ -37,7 +37,7 @@ const translateVars = (0, canvas_kit_styling_1.createVars)({ id: "696a04", args:
 /**
  * Keyframe for the dots loading animation.
  */
-const fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "znlbx", styles: "0%{opacity:1;transform:translate(var(--positionX-696a04), var(--positionY-696a04));}100%{opacity:1;transform:translate(0);}" });
+const fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "e303x", 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];
@@ -71,7 +71,7 @@ exports.popupCardStencil = (0, canvas_kit_styling_1.createStencil)({
         transformOriginHorizontal: '',
         transformOriginVertical: '',
     },
-    base: { name: "znlby", 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-znlbx;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;}" }
+    base: { name: "e303y", 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-e303x;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 = (0, common_1.createSubcomponent)('div')({
     displayName: 'Popup.Card',

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

@@ -13,7 +13,7 @@ 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 = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb2h", styles: "box-sizing:border-box;position:absolute;inset-inline-end:var(--cnvs-sys-space-x1);top:var(--cnvs-sys-space-x1);" }
+    base: { name: "e3032h", 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 = (0, common_1.createSubcomponent)('button')({
     displayName: 'Popup.CloseIcon',

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

@@ -32,7 +32,7 @@ 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 = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "znlb2g", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);" }
+    base: { name: "e3032g", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);" }
 }, "popup-heading-3e49bb");
 exports.PopupHeading = (0, common_1.createSubcomponent)('h2')({
     displayName: 'Popup.Heading',