@workday/canvas-kit-preview-react 15.0.0-alpha.0314-next.0 → 15.0.0-alpha.0316-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +1 -1
  2. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +1 -1
  3. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +13 -13
  4. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +1 -1
  5. package/dist/commonjs/switch/lib/SwitchIcon.js +1 -1
  6. package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +1 -1
  7. package/dist/es6/multi-select/lib/MultiSelectInput.js +1 -1
  8. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +14 -14
  9. package/dist/es6/status-indicator/lib/StatusIndicator.js +1 -1
  10. package/dist/es6/switch/lib/SwitchIcon.js +1 -1
  11. package/package.json +5 -5
  12. package/side-panel/lib/SidePanelToggleButton.tsx +2 -2
package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js CHANGED
@@ -22,7 +22,7 @@ const Sparkle = () => {
22
22
  return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "data-part": "sparkle", icon: sparkleIcon_1.sparkleIcon, size: canvas_tokens_web_1.system.space.x3 });
23
23
  };
24
24
  exports.loadingSparklesStencil = (0, canvas_kit_styling_1.createStencil)({
25
- base: { name: "24hnov", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-352et5;animation-timing-function:ease-in-out;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
25
+ base: { name: "24hnov", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-352et5;animation-timing-function:ease-in-out;--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
26
26
  }, "loading-sparkles-322f75");
27
27
  /**
28
28
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
package/dist/commonjs/multi-select/lib/MultiSelectInput.js CHANGED
@@ -13,7 +13,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
13
13
  const MultiSelectedList_1 = require("./MultiSelectedList");
14
14
  const useMultiSelectModel_1 = require("./useMultiSelectModel");
15
15
  exports.multiSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
16
- base: { name: "1qvmfl", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1-half));min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-696c53:100%;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, var(--cnvs-sys-color-border-primary-default));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-sys-color-border-primary-default));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:var(--cnvs-sys-opacity-zero);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));flex-wrap:wrap;}" },
16
+ base: { name: "1qvmfl", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1-half));min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-696c53:100%;--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, var(--cnvs-sys-color-border-primary-default));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-sys-color-border-primary-default));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:var(--cnvs-sys-opacity-zero);--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));flex-wrap:wrap;}" },
17
17
  modifiers: {
18
18
  error: {
19
19
  error: { name: "1g6gqm", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, var(--cnvs-brand-common-error-inner));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner));background-color:var(--cnvs-sys-color-brand-surface-critical-default, var(--cnvs-brand-error-lightest));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, var(--cnvs-brand-common-error-inner));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, var(--cnvs-brand-common-error-inner));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner)), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, var(--cnvs-brand-common-focus-outline));outline-offset:0.125rem;}" },
package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js CHANGED
@@ -34,44 +34,44 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
34
34
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
35
35
  const hooks_1 = require("./hooks");
36
36
  exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
37
- base: { name: "m3r6n", 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);" },
37
+ base: { name: "gm0zn", 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);" },
38
38
  modifiers: {
39
39
  state: {
40
- collapsing: { name: "mpmmq", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
41
- collapsed: { name: "1eizhm", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
42
- expanded: { name: "1pmt57", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
43
- expanding: { name: "30j8wa", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
40
+ collapsing: { name: "3810wi", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
41
+ collapsed: { name: "1xomz", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
42
+ expanded: { name: "x7nh6", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
43
+ expanding: { name: "nbeoi", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
44
44
  },
45
45
  origin: {
46
- left: { name: "1wu6u7", styles: "" },
47
- right: { name: "3tgyf1", styles: "" }
46
+ left: { name: "3mzu94", styles: "" },
47
+ right: { name: "fetw8", styles: "" }
48
48
  }
49
49
  },
50
50
  compound: [
51
51
  {
52
52
  modifiers: { state: 'collapsed', origin: 'right' },
53
- styles: { name: "p167h", styles: "transform:scaleX(-1);" }
53
+ styles: { name: "14a7l4", styles: "transform:scaleX(-1);" }
54
54
  },
55
55
  {
56
56
  modifiers: { state: 'collapsing', origin: 'right' },
57
- styles: { name: "2ja1ac", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
57
+ styles: { name: "3gwor0", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
58
58
  },
59
59
  {
60
60
  modifiers: { state: 'expanded', origin: 'right' },
61
- styles: { name: "4fghhv", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
61
+ styles: { name: "1h54yy", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
62
62
  },
63
63
  {
64
64
  modifiers: { state: 'expanding', origin: 'right' },
65
- styles: { name: "3wbr7h", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
65
+ styles: { name: "1me4sc", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
66
66
  }
67
67
  ]
68
- }, "side-panel-toggle-button-f1cc3f");
68
+ }, "side-panel-toggle-button-eaff77");
69
69
  /**
70
70
  * A toggle button styled specifically for the side panel container.
71
71
  */
72
72
  exports.SidePanelToggleButton = (0, common_1.createComponent)('button')({
73
73
  displayName: 'SidePanel.ToggleButton',
74
- Component({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
74
+ Component({ variant = undefined, icon = canvas_system_icons_web_1.extendIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
75
75
  const context = React.useContext(hooks_1.SidePanelContext);
76
76
  return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted", children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { type: "button", icon: icon, variant: variant, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
77
77
  state: context.state,
package/dist/commonjs/status-indicator/lib/StatusIndicator.js CHANGED
@@ -18,7 +18,7 @@ const deprecatedVariantsMap = {
18
18
  gray: 'neutral',
19
19
  };
20
20
  const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
21
- base: { name: "2m3usm", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-round));height:var(--cnvs-sys-size-xxs, 1.25rem);padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));outline:0.0625rem solid transparent;--color-system-icon-f4b83b:currentColor;" },
21
+ base: { name: "2m3usm", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-round));height:var(--cnvs-sys-size-xxs, 1.25rem);padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));outline:0.0625rem solid transparent;--color-system-icon-2a31cf:currentColor;" },
22
22
  modifiers: {
23
23
  /**
24
24
  * Defines the color of the `StatusIndicator`.
package/dist/commonjs/switch/lib/SwitchIcon.js CHANGED
@@ -8,7 +8,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
8
8
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
9
9
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
10
10
  exports.switchIconStencil = (0, canvas_kit_styling_1.createStencil)({
11
- base: { name: "uir0u", styles: "box-sizing:border-box;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
11
+ base: { name: "uir0u", styles: "box-sizing:border-box;--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
12
12
  modifiers: {
13
13
  checked: {
14
14
  true: { name: "1u7jut", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
package/dist/es6/loading-sparkles/lib/LoadingSparkles.js CHANGED
@@ -19,7 +19,7 @@ const Sparkle = () => {
19
19
  return _jsx(SystemIcon, { "data-part": "sparkle", icon: sparkleIcon, size: system.space.x3 });
20
20
  };
21
21
  export const loadingSparklesStencil = createStencil({
22
- base: { name: "24hnov", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-352et5;animation-timing-function:ease-in-out;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
22
+ base: { name: "24hnov", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-352et5;animation-timing-function:ease-in-out;--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
23
23
  }, "loading-sparkles-322f75");
24
24
  /**
25
25
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
package/dist/es6/multi-select/lib/MultiSelectInput.js CHANGED
@@ -10,7 +10,7 @@ import { base, brand, system } from '@workday/canvas-tokens-web';
10
10
  import { MultiSelectedList } from './MultiSelectedList';
11
11
  import { useMultiSelectModel } from './useMultiSelectModel';
12
12
  export const multiSelectInputStencil = createStencil({
13
- base: { name: "1qvmfl", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1-half));min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-696c53:100%;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, var(--cnvs-sys-color-border-primary-default));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-sys-color-border-primary-default));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:var(--cnvs-sys-opacity-zero);--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));flex-wrap:wrap;}" },
13
+ base: { name: "1qvmfl", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1-half));min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-696c53:100%;--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, var(--cnvs-sys-color-border-primary-default));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-sys-color-border-primary-default));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:var(--cnvs-sys-opacity-zero);--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));flex-wrap:wrap;}" },
14
14
  modifiers: {
15
15
  error: {
16
16
  error: { name: "1g6gqm", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, var(--cnvs-brand-common-error-inner));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner));background-color:var(--cnvs-sys-color-brand-surface-critical-default, var(--cnvs-brand-error-lightest));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, var(--cnvs-brand-common-error-inner));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, var(--cnvs-brand-common-error-inner));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner)), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, var(--cnvs-brand-common-focus-outline));outline-offset:0.125rem;}" },
package/dist/es6/side-panel/lib/SidePanelToggleButton.js CHANGED
@@ -4,48 +4,48 @@ import { TertiaryButton } from '@workday/canvas-kit-react/button';
4
4
  import { createComponent } from '@workday/canvas-kit-react/common';
5
5
  import { Tooltip } from '@workday/canvas-kit-react/tooltip';
6
6
  import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
7
- import { transformationImportIcon } from '@workday/canvas-system-icons-web';
7
+ import { extendIcon } from '@workday/canvas-system-icons-web';
8
8
  import { system } from '@workday/canvas-tokens-web';
9
9
  import { SidePanelContext } from './hooks';
10
10
  export const sidePanelToggleButtonStencil = createStencil({
11
- base: { name: "m3r6n", 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);" },
11
+ base: { name: "gm0zn", 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);" },
12
12
  modifiers: {
13
13
  state: {
14
- collapsing: { name: "mpmmq", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
15
- collapsed: { name: "1eizhm", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
16
- expanded: { name: "1pmt57", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
17
- expanding: { name: "30j8wa", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
14
+ collapsing: { name: "3810wi", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
15
+ collapsed: { name: "1xomz", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
16
+ expanded: { name: "x7nh6", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
17
+ expanding: { name: "nbeoi", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
18
18
  },
19
19
  origin: {
20
- left: { name: "1wu6u7", styles: "" },
21
- right: { name: "3tgyf1", styles: "" }
20
+ left: { name: "3mzu94", styles: "" },
21
+ right: { name: "fetw8", styles: "" }
22
22
  }
23
23
  },
24
24
  compound: [
25
25
  {
26
26
  modifiers: { state: 'collapsed', origin: 'right' },
27
- styles: { name: "p167h", styles: "transform:scaleX(-1);" }
27
+ styles: { name: "14a7l4", styles: "transform:scaleX(-1);" }
28
28
  },
29
29
  {
30
30
  modifiers: { state: 'collapsing', origin: 'right' },
31
- styles: { name: "2ja1ac", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
31
+ styles: { name: "3gwor0", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
32
32
  },
33
33
  {
34
34
  modifiers: { state: 'expanded', origin: 'right' },
35
- styles: { name: "4fghhv", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
35
+ styles: { name: "1h54yy", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
36
36
  },
37
37
  {
38
38
  modifiers: { state: 'expanding', origin: 'right' },
39
- styles: { name: "3wbr7h", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
39
+ styles: { name: "1me4sc", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
40
40
  }
41
41
  ]
42
- }, "side-panel-toggle-button-f1cc3f");
42
+ }, "side-panel-toggle-button-eaff77");
43
43
  /**
44
44
  * A toggle button styled specifically for the side panel container.
45
45
  */
46
46
  export const SidePanelToggleButton = createComponent('button')({
47
47
  displayName: 'SidePanel.ToggleButton',
48
- Component({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
48
+ Component({ variant = undefined, icon = extendIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
49
49
  const context = React.useContext(SidePanelContext);
50
50
  return (_jsx(Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted", children: _jsx(TertiaryButton, { type: "button", icon: icon, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
51
51
  state: context.state,
package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED
@@ -15,7 +15,7 @@ const deprecatedVariantsMap = {
15
15
  gray: 'neutral',
16
16
  };
17
17
  const statusIndicatorStencil = createStencil({
18
- base: { name: "2m3usm", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-round));height:var(--cnvs-sys-size-xxs, 1.25rem);padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));outline:0.0625rem solid transparent;--color-system-icon-f4b83b:currentColor;" },
18
+ base: { name: "2m3usm", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-round));height:var(--cnvs-sys-size-xxs, 1.25rem);padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2));outline:0.0625rem solid transparent;--color-system-icon-2a31cf:currentColor;" },
19
19
  modifiers: {
20
20
  /**
21
21
  * Defines the color of the `StatusIndicator`.
package/dist/es6/switch/lib/SwitchIcon.js CHANGED
@@ -5,7 +5,7 @@ import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit
5
5
  import { checkSmallIcon, xSmallIcon } from '@workday/canvas-system-icons-web';
6
6
  import { brand, component, system } from '@workday/canvas-tokens-web';
7
7
  export const switchIconStencil = createStencil({
8
- base: { name: "uir0u", styles: "box-sizing:border-box;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
8
+ base: { name: "uir0u", styles: "box-sizing:border-box;--color-system-icon-2a31cf:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
9
9
  modifiers: {
10
10
  checked: {
11
11
  true: { name: "1u7jut", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "15.0.0-alpha.0314-next.0",
3
+ "version": "15.0.0-alpha.0316-next.0",
4
4
  "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.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -48,10 +48,10 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^15.0.0-alpha.0314-next.0",
52
- "@workday/canvas-kit-styling": "^15.0.0-alpha.0314-next.0",
51
+ "@workday/canvas-kit-react": "^15.0.0-alpha.0316-next.0",
52
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0316-next.0",
53
53
  "@workday/canvas-system-icons-web": "4.0.2",
54
- "@workday/canvas-tokens-web": "4.2.0",
54
+ "@workday/canvas-tokens-web": "4.3.0",
55
55
  "@workday/design-assets-types": "^0.3.0"
56
56
  },
57
57
  "devDependencies": {
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "a9acd08c80db85f9a2f1e022fe18a4261cafec80"
63
+ "gitHead": "f4f62be1980c79e999f82678036ed1573e1a6afd"
64
64
  }
package/side-panel/lib/SidePanelToggleButton.tsx CHANGED
@@ -4,7 +4,7 @@ import {TertiaryButton} from '@workday/canvas-kit-react/button';
4
4
  import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
5
5
  import {Tooltip} from '@workday/canvas-kit-react/tooltip';
6
6
  import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
7
- import {transformationImportIcon} from '@workday/canvas-system-icons-web';
7
+ import {extendIcon} from '@workday/canvas-system-icons-web';
8
8
  import {system} from '@workday/canvas-tokens-web';
9
9
 
10
10
  import {SidePanelTransitionStates} from './SidePanel';
@@ -105,7 +105,7 @@ export const SidePanelToggleButton = createComponent('button')({
105
105
  displayName: 'SidePanel.ToggleButton',
106
106
  Component({
107
107
  variant = undefined,
108
- icon = transformationImportIcon,
108
+ icon = extendIcon,
109
109
  tooltipTextExpand = 'Expand',
110
110
  tooltipTextCollapse = 'Collapse',
111
111
  ...elemProps