@workday/canvas-kit-react 16.0.0-alpha.0499-next.0 → 16.0.0

package/dist/commonjs/checkbox/lib/CheckBackground.js

@@ -14,24 +14,24 @@ exports.checkboxBackgroundStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         background: 'checkbox-background',
     },
-    base: { name: "jj9na", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xs, 0.25rem);display:flex;justify-content:center;padding:0 0.125rem;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
+    base: { name: "2mm1s4", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xs, 0.25rem);display:flex;justify-content:center;padding:0 0.125rem;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
     modifiers: {
         variant: {
-            inverse: { name: "su0em", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
+            inverse: { name: "ac2pn", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
         },
         error: {
-            error: { name: "wssl5", styles: "--errorRingColorInner-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--errorRingColorOuter-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
-            caution: { name: "1ueacg", styles: "--errorRingColorInner-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));--errorRingColorOuter-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
+            error: { name: "2a65u2", styles: "--errorRingColorInner-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--errorRingColorOuter-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
+            caution: { name: "11vle0", styles: "--errorRingColorInner-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));--errorRingColorOuter-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', error: 'error' },
-            styles: { name: "1w7702", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
+            styles: { name: "12bryb", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
         },
         {
             modifiers: { variant: 'inverse', error: 'caution' },
-            styles: { name: "3530aa", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
+            styles: { name: "3l4gta", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
         }
     ]
 }, "checkbox-background-c73dbe");

package/dist/commonjs/checkbox/lib/CheckboxCheck.js

@@ -9,24 +9,24 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const CheckBackground_1 = require("./CheckBackground");
 const checkboxCheckStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1xb8l8", styles: "box-sizing:border-box;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));display:flex;flex-direction:column;justify-content:center;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.3125rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
+    base: { name: "2g9qna", styles: "box-sizing:border-box;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));display:flex;flex-direction:column;justify-content:center;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.3125rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
     modifiers: {
         checked: {
-            true: { name: "2day6y", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
+            true: { name: "3dsut1", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         indeterminate: {
-            true: { name: "45s59e", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
+            true: { name: "2o0m2e", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         variant: {
-            inverse: { name: "233ubk", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));& > div{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}" }
+            inverse: { name: "31balq", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));& > div{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}" }
         }
     }
 }, "checkbox-check-f2bc56");
 const indeterminateBoxStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1o9bk6", styles: "box-sizing:border-box;width:0.625rem;height:0.125rem;background-color:var(--cnvs-sys-color-fg-inverse);" },
+    base: { name: "3hpgf1", styles: "box-sizing:border-box;width:0.625rem;height:0.125rem;background-color:var(--cnvs-sys-color-fg-inverse);" },
     modifiers: {
         variant: {
-            inverse: { name: "2n6jpb", styles: "background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));" }
+            inverse: { name: "olgox", styles: "background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));" }
         }
     }
 }, "indeterminate-box-db8fc6");

package/dist/commonjs/checkbox/lib/CheckboxContainer.js

@@ -10,10 +10,10 @@ const checkboxContainerStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         label: 'checkbox-container-label',
     },
-    base: { name: "3kcalt", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));position:relative;&>div{display:flex;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));align-self:flex-start;position:relative;}[data-part=\"checkbox-container-label\"]{padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;margin-block-start:calc(0.125rem * -1);}" },
+    base: { name: "qnryq", styles: "box-sizing:border-box;display:flex;align-items:center;min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));position:relative;&>div{display:flex;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));align-self:flex-start;position:relative;}[data-part=\"checkbox-container-label\"]{padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;margin-block-start:calc(0.125rem * -1);}" },
     modifiers: {
         disabled: {
-            true: { name: "13rjnz", styles: "[data-part=\"checkbox-container-label\"]{cursor:default;}" }
+            true: { name: "1rexmc", styles: "[data-part=\"checkbox-container-label\"]{cursor:default;}" }
         }
     }
 }, "checkbox-container-bafc3c");

package/dist/commonjs/checkbox/lib/CheckboxInput.js

@@ -9,22 +9,22 @@ const CheckBackground_1 = require("./CheckBackground");
 const CheckboxRipple_1 = require("./CheckboxRipple");
 const checkboxInputStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "2yb0n5", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));margin:0;margin-block-start:calc(0.25rem * -1);margin-inline-start:calc(0.25rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:where(:checked, :indeterminate) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 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{& ~ [data-part=\"checkbox-background\"]{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-width:0.125rem;> div{span{margin-inline-start:calc(0.375rem * -1);}div{margin-inline-start:calc(0.0625rem * -1);}}}}" },
+    base: { name: "gifr7", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));margin:0;margin-block-start:calc(0.25rem * -1);margin-inline-start:calc(0.25rem * -1);position:absolute;opacity:var(--cnvs-sys-opacity-zero);&:not(:disabled){cursor:pointer;}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:where(:checked, :indeterminate) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 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{& ~ [data-part=\"checkbox-background\"]{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));border-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-width:0.125rem;> div{span{margin-inline-start:calc(0.375rem * -1);}div{margin-inline-start:calc(0.0625rem * -1);}}}}" },
     modifiers: {
         variant: {
-            inverse: { name: "37cy5d", styles: "& ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.125rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}}" }
+            inverse: { name: "k4aco", styles: "& ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:hover,.hover) ~ [data-part=\"checkbox-ripple\"]{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part=\"checkbox-background\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:where(:focus-visible, .focus) ~ [data-part=\"checkbox-background\"]{border-color:var(--cnvs-sys-color-border-contrast-default);box-shadow:0 0 0 0rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.125rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem  var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}}" }
         },
         disabled: {
-            true: { name: "1fm243", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
+            true: { name: "1a3l7y", styles: "&:where(:hover, .hover) ~ span:first-of-type{box-shadow:none;}" }
         },
         error: {
-            true: { name: "3uz6e3", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);box-shadow:\n            0 0 0 0.0625rem var(--errorRingColorOuter-checkbox-background-c73dbe),\n            0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-c73dbe);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n            0 0 0 0.1875rem var(--errorRingColorInner-checkbox-background-c73dbe),\n            0 0 0 0.25rem var(--errorRingColorOuter-checkbox-background-c73dbe);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);}" }
+            true: { name: "3qwscf", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);box-shadow:\n            0 0 0 0.0625rem var(--errorRingColorOuter-checkbox-background-c73dbe),\n            0 0 0 0.0625rem var(--errorRingColorInner-checkbox-background-c73dbe);}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:transparent;box-shadow:\n            0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n            0 0 0 0.1875rem var(--errorRingColorInner-checkbox-background-c73dbe),\n            0 0 0 0.25rem var(--errorRingColorOuter-checkbox-background-c73dbe);}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--errorRingColorInner-checkbox-background-c73dbe);}" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', error: 'true' },
-            styles: { name: "1l9mua", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}" }
+            styles: { name: "1giflr", styles: "&:not(:where(:focus-visible, .focus)) ~ div:first-of-type{border:0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}" }
         }
     ]
 }, "checkbox-input-3ab799");

package/dist/commonjs/checkbox/lib/CheckboxRipple.js

@@ -9,7 +9,7 @@ exports.checkboxRippleStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         ripple: 'checkbox-ripple',
     },
-    base: { name: "1ko4ie", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:none;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
+    base: { name: "3fmbh2", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:none;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
 }, "checkbox-ripple-6d137e");
 exports.CheckboxRipple = (0, common_1.createComponent)('span')({
     displayName: 'CheckboxRipple',

package/dist/commonjs/collection/lib/ListBox.js

@@ -27,11 +27,11 @@ const listBoxContainerStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         listBoxContainer: 'list-box-container',
     },
-    base: { name: "3ul2oo", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block:0;}" },
+    base: { name: "47bxt2", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block:0;}" },
     modifiers: {
         orientation: {
-            vertical: { name: "uym5g", styles: "overflow-y:auto;" },
-            horizontal: { name: "43413g", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
+            vertical: { name: "2ooni8", styles: "overflow-y:auto;" },
+            horizontal: { name: "n2qrx", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
         }
     }
 }, "list-box-container-77c2bf");

package/dist/commonjs/color-picker/lib/ColorInput.js

@@ -17,13 +17,13 @@ exports.colorPickerHexInputStencil = (0, canvas_kit_styling_1.createStencil)({
         poundSign: 'color-picker-hex-input-pound-sign',
         swatch: 'color-picker-hex-input-swatch',
     },
-    base: { name: "3sm9fk", styles: "box-sizing:border-box;--width-color-picker-hex-input-9e7717:7.25rem;position:relative;width:var(--width-color-picker-hex-input-9e7717);[data-part=\"color-picker-hex-input\"]{min-width:var(--width-color-picker-hex-input-9e7717);width:var(--width-color-picker-hex-input-9e7717);font-family:var(--cnvs-sys-font-family-mono);padding-inline-start:calc(100% - 5.375rem);&:focus::placeholder{color:transparent;}}[data-part=\"color-picker-hex-input-pound-sign\"]{position:absolute;top:0.625rem;left:5.5rem;font-family:var(--cnvs-sys-font-family-mono);}[data-part=\"color-picker-hex-input-swatch\"]{position:absolute;top:0.625rem;left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,0.25);pointer-events:none;@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}}:dir(ltr){[data-part=\"color-picker-hex-input\"]{padding-inline-start:2.875rem;}[data-part=\"color-picker-hex-input-pound-sign\"]{left:2.25rem;}}" },
+    base: { name: "6ib91", styles: "box-sizing:border-box;--width-color-picker-hex-input-9e7717:7.25rem;position:relative;width:var(--width-color-picker-hex-input-9e7717);[data-part=\"color-picker-hex-input\"]{min-width:var(--width-color-picker-hex-input-9e7717);width:var(--width-color-picker-hex-input-9e7717);font-family:var(--cnvs-sys-font-family-mono);padding-inline-start:calc(100% - 5.375rem);&:focus::placeholder{color:transparent;}}[data-part=\"color-picker-hex-input-pound-sign\"]{position:absolute;top:0.625rem;left:5.5rem;font-family:var(--cnvs-sys-font-family-mono);}[data-part=\"color-picker-hex-input-swatch\"]{position:absolute;top:0.625rem;left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,0.25);pointer-events:none;@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}}:dir(ltr){[data-part=\"color-picker-hex-input\"]{padding-inline-start:2.875rem;}[data-part=\"color-picker-hex-input-pound-sign\"]{left:2.25rem;}}" },
     modifiers: {
         grow: {
-            true: { name: "2tor47", styles: "--width-color-picker-hex-input-9e7717:100%;" }
+            true: { name: "2oxk69", styles: "--width-color-picker-hex-input-9e7717:100%;" }
         },
         disabled: {
-            true: { name: "2spjbz", styles: "[data-part=\"color-picker-hex-input-pound-sign\"]{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            true: { name: "4cxj9", styles: "[data-part=\"color-picker-hex-input-pound-sign\"]{opacity:var(--cnvs-sys-opacity-disabled);}" }
         }
     }
 }, "color-picker-hex-input-9e7717");

package/dist/commonjs/color-picker/lib/ColorPreview.js

@@ -7,7 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const ColorInput_1 = require("./ColorInput");
 exports.colorPreviewStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "47jsbm", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));pointer-events:none;" }
+    base: { name: "2y5s7l", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));pointer-events:none;" }
 }, "color-preview-1326de");
 exports.ColorPreview = (0, common_1.createComponent)('input')({
     displayName: 'ColorPreview',

package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js

@@ -13,10 +13,10 @@ exports.colorPickerColorSwatchStencil = (0, canvas_kit_styling_1.createStencil)(
         color: '',
         iconColor: '',
     },
-    base: { name: "47isix", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-5765a0);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));background-color:var(--color-color-picker-color-swatch-5765a0);display:flex;align-items:center;justify-content:center;forced-color-adjust:none;& > *{margin:calc(0.125rem * -1);}" },
+    base: { name: "2vb340", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-5765a0);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));background-color:var(--color-color-picker-color-swatch-5765a0);display:flex;align-items:center;justify-content:center;forced-color-adjust:none;& > *{margin:calc(0.125rem * -1);}" },
     modifiers: {
         withShadow: {
-            true: { name: "2keqdn", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}" }
+            true: { name: "2vkj9d", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);@media (forced-colors: active){outline:solid 0.0625rem SelectedItemText;}" }
         }
     }
 }, "color-picker-color-swatch-5765a0");

package/dist/commonjs/combobox/lib/ComboboxMenuList.js

@@ -21,7 +21,7 @@ exports.useComboboxMenuList = (0, common_1.createElemPropsHook)(menu_1.useMenuMo
     };
 });
 const comboboxMenuListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2p1vx", styles: "box-sizing:border-box;" },
+    base: { name: "2fmclj", styles: "box-sizing:border-box;" },
     extends: menu_1.menuListStencil
 }, "combobox-menu-list-6c92ed");
 exports.ComboboxMenuList = (0, common_1.createSubcomponent)('ul')({

package/dist/commonjs/common/lib/AccessibleHide.js

@@ -22,7 +22,7 @@ exports.accessibleHide = {
     padding: 0,
     border: 0,
 };
-exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "1p0j9m", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
+exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "12xt1y", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

package/dist/commonjs/common/lib/CanvasProvider.d.ts

@@ -1,19 +1,310 @@
 import * as React from 'react';
-import { PartialEmotionCanvasTheme } from './theming';
+import { CanvasProviderTheme, CanvasThemingScope, EmotionCanvasTheme } from './theming';
+/**
+ * Context for providing brand CSS variables to popup containers.
+ * This carries the resolved CSS variable style map from CanvasProvider
+ * to usePopupStack for proper popup theming, regardless of whether
+ * a numerical or legacy theme is used.
+ */
+export declare const CanvasBrandStyleContext: React.Context<React.CSSProperties>;
 export interface CanvasProviderProps {
     /**
      * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.
-     * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#global-vs-scoped-theming).
+     * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#scoped-theming).
      *
      * While we support theme overrides, we advise to use global theming via CSS Variables.
      */
-    theme?: PartialEmotionCanvasTheme;
+    theme?: CanvasProviderTheme;
+    /**
+     * How partial theme input expands. Default `'brand'`.
+     *
+     * **Numerical `brand` shape:** `'brand'` applies the `primary['600']` shortcut
+     * (PrimaryButton + selected states). `'full'` writes each ramp key literally with
+     * no shortcuts. Other `brand.*` keys always map 1:1 to CSS variables.
+     *
+     * **Legacy `canvas.palette` shape:** `'brand'` = primary.main shortcut only.
+     * `'full'` = auto-generated ramps + broad `system.color.brand.*` forwarding.
+     *
+     * @default 'brand'
+     */
+    themeScope?: CanvasThemingScope;
 }
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
 export declare const defaultBranding: string;
-export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme | undefined, elemProps: React.HTMLAttributes<HTMLElement>) => {
+/** Pure function — safe to call outside React hooks (e.g. usePopupStack). */
+export declare function canvasThemeToCssVars(theme: CanvasProviderTheme | undefined, elemProps: React.HTMLAttributes<HTMLElement>, options?: {
+    themeScope?: CanvasThemingScope;
+    filledSemanticTheme?: EmotionCanvasTheme;
+}): {
+    className: string;
+    style: React.CSSProperties;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "no" | "yes" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "polite" | "assertive" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onResize?: React.ReactEventHandler<HTMLElement> | undefined;
+    onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+};
+export declare const useCanvasThemeToCssVars: (theme: CanvasProviderTheme | undefined, elemProps: React.HTMLAttributes<HTMLElement>, themeScope?: CanvasThemingScope) => {
     className: string;
     style: React.CSSProperties;
     defaultChecked?: boolean | undefined;
@@ -280,5 +571,5 @@ export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme
     onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
 };
-export declare const CanvasProvider: ({ children, theme, ...props }: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CanvasProvider: ({ children, theme, themeScope, ...props }: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CanvasProvider.d.ts.map

package/dist/commonjs/common/lib/CanvasProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,yBAAyB,EAA+B,MAAM,WAAW,CAAC;AAElF,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkGD;;GAEG;AACH,eAAO,MAAM,eAAe,QAqF1B,CAAC;AAEH,eAAO,MAAM,uBAAuB,UAI3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiN7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CAgBzD,CAAC"}
+{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,QA+E1B,CAAC;AAEH,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAC5C,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBF;AAED,eAAO,MAAM,uBAAuB,UAI3B,mBAAmB,GAAG,SAAS,aAC3B,MAAM,cAAc,CAAC,WAAW,CAAC,eAC/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYhC,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CA2EzD,CAAC"}