@workday/canvas-kit-preview-react 11.0.0-alpha.795-next.0 → 11.0.0-alpha.797-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 (21) hide show
  1. package/dist/commonjs/form-field/lib/FormField.js +1 -1
  2. package/dist/commonjs/form-field/lib/FormFieldContainer.js +1 -1
  3. package/dist/commonjs/form-field/lib/FormFieldHint.js +2 -2
  4. package/dist/commonjs/form-field/lib/FormFieldLabel.js +2 -2
  5. package/dist/commonjs/radio/lib/RadioGroup.js +1 -1
  6. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  7. package/dist/commonjs/radio/lib/RadioText.js +1 -1
  8. package/dist/commonjs/radio/lib/StyledRadioButton.js +2 -2
  9. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +13 -13
  10. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  11. package/dist/es6/form-field/lib/FormField.js +1 -1
  12. package/dist/es6/form-field/lib/FormFieldContainer.js +1 -1
  13. package/dist/es6/form-field/lib/FormFieldHint.js +2 -2
  14. package/dist/es6/form-field/lib/FormFieldLabel.js +2 -2
  15. package/dist/es6/radio/lib/RadioGroup.js +1 -1
  16. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  17. package/dist/es6/radio/lib/RadioText.js +1 -1
  18. package/dist/es6/radio/lib/StyledRadioButton.js +2 -2
  19. package/dist/es6/status-indicator/lib/StatusIndicator.js +13 -13
  20. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  21. package/package.json +4 -4
package/dist/commonjs/form-field/lib/FormField.js CHANGED
@@ -21,7 +21,7 @@ const formFieldStencil = canvas_kit_styling_1.createStencil({
21
21
  true: { name: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
22
22
  }
23
23
  }
24
- }, "cnvs-preview-form-field");
24
+ }, "form-field-aed57a");
25
25
  /**
26
26
  * Use `FormField` to wrap input components to make them accessible. You can customize the field
27
27
  * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
package/dist/commonjs/form-field/lib/FormFieldContainer.js CHANGED
@@ -10,7 +10,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
10
10
  const hooks_1 = require("./hooks");
11
11
  const formFieldContainerStencil = canvas_kit_styling_1.createStencil({
12
12
  base: { name: "299ca4", styles: "box-sizing:border-box;display:flex;flex-direction:column;" }
13
- }, "cnvs-preview-form-field-container");
13
+ }, "form-field-container-8bf936");
14
14
  exports.FormFieldContainer = common_1.createSubcomponent('div')({
15
15
  displayName: 'FormField.Container',
16
16
  modelHook: hooks_1.useFormFieldModel,
package/dist/commonjs/form-field/lib/FormFieldHint.js CHANGED
@@ -16,10 +16,10 @@ const formFieldHintStencil = canvas_kit_styling_1.createStencil({
16
16
  modifiers: {
17
17
  error: {
18
18
  error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
19
- alert: {}
19
+ alert: { name: "ac1fad", styles: "" }
20
20
  }
21
21
  }
22
- }, "cnvs-preview-form-field-hint");
22
+ }, "form-field-hint-7eb209");
23
23
  exports.FormFieldHint = common_1.createSubcomponent('p')({
24
24
  displayName: 'FormField.Hint',
25
25
  modelHook: hooks_1.useFormFieldModel,
package/dist/commonjs/form-field/lib/FormFieldLabel.js CHANGED
@@ -12,7 +12,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
12
12
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
13
13
  const formFieldLabelAsteriskStencil = canvas_kit_styling_1.createStencil({
14
14
  base: { name: "a59d7a", styles: "box-sizing:border-box;font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
15
- }, "cnvs-preview-form-field-label-asterisk");
15
+ }, "form-field-label-asterisk-6c4d1f");
16
16
  const formFieldLabelStencil = canvas_kit_styling_1.createStencil({
17
17
  base: { name: "5443ce", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);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-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
18
18
  modifiers: {
@@ -35,7 +35,7 @@ const formFieldLabelStencil = canvas_kit_styling_1.createStencil({
35
35
  styles: { name: "a1f92a", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
36
36
  }
37
37
  ]
38
- }, "cnvs-preview-form-field-label");
38
+ }, "form-field-label-4d554f");
39
39
  exports.FormFieldLabel = common_1.createSubcomponent('label')({
40
40
  displayName: 'FormField.Label',
41
41
  modelHook: hooks_1.useFormFieldModel,
package/dist/commonjs/radio/lib/RadioGroup.js CHANGED
@@ -23,7 +23,7 @@ const radioGroupStencil = canvas_kit_styling_1.createStencil({
23
23
  alert: { name: "d9e924", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
24
24
  }
25
25
  }
26
- }, "cnvs-preview-radio-group");
26
+ }, "radio-group-ce2b62");
27
27
  /**
28
28
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
29
29
  *
package/dist/commonjs/radio/lib/RadioLabel.js CHANGED
@@ -14,7 +14,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
14
14
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
15
15
  const radioLabelStencil = canvas_kit_styling_1.createStencil({
16
16
  base: { name: "1ec9ca", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
17
- }, "cnvs-preview-radio-label");
17
+ }, "radio-label-0cca27");
18
18
  exports.RadioLabelContext = react_1.default.createContext({});
19
19
  exports.RadioLabel = common_1.createSubcomponent('label')({
20
20
  displayName: 'Radio.Label',
package/dist/commonjs/radio/lib/RadioText.js CHANGED
@@ -32,7 +32,7 @@ const radioTextStencil = canvas_kit_styling_1.createStencil({
32
32
  defaultModifiers: {
33
33
  typeLevel: 'subtext.large',
34
34
  }
35
- }, "cnvs-preview-radio-text");
35
+ }, "radio-text-896bda");
36
36
  exports.RadioText = common_1.createSubcomponent('span')({
37
37
  displayName: 'RadioButton.Text',
38
38
  modelHook: useRadioModel_1.useRadioModel,
package/dist/commonjs/radio/lib/StyledRadioButton.js CHANGED
@@ -19,7 +19,7 @@ const radioInputStencil = canvas_kit_styling_1.createStencil({
19
19
  inverse: { name: "c7fbe5", 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);}" }
20
20
  }
21
21
  }
22
- }, "cnvs-preview-radio-input");
22
+ }, "radio-input-f9afe2");
23
23
  const StyledRadioInput = common_1.createComponent('input')({
24
24
  displayName: 'StyledRadioInput',
25
25
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
@@ -36,7 +36,7 @@ const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
36
36
  true: { name: "84cadf", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
37
37
  }
38
38
  }
39
- }, "cnvs-preview-radio-input-wrapper-styles");
39
+ }, "radio-input-wrapper-styles-d4f692");
40
40
  const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
41
41
  displayName: 'RadioInputWrapper',
42
42
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
package/dist/commonjs/status-indicator/lib/StatusIndicator.js CHANGED
@@ -16,31 +16,31 @@ const statusIndicatorStencil = canvas_kit_styling_1.createStencil({
16
16
  base: { name: "f088dd", 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-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);" },
17
17
  modifiers: {
18
18
  gray: {
19
- high: { name: "3d70e3", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
20
- low: { name: "f99899", styles: "color:var(--cnvs-sys-color-static-gray-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
19
+ high: { name: "3d70e3", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
20
+ low: { name: "f99899", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
21
21
  },
22
22
  orange: {
23
- high: { name: "7ff109", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
24
- low: { name: "62c44d", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
23
+ high: { name: "7ff109", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-53c273:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
24
+ low: { name: "62c44d", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-53c273:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
25
25
  },
26
26
  blue: {
27
- high: { name: "5af7bb", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
28
- low: { name: "eda4b3", styles: "color:var(--cnvs-sys-color-static-blue-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
27
+ high: { name: "5af7bb", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
28
+ low: { name: "eda4b3", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
29
29
  },
30
30
  green: {
31
- high: { name: "5eed70", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
32
- low: { name: "6698cb", styles: "color:var(--cnvs-sys-color-static-green-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
31
+ high: { name: "5eed70", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
32
+ low: { name: "6698cb", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
33
33
  },
34
34
  red: {
35
- high: { name: "b59424", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
36
- low: { name: "bf727b", styles: "color:var(--cnvs-sys-color-static-red-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
35
+ high: { name: "b59424", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
36
+ low: { name: "bf727b", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
37
37
  },
38
38
  transparent: {
39
- high: { name: "46c455", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
40
- low: { name: "2d9e66", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
39
+ high: { name: "46c455", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
40
+ low: { name: "2d9e66", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
41
41
  }
42
42
  }
43
- }, "cnvs-preview-status-indicator");
43
+ }, "status-indicator-1a565e");
44
44
  /**
45
45
  * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
46
46
  * apply spacing evenly between its children. It has a default maximum width of `200px`.
package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js CHANGED
@@ -14,7 +14,7 @@ const statusIndicatorLabelStencil = canvas_kit_styling_1.createStencil({
14
14
  extends: text_1.textStencil,
15
15
  base: { name: "bcf5be", 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;" },
16
16
  defaultModifiers: { typeLevel: 'subtext.large' }
17
- }, "cnvs-preview-status-indicator-label");
17
+ }, "status-indicator-label-fbd39a");
18
18
  exports.StatusIndicatorLabel = common_1.createComponent('span')({
19
19
  displayName: 'StatusIndicator.Label',
20
20
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/es6/form-field/lib/FormField.js CHANGED
@@ -15,7 +15,7 @@ const formFieldStencil = createStencil({
15
15
  true: { name: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
16
16
  }
17
17
  }
18
- }, "cnvs-preview-form-field");
18
+ }, "form-field-aed57a");
19
19
  /**
20
20
  * Use `FormField` to wrap input components to make them accessible. You can customize the field
21
21
  * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
package/dist/es6/form-field/lib/FormFieldContainer.js CHANGED
@@ -4,7 +4,7 @@ import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
4
4
  import { useFormFieldModel } from './hooks';
5
5
  const formFieldContainerStencil = createStencil({
6
6
  base: { name: "299ca4", styles: "box-sizing:border-box;display:flex;flex-direction:column;" }
7
- }, "cnvs-preview-form-field-container");
7
+ }, "form-field-container-8bf936");
8
8
  export const FormFieldContainer = createSubcomponent('div')({
9
9
  displayName: 'FormField.Container',
10
10
  modelHook: useFormFieldModel,
package/dist/es6/form-field/lib/FormFieldHint.js CHANGED
@@ -10,10 +10,10 @@ const formFieldHintStencil = createStencil({
10
10
  modifiers: {
11
11
  error: {
12
12
  error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
13
- alert: {}
13
+ alert: { name: "ac1fad", styles: "" }
14
14
  }
15
15
  }
16
- }, "cnvs-preview-form-field-hint");
16
+ }, "form-field-hint-7eb209");
17
17
  export const FormFieldHint = createSubcomponent('p')({
18
18
  displayName: 'FormField.Hint',
19
19
  modelHook: useFormFieldModel,
package/dist/es6/form-field/lib/FormFieldLabel.js CHANGED
@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
6
6
  import { brand, system } from '@workday/canvas-tokens-web';
7
7
  const formFieldLabelAsteriskStencil = createStencil({
8
8
  base: { name: "a59d7a", styles: "box-sizing:border-box;font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
9
- }, "cnvs-preview-form-field-label-asterisk");
9
+ }, "form-field-label-asterisk-6c4d1f");
10
10
  const formFieldLabelStencil = createStencil({
11
11
  base: { name: "5443ce", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);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-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
12
12
  modifiers: {
@@ -29,7 +29,7 @@ const formFieldLabelStencil = createStencil({
29
29
  styles: { name: "a1f92a", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
30
30
  }
31
31
  ]
32
- }, "cnvs-preview-form-field-label");
32
+ }, "form-field-label-4d554f");
33
33
  export const FormFieldLabel = createSubcomponent('label')({
34
34
  displayName: 'FormField.Label',
35
35
  modelHook: useFormFieldModel,
package/dist/es6/radio/lib/RadioGroup.js CHANGED
@@ -17,7 +17,7 @@ const radioGroupStencil = createStencil({
17
17
  alert: { name: "d9e924", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
18
18
  }
19
19
  }
20
- }, "cnvs-preview-radio-group");
20
+ }, "radio-group-ce2b62");
21
21
  /**
22
22
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
23
23
  *
package/dist/es6/radio/lib/RadioLabel.js CHANGED
@@ -8,7 +8,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
8
8
  import { system } from '@workday/canvas-tokens-web';
9
9
  const radioLabelStencil = createStencil({
10
10
  base: { name: "1ec9ca", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
11
- }, "cnvs-preview-radio-label");
11
+ }, "radio-label-0cca27");
12
12
  export const RadioLabelContext = React.createContext({});
13
13
  export const RadioLabel = createSubcomponent('label')({
14
14
  displayName: 'Radio.Label',
package/dist/es6/radio/lib/RadioText.js CHANGED
@@ -26,7 +26,7 @@ const radioTextStencil = createStencil({
26
26
  defaultModifiers: {
27
27
  typeLevel: 'subtext.large',
28
28
  }
29
- }, "cnvs-preview-radio-text");
29
+ }, "radio-text-896bda");
30
30
  export const RadioText = createSubcomponent('span')({
31
31
  displayName: 'RadioButton.Text',
32
32
  modelHook: useRadioModel,
package/dist/es6/radio/lib/StyledRadioButton.js CHANGED
@@ -13,7 +13,7 @@ const radioInputStencil = createStencil({
13
13
  inverse: { name: "c7fbe5", 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);}" }
14
14
  }
15
15
  }
16
- }, "cnvs-preview-radio-input");
16
+ }, "radio-input-f9afe2");
17
17
  const StyledRadioInput = createComponent('input')({
18
18
  displayName: 'StyledRadioInput',
19
19
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
@@ -30,7 +30,7 @@ const radioInputWrapperStyles = createStencil({
30
30
  true: { name: "84cadf", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
31
31
  }
32
32
  }
33
- }, "cnvs-preview-radio-input-wrapper-styles");
33
+ }, "radio-input-wrapper-styles-d4f692");
34
34
  const RadioInputWrapper = createComponent(Flex)({
35
35
  displayName: 'RadioInputWrapper',
36
36
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED
@@ -10,31 +10,31 @@ const statusIndicatorStencil = createStencil({
10
10
  base: { name: "f088dd", 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-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);" },
11
11
  modifiers: {
12
12
  gray: {
13
- high: { name: "3d70e3", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
14
- low: { name: "f99899", styles: "color:var(--cnvs-sys-color-static-gray-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
13
+ high: { name: "3d70e3", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
14
+ low: { name: "f99899", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
15
15
  },
16
16
  orange: {
17
- high: { name: "7ff109", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
18
- low: { name: "62c44d", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
17
+ high: { name: "7ff109", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-53c273:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
18
+ low: { name: "62c44d", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-53c273:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
19
19
  },
20
20
  blue: {
21
- high: { name: "5af7bb", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
22
- low: { name: "eda4b3", styles: "color:var(--cnvs-sys-color-static-blue-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
21
+ high: { name: "5af7bb", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
22
+ low: { name: "eda4b3", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
23
23
  },
24
24
  green: {
25
- high: { name: "5eed70", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
26
- low: { name: "6698cb", styles: "color:var(--cnvs-sys-color-static-green-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
25
+ high: { name: "5eed70", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
26
+ low: { name: "6698cb", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
27
27
  },
28
28
  red: {
29
- high: { name: "b59424", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
30
- low: { name: "bf727b", styles: "color:var(--cnvs-sys-color-static-red-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
29
+ high: { name: "b59424", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
30
+ low: { name: "bf727b", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-53c273:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
31
31
  },
32
32
  transparent: {
33
- high: { name: "46c455", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
34
- low: { name: "2d9e66", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
33
+ high: { name: "46c455", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
34
+ low: { name: "2d9e66", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-53c273:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
35
35
  }
36
36
  }
37
- }, "cnvs-preview-status-indicator");
37
+ }, "status-indicator-1a565e");
38
38
  /**
39
39
  * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
40
40
  * apply spacing evenly between its children. It has a default maximum width of `200px`.
package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js CHANGED
@@ -8,7 +8,7 @@ const statusIndicatorLabelStencil = createStencil({
8
8
  extends: textStencil,
9
9
  base: { name: "bcf5be", 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;" },
10
10
  defaultModifiers: { typeLevel: 'subtext.large' }
11
- }, "cnvs-preview-status-indicator-label");
11
+ }, "status-indicator-label-fbd39a");
12
12
  export const StatusIndicatorLabel = createComponent('span')({
13
13
  displayName: 'StatusIndicator.Label',
14
14
  Component: ({ children, ...elemProps }, ref, Element) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "11.0.0-alpha.795-next.0",
3
+ "version": "11.0.0-alpha.797-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",
@@ -46,8 +46,8 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.795-next.0",
50
- "@workday/canvas-kit-styling": "^11.0.0-alpha.795-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.797-next.0",
50
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.797-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.3.1",
53
53
  "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
58
58
  "react-hook-form": "7.36.1",
59
59
  "yup": "^0.32.11"
60
60
  },
61
- "gitHead": "3762ebcef04e77d2e53ebef07dbfeb4fd48481de"
61
+ "gitHead": "78514b9b8a486bc3b361b57a0f5d340a2a86e39d"
62
62
  }