@workday/canvas-kit-preview-react 14.0.0-alpha.1237-next.0 → 14.0.0-alpha.1238-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 (26) hide show
  1. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +3 -3
  2. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +5 -5
  3. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +1 -1
  4. package/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts +2 -2
  5. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +1 -1
  6. package/dist/commonjs/radio/lib/RadioGroup.js +1 -1
  7. package/dist/commonjs/radio/lib/hooks/useRadioModel.d.ts +2 -2
  8. package/dist/commonjs/radio/lib/hooks/useRadioModel.js +1 -1
  9. package/dist/commonjs/select/lib/SelectMenu.js +2 -2
  10. package/dist/commonjs/select/lib/SelectOption.js +1 -1
  11. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +3 -3
  12. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +5 -5
  13. package/dist/es6/information-highlight/lib/parts/Icon.d.ts +1 -1
  14. package/dist/es6/multi-select/lib/MultiSelectInput.d.ts +2 -2
  15. package/dist/es6/multi-select/lib/MultiSelectInput.js +1 -1
  16. package/dist/es6/radio/lib/RadioGroup.js +1 -1
  17. package/dist/es6/radio/lib/hooks/useRadioModel.d.ts +2 -2
  18. package/dist/es6/radio/lib/hooks/useRadioModel.js +1 -1
  19. package/dist/es6/select/lib/SelectMenu.js +2 -2
  20. package/dist/es6/select/lib/SelectOption.js +1 -1
  21. package/multi-select/lib/MultiSelectInput.tsx +1 -1
  22. package/package.json +4 -4
  23. package/radio/lib/RadioGroup.tsx +1 -1
  24. package/radio/lib/hooks/useRadioModel.tsx +1 -1
  25. package/select/lib/SelectMenu.tsx +2 -2
  26. package/select/lib/SelectOption.tsx +1 -1
@@ -52,18 +52,18 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
52
52
  };
53
53
  }, {}, {}, never, never>;
54
54
  export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
55
- variant: "informational" | "caution" | "critical";
55
+ variant: "caution" | "informational" | "critical";
56
56
  emphasis: "high" | "low";
57
57
  }> & {} & {}, {
58
58
  state: {
59
- variant: "informational" | "caution" | "critical";
59
+ variant: "caution" | "informational" | "critical";
60
60
  emphasis: "high" | "low";
61
61
  };
62
62
  events: {};
63
63
  }> & {
64
64
  Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
65
65
  state: {
66
- variant: "informational" | "caution" | "critical";
66
+ variant: "caution" | "informational" | "critical";
67
67
  emphasis: "high" | "low";
68
68
  };
69
69
  events: {};
@@ -1,21 +1,21 @@
1
1
  export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
2
- variant: "informational" | "caution" | "critical";
2
+ variant: "caution" | "informational" | "critical";
3
3
  emphasis: "high" | "low";
4
4
  }> & {} & {}) | undefined) => {
5
5
  state: {
6
- variant: "informational" | "caution" | "critical";
6
+ variant: "caution" | "informational" | "critical";
7
7
  emphasis: "high" | "low";
8
8
  };
9
9
  events: {};
10
10
  }) & import("@workday/canvas-kit-react/common").ModelExtras<{
11
- variant: "informational" | "caution" | "critical";
11
+ variant: "caution" | "informational" | "critical";
12
12
  emphasis: "high" | "low";
13
13
  }, {}, {
14
- variant: "informational" | "caution" | "critical";
14
+ variant: "caution" | "informational" | "critical";
15
15
  emphasis: "high" | "low";
16
16
  }, {}, {
17
17
  state: {
18
- variant: "informational" | "caution" | "critical";
18
+ variant: "caution" | "informational" | "critical";
19
19
  emphasis: "high" | "low";
20
20
  };
21
21
  events: {};
@@ -4,7 +4,7 @@ export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never
4
4
  }
5
5
  export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
6
6
  state: {
7
- variant: "informational" | "caution" | "critical";
7
+ variant: "caution" | "informational" | "critical";
8
8
  emphasis: "high" | "low";
9
9
  };
10
10
  events: {};
@@ -17,7 +17,7 @@ export declare const multiSelectInputStencil: import("@workday/canvas-kit-stylin
17
17
  outlineOffset: string;
18
18
  };
19
19
  };
20
- alert: {
20
+ caution: {
21
21
  borderColor: "--cnvs-brand-common-alert-outer";
22
22
  boxShadow: `inset 0 0 0 ${string} --cnvs-brand-common-alert-inner`;
23
23
  backgroundColor: "--cnvs-brand-alert-lightest";
@@ -47,7 +47,7 @@ export declare const multiSelectStencil: import("@workday/canvas-kit-styling").S
47
47
  outlineOffset: string;
48
48
  };
49
49
  };
50
- alert: {
50
+ caution: {
51
51
  borderColor: "--cnvs-brand-common-alert-outer";
52
52
  boxShadow: `inset 0 0 0 ${string} --cnvs-brand-common-alert-inner`;
53
53
  backgroundColor: "--cnvs-brand-alert-lightest";
@@ -18,7 +18,7 @@ exports.multiSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
18
18
  modifiers: {
19
19
  error: {
20
20
  error: { name: "2bji2w", styles: "border-color:var(--cnvs-brand-common-error-inner);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner);background-color:var(--cnvs-brand-error-lightest);&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-brand-common-error-inner);}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-brand-common-error-inner);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
21
- alert: { name: "3lq3rt", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n 0 0 0 2px var(--cnvs-sys-color-border-inverse),\n 0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
21
+ caution: { name: "1vmte7", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n 0 0 0 2px var(--cnvs-sys-color-border-inverse),\n 0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
22
22
  }
23
23
  }
24
24
  }, "multi-select-input-e00caf");
@@ -17,7 +17,7 @@ const radioGroupStencil = (0, canvas_kit_styling_1.createStencil)({
17
17
  modifiers: {
18
18
  error: {
19
19
  error: { name: "2cx6t7", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);background-color:var(--cnvs-brand-error-lightest);" },
20
- alert: { name: "oxmun", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);" }
20
+ caution: { name: "3dd2e3", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);" }
21
21
  }
22
22
  }
23
23
  }, "radio-group-aea204");
@@ -6,7 +6,7 @@ export declare const useRadioModel: (<TT_Special_Generic>(config?: (Partial<{
6
6
  *
7
7
  * ```tsx
8
8
  * <FormField
9
- * error={FormField.ErrorType.Alert}
9
+ * error="caution"
10
10
  * hintId="hint-alert"
11
11
  * hintText="Deep dish is an extra $2.99"
12
12
  * label="Choose Your Pizza Crust"
@@ -55,7 +55,7 @@ export declare const useRadioModel: (<TT_Special_Generic>(config?: (Partial<{
55
55
  *
56
56
  * ```tsx
57
57
  * <FormField
58
- * error={FormField.ErrorType.Alert}
58
+ * error="caution"
59
59
  * hintId="hint-alert"
60
60
  * hintText="Deep dish is an extra $2.99"
61
61
  * label="Choose Your Pizza Crust"
@@ -14,7 +14,7 @@ exports.useRadioModel = (0, common_1.createModelHook)({
14
14
  *
15
15
  * ```tsx
16
16
  * <FormField
17
- * error={FormField.ErrorType.Alert}
17
+ * error="caution"
18
18
  * hintId="hint-alert"
19
19
  * hintText="Deep dish is an extra $2.99"
20
20
  * label="Choose Your Pizza Crust"
@@ -15,7 +15,7 @@ const menuBorderStyles = (theme, error) => {
15
15
  borderColor = theme.canvas.palette.error.main;
16
16
  dividerBorderColor = borderColor;
17
17
  }
18
- else if (error === common_1.ErrorType.Alert) {
18
+ else if (error === common_1.ErrorType.Caution) {
19
19
  borderColor = theme.canvas.palette.alert.darkest;
20
20
  dividerBorderColor = theme.canvas.palette.alert.main;
21
21
  dividerBorderWidth = 2;
@@ -49,7 +49,7 @@ const menuListBorderStyles = (theme, error) => {
49
49
  if (error === common_1.ErrorType.Error) {
50
50
  borderColor = theme.canvas.palette.error.main;
51
51
  }
52
- else if (error === common_1.ErrorType.Alert) {
52
+ else if (error === common_1.ErrorType.Caution) {
53
53
  borderColor = theme.canvas.palette.alert.main;
54
54
  borderWidth = 2;
55
55
  }
@@ -62,7 +62,7 @@ const Option = (0, common_1.styled)('li')({
62
62
  };
63
63
  }
64
64
  }, ({ error }) => ({
65
- padding: `${optionPadding}px ${error === common_1.ErrorType.Alert ? optionPadding - 1 : optionPadding}px`,
65
+ padding: `${optionPadding}px ${error === common_1.ErrorType.Caution ? optionPadding - 1 : optionPadding}px`,
66
66
  }));
67
67
  /**
68
68
  * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
@@ -52,18 +52,18 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
52
52
  };
53
53
  }, {}, {}, never, never>;
54
54
  export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
55
- variant: "informational" | "caution" | "critical";
55
+ variant: "caution" | "informational" | "critical";
56
56
  emphasis: "high" | "low";
57
57
  }> & {} & {}, {
58
58
  state: {
59
- variant: "informational" | "caution" | "critical";
59
+ variant: "caution" | "informational" | "critical";
60
60
  emphasis: "high" | "low";
61
61
  };
62
62
  events: {};
63
63
  }> & {
64
64
  Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
65
65
  state: {
66
- variant: "informational" | "caution" | "critical";
66
+ variant: "caution" | "informational" | "critical";
67
67
  emphasis: "high" | "low";
68
68
  };
69
69
  events: {};
@@ -1,21 +1,21 @@
1
1
  export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
2
- variant: "informational" | "caution" | "critical";
2
+ variant: "caution" | "informational" | "critical";
3
3
  emphasis: "high" | "low";
4
4
  }> & {} & {}) | undefined) => {
5
5
  state: {
6
- variant: "informational" | "caution" | "critical";
6
+ variant: "caution" | "informational" | "critical";
7
7
  emphasis: "high" | "low";
8
8
  };
9
9
  events: {};
10
10
  }) & import("@workday/canvas-kit-react/common").ModelExtras<{
11
- variant: "informational" | "caution" | "critical";
11
+ variant: "caution" | "informational" | "critical";
12
12
  emphasis: "high" | "low";
13
13
  }, {}, {
14
- variant: "informational" | "caution" | "critical";
14
+ variant: "caution" | "informational" | "critical";
15
15
  emphasis: "high" | "low";
16
16
  }, {}, {
17
17
  state: {
18
- variant: "informational" | "caution" | "critical";
18
+ variant: "caution" | "informational" | "critical";
19
19
  emphasis: "high" | "low";
20
20
  };
21
21
  events: {};
@@ -4,7 +4,7 @@ export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never
4
4
  }
5
5
  export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
6
6
  state: {
7
- variant: "informational" | "caution" | "critical";
7
+ variant: "caution" | "informational" | "critical";
8
8
  emphasis: "high" | "low";
9
9
  };
10
10
  events: {};
@@ -17,7 +17,7 @@ export declare const multiSelectInputStencil: import("@workday/canvas-kit-stylin
17
17
  outlineOffset: string;
18
18
  };
19
19
  };
20
- alert: {
20
+ caution: {
21
21
  borderColor: "--cnvs-brand-common-alert-outer";
22
22
  boxShadow: `inset 0 0 0 ${string} --cnvs-brand-common-alert-inner`;
23
23
  backgroundColor: "--cnvs-brand-alert-lightest";
@@ -47,7 +47,7 @@ export declare const multiSelectStencil: import("@workday/canvas-kit-styling").S
47
47
  outlineOffset: string;
48
48
  };
49
49
  };
50
- alert: {
50
+ caution: {
51
51
  borderColor: "--cnvs-brand-common-alert-outer";
52
52
  boxShadow: `inset 0 0 0 ${string} --cnvs-brand-common-alert-inner`;
53
53
  backgroundColor: "--cnvs-brand-alert-lightest";
@@ -15,7 +15,7 @@ export const multiSelectInputStencil = createStencil({
15
15
  modifiers: {
16
16
  error: {
17
17
  error: { name: "2bji2w", styles: "border-color:var(--cnvs-brand-common-error-inner);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner);background-color:var(--cnvs-brand-error-lightest);&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-brand-common-error-inner);}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-brand-common-error-inner);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
18
- alert: { name: "3lq3rt", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n 0 0 0 2px var(--cnvs-sys-color-border-inverse),\n 0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
18
+ caution: { name: "1vmte7", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n 0 0 0 2px var(--cnvs-sys-color-border-inverse),\n 0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
19
19
  }
20
20
  }
21
21
  }, "multi-select-input-e00caf");
@@ -14,7 +14,7 @@ const radioGroupStencil = createStencil({
14
14
  modifiers: {
15
15
  error: {
16
16
  error: { name: "2cx6t7", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);background-color:var(--cnvs-brand-error-lightest);" },
17
- alert: { name: "oxmun", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);" }
17
+ caution: { name: "3dd2e3", styles: "background-color:var(--cnvs-brand-alert-lightest);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner), inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);" }
18
18
  }
19
19
  }
20
20
  }, "radio-group-aea204");
@@ -6,7 +6,7 @@ export declare const useRadioModel: (<TT_Special_Generic>(config?: (Partial<{
6
6
  *
7
7
  * ```tsx
8
8
  * <FormField
9
- * error={FormField.ErrorType.Alert}
9
+ * error="caution"
10
10
  * hintId="hint-alert"
11
11
  * hintText="Deep dish is an extra $2.99"
12
12
  * label="Choose Your Pizza Crust"
@@ -55,7 +55,7 @@ export declare const useRadioModel: (<TT_Special_Generic>(config?: (Partial<{
55
55
  *
56
56
  * ```tsx
57
57
  * <FormField
58
- * error={FormField.ErrorType.Alert}
58
+ * error="caution"
59
59
  * hintId="hint-alert"
60
60
  * hintText="Deep dish is an extra $2.99"
61
61
  * label="Choose Your Pizza Crust"
@@ -8,7 +8,7 @@ export const useRadioModel = createModelHook({
8
8
  *
9
9
  * ```tsx
10
10
  * <FormField
11
- * error={FormField.ErrorType.Alert}
11
+ * error="caution"
12
12
  * hintId="hint-alert"
13
13
  * hintText="Deep dish is an extra $2.99"
14
14
  * label="Choose Your Pizza Crust"
@@ -12,7 +12,7 @@ const menuBorderStyles = (theme, error) => {
12
12
  borderColor = theme.canvas.palette.error.main;
13
13
  dividerBorderColor = borderColor;
14
14
  }
15
- else if (error === ErrorType.Alert) {
15
+ else if (error === ErrorType.Caution) {
16
16
  borderColor = theme.canvas.palette.alert.darkest;
17
17
  dividerBorderColor = theme.canvas.palette.alert.main;
18
18
  dividerBorderWidth = 2;
@@ -46,7 +46,7 @@ const menuListBorderStyles = (theme, error) => {
46
46
  if (error === ErrorType.Error) {
47
47
  borderColor = theme.canvas.palette.error.main;
48
48
  }
49
- else if (error === ErrorType.Alert) {
49
+ else if (error === ErrorType.Caution) {
50
50
  borderColor = theme.canvas.palette.alert.main;
51
51
  borderWidth = 2;
52
52
  }
@@ -59,7 +59,7 @@ const Option = styled('li')({
59
59
  };
60
60
  }
61
61
  }, ({ error }) => ({
62
- padding: `${optionPadding}px ${error === ErrorType.Alert ? optionPadding - 1 : optionPadding}px`,
62
+ padding: `${optionPadding}px ${error === ErrorType.Caution ? optionPadding - 1 : optionPadding}px`,
63
63
  }));
64
64
  /**
65
65
  * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
@@ -114,7 +114,7 @@ export const multiSelectInputStencil = createStencil({
114
114
  outlineOffset: px2rem(2),
115
115
  },
116
116
  },
117
- alert: {
117
+ caution: {
118
118
  borderColor: brand.common.alertOuter,
119
119
  boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner}`,
120
120
  backgroundColor: brand.alert.lightest,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "14.0.0-alpha.1237-next.0",
3
+ "version": "14.0.0-alpha.1238-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,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^14.0.0-alpha.1237-next.0",
52
- "@workday/canvas-kit-styling": "^14.0.0-alpha.1237-next.0",
51
+ "@workday/canvas-kit-react": "^14.0.0-alpha.1238-next.0",
52
+ "@workday/canvas-kit-styling": "^14.0.0-alpha.1238-next.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.35",
54
54
  "@workday/canvas-tokens-web": "3.0.0-alpha.12",
55
55
  "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "8a03bc6fdf11ecb2672ad937247aaf18b7cee0ec"
63
+ "gitHead": "ddfa0ae8c1be2e17cd6133b84fa8a76825267f5b"
64
64
  }
@@ -33,7 +33,7 @@ const radioGroupStencil = createStencil({
33
33
  boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`,
34
34
  backgroundColor: brand.error.lightest,
35
35
  },
36
- alert: {
36
+ caution: {
37
37
  backgroundColor: brand.alert.lightest,
38
38
  boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.alertInner}, inset 0 0 0 ${px2rem(3)} ${
39
39
  brand.common.alertOuter
@@ -10,7 +10,7 @@ export const useRadioModel = createModelHook({
10
10
  *
11
11
  * ```tsx
12
12
  * <FormField
13
- * error={FormField.ErrorType.Alert}
13
+ * error="caution"
14
14
  * hintId="hint-alert"
15
15
  * hintText="Deep dish is an extra $2.99"
16
16
  * label="Choose Your Pizza Crust"
@@ -64,7 +64,7 @@ const menuBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObje
64
64
  if (error === ErrorType.Error) {
65
65
  borderColor = theme.canvas.palette.error.main;
66
66
  dividerBorderColor = borderColor;
67
- } else if (error === ErrorType.Alert) {
67
+ } else if (error === ErrorType.Caution) {
68
68
  borderColor = theme.canvas.palette.alert.darkest;
69
69
  dividerBorderColor = theme.canvas.palette.alert.main;
70
70
  dividerBorderWidth = 2;
@@ -103,7 +103,7 @@ const menuListBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSS
103
103
 
104
104
  if (error === ErrorType.Error) {
105
105
  borderColor = theme.canvas.palette.error.main;
106
- } else if (error === ErrorType.Alert) {
106
+ } else if (error === ErrorType.Caution) {
107
107
  borderColor = theme.canvas.palette.alert.main;
108
108
  borderWidth = 2;
109
109
  }
@@ -102,7 +102,7 @@ const Option = styled('li')<SelectOptionProps>(
102
102
  },
103
103
  ({error}) => ({
104
104
  padding: `${optionPadding}px ${
105
- error === ErrorType.Alert ? optionPadding - 1 : optionPadding
105
+ error === ErrorType.Caution ? optionPadding - 1 : optionPadding
106
106
  }px`,
107
107
  })
108
108
  );