@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
+  gap: system.gap.md,
+  padding: system.padding.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
-  backgroundColor: system.color.bg.primary.default,
+  gap: system.gap.md,
+  padding: system.padding.md,
+  backgroundColor: system.color.surface.contrast.default,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-import {Heading} from '@workday/canvas-kit-react/text';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
+  gap: system.gap.md,
+  padding: system.padding.md,
 });
 
 const customActionTheme = createStyles({

package/dist/mdx/react/card/card.mdx

@@ -1,7 +1,7 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Borderless from './examples/Borderless';
-import Filled from './examples/Filled';
+import Tonal from './examples/Tonal';
 import WithCustomStyles from './examples/CustomStyles';
 import WithStencils from './examples/Stencils';
 
@@ -9,7 +9,7 @@ import WithStencils from './examples/Stencils';
 # Canvas Kit Card
 
 A Card is a preview that serves as an entry point to more detailed information. Card is a
-presentational [compound component](/getting-started/for-developers/resources/compound-components/)
+presentational [compound component](/get-started/for-developers/documentation/compound-components/)
 used as a building block for other components such as [Popup](/components/popups/popup/) and
 [Modal](/components/popups/modal/).
 
@@ -37,13 +37,13 @@ backgrounds where you want the card to blend seamlessly without borders or shado
 
 <ExampleCodeBlock code={Borderless} />
 
-### Filled Example
+### Tonal Example
 
-The `filled` variant adds a background color to the Card, creating a more prominent appearance while
+The `tonal` variant adds a background color to the Card, creating a more prominent appearance while
 maintaining the same internal spacing and structure. Use this variant when you need a card with a
 grayish background to create visual separation from the page background.
 
-<ExampleCodeBlock code={Filled} />
+<ExampleCodeBlock code={Tonal} />
 
 ### Custom Styles
 

package/dist/mdx/react/card/examples/Basic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Card} from '@workday/canvas-kit-react/card';
 
 export default () => {

package/dist/mdx/react/card/examples/Borderless.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import {Card} from '@workday/canvas-kit-react/card';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = createStyles({
-  background: system.color.bg.alt.softer,
-  padding: system.space.x4,
+  background: system.color.surface.raised,
+  padding: system.padding.md,
 });
 
 export default () => {

package/dist/mdx/react/card/examples/CustomStyles.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {Card} from '@workday/canvas-kit-react/card';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -7,7 +5,7 @@ import {system} from '@workday/canvas-tokens-web';
 const customCardStyles = createStyles({
   boxShadow: system.depth[2],
   maxWidth: px2rem(320),
-  padding: system.space.x3,
+  padding: system.padding.sm,
 });
 
 export default () => (

package/dist/mdx/react/card/examples/Stencils.tsx

@@ -1,15 +1,14 @@
-import * as React from 'react';
-import {cardStencil, cardBodyStencil, cardHeadingStencil} from '@workday/canvas-kit-react/card';
+import {cardBodyStencil, cardHeadingStencil, cardStencil} from '@workday/canvas-kit-react/card';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
-import {system, brand} from '@workday/canvas-tokens-web';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
 const menuCardStencil = createStencil({
   extends: cardStencil,
   base: {
     display: 'flex',
     flexDirection: 'column',
-    padding: system.space.zero,
+    padding: '0',
     maxWidth: px2rem(320),
     boxShadow: system.depth[1],
     overflow: 'hidden',
@@ -23,7 +22,7 @@ const menuCardHeroStencil = createStencil({
     background: brand.gradient.primary,
     aspectRatio: '1',
     maxHeight: px2rem(80),
-    padding: system.space.x2,
+    padding: system.padding.xs,
   },
 });
 
@@ -38,8 +37,8 @@ const menuCardContentStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    gap: system.space.x2,
-    padding: system.space.x2,
+    gap: system.gap.sm,
+    padding: system.padding.xs,
   },
 });
 
@@ -53,8 +52,8 @@ const MenuCardContent = createComponent('div')({
 const menuCardHeadingStencil = createStencil({
   extends: cardHeadingStencil,
   base: {
-    color: brand.primary.accent,
-    margin: system.space.zero,
+    color: system.color.fg.inverse,
+    margin: '0',
   },
 });
 

package/dist/mdx/react/card/examples/{Filled.tsx → Tonal.tsx}

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import {Card} from '@workday/canvas-kit-react/card';
 
 export default () => {
   return (
-    <Card variant="filled">
+    <Card variant="tonal">
       <Card.Heading>Canvas Supreme</Card.Heading>
       <Card.Body>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -1,15 +1,15 @@
 import {
   ExampleCodeBlock,
-  SymbolDoc,
   Specifications,
-  InformationHighlight,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
-import Caution from './examples/Caution';
+
 import Basic from './examples/Basic';
-import Inverse from './examples/Inverse';
+import Caution from './examples/Caution';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
 import Indeterminate from './examples/Indeterminate';
+import Inverse from './examples/Inverse';
 import LabelPosition from './examples/LabelPosition';
 import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
@@ -84,14 +84,13 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or
-`"error"` to set the Checkbox to the Alert or Error state, respectively. You will
-also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
-standards. You may wish to omit the `label` prop on the Form Field given that Checkbox already
-includes a label.
+Set the `error` prop of the wrapping Form Field to `"caution"` or `"error"` to set the Checkbox to
+the Alert or Error state, respectively. You will also need to set the `hintId` and `hintText` props
+on the Form Field to meet accessibility standards. You may wish to omit the `label` prop on the Form
+Field given that Checkbox already includes a label.
 
-The `error` prop may be applied directly to the Checkbox with a value of `"caution"`
-or `"error"` if Form Field is not being used.
+The `error` prop may be applied directly to the Checkbox with a value of `"caution"` or `"error"` if
+Form Field is not being used.
 
 #### Caution
 
@@ -112,4 +111,4 @@ Checkbox supports custom styling via the `cs` prop. For more information, check
 
 ## Specifications
 
-<Specifications file="Checkbox.spec.ts" name="Checkbox" />
+<Specifications file="./cypress/component/Checkbox.spec.tsx" name="Checkbox" />

package/dist/mdx/react/checkbox/examples/Basic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/checkbox/examples/Caution.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/checkbox/examples/Disabled.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/checkbox/examples/Error.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/checkbox/examples/Indeterminate.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = createStyles({
-  marginInlineLeft: system.space.x8,
-  marginTop: system.space.x2,
+  marginInlineStart: system.gap.xl,
+  marginTop: system.gap.sm,
 });
 
 export default () => {

package/dist/mdx/react/checkbox/examples/Inverse.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  padding: system.space.x4,
+  backgroundColor: system.color.surface.contrast.default,
+  padding: system.padding.md,
 });
 
 export default () => {

package/dist/mdx/react/checkbox/examples/LabelPosition.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/checkbox/examples/RefForwarding.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {system} from '@workday/canvas-tokens-web';
 
 const boxStyles = createStyles({
   display: 'flex',

package/dist/mdx/react/checkbox/examples/Required.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/collection/mdx/examples/BasicGrid.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {
   ListBox,
   useGridModel,
-  useListItemSelect,
-  useListItemRovingFocus,
   useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 const useItem = composeHooks(useListItemSelect, useListItemRovingFocus, useListItemRegister);
 

package/dist/mdx/react/collection/mdx/examples/DataLoader.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import {
   ListBox,
+  LoadReturn,
+  useListItemRovingFocus,
+  useListItemSelect,
   useListLoader,
   useListModel,
-  useListItemSelect,
-  useListItemRovingFocus,
-  LoadReturn,
 } from '@workday/canvas-kit-react/collection';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {composeHooks} from '@workday/canvas-kit-react/common';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 function pickRandom<T>(arr: T[]): T {
   return arr[Math.floor(Math.random() * arr.length)];

package/dist/mdx/react/collection/mdx/examples/MultiSelection.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
 import {
+  ListBox,
+  ListItemProps,
+  getCursor,
   multiSelectionManager,
   useListItemRegister,
   useListItemRovingFocus,
   useListItemSelect,
   useListModel,
-  ListItemProps,
-  ListBox,
-  getCursor,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/collection/mdx/examples/OverflowVerticalList.tsx

@@ -1,9 +1,10 @@
+import styled from '@emotion/styled';
 import React from 'react';
+
 import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {Box} from '@workday/canvas-kit-react/layout';
-import styled from '@emotion/styled';
 import {StyledType} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
 type MyActionItem = {
   id: string;

package/dist/mdx/react/collection/mdx/examples/RovingFocus.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import {
+  ListBox,
+  ListItemProps,
   useListItemRegister,
   useListItemRovingFocus,
   useListModel,
-  ListBox,
-  ListItemProps,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/collection/mdx/examples/Selection.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {
+  ListBox,
+  ListItemProps,
+  getCursor,
   useListItemRegister,
   useListItemRovingFocus,
   useListItemSelect,
   useListModel,
-  ListItemProps,
-  ListBox,
-  getCursor,
 } from '@workday/canvas-kit-react/collection';
 import {
   composeHooks,

package/dist/mdx/react/collection/mdx/examples/StringChildren.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import {
   ListBox,
-  useListItemRegister,
   useListItemAllowChildStrings,
+  useListItemRegister,
   useListItemSelect,
   useListModel,
 } from '@workday/canvas-kit-react/collection';

package/dist/mdx/react/collection/mdx/examples/WrappingGrid.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {
   ListBox,
   useGridModel,
-  useListItemSelect,
-  useListItemRovingFocus,
   useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
   wrappingNavigationManager,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 const useItem = composeHooks(useListItemSelect, useListItemRovingFocus, useListItemRegister);
 

package/dist/mdx/react/color-picker/color-input/ColorInput.mdx

@@ -1,11 +1,10 @@
 import {
   ExampleCodeBlock,
-  InformationHighlight,
-  SymbolDoc,
   Specifications,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
-import Caution from './examples/Caution';
 import Basic from './examples/Basic';
+import Caution from './examples/Caution';
 import Checked from './examples/Checked';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -15,6 +14,7 @@ import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
 import ValidColorChange from './examples/ValidColorChange';
 
+
 # Canvas Kit Color Input
 
 Color Input lets a user specify a color by entering a hexadecimal value into a text field.
@@ -90,10 +90,9 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or
-`"error"` to set the Color Input to the Caution or Error state, respectively. You
-will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
-standards.
+Set the `error` prop of the wrapping Form Field to `"caution"` or `"error"` to set the Color Input
+to the Caution or Error state, respectively. You will also need to set the `hintId` and `hintText`
+props on the Form Field to meet accessibility standards.
 
 #### Caution
 
@@ -109,4 +108,4 @@ standards.
 
 ## Specifications
 
-<Specifications file="ColorPicker.spec.ts" name="ColorInput" />
+<Specifications file="./cypress/component/ColorPicker.spec.tsx" name="ColorInput" />

package/dist/mdx/react/color-picker/color-input/examples/Basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/Caution.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/Checked.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/Disabled.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/Error.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/Grow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/LabelPosition.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/RefForwarding.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/Required.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');

package/dist/mdx/react/color-picker/color-input/examples/ValidColorChange.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Subtext} from '@workday/canvas-kit-react/text';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -28,7 +29,7 @@ export default () => {
           />
         </FormField.Field>
       </FormField>
-      <p style={type.levels.subtext.large}>Last valid color: {validColor}</p>
+      <Subtext size="large">Last valid color: {validColor}</Subtext>
     </>
   );
 };