@workday/canvas-kit-preview-react 14.0.0-alpha.1144-next.0 → 14.0.0-alpha.1147-next.0

package/dist/commonjs/radio/lib/RadioLabel.js

@@ -14,7 +14,7 @@ const RadioText_1 = require("./RadioText");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const radioLabelStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq2w", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
+    base: { name: "bee52z", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
 }, "radio-label-0cca27");
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = (0, common_1.createSubcomponent)('label')({

package/dist/commonjs/radio/lib/RadioText.js

@@ -15,19 +15,19 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const radioTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "rxxq2s", styles: "box-sizing:border-box;cursor:pointer;" },
+    base: { name: "bee52v", styles: "box-sizing:border-box;cursor:pointer;" },
     modifiers: {
         variant: {
-            inverse: { name: "rxxq2t", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            inverse: { name: "bee52w", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         },
         disabled: {
-            true: { name: "rxxq2u", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "bee52x", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "rxxq2v", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
+            styles: { name: "bee52y", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
         }
     ],
     defaultModifiers: {

package/dist/commonjs/radio/lib/StyledRadioButton.js

@@ -14,10 +14,10 @@ const RadioLabel_1 = require("./RadioLabel");
 const radioWidth = 18;
 const radioHeight = 18;
 const radioInputStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq27", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+    base: { name: "bee52a", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
         variant: {
-            inverse: { name: "rxxq28", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
+            inverse: { name: "bee52b", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
         }
     }
 }, "radio-input-f05aaa");
@@ -28,13 +28,13 @@ const StyledRadioInput = (0, common_1.createComponent)('input')({
     },
 });
 const radioInputWrapperStyles = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq29", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
+    base: { name: "bee52c", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
     modifiers: {
         variant: {
-            inverse: { name: "rxxq2a", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            inverse: { name: "bee52d", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
         },
         disabled: {
-            true: { name: "rxxq2b", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+            true: { name: "bee52e", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
         }
     }
 }, "radio-input-wrapper-styles-fce2c4");

package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js

@@ -37,55 +37,55 @@ const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
 const useSegmentedControlItem_1 = require("./hooks/useSegmentedControlItem");
 exports.segmentedControlItemStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.buttonStencil,
-    base: { name: "rxxq3p", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
+    base: { name: "bee53s", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
     modifiers: {
         size: {
-            large: { name: "rxxq3q", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
-            medium: { name: "rxxq3r", styles: "height:var(--cnvs-sys-space-x8);" },
-            small: { name: "rxxq3s", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);" }
+            large: { name: "bee53t", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
+            medium: { name: "bee53u", styles: "height:var(--cnvs-sys-space-x8);" },
+            small: { name: "bee53v", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);" }
         },
         variant: {
-            iconOnly: { name: "rxxq3t", styles: "" },
-            textOnly: { name: "rxxq3u", styles: "" },
-            iconWithText: { name: "rxxq3v", styles: "" }
+            iconOnly: { name: "bee53w", styles: "" },
+            textOnly: { name: "bee53x", styles: "" },
+            iconWithText: { name: "bee53y", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { size: 'large', variant: 'iconOnly' },
-            styles: { name: "rxxq3w", styles: "min-width:var(--cnvs-sys-space-x10);" }
+            styles: { name: "bee53z", styles: "min-width:var(--cnvs-sys-space-x10);" }
         },
         {
             modifiers: { size: 'large', variant: 'iconWithText' },
-            styles: { name: "rxxq3x", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
+            styles: { name: "bee540", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'large', variant: 'textOnly' },
-            styles: { name: "rxxq3y", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
+            styles: { name: "bee541", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'medium', variant: 'iconOnly' },
-            styles: { name: "rxxq3z", styles: "min-width:var(--cnvs-sys-space-x8);" }
+            styles: { name: "bee542", styles: "min-width:var(--cnvs-sys-space-x8);" }
         },
         {
             modifiers: { size: 'medium', variant: 'iconWithText' },
-            styles: { name: "rxxq40", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
+            styles: { name: "bee543", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
         },
         {
             modifiers: { size: 'medium', variant: 'textOnly' },
-            styles: { name: "rxxq41", styles: "padding-inline:1.25rem;" }
+            styles: { name: "bee544", styles: "padding-inline:1.25rem;" }
         },
         {
             modifiers: { size: 'small', variant: 'iconOnly' },
-            styles: { name: "rxxq42", styles: "min-width:var(--cnvs-sys-space-x6);" }
+            styles: { name: "bee545", styles: "min-width:var(--cnvs-sys-space-x6);" }
         },
         {
             modifiers: { size: 'small', variant: 'iconWithText' },
-            styles: { name: "rxxq43", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
+            styles: { name: "bee546", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
         },
         {
             modifiers: { size: 'small', variant: 'textOnly' },
-            styles: { name: "rxxq44", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
+            styles: { name: "bee547", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
         }
     ]
 }, "segmented-control-item-bc271f");

package/dist/commonjs/segmented-control/lib/SegmentedControlList.js

@@ -11,14 +11,14 @@ exports.segmentedControlListStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         items: '',
     },
-    base: { name: "rxxq30", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-bg-alt-soft);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);border-radius:var(--cnvs-sys-shape-x2);padding:0.1875rem;grid-gap:var(--cnvs-sys-space-x2);" },
+    base: { name: "bee533", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-bg-alt-soft);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);border-radius:var(--cnvs-sys-shape-x2);padding:0.1875rem;grid-gap:var(--cnvs-sys-space-x2);" },
     modifiers: {
         disabled: {
-            true: { name: "rxxq31", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
+            true: { name: "bee534", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
         },
         orientation: {
-            vertical: { name: "rxxq32", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
-            horizontal: { name: "rxxq33", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
+            vertical: { name: "bee535", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
+            horizontal: { name: "bee536", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
         }
     }
 }, "segmented-control-list-0a747c");

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -36,19 +36,19 @@ exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "rxxq4g", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    base: { name: "bee54j", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
     modifiers: {
         variant: {
-            alternate: { name: "rxxq4h", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
-            standard: { name: "rxxq4i", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+            alternate: { name: "bee54k", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "bee54l", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
         },
         expanded: {
-            true: { name: "rxxq4j", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
-            false: { name: "rxxq4k", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
+            true: { name: "bee54m", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
+            false: { name: "bee54n", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
         },
         touched: {
-            true: { name: "rxxq4l", styles: "" },
-            false: { name: "rxxq4m", styles: "animation:none;" }
+            true: { name: "bee54o", styles: "" },
+            false: { name: "bee54p", styles: "animation:none;" }
         }
     }
 }, "panel-bd9477");

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -34,35 +34,35 @@ const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq45", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    base: { name: "bee548", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
     modifiers: {
         state: {
-            collapsing: { name: "rxxq46", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "rxxq47", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "rxxq48", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "rxxq49", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "bee549", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "bee54a", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "bee54b", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "bee54c", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            left: { name: "rxxq4a", styles: "" },
-            right: { name: "rxxq4b", styles: "" }
+            left: { name: "bee54d", styles: "" },
+            right: { name: "bee54e", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "rxxq4c", styles: "transform:scaleX(-1);" }
+            styles: { name: "bee54f", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "rxxq4d", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "bee54g", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanded', origin: 'right' },
-            styles: { name: "rxxq4e", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "bee54h", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanding', origin: 'right' },
-            styles: { name: "rxxq4f", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "bee54i", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         }
     ]
 }, "side-panel-toggle-button-da8098");

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -10,31 +10,31 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
 const StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
 const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "rxxq54", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
+    base: { name: "bee557", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
     modifiers: {
         gray: {
-            high: { name: "rxxq55", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
-            low: { name: "rxxq56", styles: "color:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-3a4847:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-bg-alt-softer);" }
+            high: { name: "bee558", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
+            low: { name: "bee559", styles: "color:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-3a4847:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-bg-alt-softer);" }
         },
         orange: {
-            high: { name: "rxxq57", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-3a4847:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-amber-default);" },
-            low: { name: "rxxq58", styles: "color:var(--cnvs-sys-color-static-amber-strongest);--color-system-icon-3a4847:var(--cnvs-sys-color-static-amber-strongest);background:var(--cnvs-sys-color-static-amber-softer);" }
+            high: { name: "bee55a", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-3a4847:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-amber-default);" },
+            low: { name: "bee55b", styles: "color:var(--cnvs-sys-color-static-amber-strongest);--color-system-icon-3a4847:var(--cnvs-sys-color-static-amber-strongest);background:var(--cnvs-sys-color-static-amber-softer);" }
         },
         blue: {
-            high: { name: "rxxq59", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
-            low: { name: "rxxq5a", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-softer);" }
+            high: { name: "bee55c", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
+            low: { name: "bee55d", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-softer);" }
         },
         green: {
-            high: { name: "rxxq5b", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
-            low: { name: "rxxq5c", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-softer);" }
+            high: { name: "bee55e", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
+            low: { name: "bee55f", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-softer);" }
         },
         red: {
-            high: { name: "rxxq5d", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
-            low: { name: "rxxq5e", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-softer);" }
+            high: { name: "bee55g", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
+            low: { name: "bee55h", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-softer);" }
         },
         transparent: {
-            high: { name: "rxxq5f", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
-            low: { name: "rxxq5g", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
+            high: { name: "bee55i", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
+            low: { name: "bee55j", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
         }
     }
 }, "status-indicator-1a565e");

package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js

@@ -9,7 +9,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const statusIndicatorLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "rxxq53", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
+    base: { name: "bee556", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
     defaultModifiers: { typeLevel: 'subtext.large' }
 }, "status-indicator-label-63258e");
 exports.StatusIndicatorLabel = (0, common_1.createComponent)('span')({

package/dist/es6/color-picker/lib/ColorPicker.d.ts

@@ -48,8 +48,76 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     resetLabel?: string;
 }
+export declare const colorPickerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    readonly button: "color-picker-button";
+    readonly form: "color-picker-form";
+    readonly hexInput: "color-picker-hex-input";
+    readonly inputWrapper: "color-picker-input-wrapper";
+}, {}, never>, {
+    readonly button: "color-picker-button";
+    readonly form: "color-picker-form";
+    readonly hexInput: "color-picker-hex-input";
+    readonly inputWrapper: "color-picker-input-wrapper";
+}, {}, never, never>;
 export declare const ColorPicker: {
     ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
-    defaultColorSet: string[];
+    defaultColorSet: {
+        blueberry600: string;
+        grapeSoda600: string;
+        pomegranate600: string;
+        cinnamon600: string;
+        cantaloupe600: string;
+        sourLemon600: string;
+        greenApple600: string;
+        jewel600: string;
+        blueberry500: string;
+        grapeSoda500: string;
+        pomegranate500: string;
+        cinnamon500: string;
+        cantaloupe500: string;
+        sourLemon500: string;
+        greenApple500: string;
+        jewel500: string;
+        blueberry400: string;
+        grapeSoda400: string;
+        pomegranate400: string;
+        cinnamon400: string;
+        cantaloupe400: string;
+        sourLemon400: string;
+        greenApple400: string;
+        jewel400: string;
+        blueberry300: string;
+        grapeSoda300: string;
+        pomegranate300: string;
+        cinnamon300: string;
+        cantaloupe300: string;
+        sourLemon300: string;
+        greenApple300: string;
+        jewel300: string;
+        blueberry200: string;
+        grapeSoda200: string;
+        pomegranate200: string;
+        cinnamon200: string;
+        cantaloupe200: string;
+        sourLemon200: string;
+        greenApple200: string;
+        jewel200: string;
+        blueberry100: string;
+        grapeSoda100: string;
+        pomegranate100: string;
+        cinnamon100: string;
+        cantaloupe100: string;
+        sourLemon100: string;
+        greenApple100: string;
+        jewel100: string;
+        blackPepper600: string;
+        blackPepper400: string;
+        blackPepper300: string;
+        blackPepper100: string;
+        frenchVanilla500: string;
+        frenchVanilla400: string;
+        frenchVanilla200: string;
+        frenchVanilla100: string;
+    };
 };
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/es6/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4GD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAmED,eAAO,MAAM,kBAAkB;;;;;;;;;;oBA4B7B,CAAC;AAiBH,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDlB,CAAC"}

package/dist/es6/color-picker/lib/ColorPicker.js

@@ -1,92 +1,80 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { checkIcon } from '@workday/canvas-system-icons-web';
 import { ColorInput } from '@workday/canvas-kit-react/color-picker';
 import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import { FormField } from '@workday/canvas-kit-react/form-field';
-import styled from '@emotion/styled';
 import { ResetButton } from './parts/ColorReset';
 import { SwatchBook } from './parts/SwatchBook';
-const defaultColorSet = [
-    colors.blueberry600,
-    colors.grapeSoda600,
-    colors.pomegranate600,
-    colors.cinnamon600,
-    colors.cantaloupe600,
-    colors.sourLemon600,
-    colors.greenApple600,
-    colors.jewel600,
-    colors.blueberry500,
-    colors.grapeSoda500,
-    colors.pomegranate500,
-    colors.cinnamon500,
-    colors.cantaloupe500,
-    colors.sourLemon500,
-    colors.greenApple500,
-    colors.jewel500,
-    colors.blueberry400,
-    colors.grapeSoda400,
-    colors.pomegranate400,
-    colors.cinnamon400,
-    colors.cantaloupe400,
-    colors.sourLemon400,
-    colors.greenApple400,
-    colors.jewel400,
-    colors.blueberry300,
-    colors.grapeSoda300,
-    colors.pomegranate300,
-    colors.cinnamon300,
-    colors.cantaloupe300,
-    colors.sourLemon300,
-    colors.greenApple300,
-    colors.jewel300,
-    colors.blueberry200,
-    colors.grapeSoda200,
-    colors.pomegranate200,
-    colors.cinnamon200,
-    colors.cantaloupe200,
-    colors.sourLemon200,
-    colors.greenApple200,
-    colors.jewel200,
-    colors.blueberry100,
-    colors.grapeSoda100,
-    colors.pomegranate100,
-    colors.cinnamon100,
-    colors.cantaloupe100,
-    colors.sourLemon100,
-    colors.greenApple100,
-    colors.jewel100,
-    colors.blackPepper600,
-    colors.blackPepper400,
-    colors.blackPepper300,
-    colors.blackPepper100,
-    colors.frenchVanilla500,
-    colors.frenchVanilla400,
-    colors.frenchVanilla200,
-    colors.frenchVanilla100,
-];
-const ColorPickerContainer = styled('div')({
-    width: 216,
-});
-const ColorInputWrapper = styled('form')({
-    width: '100%',
-    marginTop: space.s,
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-});
-const ColorInputAndLabel = styled(FormField)({
-    display: 'flex',
-    flexDirection: 'column',
-    margin: 0,
-});
-const CheckButton = styled(SecondaryButton)({
-    alignSelf: 'flex-end',
-});
-const HexColorInput = styled(ColorInput)({
-    width: '168px',
-});
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const defaultColorSet = {
+    blueberry600: '#004387',
+    grapeSoda600: '#7c3882',
+    pomegranate600: '#99003a',
+    cinnamon600: '#a31b12',
+    cantaloupe600: '#c06c00',
+    sourLemon600: '#bd9100',
+    greenApple600: '#217a37',
+    jewel600: '#156973',
+    blueberry500: '#005cb9',
+    grapeSoda500: '#97499e',
+    pomegranate500: '#c70550',
+    cinnamon500: '#de2e21',
+    cantaloupe500: '#f38b00',
+    sourLemon500: '#ebb400',
+    greenApple500: '#319c4c',
+    jewel500: '#1a818c',
+    blueberry400: '#0875e1',
+    grapeSoda400: '#c860d1',
+    pomegranate400: '#f31167',
+    cinnamon400: '#ff5347',
+    cantaloupe400: '#ffa126',
+    sourLemon400: '#ffc629',
+    greenApple400: '#43c463',
+    jewel400: '#1ea4b3',
+    blueberry300: '#40a0ff',
+    grapeSoda300: '#de8ae6',
+    pomegranate300: '#ff5c9a',
+    cinnamon300: '#ff867d',
+    cantaloupe300: '#ffbc63',
+    sourLemon300: '#ffda61',
+    greenApple300: '#5fe380',
+    jewel300: '#44c8d7',
+    blueberry200: '#a6d2ff',
+    grapeSoda200: '#fac0ff',
+    pomegranate200: '#ffbdd6',
+    cinnamon200: '#fcc9c5',
+    cantaloupe200: '#fcd49f',
+    sourLemon200: '#ffecab',
+    greenApple200: '#acf5be',
+    jewel200: '#acecf3',
+    blueberry100: '#d7eafc',
+    grapeSoda100: '#feebff',
+    pomegranate100: '#ffebf3',
+    cinnamon100: '#ffefee',
+    cantaloupe100: '#ffeed9',
+    sourLemon100: '#fff9e6',
+    greenApple100: '#ebfff0',
+    jewel100: '#ebfdff',
+    blackPepper600: '#000000',
+    blackPepper400: '#333333',
+    blackPepper300: '#494949',
+    blackPepper100: '#787878',
+    frenchVanilla500: '#a6a6a6',
+    frenchVanilla400: '#bdbdbd',
+    frenchVanilla200: '#ebebeb',
+    frenchVanilla100: '#ffffff',
+};
+export const colorPickerStencil = createStencil({
+    parts: {
+        button: 'color-picker-button',
+        form: 'color-picker-form',
+        hexInput: 'color-picker-hex-input',
+        inputWrapper: 'color-picker-input-wrapper',
+    },
+    base: { name: "blb64", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-space-x4);}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:var(--cnvs-sys-space-zero);}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
+}, "color-picker-c9dd1d");
 const isCustomColor = (colors, hexCode) => {
     if (!hexCode) {
         return false;
@@ -101,7 +89,7 @@ const isCustomColor = (colors, hexCode) => {
         }
     });
 };
-export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
+export const ColorPicker = ({ colorSet = Object.values(defaultColorSet), customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
     const [validHexValue, setValidHexValue] = React.useState('');
     const [disabled, setDisabled] = React.useState(true);
     const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
@@ -121,6 +109,6 @@ export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel =
         onColorChange(validHexValue);
         event.preventDefault(); // don't submit the form - default action is to reload the page
     };
-    return (_jsxs(ColorPickerContainer, { ...elemProps, children: [onColorReset && resetColor && (_jsx(ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), _jsx(SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && (_jsxs(ColorInputWrapper, { onSubmit: onSubmit, children: [_jsxs(ColorInputAndLabel, { children: [_jsx(FormField.Label, { children: customHexInputLabel }), _jsx(FormField.Input, { as: HexColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })] }), _jsx(CheckButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit", disabled: disabled })] }))] }));
+    return (_jsxs("div", { ...handleCsProp(elemProps, colorPickerStencil()), children: [onColorReset && resetColor && (_jsx(ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), _jsx(SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && (_jsxs("form", { onSubmit: onSubmit, ...colorPickerStencil.parts.form, children: [_jsxs(FormField, { ...colorPickerStencil.parts.inputWrapper, children: [_jsx(FormField.Label, { children: customHexInputLabel }), _jsx(FormField.Input, { as: ColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue, ...colorPickerStencil.parts.hexInput })] }), _jsx(SecondaryButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit", disabled: disabled, ...colorPickerStencil.parts.button })] }))] }));
 };
 ColorPicker.defaultColorSet = defaultColorSet;

package/dist/es6/color-picker/lib/parts/ColorReset.d.ts

@@ -3,5 +3,10 @@ export interface ResetButtonProps {
     resetColor: string;
     onClick: (color: string) => void;
 }
+export declare const resetButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    readonly label: "reset-button-label";
+}, {}, never>, {
+    readonly label: "reset-button-label";
+}, {}, never, never>;
 export declare const ResetButton: ({ onClick, resetColor, label }: ResetButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ColorReset.d.ts.map

package/dist/es6/color-picker/lib/parts/ColorReset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoCD,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,4CASzE,CAAC"}
+{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,kBAAkB;;;;oBAkC7B,CAAC;AAEH,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,4CAWzE,CAAC"}