@workday/canvas-kit-preview-react 16.0.0-alpha.0485-next.0 → 16.0.0-alpha.0486-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 (18) hide show
  1. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +5 -1
  2. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  3. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +16 -15
  4. package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js +1 -1
  5. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.d.ts +205 -0
  6. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.d.ts.map +1 -1
  7. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +6 -6
  8. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts +5 -1
  9. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  10. package/dist/es6/status-indicator/lib/StatusIndicator.js +17 -16
  11. package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js +1 -1
  12. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts +205 -0
  13. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts.map +1 -1
  14. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +4 -4
  15. package/package.json +4 -4
  16. package/status-indicator/lib/StatusIndicator.tsx +5 -4
  17. package/status-indicator/lib/StatusIndicatorIcon.tsx +1 -1
  18. package/status-indicator/lib/StatusIndicatorLabel.tsx +3 -3
package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts CHANGED
@@ -79,7 +79,11 @@ declare const statusIndicatorStencil: import("@workday/canvas-kit-styling").Sten
79
79
  low: {};
80
80
  high: {};
81
81
  };
82
- }, {}, {}, never, never>;
82
+ }, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
83
+ shape: string;
84
+ }, never>, {}, {
85
+ shape: string;
86
+ }, never, never>, never>;
83
87
  /**
84
88
  * `StatusIndicator` is a container component has a default maximum width of `200px`.
85
89
  *
package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAMvF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BH;;;;;;;;;OASG;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}
1
+ {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAsC,MAAM,kCAAkC,CAAC;AAEnG,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAMvF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAcxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BH;;;;;;;;;OASG;;;;;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}
package/dist/commonjs/status-indicator/lib/StatusIndicator.js CHANGED
@@ -18,7 +18,8 @@ const deprecatedVariantsMap = {
18
18
  gray: 'neutral',
19
19
  };
20
20
  const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
21
- base: { name: "2fyxat", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
21
+ extends: common_1.cornerShapeStencil,
22
+ base: { name: "nucn3", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
22
23
  modifiers: {
23
24
  /**
24
25
  * Defines the color of the `StatusIndicator`.
@@ -33,12 +34,12 @@ const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
33
34
  * @default 'neutral'
34
35
  */
35
36
  variant: {
36
- info: { name: "7odoe", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
37
- positive: { name: "okg5i", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
38
- caution: { name: "n9s74", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
39
- critical: { name: "2spwih", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
40
- neutral: { name: "3w74dm", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
41
- transparent: { name: "44mmp6", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
37
+ info: { name: "2vle5y", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
38
+ positive: { name: "e9v0m", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
39
+ caution: { name: "1ylzsi", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
40
+ critical: { name: "3f3wda", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
41
+ neutral: { name: "32w4kz", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
42
+ transparent: { name: "31t6ei", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
42
43
  },
43
44
  /**
44
45
  * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
@@ -51,8 +52,8 @@ const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
51
52
  *
52
53
  */
53
54
  emphasis: {
54
- low: { name: "iwmqw", styles: "" },
55
- high: { name: "3x5s5t", styles: "" }
55
+ low: { name: "1ydktq", styles: "" },
56
+ high: { name: "2sgy3w", styles: "" }
56
57
  }
57
58
  },
58
59
  compound: [
@@ -61,42 +62,42 @@ const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
61
62
  variant: 'info',
62
63
  emphasis: 'high',
63
64
  },
64
- styles: { name: "2cc0rz", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
65
+ styles: { name: "3dfkah", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
65
66
  },
66
67
  {
67
68
  modifiers: {
68
69
  variant: 'positive',
69
70
  emphasis: 'high',
70
71
  },
71
- styles: { name: "1qmk4r", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
72
+ styles: { name: "1hez6j", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
72
73
  },
73
74
  {
74
75
  modifiers: {
75
76
  variant: 'caution',
76
77
  emphasis: 'high',
77
78
  },
78
- styles: { name: "2medvv", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
79
+ styles: { name: "18cgpo", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
79
80
  },
80
81
  {
81
82
  modifiers: {
82
83
  variant: 'critical',
83
84
  emphasis: 'high',
84
85
  },
85
- styles: { name: "14hiw7", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
86
+ styles: { name: "1nxza4", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
86
87
  },
87
88
  {
88
89
  modifiers: {
89
90
  variant: 'neutral',
90
91
  emphasis: 'high',
91
92
  },
92
- styles: { name: "2w14z4", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
93
+ styles: { name: "gjyq2", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
93
94
  }
94
95
  ],
95
96
  defaultModifiers: {
96
97
  variant: 'neutral',
97
98
  emphasis: 'low',
98
99
  }
99
- }, "status-indicator-dc1ecc");
100
+ }, "status-indicator-b83960");
100
101
  /**
101
102
  * `StatusIndicator` is a container component has a default maximum width of `200px`.
102
103
  *
package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js CHANGED
@@ -11,6 +11,6 @@ exports.StatusIndicatorIcon = (0, common_1.createComponent)('span')({
11
11
  if (!((_a = elemProps.icon) === null || _a === void 0 ? void 0 : _a.type)) {
12
12
  return null;
13
13
  }
14
- return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, ref: ref, size: 20, role: "img", ...elemProps });
14
+ return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, ref: ref, size: "xs", role: "img", ...elemProps });
15
15
  },
16
16
  });
package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.d.ts CHANGED
@@ -1,5 +1,210 @@
1
1
  import { TextProps } from '@workday/canvas-kit-react/text';
2
2
  export interface StatusIndicatorLabelProps extends TextProps {
3
3
  }
4
+ export declare const statusIndicatorLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
5
+ typeLevel: {
6
+ 'title.large': {
7
+ fontFamily: "--cnvs-sys-font-family-default";
8
+ fontWeight: "--cnvs-sys-font-weight-bold";
9
+ fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
10
+ lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
11
+ color: "--cnvs-sys-color-fg-strong";
12
+ };
13
+ 'title.medium': {
14
+ fontFamily: "--cnvs-sys-font-family-default";
15
+ fontWeight: "--cnvs-sys-font-weight-bold";
16
+ fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
17
+ lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
18
+ color: "--cnvs-sys-color-fg-strong";
19
+ };
20
+ 'title.small': {
21
+ fontFamily: "--cnvs-sys-font-family-default";
22
+ fontWeight: "--cnvs-sys-font-weight-bold";
23
+ lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
24
+ fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
25
+ color: "--cnvs-sys-color-fg-strong";
26
+ };
27
+ 'heading.large': {
28
+ fontFamily: "--cnvs-sys-font-family-default";
29
+ fontWeight: "--cnvs-sys-font-weight-bold";
30
+ fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
31
+ lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
32
+ color: "--cnvs-sys-color-fg-strong";
33
+ };
34
+ 'heading.medium': {
35
+ fontFamily: "--cnvs-sys-font-family-default";
36
+ fontWeight: "--cnvs-sys-font-weight-bold";
37
+ fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
38
+ lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
39
+ color: "--cnvs-sys-color-fg-strong";
40
+ };
41
+ 'heading.small': {
42
+ fontFamily: "--cnvs-sys-font-family-default";
43
+ fontWeight: "--cnvs-sys-font-weight-bold";
44
+ fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
45
+ lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
46
+ color: "--cnvs-sys-color-fg-strong";
47
+ };
48
+ 'body.large': {
49
+ fontFamily: "--cnvs-sys-font-family-default";
50
+ fontWeight: "--cnvs-sys-font-weight-normal";
51
+ fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
52
+ lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
53
+ color: "--cnvs-sys-color-fg-default";
54
+ };
55
+ 'body.medium': {
56
+ fontFamily: "--cnvs-sys-font-family-default";
57
+ fontWeight: "--cnvs-sys-font-weight-normal";
58
+ fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
59
+ lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
60
+ color: "--cnvs-sys-color-fg-default";
61
+ };
62
+ 'body.small': {
63
+ fontFamily: "--cnvs-sys-font-family-default";
64
+ fontWeight: "--cnvs-sys-font-weight-normal";
65
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
66
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
67
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
68
+ color: "--cnvs-sys-color-fg-default";
69
+ };
70
+ 'subtext.large': {
71
+ fontFamily: "--cnvs-sys-font-family-default";
72
+ fontWeight: "--cnvs-sys-font-weight-normal";
73
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
74
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
75
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
76
+ color: "--cnvs-sys-color-fg-default";
77
+ };
78
+ 'subtext.medium': {
79
+ fontFamily: "--cnvs-sys-font-family-default";
80
+ fontWeight: "--cnvs-sys-font-weight-normal";
81
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
82
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
83
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
84
+ color: "--cnvs-sys-color-fg-default";
85
+ };
86
+ 'subtext.small': {
87
+ fontFamily: "--cnvs-sys-font-family-default";
88
+ fontWeight: "--cnvs-sys-font-weight-normal";
89
+ fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
90
+ lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
91
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
92
+ color: "--cnvs-sys-color-fg-default";
93
+ };
94
+ };
95
+ variant: {
96
+ error: {
97
+ color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
98
+ };
99
+ hint: {
100
+ color: "--cnvs-sys-color-fg-muted-default";
101
+ };
102
+ inverse: {
103
+ color: "--cnvs-sys-color-fg-inverse";
104
+ };
105
+ };
106
+ }, {}, {}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
107
+ typeLevel: {
108
+ 'title.large': {
109
+ fontFamily: "--cnvs-sys-font-family-default";
110
+ fontWeight: "--cnvs-sys-font-weight-bold";
111
+ fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
112
+ lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
113
+ color: "--cnvs-sys-color-fg-strong";
114
+ };
115
+ 'title.medium': {
116
+ fontFamily: "--cnvs-sys-font-family-default";
117
+ fontWeight: "--cnvs-sys-font-weight-bold";
118
+ fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
119
+ lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
120
+ color: "--cnvs-sys-color-fg-strong";
121
+ };
122
+ 'title.small': {
123
+ fontFamily: "--cnvs-sys-font-family-default";
124
+ fontWeight: "--cnvs-sys-font-weight-bold";
125
+ lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
126
+ fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
127
+ color: "--cnvs-sys-color-fg-strong";
128
+ };
129
+ 'heading.large': {
130
+ fontFamily: "--cnvs-sys-font-family-default";
131
+ fontWeight: "--cnvs-sys-font-weight-bold";
132
+ fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
133
+ lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
134
+ color: "--cnvs-sys-color-fg-strong";
135
+ };
136
+ 'heading.medium': {
137
+ fontFamily: "--cnvs-sys-font-family-default";
138
+ fontWeight: "--cnvs-sys-font-weight-bold";
139
+ fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
140
+ lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
141
+ color: "--cnvs-sys-color-fg-strong";
142
+ };
143
+ 'heading.small': {
144
+ fontFamily: "--cnvs-sys-font-family-default";
145
+ fontWeight: "--cnvs-sys-font-weight-bold";
146
+ fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
147
+ lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
148
+ color: "--cnvs-sys-color-fg-strong";
149
+ };
150
+ 'body.large': {
151
+ fontFamily: "--cnvs-sys-font-family-default";
152
+ fontWeight: "--cnvs-sys-font-weight-normal";
153
+ fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
154
+ lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
155
+ color: "--cnvs-sys-color-fg-default";
156
+ };
157
+ 'body.medium': {
158
+ fontFamily: "--cnvs-sys-font-family-default";
159
+ fontWeight: "--cnvs-sys-font-weight-normal";
160
+ fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
161
+ lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
162
+ color: "--cnvs-sys-color-fg-default";
163
+ };
164
+ 'body.small': {
165
+ fontFamily: "--cnvs-sys-font-family-default";
166
+ fontWeight: "--cnvs-sys-font-weight-normal";
167
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
168
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
169
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
170
+ color: "--cnvs-sys-color-fg-default";
171
+ };
172
+ 'subtext.large': {
173
+ fontFamily: "--cnvs-sys-font-family-default";
174
+ fontWeight: "--cnvs-sys-font-weight-normal";
175
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
176
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
177
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
178
+ color: "--cnvs-sys-color-fg-default";
179
+ };
180
+ 'subtext.medium': {
181
+ fontFamily: "--cnvs-sys-font-family-default";
182
+ fontWeight: "--cnvs-sys-font-weight-normal";
183
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
184
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
185
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
186
+ color: "--cnvs-sys-color-fg-default";
187
+ };
188
+ 'subtext.small': {
189
+ fontFamily: "--cnvs-sys-font-family-default";
190
+ fontWeight: "--cnvs-sys-font-weight-normal";
191
+ fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
192
+ lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
193
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
194
+ color: "--cnvs-sys-color-fg-default";
195
+ };
196
+ };
197
+ variant: {
198
+ error: {
199
+ color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
200
+ };
201
+ hint: {
202
+ color: "--cnvs-sys-color-fg-muted-default";
203
+ };
204
+ inverse: {
205
+ color: "--cnvs-sys-color-fg-inverse";
206
+ };
207
+ };
208
+ }, {}, {}, never, never>, never>;
4
209
  export declare const StatusIndicatorLabel: import("@workday/canvas-kit-react/common").ElementComponent<"span", StatusIndicatorLabelProps>;
5
210
  //# sourceMappingURL=StatusIndicatorLabel.d.ts.map
package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,gCAAgC,CAAC;AAItE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAe/D,eAAO,MAAM,oBAAoB,gGAS/B,CAAC"}
1
+ {"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,gCAAgC,CAAC;AAItE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAE/D,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAWtC,CAAC;AAEH,eAAO,MAAM,oBAAoB,gGAS/B,CAAC"}
package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js CHANGED
@@ -1,20 +1,20 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.StatusIndicatorLabel = void 0;
3
+ exports.StatusIndicatorLabel = exports.statusIndicatorLabelStencil = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const layout_1 = require("@workday/canvas-kit-react/layout");
7
7
  const text_1 = require("@workday/canvas-kit-react/text");
8
8
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
9
9
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
10
- const statusIndicatorLabelStencil = (0, canvas_kit_styling_1.createStencil)({
10
+ exports.statusIndicatorLabelStencil = (0, canvas_kit_styling_1.createStencil)({
11
11
  extends: text_1.textStencil,
12
- base: { name: "o6qpg", 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;" },
13
- defaultModifiers: { typeLevel: 'subtext.large' }
14
- }, "status-indicator-label-63258e");
12
+ base: { name: "2vvaqw", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
13
+ defaultModifiers: { typeLevel: 'subtext.medium' }
14
+ }, "status-indicator-label-528f53");
15
15
  exports.StatusIndicatorLabel = (0, common_1.createComponent)('span')({
16
16
  displayName: 'StatusIndicator.Label',
17
17
  Component: ({ children, typeLevel, ...elemProps }, ref, Element) => {
18
- return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, statusIndicatorLabelStencil({ typeLevel })), children: children }));
18
+ return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.statusIndicatorLabelStencil)({ typeLevel })), children: children }));
19
19
  },
20
20
  });
package/dist/es6/status-indicator/lib/StatusIndicator.d.ts CHANGED
@@ -79,7 +79,11 @@ declare const statusIndicatorStencil: import("@workday/canvas-kit-styling").Sten
79
79
  low: {};
80
80
  high: {};
81
81
  };
82
- }, {}, {}, never, never>;
82
+ }, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
83
+ shape: string;
84
+ }, never>, {}, {
85
+ shape: string;
86
+ }, never, never>, never>;
83
87
  /**
84
88
  * `StatusIndicator` is a container component has a default maximum width of `200px`.
85
89
  *
package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAMvF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BH;;;;;;;;;OASG;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}
1
+ {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAsC,MAAM,kCAAkC,CAAC;AAEnG,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAMvF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAcxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BH;;;;;;;;;OASG;;;;;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}
package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
2
+ import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
4
4
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
5
5
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
@@ -15,7 +15,8 @@ const deprecatedVariantsMap = {
15
15
  gray: 'neutral',
16
16
  };
17
17
  const statusIndicatorStencil = createStencil({
18
- base: { name: "2fyxat", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
18
+ extends: cornerShapeStencil,
19
+ base: { name: "nucn3", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
19
20
  modifiers: {
20
21
  /**
21
22
  * Defines the color of the `StatusIndicator`.
@@ -30,12 +31,12 @@ const statusIndicatorStencil = createStencil({
30
31
  * @default 'neutral'
31
32
  */
32
33
  variant: {
33
- info: { name: "7odoe", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
34
- positive: { name: "okg5i", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
35
- caution: { name: "n9s74", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
36
- critical: { name: "2spwih", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
37
- neutral: { name: "3w74dm", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
38
- transparent: { name: "44mmp6", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
34
+ info: { name: "2vle5y", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
35
+ positive: { name: "e9v0m", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
36
+ caution: { name: "1ylzsi", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
37
+ critical: { name: "3f3wda", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
38
+ neutral: { name: "32w4kz", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
39
+ transparent: { name: "31t6ei", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
39
40
  },
40
41
  /**
41
42
  * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
@@ -48,8 +49,8 @@ const statusIndicatorStencil = createStencil({
48
49
  *
49
50
  */
50
51
  emphasis: {
51
- low: { name: "iwmqw", styles: "" },
52
- high: { name: "3x5s5t", styles: "" }
52
+ low: { name: "1ydktq", styles: "" },
53
+ high: { name: "2sgy3w", styles: "" }
53
54
  }
54
55
  },
55
56
  compound: [
@@ -58,42 +59,42 @@ const statusIndicatorStencil = createStencil({
58
59
  variant: 'info',
59
60
  emphasis: 'high',
60
61
  },
61
- styles: { name: "2cc0rz", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
62
+ styles: { name: "3dfkah", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
62
63
  },
63
64
  {
64
65
  modifiers: {
65
66
  variant: 'positive',
66
67
  emphasis: 'high',
67
68
  },
68
- styles: { name: "1qmk4r", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
69
+ styles: { name: "1hez6j", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
69
70
  },
70
71
  {
71
72
  modifiers: {
72
73
  variant: 'caution',
73
74
  emphasis: 'high',
74
75
  },
75
- styles: { name: "2medvv", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
76
+ styles: { name: "18cgpo", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
76
77
  },
77
78
  {
78
79
  modifiers: {
79
80
  variant: 'critical',
80
81
  emphasis: 'high',
81
82
  },
82
- styles: { name: "14hiw7", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
83
+ styles: { name: "1nxza4", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
83
84
  },
84
85
  {
85
86
  modifiers: {
86
87
  variant: 'neutral',
87
88
  emphasis: 'high',
88
89
  },
89
- styles: { name: "2w14z4", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
90
+ styles: { name: "gjyq2", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
90
91
  }
91
92
  ],
92
93
  defaultModifiers: {
93
94
  variant: 'neutral',
94
95
  emphasis: 'low',
95
96
  }
96
- }, "status-indicator-dc1ecc");
97
+ }, "status-indicator-b83960");
97
98
  /**
98
99
  * `StatusIndicator` is a container component has a default maximum width of `200px`.
99
100
  *
package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js CHANGED
@@ -8,6 +8,6 @@ export const StatusIndicatorIcon = createComponent('span')({
8
8
  if (!((_a = elemProps.icon) === null || _a === void 0 ? void 0 : _a.type)) {
9
9
  return null;
10
10
  }
11
- return _jsx(SystemIcon, { as: Element, ref: ref, size: 20, role: "img", ...elemProps });
11
+ return _jsx(SystemIcon, { as: Element, ref: ref, size: "xs", role: "img", ...elemProps });
12
12
  },
13
13
  });
package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts CHANGED
@@ -1,5 +1,210 @@
1
1
  import { TextProps } from '@workday/canvas-kit-react/text';
2
2
  export interface StatusIndicatorLabelProps extends TextProps {
3
3
  }
4
+ export declare const statusIndicatorLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
5
+ typeLevel: {
6
+ 'title.large': {
7
+ fontFamily: "--cnvs-sys-font-family-default";
8
+ fontWeight: "--cnvs-sys-font-weight-bold";
9
+ fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
10
+ lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
11
+ color: "--cnvs-sys-color-fg-strong";
12
+ };
13
+ 'title.medium': {
14
+ fontFamily: "--cnvs-sys-font-family-default";
15
+ fontWeight: "--cnvs-sys-font-weight-bold";
16
+ fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
17
+ lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
18
+ color: "--cnvs-sys-color-fg-strong";
19
+ };
20
+ 'title.small': {
21
+ fontFamily: "--cnvs-sys-font-family-default";
22
+ fontWeight: "--cnvs-sys-font-weight-bold";
23
+ lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
24
+ fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
25
+ color: "--cnvs-sys-color-fg-strong";
26
+ };
27
+ 'heading.large': {
28
+ fontFamily: "--cnvs-sys-font-family-default";
29
+ fontWeight: "--cnvs-sys-font-weight-bold";
30
+ fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
31
+ lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
32
+ color: "--cnvs-sys-color-fg-strong";
33
+ };
34
+ 'heading.medium': {
35
+ fontFamily: "--cnvs-sys-font-family-default";
36
+ fontWeight: "--cnvs-sys-font-weight-bold";
37
+ fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
38
+ lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
39
+ color: "--cnvs-sys-color-fg-strong";
40
+ };
41
+ 'heading.small': {
42
+ fontFamily: "--cnvs-sys-font-family-default";
43
+ fontWeight: "--cnvs-sys-font-weight-bold";
44
+ fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
45
+ lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
46
+ color: "--cnvs-sys-color-fg-strong";
47
+ };
48
+ 'body.large': {
49
+ fontFamily: "--cnvs-sys-font-family-default";
50
+ fontWeight: "--cnvs-sys-font-weight-normal";
51
+ fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
52
+ lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
53
+ color: "--cnvs-sys-color-fg-default";
54
+ };
55
+ 'body.medium': {
56
+ fontFamily: "--cnvs-sys-font-family-default";
57
+ fontWeight: "--cnvs-sys-font-weight-normal";
58
+ fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
59
+ lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
60
+ color: "--cnvs-sys-color-fg-default";
61
+ };
62
+ 'body.small': {
63
+ fontFamily: "--cnvs-sys-font-family-default";
64
+ fontWeight: "--cnvs-sys-font-weight-normal";
65
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
66
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
67
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
68
+ color: "--cnvs-sys-color-fg-default";
69
+ };
70
+ 'subtext.large': {
71
+ fontFamily: "--cnvs-sys-font-family-default";
72
+ fontWeight: "--cnvs-sys-font-weight-normal";
73
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
74
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
75
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
76
+ color: "--cnvs-sys-color-fg-default";
77
+ };
78
+ 'subtext.medium': {
79
+ fontFamily: "--cnvs-sys-font-family-default";
80
+ fontWeight: "--cnvs-sys-font-weight-normal";
81
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
82
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
83
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
84
+ color: "--cnvs-sys-color-fg-default";
85
+ };
86
+ 'subtext.small': {
87
+ fontFamily: "--cnvs-sys-font-family-default";
88
+ fontWeight: "--cnvs-sys-font-weight-normal";
89
+ fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
90
+ lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
91
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
92
+ color: "--cnvs-sys-color-fg-default";
93
+ };
94
+ };
95
+ variant: {
96
+ error: {
97
+ color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
98
+ };
99
+ hint: {
100
+ color: "--cnvs-sys-color-fg-muted-default";
101
+ };
102
+ inverse: {
103
+ color: "--cnvs-sys-color-fg-inverse";
104
+ };
105
+ };
106
+ }, {}, {}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
107
+ typeLevel: {
108
+ 'title.large': {
109
+ fontFamily: "--cnvs-sys-font-family-default";
110
+ fontWeight: "--cnvs-sys-font-weight-bold";
111
+ fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
112
+ lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
113
+ color: "--cnvs-sys-color-fg-strong";
114
+ };
115
+ 'title.medium': {
116
+ fontFamily: "--cnvs-sys-font-family-default";
117
+ fontWeight: "--cnvs-sys-font-weight-bold";
118
+ fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
119
+ lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
120
+ color: "--cnvs-sys-color-fg-strong";
121
+ };
122
+ 'title.small': {
123
+ fontFamily: "--cnvs-sys-font-family-default";
124
+ fontWeight: "--cnvs-sys-font-weight-bold";
125
+ lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
126
+ fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
127
+ color: "--cnvs-sys-color-fg-strong";
128
+ };
129
+ 'heading.large': {
130
+ fontFamily: "--cnvs-sys-font-family-default";
131
+ fontWeight: "--cnvs-sys-font-weight-bold";
132
+ fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
133
+ lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
134
+ color: "--cnvs-sys-color-fg-strong";
135
+ };
136
+ 'heading.medium': {
137
+ fontFamily: "--cnvs-sys-font-family-default";
138
+ fontWeight: "--cnvs-sys-font-weight-bold";
139
+ fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
140
+ lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
141
+ color: "--cnvs-sys-color-fg-strong";
142
+ };
143
+ 'heading.small': {
144
+ fontFamily: "--cnvs-sys-font-family-default";
145
+ fontWeight: "--cnvs-sys-font-weight-bold";
146
+ fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
147
+ lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
148
+ color: "--cnvs-sys-color-fg-strong";
149
+ };
150
+ 'body.large': {
151
+ fontFamily: "--cnvs-sys-font-family-default";
152
+ fontWeight: "--cnvs-sys-font-weight-normal";
153
+ fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
154
+ lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
155
+ color: "--cnvs-sys-color-fg-default";
156
+ };
157
+ 'body.medium': {
158
+ fontFamily: "--cnvs-sys-font-family-default";
159
+ fontWeight: "--cnvs-sys-font-weight-normal";
160
+ fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
161
+ lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
162
+ color: "--cnvs-sys-color-fg-default";
163
+ };
164
+ 'body.small': {
165
+ fontFamily: "--cnvs-sys-font-family-default";
166
+ fontWeight: "--cnvs-sys-font-weight-normal";
167
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
168
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
169
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
170
+ color: "--cnvs-sys-color-fg-default";
171
+ };
172
+ 'subtext.large': {
173
+ fontFamily: "--cnvs-sys-font-family-default";
174
+ fontWeight: "--cnvs-sys-font-weight-normal";
175
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
176
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
177
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
178
+ color: "--cnvs-sys-color-fg-default";
179
+ };
180
+ 'subtext.medium': {
181
+ fontFamily: "--cnvs-sys-font-family-default";
182
+ fontWeight: "--cnvs-sys-font-weight-normal";
183
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
184
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
185
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
186
+ color: "--cnvs-sys-color-fg-default";
187
+ };
188
+ 'subtext.small': {
189
+ fontFamily: "--cnvs-sys-font-family-default";
190
+ fontWeight: "--cnvs-sys-font-weight-normal";
191
+ fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
192
+ lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
193
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
194
+ color: "--cnvs-sys-color-fg-default";
195
+ };
196
+ };
197
+ variant: {
198
+ error: {
199
+ color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
200
+ };
201
+ hint: {
202
+ color: "--cnvs-sys-color-fg-muted-default";
203
+ };
204
+ inverse: {
205
+ color: "--cnvs-sys-color-fg-inverse";
206
+ };
207
+ };
208
+ }, {}, {}, never, never>, never>;
4
209
  export declare const StatusIndicatorLabel: import("@workday/canvas-kit-react/common").ElementComponent<"span", StatusIndicatorLabelProps>;
5
210
  //# sourceMappingURL=StatusIndicatorLabel.d.ts.map
package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,gCAAgC,CAAC;AAItE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAe/D,eAAO,MAAM,oBAAoB,gGAS/B,CAAC"}
1
+ {"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAc,MAAM,gCAAgC,CAAC;AAItE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAE/D,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAWtC,CAAC;AAEH,eAAO,MAAM,oBAAoB,gGAS/B,CAAC"}
package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js CHANGED
@@ -4,11 +4,11 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { textStencil } from '@workday/canvas-kit-react/text';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
6
  import { system } from '@workday/canvas-tokens-web';
7
- const statusIndicatorLabelStencil = createStencil({
7
+ export const statusIndicatorLabelStencil = createStencil({
8
8
  extends: textStencil,
9
- base: { name: "o6qpg", 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
- defaultModifiers: { typeLevel: 'subtext.large' }
11
- }, "status-indicator-label-63258e");
9
+ base: { name: "2vvaqw", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
10
+ defaultModifiers: { typeLevel: 'subtext.medium' }
11
+ }, "status-indicator-label-528f53");
12
12
  export const StatusIndicatorLabel = createComponent('span')({
13
13
  displayName: 'StatusIndicator.Label',
14
14
  Component: ({ children, typeLevel, ...elemProps }, ref, Element) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "16.0.0-alpha.0485-next.0",
3
+ "version": "16.0.0-alpha.0486-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": "^16.0.0-alpha.0485-next.0",
52
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0485-next.0",
51
+ "@workday/canvas-kit-react": "^16.0.0-alpha.0486-next.0",
52
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0486-next.0",
53
53
  "@workday/canvas-system-icons-web": "5.0.1",
54
54
  "@workday/canvas-tokens-web": "4.4.0-beta.7",
55
55
  "@workday/design-assets-types": "^0.3.0"
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "4dfa841c465972c75aae17c5c3ea162295a32d53"
63
+ "gitHead": "8be87645060c8ea1b56dc5bebceecc64fa33bfc2"
64
64
  }
package/status-indicator/lib/StatusIndicator.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
3
+ import {ExtractProps, cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
5
5
  import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
6
6
  import {ExtractStencilProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
@@ -58,14 +58,15 @@ const deprecatedVariantsMap = {
58
58
  } as const;
59
59
 
60
60
  const statusIndicatorStencil = createStencil({
61
+ extends: cornerShapeStencil,
61
62
  base: {
62
63
  display: 'inline-flex',
63
64
  gap: system.legacy.gap.xs,
64
65
  maxWidth: px2rem(200),
65
66
  alignItems: 'center',
66
- borderRadius: system.legacy.shape.sm,
67
- height: system.legacy.size.xxs,
68
- padding: `0 ${system.legacy.padding.xs}`,
67
+ [cornerShapeStencil.vars.shape]: system.legacy.shape.md,
68
+ height: system.legacy.size.xs,
69
+ padding: `${system.legacy.padding.xxs} ${system.legacy.padding.xs}`,
69
70
  outline: `${px2rem(1)} solid transparent`,
70
71
  [systemIconStencil.vars.color]: 'currentColor',
71
72
  },
package/status-indicator/lib/StatusIndicatorIcon.tsx CHANGED
@@ -10,6 +10,6 @@ export const StatusIndicatorIcon = createComponent('span')({
10
10
  return null;
11
11
  }
12
12
 
13
- return <SystemIcon as={Element} ref={ref} size={20} role="img" {...elemProps} />;
13
+ return <SystemIcon as={Element} ref={ref} size="xs" role="img" {...elemProps} />;
14
14
  },
15
15
  });
package/status-indicator/lib/StatusIndicatorLabel.tsx CHANGED
@@ -6,17 +6,17 @@ import {system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  export interface StatusIndicatorLabelProps extends TextProps {}
8
8
 
9
- const statusIndicatorLabelStencil = createStencil({
9
+ export const statusIndicatorLabelStencil = createStencil({
10
10
  extends: textStencil,
11
11
  base: {
12
- fontWeight: system.fontWeight.bold,
12
+ fontWeight: system.fontWeight.medium,
13
13
  whiteSpace: 'nowrap',
14
14
  overflow: 'hidden',
15
15
  textOverflow: 'ellipsis',
16
16
  textTransform: 'capitalize',
17
17
  color: 'inherit',
18
18
  },
19
- defaultModifiers: {typeLevel: 'subtext.large'},
19
+ defaultModifiers: {typeLevel: 'subtext.medium'},
20
20
  });
21
21
 
22
22
  export const StatusIndicatorLabel = createComponent('span')({