@workday/canvas-kit-preview-react 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0090-next.0

package/dist/es6/radio/lib/StyledRadioButton.js

@@ -8,10 +8,10 @@ import { RadioLabelContext } from './RadioLabel';
 const radioWidth = 18;
 const radioHeight = 18;
 const radioInputStencil = createStencil({
-    base: { name: "3ysv5i", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+    base: { name: "3fuvb2", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
         variant: {
-            inverse: { name: "1f4i8l", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
+            inverse: { name: "2otgm6", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
         }
     }
 }, "radio-input-f05aaa");
@@ -22,13 +22,13 @@ const StyledRadioInput = createComponent('input')({
     },
 });
 const radioInputWrapperStyles = createStencil({
-    base: { name: "2h8017", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
+    base: { name: "3ey4fy", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
     modifiers: {
         variant: {
-            inverse: { name: "5boua", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            inverse: { name: "2go38h", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
         },
         disabled: {
-            true: { name: "tf8xx", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+            true: { name: "37krpb", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
         }
     }
 }, "radio-input-wrapper-styles-fce2c4");

package/dist/es6/side-panel/lib/SidePanel.js

@@ -13,19 +13,19 @@ export const panelStencil = createStencil({
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "4aan0d", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    base: { name: "w7ev1", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
     modifiers: {
         variant: {
-            alternate: { name: "1savul", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
-            standard: { name: "3ilju", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+            alternate: { name: "1ftemd", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "f88ry", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
         },
         expanded: {
-            true: { name: "2thps4", styles: "width:var(--expandedWidth-panel-8771e1);max-width:var(--expandedWidth-panel-8771e1);" },
-            false: { name: "2kmcyp", styles: "width:var(--collapsedWidth-panel-8771e1);max-width:var(--collapsedWidth-panel-8771e1);" }
+            true: { name: "1p4yuw", styles: "width:var(--expandedWidth-panel-8771e1);max-width:var(--expandedWidth-panel-8771e1);" },
+            false: { name: "47ex3p", styles: "width:var(--collapsedWidth-panel-8771e1);max-width:var(--collapsedWidth-panel-8771e1);" }
         },
         touched: {
-            true: { name: "1tk5yc", styles: "" },
-            false: { name: "15h31j", styles: "animation:none;" }
+            true: { name: "28iybc", styles: "" },
+            false: { name: "259wbt", styles: "animation:none;" }
         }
     }
 }, "panel-8771e1");

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -8,35 +8,35 @@ import { SidePanelContext } from './hooks';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const sidePanelToggleButtonStencil = createStencil({
-    base: { name: "1idx5m", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    base: { name: "2bpfjr", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
     modifiers: {
         state: {
-            collapsing: { name: "4exjhv", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "44lx8f", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "1otbxh", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "a6t7l", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "lui40", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "44bri4", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "3k2le7", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "444hz9", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            left: { name: "4600qm", styles: "" },
-            right: { name: "4e6486", styles: "" }
+            left: { name: "3ok9rw", styles: "" },
+            right: { name: "35xukm", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "436rc1", styles: "transform:scaleX(-1);" }
+            styles: { name: "15hqst", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "l11if", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "2c29c5", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanded', origin: 'right' },
-            styles: { name: "26kkbm", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "1xxsq6", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanding', origin: 'right' },
-            styles: { name: "2pwa99", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "iw8u1", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         }
     ]
 }, "side-panel-toggle-button-da8098");

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -15,7 +15,7 @@ const deprecatedVariantsMap = {
     gray: 'neutral',
 };
 const statusIndicatorStencil = createStencil({
-    base: { name: "6a4v6", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-round);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);outline:0.0625rem solid transparent;--color-system-icon-3a4847:currentColor;" },
+    base: { name: "32i3y3", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-round);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);outline:0.0625rem solid transparent;--color-system-icon-3a4847:currentColor;" },
     modifiers: {
         /**
          * Defines the color of the `StatusIndicator`.
@@ -30,13 +30,13 @@ const statusIndicatorStencil = createStencil({
          * @default 'neutral'
          */
         variant: {
-            info: { name: "1xz0na", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
-            positive: { name: "2pkl19", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
-            caution: { name: "2miz4w", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
-            critical: { name: "3znav7", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
-            neutral: { name: "2e2h1m", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
-            ai: { name: "4d0d6e", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
-            transparent: { name: "3k5wen", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
+            info: { name: "3n5sqm", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
+            positive: { name: "3kq4rd", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
+            caution: { name: "1yy7ri", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
+            critical: { name: "w851x", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
+            neutral: { name: "2h5x5n", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
+            ai: { name: "3hvi23", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
+            transparent: { name: "1physt", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
         },
         /**
          * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
@@ -49,8 +49,8 @@ const statusIndicatorStencil = createStencil({
          *
          */
         emphasis: {
-            low: { name: "1fhr18", styles: "" },
-            high: { name: "1zypbp", styles: "" }
+            low: { name: "26rocs", styles: "" },
+            high: { name: "utbnf", styles: "" }
         }
     },
     compound: [
@@ -59,35 +59,35 @@ const statusIndicatorStencil = createStencil({
                 variant: 'info',
                 emphasis: 'high',
             },
-            styles: { name: "42kngh", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1e69q2", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'positive',
                 emphasis: 'high',
             },
-            styles: { name: "3efsp5", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "2bg87y", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'caution',
                 emphasis: 'high',
             },
-            styles: { name: "2lo3tr", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
+            styles: { name: "297k8f", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
         },
         {
             modifiers: {
                 variant: 'critical',
                 emphasis: 'high',
             },
-            styles: { name: "lyl4n", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "2fu3xc", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
         {
             modifiers: {
                 variant: 'neutral',
                 emphasis: 'high',
             },
-            styles: { name: "1zztsj", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "qtqhu", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ],
     defaultModifiers: {

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js

@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 const statusIndicatorLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "i0max", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
+    base: { name: "47mz1u", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
     defaultModifiers: { typeLevel: 'subtext.large' }
 }, "status-indicator-label-63258e");
 export const StatusIndicatorLabel = createComponent('span')({

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '14.2.2';
+export const version = '14.2.4';

package/index.ts

@@ -1,4 +1,4 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "15.0.0-alpha.0076-next.0",
+  "version": "15.0.0-alpha.0090-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0076-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0090-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0090-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
+  "gitHead": "54d08f77d0527af840c9f102ce9a8f44942a5e9d"
 }

package/avatar/index.ts

@@ -1,5 +0,0 @@
-export * from './lib/Avatar';
-export * from './lib/AvatarImage';
-export * from './lib/AvatarName';
-export * from './lib/BaseAvatar';
-export * from './lib/getInitialsFromName';

package/avatar/lib/Avatar.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {Property} from 'csstype';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-import {BaseAvatarProps, BaseAvatar, baseAvatarStencil} from './BaseAvatar';
-import {AvatarNameProps} from './AvatarName';
-
-export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
-  /**
-   * The URL of the user's photo. For best fit, use square images.
-   */
-  url?: string;
-  /**
-   * An objectFit property that can customize how to resize your image to fit its container.
-   * @default "contain"
-   */
-  objectFit?: Property.ObjectFit;
-  /**
-   * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
-   */
-  isDecorative?: boolean;
-}
-
-export const avatarStencil = createStencil({
-  extends: baseAvatarStencil,
-  parts: {
-    avatarImage: 'avatar-image',
-    avatarName: 'avatar-name',
-  },
-  base: {},
-  modifiers: {
-    imageLoaded: {
-      false: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          display: 'none',
-        },
-      }),
-      true: {
-        backgroundColor: system.color.bg.default,
-      },
-    },
-    objectFit: {
-      contain: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'contain',
-        },
-      }),
-      cover: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'cover',
-        },
-      }),
-      fill: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'fill',
-        },
-      }),
-      none: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'none',
-        },
-      }),
-      ['scale-down']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'scale-down',
-        },
-      }),
-      initial: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'initial',
-        },
-      }),
-
-      inherit: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'inherit',
-        },
-      }),
-      unset: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'unset',
-        },
-      }),
-      ['-moz-initial']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: '-moz-initial',
-        },
-      }),
-      ['revert']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'revert',
-        },
-      }),
-    },
-  },
-});
-
-/**
- * JSDoc for Avatar. Will be part of the Component API docs
- */
-export const Avatar = createComponent('div')({
-  displayName: 'Avatar',
-
-  Component: (
-    {
-      url,
-      name,
-      variant,
-      objectFit = 'contain',
-      preferredInitials,
-      isDecorative,
-      size,
-      ...elemProps
-    }: AvatarProps,
-    ref,
-    Element
-  ) => {
-    const [imageLoaded, setImageLoaded] = React.useState(false);
-
-    const handleImageLoad = () => {
-      if (!imageLoaded) {
-        setImageLoaded(true);
-      }
-    };
-
-    return (
-      <BaseAvatar
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, avatarStencil({variant, size, imageLoaded, objectFit}))}
-      >
-        {url && (
-          <>
-            <BaseAvatar.Image
-              onLoad={handleImageLoad}
-              src={url}
-              alt={isDecorative ? undefined : name}
-              aria-hidden={isDecorative}
-              {...avatarStencil.parts.avatarImage}
-            />
-          </>
-        )}
-        {name && (!url || !imageLoaded) && (
-          <BaseAvatar.Name
-            name={name}
-            preferredInitials={preferredInitials}
-            {...avatarStencil.parts.avatarName}
-          />
-        )}
-      </BaseAvatar>
-    );
-  },
-});

package/avatar/lib/AvatarImage.tsx

@@ -1,20 +0,0 @@
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-import {handleCsProp, createStencil, CSProps} from '@workday/canvas-kit-styling';
-
-export interface AvatarImageProps extends CSProps {}
-
-export const avatarImageStencil = createStencil({
-  base: {
-    height: '100%',
-    width: '100%',
-    objectFit: 'cover',
-  },
-});
-
-export const AvatarImage = createComponent('img')({
-  displayName: 'AvatarImage',
-  Component: ({...elemProps}: AvatarImageProps, ref, Element) => {
-    return <Element ref={ref} {...handleCsProp(elemProps, avatarImageStencil())} />;
-  },
-});

package/avatar/lib/AvatarName.tsx

@@ -1,32 +0,0 @@
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {CSProps, handleCsProp, createStencil} from '@workday/canvas-kit-styling';
-import {getInitialsFromName} from './getInitialsFromName';
-
-export interface AvatarNameProps extends CSProps {
-  /**
-   * The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
-   */
-  name: string;
-  /**
-   * If you want full control over the initials, use `preferredInitials` instead.
-   */
-  preferredInitials?: string;
-}
-
-export const avatarNameStencil = createStencil({
-  base: {
-    textTransform: 'uppercase',
-    cursor: 'default',
-  },
-});
-
-export const AvatarName = createComponent('span')({
-  displayName: 'AvatarName',
-  Component: ({name, preferredInitials, ...elemProps}: AvatarNameProps, ref, Element) => {
-    return (
-      <Element ref={ref} {...handleCsProp(elemProps, avatarNameStencil())}>
-        {preferredInitials || getInitialsFromName(name)}
-      </Element>
-    );
-  },
-});

package/avatar/lib/BaseAvatar.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-import {AvatarImage} from './AvatarImage';
-import {AvatarName} from './AvatarName';
-import {createStencil, cssVar, calc, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
-import {system, base} from '@workday/canvas-tokens-web';
-
-export interface BaseAvatarProps extends CSProps {
-  /**
-   * Children of the BaseAvatar.
-   */
-  children?: React.ReactNode;
-  /**
-   * The variant of the Avatar.
-   * @default "blue"
-   */
-  variant?: 'blue' | 'amber' | 'teal' | 'purple';
-
-  /**
-   * The size of the Avatar.
-   * `extraExtraSmall` is 24px x 24px
-   * `extraSmall` is 32px x 32px
-   * `small` is 40px x 40px
-   * `medium` is 48px x 48px
-   * `large` is 72px x 72px
-   * `extraLarge` is 96px x 96px
-   * `extraExtraLarge` is 120px x 120px
-   * @default "medium"
-   */
-  size?:
-    | 'extraExtraSmall'
-    | 'extraSmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'extraLarge'
-    | 'extraExtraLarge'
-    | (string & {});
-}
-
-export const baseAvatarStencil = createStencil({
-  vars: {
-    backgroundColor: '',
-    color: '',
-    size: '',
-  },
-  base: ({backgroundColor, color, size}) => ({
-    borderRadius: system.shape.round,
-    width: cssVar(size, calc.add(system.space.x10, system.space.x2)),
-    height: cssVar(size, calc.add(system.space.x10, system.space.x2)),
-    backgroundColor: cssVar(backgroundColor, base.blue300),
-    color: cssVar(color, base.blue800),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    border: 'none',
-    ...system.type.body.medium,
-  }),
-  modifiers: {
-    variant: {
-      blue: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.blue300),
-        color: cssVar(color, base.blue800),
-      }),
-      amber: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.amber200),
-        color: cssVar(color, base.amber700),
-      }),
-
-      teal: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.teal300),
-        color: cssVar(color, base.teal800),
-      }),
-      purple: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.purple300),
-        color: cssVar(color, base.purple800),
-      }),
-    },
-    size: {
-      extraExtraSmall: ({size}) => ({
-        [size]: system.space.x6,
-        ...system.type.subtext.small,
-      }),
-      extraSmall: ({size}) => ({
-        [size]: system.space.x8,
-        ...system.type.subtext.medium,
-      }),
-      small: ({size}) => ({
-        [size]: system.space.x10,
-        ...system.type.body.small,
-      }),
-      medium: ({size}) => ({
-        [size]: calc.add(system.space.x10, system.space.x2),
-        ...system.type.body.medium,
-      }),
-      large: ({size}) => ({
-        [size]: calc.add(system.space.x16, system.space.x2),
-        ...system.type.heading.medium,
-      }),
-      extraLarge: ({size}) => ({
-        [size]: calc.add(system.space.x20, system.space.x4),
-        ...system.type.title.small,
-      }),
-      extraExtraLarge: ({size}) => ({
-        [size]: calc.multiply(system.space.x10, 3),
-        ...system.type.title.medium,
-      }),
-    },
-  },
-});
-
-/**
- * JSDoc for Avatar. Will be part of the Component API docs
- */
-export const BaseAvatar = createComponent('div')({
-  displayName: 'BaseAvatar',
-  subComponents: {
-    Image: AvatarImage,
-    Name: AvatarName,
-  },
-  Component: ({variant, size, ...elemProps}: BaseAvatarProps, ref, Element) => {
-    return <Element ref={ref} {...handleCsProp(elemProps, baseAvatarStencil({variant, size}))} />;
-  },
-});

package/avatar/lib/getInitialsFromName.ts

@@ -1,11 +0,0 @@
-export const getInitialsFromName = (name: string) => {
-  // Trim and split by one or more whitespace characters
-  const nameParts = name.trim().split(/\s+/).filter(Boolean);
-
-  const first = nameParts[0];
-  const firstInitial = first?.[0] || '';
-  const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
-  const lastInitial = last?.[0] || '';
-
-  return `${firstInitial}${lastInitial}`;
-};

package/avatar/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../dist/commonjs/avatar",
-  "module": "../dist/es6/avatar",
-  "sideEffects": false,
-  "types": "../dist/es6/avatar"
-}

package/dist/commonjs/avatar/index.d.ts

@@ -1,6 +0,0 @@
-export * from './lib/Avatar';
-export * from './lib/AvatarImage';
-export * from './lib/AvatarName';
-export * from './lib/BaseAvatar';
-export * from './lib/getInitialsFromName';
-//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/avatar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/commonjs/avatar/index.js

@@ -1,21 +0,0 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib/Avatar"), exports);
-__exportStar(require("./lib/AvatarImage"), exports);
-__exportStar(require("./lib/AvatarName"), exports);
-__exportStar(require("./lib/BaseAvatar"), exports);
-__exportStar(require("./lib/getInitialsFromName"), exports);