@workday/canvas-kit-react 11.0.0-alpha.760-next.0 → 11.0.0-alpha.764-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 (37) hide show
  1. package/checkbox/lib/CheckBackground.tsx +17 -15
  2. package/checkbox/lib/CheckboxCheck.tsx +15 -18
  3. package/checkbox/lib/CheckboxContainer.tsx +22 -22
  4. package/checkbox/lib/CheckboxInput.tsx +37 -78
  5. package/checkbox/lib/CheckboxRipple.tsx +12 -10
  6. package/dist/commonjs/checkbox/lib/CheckBackground.d.ts +19 -1
  7. package/dist/commonjs/checkbox/lib/CheckBackground.d.ts.map +1 -1
  8. package/dist/commonjs/checkbox/lib/CheckBackground.js +10 -7
  9. package/dist/commonjs/checkbox/lib/CheckboxCheck.d.ts.map +1 -1
  10. package/dist/commonjs/checkbox/lib/CheckboxCheck.js +8 -6
  11. package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts +0 -1
  12. package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts.map +1 -1
  13. package/dist/commonjs/checkbox/lib/CheckboxContainer.js +5 -4
  14. package/dist/commonjs/checkbox/lib/CheckboxInput.d.ts.map +1 -1
  15. package/dist/commonjs/checkbox/lib/CheckboxInput.js +7 -12
  16. package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map +1 -1
  17. package/dist/commonjs/checkbox/lib/CheckboxRipple.js +4 -2
  18. package/dist/commonjs/select/lib/Select.d.ts +4 -4
  19. package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
  20. package/dist/commonjs/select/lib/Select.js +6 -6
  21. package/dist/es6/checkbox/lib/CheckBackground.d.ts +19 -1
  22. package/dist/es6/checkbox/lib/CheckBackground.d.ts.map +1 -1
  23. package/dist/es6/checkbox/lib/CheckBackground.js +10 -7
  24. package/dist/es6/checkbox/lib/CheckboxCheck.d.ts.map +1 -1
  25. package/dist/es6/checkbox/lib/CheckboxCheck.js +10 -8
  26. package/dist/es6/checkbox/lib/CheckboxContainer.d.ts +0 -1
  27. package/dist/es6/checkbox/lib/CheckboxContainer.d.ts.map +1 -1
  28. package/dist/es6/checkbox/lib/CheckboxContainer.js +5 -4
  29. package/dist/es6/checkbox/lib/CheckboxInput.d.ts.map +1 -1
  30. package/dist/es6/checkbox/lib/CheckboxInput.js +10 -15
  31. package/dist/es6/checkbox/lib/CheckboxRipple.d.ts.map +1 -1
  32. package/dist/es6/checkbox/lib/CheckboxRipple.js +5 -3
  33. package/dist/es6/select/lib/Select.d.ts +4 -4
  34. package/dist/es6/select/lib/Select.d.ts.map +1 -1
  35. package/dist/es6/select/lib/Select.js +6 -6
  36. package/package.json +4 -4
  37. package/select/lib/Select.tsx +6 -5
package/dist/commonjs/checkbox/lib/CheckboxInput.js CHANGED
@@ -26,27 +26,22 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
26
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
27
  const CheckBackground_1 = require("./CheckBackground");
28
28
  const checkboxInputStencil = canvas_kit_styling_1.createStencil({
29
- base: { name: "54c399", styles: "border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);opacity:1;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
29
+ base: { name: "b01bc2", styles: "border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
30
30
  modifiers: {
31
31
  variant: {
32
- inverse: { name: "d7f48e", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);background-color:var(--cnvs-base-palette-french-vanilla-100);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-300);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);background-color:var(--cnvs-base-palette-soap-300);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-base-palette-black-pepper-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);border-color:var(--cnvs-base-palette-french-vanilla-100);}}" }
32
+ inverse: { name: "edefb9", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-alt-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-fg-strong), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-fg-strong), 0 0 0 4px var(--cnvs-sys-color-fg-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
33
33
  },
34
34
  disabled: {
35
- true: { name: "8a663b", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
35
+ true: { name: "66eb53", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
36
36
  },
37
37
  error: {
38
- error: { name: "020b45", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-background-inner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-background-inner), \n 0 0 0 0.125rem var(--cnvs-background-outer);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),\n 0 0 0 0.25rem var(--cnvs-background-inner),\n 0 0 0 0.3125rem var(--cnvs-background-outer);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-background-inner);}" },
39
- alert: { name: "b5c214", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-background-inner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-background-inner), \n 0 0 0 0.125rem var(--cnvs-background-outer);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-background-inner);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),\n 0 0 0 0.25rem var(--cnvs-background-inner),\n 0 0 0 0.3125rem var(--cnvs-background-outer);}" }
38
+ true: { name: "21e17a", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner), \n 0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse),\n 0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),\n 0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);}" }
40
39
  }
41
40
  },
42
41
  compound: [
43
42
  {
44
- modifiers: { variant: 'inverse', error: 'error' },
45
- styles: { name: "bc9f16", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-base-palette-soap-300);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}" }
46
- },
47
- {
48
- modifiers: { variant: 'inverse', error: 'alert' },
49
- styles: { name: "bdcc4f", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-base-palette-soap-300);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}" }
43
+ modifiers: { variant: 'inverse', error: true },
44
+ styles: { name: "9266ac", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
50
45
  }
51
46
  ]
52
47
  }, "cnvs-checkbox-input");
@@ -54,6 +49,6 @@ exports.CheckboxInput = common_1.createComponent('input')({
54
49
  displayName: 'CheckboxInput',
55
50
  Component: ({ variant, error, ...elemProps }, ref, Element) => {
56
51
  const { checked, disabled, indeterminate } = elemProps;
57
- return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, canvas_kit_styling_1.handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error })))));
52
+ return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, canvas_kit_styling_1.handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error: !!error })))));
58
53
  },
59
54
  });
package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
1
+ {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
package/dist/commonjs/checkbox/lib/CheckboxRipple.js CHANGED
@@ -24,10 +24,12 @@ const React = __importStar(require("react"));
24
24
  const common_1 = require("@workday/canvas-kit-react/common");
25
25
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
26
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
- const checkboxRippleStyles = canvas_kit_styling_1.createStyles({ name: "b4530c", styles: "border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" });
27
+ const checkboxRippleStencil = canvas_kit_styling_1.createStencil({
28
+ base: { name: "d00565", styles: "border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
29
+ }, "cnvs-checkbox-ripple");
28
30
  exports.CheckboxRipple = common_1.createComponent('span')({
29
31
  displayName: 'CheckboxRipple',
30
32
  Component: elemProps => {
31
- return React.createElement("span", Object.assign({ className: checkboxRippleStyles }, elemProps));
33
+ return React.createElement("span", Object.assign({}, checkboxRippleStencil()));
32
34
  },
33
35
  });
package/dist/commonjs/select/lib/Select.d.ts CHANGED
@@ -2440,7 +2440,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2440
2440
  * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
2441
2441
  *
2442
2442
  * ```tsx
2443
- * <Select item={options}>
2443
+ * <Select items={options}>
2444
2444
  * <FormField label="Your Label">
2445
2445
  * <Select.Input onChange={(event) => handleChange(event)}>
2446
2446
  * <Select.Popper>
@@ -2528,7 +2528,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2528
2528
  * **Note: The card will be the width of its corresponding `Select.Input`**.
2529
2529
  *
2530
2530
  * ```tsx
2531
- * <Select item={options}>
2531
+ * <Select items={options}>
2532
2532
  * <FormField label="Your Label">
2533
2533
  * <Select.Input onChange={(event) => handleChange(event)}>
2534
2534
  * <Select.Popper>
@@ -2707,7 +2707,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2707
2707
  * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
2708
2708
  *
2709
2709
  * ```tsx
2710
- * <Select item={options}>
2710
+ * <Select items={options}>
2711
2711
  * <FormField label="Your Label">
2712
2712
  * <Select.Input onChange={(event) => handleChange(event)}>
2713
2713
  * <Select.Popper>
@@ -2807,7 +2807,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2807
2807
  * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
2808
2808
  *
2809
2809
  * ```tsx
2810
- * <Select item={options}>
2810
+ * <Select items={options}>
2811
2811
  * <FormField label="Your Label">
2812
2812
  * <Select.Input onChange={(event) => handleChange(event)}>
2813
2813
  * <Select.Popper>
package/dist/commonjs/select/lib/Select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QArCtB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4FJ,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlGrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGH,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnHrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHH,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnJjB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmJD;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAnKL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiKD;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YArML;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmMD;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAxNL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsND;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA3OL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAJH;;;;mBAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPH,CAAC"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAgCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAtCtB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FJ,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnGrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GH,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QApHrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHH,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QApJjB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoJD;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YApKL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkKD;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAtML;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoMD;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAzNL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuND;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA5OL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAJH;;;;mBAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiPH,CAAC"}
package/dist/commonjs/select/lib/Select.js CHANGED
@@ -23,7 +23,7 @@ const selectIconsStencil = canvas_kit_styling_1.createStencil({
23
23
  base: { name: "482a82", styles: "position:absolute;pointer-events:none;" }
24
24
  }, "cnvs-select-icons");
25
25
  const hiddenSelectInputStencil = canvas_kit_styling_1.createStencil({
26
- base: { name: "926b2b", styles: "position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:0;cursor:default;pointer-events:none;" }
26
+ base: { name: "99924b", styles: "position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
27
27
  }, "cnvs-hidden-select-input");
28
28
  exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
29
29
  modelHook: useSelectModel_1.useSelectModel,
@@ -45,7 +45,7 @@ exports.SelectItem = common_1.createSubcomponent('li')({
45
45
  })(({ children, ...elemProps }, Element, _model) => {
46
46
  return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
47
47
  });
48
- const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "a8270c", styles: "max-height:18.75rem;" });
48
+ const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "6cb08f", styles: "max-height:18.75rem;" });
49
49
  exports.SelectCard = common_1.createSubcomponent('div')({
50
50
  modelHook: useSelectModel_1.useSelectModel,
51
51
  elemPropsHook: useSelectCard_1.useSelectCard,
@@ -94,7 +94,7 @@ exports.Select = common_1.createContainer()({
94
94
  * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
95
95
  *
96
96
  * ```tsx
97
- * <Select item={options}>
97
+ * <Select items={options}>
98
98
  * <FormField label="Your Label">
99
99
  * <Select.Input onChange={(event) => handleChange(event)}>
100
100
  * <Select.Popper>
@@ -111,7 +111,7 @@ exports.Select = common_1.createContainer()({
111
111
  * **Note: The card will be the width of its corresponding `Select.Input`**.
112
112
  *
113
113
  * ```tsx
114
- * <Select item={options}>
114
+ * <Select items={options}>
115
115
  * <FormField label="Your Label">
116
116
  * <Select.Input onChange={(event) => handleChange(event)}>
117
117
  * <Select.Popper>
@@ -128,7 +128,7 @@ exports.Select = common_1.createContainer()({
128
128
  * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
129
129
  *
130
130
  * ```tsx
131
- * <Select item={options}>
131
+ * <Select items={options}>
132
132
  * <FormField label="Your Label">
133
133
  * <Select.Input onChange={(event) => handleChange(event)}>
134
134
  * <Select.Popper>
@@ -147,7 +147,7 @@ exports.Select = common_1.createContainer()({
147
147
  * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
148
148
  *
149
149
  * ```tsx
150
- * <Select item={options}>
150
+ * <Select items={options}>
151
151
  * <FormField label="Your Label">
152
152
  * <Select.Input onChange={(event) => handleChange(event)}>
153
153
  * <Select.Popper>
package/dist/es6/checkbox/lib/CheckBackground.d.ts CHANGED
@@ -4,7 +4,25 @@ interface CheckBackgroundProps {
4
4
  children: React.ReactNode;
5
5
  error?: ErrorType;
6
6
  }
7
- export declare const backgroundVars: import("@workday/canvas-kit-styling").CsVars<"inner" | "outer", never>;
7
+ export declare const checkboxBackgroundStencil: import("@workday/canvas-kit-styling").Stencil<{
8
+ error: {
9
+ error: ({ errorRingColorInner, errorRingColorOuter }: {
10
+ errorRingColorInner: string;
11
+ errorRingColorOuter: string;
12
+ }) => {
13
+ [x: string]: string;
14
+ };
15
+ alert: ({ errorRingColorInner, errorRingColorOuter }: {
16
+ errorRingColorInner: string;
17
+ errorRingColorOuter: string;
18
+ }) => {
19
+ [x: string]: "--cnvs-brand-alert-base" | "--cnvs-brand-alert-darkest";
20
+ };
21
+ };
22
+ }, {
23
+ errorRingColorInner: string;
24
+ errorRingColorOuter: string;
25
+ }, never, never>;
8
26
  export declare const CheckBackground: import("@workday/canvas-kit-react/common").ElementComponent<"div", CheckBackgroundProps>;
9
27
  export {};
10
28
  //# sourceMappingURL=CheckBackground.d.ts.map
package/dist/es6/checkbox/lib/CheckBackground.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckBackground.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,wEAA+B,CAAC;AAgC3D,eAAO,MAAM,eAAe,0FAK1B,CAAC"}
1
+ {"version":3,"file":"CheckBackground.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;gBAgCpC,CAAC;AAEH,eAAO,MAAM,eAAe,0FAK1B,CAAC"}
package/dist/es6/checkbox/lib/CheckBackground.js CHANGED
@@ -1,14 +1,17 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { calc, createStencil, createVars, px2rem, cssVar } from '@workday/canvas-kit-styling';
4
- import { base, brand, system } from '@workday/canvas-tokens-web';
5
- export const backgroundVars = createVars({ id: "cnvs-background", args: ["inner", "outer"] });
6
- const checkboxBackgroundStencil = createStencil({
7
- base: { name: "ce0479", styles: "align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-half);box-sizing:border-box;display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);justify-content:center;padding:var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:calc(var(--cnvs-sys-space-x4) + 0.125rem);border:0.0625rem solid var(--cnvs-base-palette-licorice-200);" },
3
+ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
4
+ import { brand, system } from '@workday/canvas-tokens-web';
5
+ export const checkboxBackgroundStencil = createStencil({
6
+ vars: {
7
+ errorRingColorInner: '',
8
+ errorRingColorOuter: '',
9
+ },
10
+ base: { name: "0a4d8d", styles: "align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-half);box-sizing:border-box;display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);justify-content:center;padding:var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:calc(var(--cnvs-sys-space-x4) + 0.125rem);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
8
11
  modifiers: {
9
12
  error: {
10
- error: { name: "b3e9dd", styles: "--cnvs-background-inner:var(--cnvs-brand-error-base, var(--cnvs-base-palette-cinnamon-500));--cnvs-background-outer:transparent;" },
11
- alert: { name: "c13fa0", styles: "--cnvs-background-inner:var(--cnvs-brand-alert-base, var(--cnvs-base-palette-cantaloupe-600));--cnvs-background-outer:var(--cnvs-brand-alert-darkest, var(--cnvs-base-palette-cantaloupe-400));" }
13
+ error: { name: "82be64", styles: "--cnvs-checkbox-background-errorRingColorInner:var(--cnvs-brand-error-base);--cnvs-checkbox-background-errorRingColorOuter:transparent;" },
14
+ alert: { name: "1d0852", styles: "--cnvs-checkbox-background-errorRingColorInner:var(--cnvs-brand-alert-base);--cnvs-checkbox-background-errorRingColorOuter:var(--cnvs-brand-alert-darkest);" }
12
15
  }
13
16
  }
14
17
  }, "cnvs-checkbox-background");
package/dist/es6/checkbox/lib/CheckboxCheck.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxCheck.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxCheck.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAkB,MAAM,kCAAkC,CAAC;AAO5E,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6CD,eAAO,MAAM,aAAa,wFAsBxB,CAAC"}
1
+ {"version":3,"file":"CheckboxCheck.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxCheck.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAkB,MAAM,kCAAkC,CAAC;AAO5E,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAiDD,eAAO,MAAM,aAAa,wFAexB,CAAC"}
package/dist/es6/checkbox/lib/CheckboxCheck.js CHANGED
@@ -1,29 +1,31 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { createStencil, createStyles, cssVar, calc, px2rem } from '@workday/canvas-kit-styling';
3
+ import { createStencil, calc, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { brand, system } from '@workday/canvas-tokens-web';
5
- import { SystemIcon } from '@workday/canvas-kit-react/icon';
5
+ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
6
6
  import { checkSmallIcon } from '@workday/canvas-system-icons-web';
7
7
  import { CheckBackground } from './CheckBackground';
8
8
  const checkboxCheckStencil = createStencil({
9
- base: { name: "94bef2", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:0;transform:scale(0.5);" },
9
+ base: { name: "2673c1", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
10
10
  modifiers: {
11
11
  checked: {
12
- true: { name: "8cb110", styles: "opacity:1;transform:scale(1);" }
12
+ true: { name: "b7568b", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
13
13
  },
14
14
  indeterminate: {
15
- true: { name: "997065", styles: "opacity:1;transform:scale(1);" }
15
+ true: { name: "7ccfda", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
16
16
  },
17
17
  variant: {
18
- inverse: { name: "2928d4", styles: "& > div{background-color:var(--cnvs-brand-primary-base);}" }
18
+ inverse: { name: "1dac33", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
19
19
  }
20
20
  }
21
21
  }, "cnvs-checkbox-check");
22
- const indeterminateBoxStyles = createStyles({ name: "5445f8", styles: "width:calc(var(--cnvs-sys-space-x2) + 0.125rem);height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" });
22
+ const indeterminateBoxStencil = createStencil({
23
+ base: { name: "d394e3", styles: "width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
24
+ }, "cnvs-indeterminate-box");
23
25
  export const CheckboxCheck = createComponent('div')({
24
26
  displayName: 'CheckboxCheck',
25
27
  Component: ({ checked, error, indeterminate, variant }) => {
26
28
  return (React.createElement(CheckBackground, { error: error },
27
- React.createElement("div", Object.assign({}, checkboxCheckStencil({ checked, indeterminate, variant })), indeterminate ? (React.createElement("div", { className: indeterminateBoxStyles })) : (checked && (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse' ? cssVar(brand.primary.base) : cssVar(brand.primary.accent) }))))));
29
+ React.createElement("div", Object.assign({}, checkboxCheckStencil({ checked, indeterminate, variant })), indeterminate ? (React.createElement("div", Object.assign({}, indeterminateBoxStencil()))) : (checked && React.createElement(SystemIcon, { icon: checkSmallIcon })))));
28
30
  },
29
31
  });
package/dist/es6/checkbox/lib/CheckboxContainer.d.ts CHANGED
@@ -7,7 +7,6 @@ interface CheckboxContainerProps extends CSProps {
7
7
  label: string;
8
8
  variant?: 'inverse';
9
9
  }
10
- export declare const inputVars: import("@workday/canvas-kit-styling").CsVars<"errorInner" | "errorOuter" | "alertInner" | "alertOuter", never>;
11
10
  export declare const CheckboxContainer: import("@workday/canvas-kit-react/common").ElementComponent<"div", CheckboxContainerProps>;
12
11
  export {};
13
12
  //# sourceMappingURL=CheckboxContainer.d.ts.map
package/dist/es6/checkbox/lib/CheckboxContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAIpG,UAAU,sBAAuB,SAAQ,OAAO;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,gHAAqE,CAAC;AAwB5F,eAAO,MAAM,iBAAiB,4FAmB5B,CAAC"}
1
+ {"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAIjF,UAAU,sBAAuB,SAAQ,OAAO;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA0BD,eAAO,MAAM,iBAAiB,4FAmB5B,CAAC"}
package/dist/es6/checkbox/lib/CheckboxContainer.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { calc, createStyles, cssVar, px2rem, createVars } from '@workday/canvas-kit-styling';
3
+ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  import { LabelText } from '@workday/canvas-kit-react/text';
6
- export const inputVars = createVars({ id: "cnvs-input", args: ["errorInner", "errorOuter", "alertInner", "alertOuter"] });
7
- const checkboxContainerStyles = createStyles({ name: "ce6ecb", styles: "display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" });
6
+ const checkboxContainerStencil = createStencil({
7
+ base: { name: "96fa81", styles: "display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" }
8
+ }, "cnvs-checkbox-container");
8
9
  export const CheckboxContainer = createComponent('div')({
9
10
  displayName: 'CheckboxContainer',
10
11
  Component: ({ children, disabled, id, label, variant }) => {
11
- return (React.createElement("div", { className: checkboxContainerStyles },
12
+ return (React.createElement("div", Object.assign({}, checkboxContainerStencil()),
12
13
  React.createElement("div", null, children),
13
14
  label && (React.createElement(LabelText, { htmlFor: id, disabled: disabled, variant: variant, style: { cursor: disabled ? 'default' : 'pointer' } }, label))));
14
15
  },
package/dist/es6/checkbox/lib/CheckboxInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAML,OAAO,EACR,MAAM,6BAA6B,CAAC;AAIrC,MAAM,WAAW,aAAc,SAAQ,OAAO;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAgND,eAAO,MAAM,aAAa,qFAcxB,CAAC"}
1
+ {"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAA4C,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAI/F,MAAM,WAAW,aAAc,SAAQ,OAAO;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8KD,eAAO,MAAM,aAAa,qFAcxB,CAAC"}
package/dist/es6/checkbox/lib/CheckboxInput.js CHANGED
@@ -1,30 +1,25 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
3
- import { calc, createStencil, cssVar, handleCsProp, px2rem, } from '@workday/canvas-kit-styling';
4
- import { base, brand, system } from '@workday/canvas-tokens-web';
5
- import { backgroundVars } from './CheckBackground';
3
+ import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
+ import { brand, system } from '@workday/canvas-tokens-web';
5
+ import { checkboxBackgroundStencil } from './CheckBackground';
6
6
  const checkboxInputStencil = createStencil({
7
- base: { name: "54c399", styles: "border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);opacity:1;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
7
+ base: { name: "b01bc2", styles: "border-radius:var(--cnvs-sys-shape-half);width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);margin:var(--cnvs-sys-space-zero);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-strong);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);background-color:var(--cnvs-brand-primary-base);}&:disabled ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);opacity:var(--cnvs-sys-opacity-full);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light);background-color:var(--cnvs-brand-primary-light);}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline);border-color:var(--cnvs-brand-primary-base);border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
8
8
  modifiers: {
9
9
  variant: {
10
- inverse: { name: "d7f48e", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);background-color:var(--cnvs-base-palette-french-vanilla-100);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-300);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);background-color:var(--cnvs-base-palette-soap-300);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-base-palette-black-pepper-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);border-color:var(--cnvs-base-palette-french-vanilla-100);}}" }
10
+ inverse: { name: "edefb9", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}& ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-default);}&:disabled ~ div:first-of-type{background-color:var(--cnvs-sys-color-bg-alt-default);opacity:var(--cnvs-sys-opacity-disabled);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);background-color:var(--cnvs-sys-color-bg-alt-default);}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-fg-strong), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-fg-strong), 0 0 0 4px var(--cnvs-sys-color-fg-inverse);border-color:var(--cnvs-sys-color-border-inverse);}}" }
11
11
  },
12
12
  disabled: {
13
- true: { name: "8a663b", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
13
+ true: { name: "66eb53", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
14
14
  },
15
15
  error: {
16
- error: { name: "020b45", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-background-inner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-background-inner), \n 0 0 0 0.125rem var(--cnvs-background-outer);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),\n 0 0 0 0.25rem var(--cnvs-background-inner),\n 0 0 0 0.3125rem var(--cnvs-background-outer);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-background-inner);}" },
17
- alert: { name: "b5c214", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-background-inner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-background-inner), \n 0 0 0 0.125rem var(--cnvs-background-outer);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-background-inner);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),\n 0 0 0 0.25rem var(--cnvs-background-inner),\n 0 0 0 0.3125rem var(--cnvs-background-outer);}" }
16
+ true: { name: "21e17a", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);box-shadow:\n 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner), \n 0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse),\n 0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),\n 0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-checkbox-background-errorRingColorInner);}" }
18
17
  }
19
18
  },
20
19
  compound: [
21
20
  {
22
- modifiers: { variant: 'inverse', error: 'error' },
23
- styles: { name: "bc9f16", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-base-palette-soap-300);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}" }
24
- },
25
- {
26
- modifiers: { variant: 'inverse', error: 'alert' },
27
- styles: { name: "bdcc4f", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-base-palette-soap-300);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300);}" }
21
+ modifiers: { variant: 'inverse', error: true },
22
+ styles: { name: "9266ac", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-border-input-inverse);}&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-border-input-inverse);}" }
28
23
  }
29
24
  ]
30
25
  }, "cnvs-checkbox-input");
@@ -32,6 +27,6 @@ export const CheckboxInput = createComponent('input')({
32
27
  displayName: 'CheckboxInput',
33
28
  Component: ({ variant, error, ...elemProps }, ref, Element) => {
34
29
  const { checked, disabled, indeterminate } = elemProps;
35
- return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error })))));
30
+ return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error: !!error })))));
36
31
  },
37
32
  });
package/dist/es6/checkbox/lib/CheckboxRipple.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
1
+ {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
package/dist/es6/checkbox/lib/CheckboxRipple.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
3
+ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
- const checkboxRippleStyles = createStyles({ name: "b4530c", styles: "border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" });
5
+ const checkboxRippleStencil = createStencil({
6
+ base: { name: "d00565", styles: "border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
7
+ }, "cnvs-checkbox-ripple");
6
8
  export const CheckboxRipple = createComponent('span')({
7
9
  displayName: 'CheckboxRipple',
8
10
  Component: elemProps => {
9
- return React.createElement("span", Object.assign({ className: checkboxRippleStyles }, elemProps));
11
+ return React.createElement("span", Object.assign({}, checkboxRippleStencil()));
10
12
  },
11
13
  });
package/dist/es6/select/lib/Select.d.ts CHANGED
@@ -2440,7 +2440,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2440
2440
  * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
2441
2441
  *
2442
2442
  * ```tsx
2443
- * <Select item={options}>
2443
+ * <Select items={options}>
2444
2444
  * <FormField label="Your Label">
2445
2445
  * <Select.Input onChange={(event) => handleChange(event)}>
2446
2446
  * <Select.Popper>
@@ -2528,7 +2528,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2528
2528
  * **Note: The card will be the width of its corresponding `Select.Input`**.
2529
2529
  *
2530
2530
  * ```tsx
2531
- * <Select item={options}>
2531
+ * <Select items={options}>
2532
2532
  * <FormField label="Your Label">
2533
2533
  * <Select.Input onChange={(event) => handleChange(event)}>
2534
2534
  * <Select.Popper>
@@ -2707,7 +2707,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2707
2707
  * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
2708
2708
  *
2709
2709
  * ```tsx
2710
- * <Select item={options}>
2710
+ * <Select items={options}>
2711
2711
  * <FormField label="Your Label">
2712
2712
  * <Select.Input onChange={(event) => handleChange(event)}>
2713
2713
  * <Select.Popper>
@@ -2807,7 +2807,7 @@ export declare const Select: import("@workday/canvas-kit-react/common").Componen
2807
2807
  * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
2808
2808
  *
2809
2809
  * ```tsx
2810
- * <Select item={options}>
2810
+ * <Select items={options}>
2811
2811
  * <FormField label="Your Label">
2812
2812
  * <Select.Input onChange={(event) => handleChange(event)}>
2813
2813
  * <Select.Popper>
package/dist/es6/select/lib/Select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QArCtB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4FJ,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlGrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGH,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnHrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHH,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnJjB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmJD;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAnKL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiKD;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YArML;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmMD;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAxNL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsND;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA3OL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAJH;;;;mBAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPH,CAAC"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAgCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAtCtB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FJ,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAnGrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GH,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QApHrB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHH,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QApJjB;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAJH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoJD;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YApKL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkKD;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAtML;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoMD;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAzNL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuND;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA5OL;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAJH;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAJH;;;;mBAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiPH,CAAC"}
package/dist/es6/select/lib/Select.js CHANGED
@@ -17,7 +17,7 @@ const selectIconsStencil = createStencil({
17
17
  base: { name: "482a82", styles: "position:absolute;pointer-events:none;" }
18
18
  }, "cnvs-select-icons");
19
19
  const hiddenSelectInputStencil = createStencil({
20
- base: { name: "926b2b", styles: "position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:0;cursor:default;pointer-events:none;" }
20
+ base: { name: "99924b", styles: "position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
21
21
  }, "cnvs-hidden-select-input");
22
22
  export const SelectInput = createSubcomponent(TextInput)({
23
23
  modelHook: useSelectModel,
@@ -39,7 +39,7 @@ export const SelectItem = createSubcomponent('li')({
39
39
  })(({ children, ...elemProps }, Element, _model) => {
40
40
  return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
41
41
  });
42
- const selectCardStyles = createStyles({ name: "a8270c", styles: "max-height:18.75rem;" });
42
+ const selectCardStyles = createStyles({ name: "6cb08f", styles: "max-height:18.75rem;" });
43
43
  export const SelectCard = createSubcomponent('div')({
44
44
  modelHook: useSelectModel,
45
45
  elemPropsHook: useSelectCard,
@@ -88,7 +88,7 @@ export const Select = createContainer()({
88
88
  * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
89
89
  *
90
90
  * ```tsx
91
- * <Select item={options}>
91
+ * <Select items={options}>
92
92
  * <FormField label="Your Label">
93
93
  * <Select.Input onChange={(event) => handleChange(event)}>
94
94
  * <Select.Popper>
@@ -105,7 +105,7 @@ export const Select = createContainer()({
105
105
  * **Note: The card will be the width of its corresponding `Select.Input`**.
106
106
  *
107
107
  * ```tsx
108
- * <Select item={options}>
108
+ * <Select items={options}>
109
109
  * <FormField label="Your Label">
110
110
  * <Select.Input onChange={(event) => handleChange(event)}>
111
111
  * <Select.Popper>
@@ -122,7 +122,7 @@ export const Select = createContainer()({
122
122
  * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
123
123
  *
124
124
  * ```tsx
125
- * <Select item={options}>
125
+ * <Select items={options}>
126
126
  * <FormField label="Your Label">
127
127
  * <Select.Input onChange={(event) => handleChange(event)}>
128
128
  * <Select.Popper>
@@ -141,7 +141,7 @@ export const Select = createContainer()({
141
141
  * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
142
142
  *
143
143
  * ```tsx
144
- * <Select item={options}>
144
+ * <Select items={options}>
145
145
  * <FormField label="Your Label">
146
146
  * <Select.Input onChange={(event) => handleChange(event)}>
147
147
  * <Select.Popper>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.0.0-alpha.760-next.0",
3
+ "version": "11.0.0-alpha.764-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.760-next.0",
53
- "@workday/canvas-kit-styling": "^11.0.0-alpha.760-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.764-next.0",
53
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.764-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^1.3.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "567f7f389a35212b6f58050c9e0bf5f9834589c8"
70
+ "gitHead": "d76c7698a6761ca15f9d54814fc53db72c183ebe"
71
71
  }