@workday/canvas-kit-react 11.0.0-alpha.795-next.0 → 11.0.0-alpha.796-next.0

package/dist/es6/loading-dots/lib/LoadingDots.js

@@ -10,8 +10,8 @@ const singleLoadingDotStencil = createStencil({
     vars: {
         animationDurationMs: '40ms',
     },
-    base: { name: "803fb0", styles: "--cnvs-single-loading-dot-animationDurationMs:40ms;box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-alt-strong);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-9d34b1;animation-duration:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 35);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 4);}&:nth-child(3){animation-delay:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 8);}" }
-}, "cnvs-single-loading-dot");
+    base: { name: "803fb0", styles: "--animationDurationMs-single-loading-dot-dec117:40ms;box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-alt-strong);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-9d34b1;animation-duration:calc(var(--animationDurationMs-single-loading-dot-dec117) * 35);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(var(--animationDurationMs-single-loading-dot-dec117) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-single-loading-dot-dec117) * 8);}" }
+}, "single-loading-dot-dec117");
 /**
  * The actual loading dot div.
  */
@@ -21,7 +21,7 @@ const LoadingAnimationDot = () => React.createElement("div", Object.assign({}, s
  */
 const loadingDotsStencil = createStencil({
     base: { name: "3e9339", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);" }
-}, "cnvs-loading-dots");
+}, "loading-dots-268f58");
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */

package/dist/es6/menu/lib/MenuCard.js

@@ -12,8 +12,8 @@ export const menuCardStencil = createStencil({
         transformOriginVertical: 'top',
         transformOriginHorizontal: 'left',
     },
-    base: { name: "a0bf52", styles: "--cnvs-menu-card-minWidth:0.0625rem;--cnvs-menu-card-transformOriginVertical:top;--cnvs-menu-card-transformOriginHorizontal:left;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);color:var(--cnvs-base-palette-black-pepper-300);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero);max-width:calc(100vw - var(--cnvs-sys-space-x8));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--cnvs-menu-card-minWidth);transform-origin:var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);.wd-no-animation &{animation:none;}" }
-}, "cnvs-menu-card");
+    base: { name: "a0bf52", styles: "--minWidth-menu-card-07ca6c:0.0625rem;--transformOriginVertical-menu-card-07ca6c:top;--transformOriginHorizontal-menu-card-07ca6c:left;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);color:var(--cnvs-base-palette-black-pepper-300);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero);max-width:calc(100vw - var(--cnvs-sys-space-x8));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--minWidth-menu-card-07ca6c);transform-origin:var(--transformOriginVertical-menu-card-07ca6c) var(--transformOriginHorizontal-menu-card-07ca6c);.wd-no-animation &{animation:none;}" }
+}, "menu-card-07ca6c");
 export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
     return {};
 });

package/dist/es6/menu/lib/MenuList.js

@@ -20,7 +20,7 @@ export const menuListStencil = createStencil({
             horizontal: { name: "3f3c28", styles: "flex-direction:row;" }
         }
     }
-}, "cnvs-menu-list");
+}, "menu-list-1651b0");
 export const MenuList = createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel,

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

@@ -12,13 +12,13 @@ import { createSubcomponent, createContainer, useLocalRef, } from '@workday/canv
 import { system } from '@workday/canvas-tokens-web';
 const selectInputStencil = createStencil({
     base: { name: "10220f", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
-}, "cnvs-select-input");
+}, "select-input-52ab4b");
 const selectIconsStencil = createStencil({
     base: { name: "def785", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
-}, "cnvs-select-icons");
+}, "select-icons-3130c0");
 const hiddenSelectInputStencil = createStencil({
     base: { name: "cf34d9", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
-}, "cnvs-hidden-select-input");
+}, "hidden-select-input-926b2b");
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,

package/dist/es6/switch/lib/Switch.js

@@ -5,7 +5,7 @@ import { brand, system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '../../layout';
 const switchContainerStencil = createStencil({
     base: { name: "aeab09", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
-}, "cnvs-switch-container");
+}, "switch-container-e9661f");
 const SwitchContainer = createComponent('div')({
     displayName: 'SwitchContainer',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -20,7 +20,7 @@ const switchInputStencil = createStencil({
             alert: { name: "a877d0", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
         }
     }
-}, "cnvs-switch-input");
+}, "switch-input-001dec");
 const SwitchInput = createComponent('input')({
     displayName: 'SwitchInput',
     Component: ({ error, ...elemProps }, ref, Element) => {
@@ -29,7 +29,7 @@ const SwitchInput = createComponent('input')({
 });
 const switchBackgroundStencil = createStencil({
     base: { name: "f185ac", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
-}, "cnvs-switch-background");
+}, "switch-background-17579c");
 const SwitchBackground = createComponent('div')({
     displayName: 'SwitchBackground',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -43,7 +43,7 @@ const switchCircleStencil = createStencil({
             true: { name: "06e4c0", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
         }
     }
-}, "cnvs-switch-circle");
+}, "switch-circle-2d1f0c");
 const SwitchCircle = createComponent('div')({
     displayName: 'SwitchCircle',
     Component: ({ checked, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/Table.js

@@ -12,7 +12,7 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableStencil = createStencil({
     base: { name: "2ced58", 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:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
-}, "cnvs-table");
+}, "table-773355");
 /**
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
  *

package/dist/es6/table/lib/TableBody.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableBodyStencil = createStencil({
     base: { name: "afe05d", styles: "box-sizing:border-box;display:grid;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
-}, "cnvs-table-body");
+}, "table-body-dbe12a");
 export const TableBody = createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/TableCaption.js

@@ -5,7 +5,7 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableCaptionStencil = createStencil({
     base: { name: "78005d", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
-}, "cnvs-table-caption");
+}, "table-caption-106f16");
 export const TableCaption = createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/TableCell.js

@@ -5,7 +5,7 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableCellStencil = createStencil({
     base: { name: "02da1e", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
-}, "cnvs-table-cell");
+}, "table-cell-c39aaf");
 export const TableCell = createComponent('td')({
     displayName: 'Table.Cell',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/TableFooter.js

@@ -4,7 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableFooterStencil = createStencil({
     base: { name: "1b51ed", styles: "box-sizing:border-box;display:grid;" }
-}, "cnvs-table-footer");
+}, "table-footer-9bbb07");
 export const TableFooter = createComponent('tfoot')({
     displayName: 'Table.Footer',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/TableHead.js

@@ -5,7 +5,7 @@ import { calc, createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeadStencil = createStencil({
     base: { name: "6f3bdd", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
-}, "cnvs-table-head");
+}, "table-head-c91e37");
 export const TableHead = createComponent('thead')({
     displayName: 'Table.Head',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/TableHeader.js

@@ -5,7 +5,7 @@ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeaderStencil = createStencil({
     base: { name: "ead3aa", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
-}, "cnvs-table-header");
+}, "table-header-8f0b37");
 export const TableHeader = createComponent('th')({
     displayName: 'Table.Header',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/table/lib/TableRow.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, createVars } from '@workday/canvas-kit-styling';
-const childrenVars = createVars({ id: "cnvs-children", args: ["cellNumber"] });
+const childrenVars = createVars({ id: "4d9bf5", args: ["cellNumber"] });
 // Styles for rows including dynamic sizing for amount of cells within a row
 const tableRowStencil = createStencil({
-    base: { name: "3b5604", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cnvs-children-cellNumber), minmax(10rem, 1fr));" }
-}, "cnvs-table-row");
+    base: { name: "3b5604", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
+}, "table-row-a6e914");
 export const TableRow = createComponent('tr')({
     displayName: 'Table.Row',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/text/lib/LabelText.js

@@ -23,7 +23,7 @@ const labelTextStencil = createStencil({
             styles: { name: "30e2b3", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
         }
     ]
-}, "cnvs-label-text");
+}, "label-text-047ddd");
 /**
  * This component is intended to be used for labeling input fields.
  * By default, it renders a semantic `label` element.

package/dist/es6/text/lib/Text.js

@@ -30,7 +30,7 @@ export const textStencil = createStencil({
             inverse: { name: "8bc750", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         }
     }
-}, "cnvs-text");
+}, "text-e3da06");
 /**
  * This is a generic base component intended to render any text.
  * It has `typeLevel` and `variant` style props that simplify navigating

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.795-next.0",
+  "version": "11.0.0-alpha.796-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": "^11.0.0-alpha.795-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.795-next.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.796-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.796-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "@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": "3762ebcef04e77d2e53ebef07dbfeb4fd48481de"
+  "gitHead": "2313244746a317a77b62512a32c6967fda5374e3"
 }