@workday/canvas-kit-react 15.0.0-alpha.1283-next.0 → 15.0.0-alpha.1285-next.0

package/layout/lib/utils/color.ts

@@ -3,22 +3,29 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to set CSS color properties */
+/** style props to set CSS color properties
+ * @deprecated
+ */
 export type ColorStyleProps = {
   /**
    * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
    * - system tokens: `color`
-   * */
+   * @deprecated
+   */
   backgroundColor?: SystemPropValues['color'];
   /**
    * - sets [CSS color property](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
    * - system tokens: `color`
-   * */
+   * @deprecated
+   */
   color?: SystemPropValues['color'];
-  /** sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) */
+  /** sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
+   * @deprecated
+   */
   opacity?: Property.Opacity;
 };
 
+/** @deprecated */
 export const colorStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'backgroundColor',
@@ -37,6 +44,7 @@ export const colorStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const colorFns = buildStyleFns(colorStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns color styles from Canvas token values.
@@ -48,5 +56,6 @@ export const colorFns = buildStyleFns(colorStyleFnConfigs);
  *   <Box color="frenchVanilla100" opacity={0.6}>Hello, colors!</Box>
  * );
  * ```
+ * @deprecated
  */
 export const color = buildStylePropFn<ColorStyleProps>(colorFns);

package/layout/lib/utils/depth.ts

@@ -2,17 +2,23 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for depth styles */
+/** style props to for depth styles
+ * @deprecated
+ */
 export type DepthStyleProps = {
-  /** sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) */
+  /** sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
+   * @deprecated
+   */
   boxShadow?: Property.BoxShadow;
   /**
    * - sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
    * - system tokens: `depth`
-   * */
+   * @deprecated
+   */
   depth?: SystemPropValues['depth'];
 };
 
+/** @deprecated */
 export const depthStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'boxShadow',
@@ -26,6 +32,7 @@ export const depthStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const depthStyleFns = buildStyleFns(depthStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns depth styles from Canvas token values.
@@ -37,5 +44,6 @@ export const depthStyleFns = buildStyleFns(depthStyleFnConfigs);
  *   <Box depth={3}>Hello, box shadows!</Box>
  * );
  * ```
+ * @deprecated
  */
 export const depth = buildStylePropFn<DepthStyleProps>(depthStyleFns);

package/layout/lib/utils/flex.ts

@@ -3,42 +3,61 @@ import {Property, Globals} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for CSS flexbox container properties */
+/** style props to for CSS flexbox container properties
+ * @deprecated
+ */
 export type FlexStyleProps = {
-  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
+  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
+   * @deprecated
+   */
   alignItems?: Property.AlignItems;
-  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
+  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
+   * @deprecated
+   */
   alignContent?: Property.AlignContent;
   /**
    * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
    * - @default 'flex'
-   * */
+   * @deprecated
+   */
   display?: 'flex' | 'inline-flex' | 'none' | Globals | (string & {});
-  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
+  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
+   * @deprecated
+   */
   justifyItems?: Property.JustifyItems;
-  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
+   * @deprecated
+   */
   justifyContent?: Property.JustifyContent;
-  /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) */
+  /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
+   * @deprecated
+   */
   flexWrap?: Property.FlexWrap;
-  /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) */
+  /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
+   * @deprecated
+   */
   flexDirection?: Property.FlexDirection;
   /**
    * - sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   gap?: SystemPropValues['space'];
   /**
    * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   columnGap?: SystemPropValues['space'];
   /**
    * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   rowGap?: SystemPropValues['space'];
 };
 
+/** @deprecated */
 export const flexStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'alignContent',
@@ -92,6 +111,7 @@ export const flexStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox styles.
@@ -105,5 +125,6 @@ export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
  *   </Flex>
  * );
  * ```
+ * @deprecated ⚠️ `flex` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs
  */
 export const flex = buildStylePropFn<FlexStyleProps>(flexStyleFns);

package/layout/lib/utils/flexItem.ts

@@ -1,24 +1,41 @@
 import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 
-/** style props to for CSS flex item properties */
+/** style props to for CSS flex item properties
+ * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
+ */
 export type FlexItemStyleProps = {
-  /** sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) */
+  /** sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+   * @deprecated
+   */
   flex?: Property.Flex;
-  /** sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) */
+  /** sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
+   * @deprecated
+   */
   flexGrow?: Property.FlexGrow;
-  /** sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) */
+  /** sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
+   * @deprecated
+   */
   flexShrink?: Property.FlexShrink;
-  /** sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) */
+  /** sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
+   * @deprecated
+   */
   flexBasis?: Property.FlexBasis;
-  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
+  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
+   * @deprecated
+   */
   justifySelf?: Property.JustifySelf;
-  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
+  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
+   * @deprecated
+   */
   alignSelf?: Property.AlignSelf;
-  /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) */
+  /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
+   * @deprecated
+   */
   order?: Property.Order;
 };
 
+/** @deprecated */
 export const flexItemStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'flex',
@@ -57,6 +74,7 @@ export const flexItemStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox item styles.
@@ -70,5 +88,6 @@ export const flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
  *   </Box>
  * );
  * ```
+ * @deprecated
  */
 export const flexItem = buildStylePropFn<FlexItemStyleProps>(flexItemStyleFns);

package/layout/lib/utils/grid.ts

@@ -3,58 +3,93 @@ import {Property, Globals} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for CSS grid container properties */
+/** style props to for CSS grid container properties
+ * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
+ */
 export type GridStyleProps = {
-  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
+  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
+   * @deprecated
+   */
   alignItems?: Property.AlignItems;
-  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
+  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
+   * @deprecated
+   */
   alignContent?: Property.AlignContent;
   /**
    * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
    * - @default 'grid'
-   * */
+   * @deprecated
+   */
   display?: 'grid' | 'inline-grid' | 'none' | Globals | (string & {});
-  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
+  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
+   * @deprecated
+   */
   justifyItems?: Property.JustifyItems;
-  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
+   * @deprecated
+   */
   justifyContent?: Property.JustifyContent;
-  /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */
+  /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template)
+   * @deprecated
+   */
   gridTemplate?: Property.GridTemplate;
-  /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */
+  /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+   * @deprecated
+   */
   gridTemplateAreas?: Property.GridTemplateAreas;
-  /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */
+  /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+   * @deprecated
+   */
   gridTemplateColumns?: Property.GridTemplateColumns;
-  /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */
+  /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
+   * @deprecated
+   */
   gridTemplateRows?: Property.GridTemplateRows;
   /**
    * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   gridColumnGap?: Property.GridColumnGap | SystemPropValues['space'];
   /**
    * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   gridRowGap?: Property.GridRowGap | SystemPropValues['space'];
   /**
    * - sets [CSS grid-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   gridGap?: Property.GridGap | SystemPropValues['space'];
-  /** sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) */
+  /** sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items)
+   * @deprecated
+   */
   gridPlaceItems?: Property.PlaceItems;
-  /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */
+  /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
+   * @deprecated
+   */
   gridAutoColumns?: Property.GridAutoColumns;
-  /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */
+  /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
+   * @deprecated
+   */
   gridAutoRows?: Property.GridAutoRows;
-  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
+   * @deprecated
+   */
   gridArea?: Property.GridArea;
-  /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */
+  /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
+   * @deprecated
+   */
   gridAutoFlow?: Property.GridAutoFlow;
-  /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) */
+  /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
+   * @deprecated
+   */
   grid?: Property.Grid;
 };
 
+/** @deprecated */
 export const gridStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'gridGap',
@@ -148,6 +183,7 @@ export const gridStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
@@ -162,5 +198,6 @@ export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
  *   </Grid>
  * );
  * ```
+ * @deprecated
  */
 export const grid = buildStylePropFn<GridStyleProps>(gridStyleFns);

package/layout/lib/utils/gridItem.ts

@@ -2,30 +2,53 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 
-/** style props to for CSS grid item properties */
+/** style props to for CSS grid item properties
+ * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
+ */
 export type GridItemStyleProps = {
-  /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) */
+  /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)
+   * @deprecated
+   */
   gridColumnStart?: Property.GridColumnStart;
-  /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) */
+  /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)
+   * @deprecated
+   */
   gridColumnEnd?: Property.GridColumnEnd;
-  /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) */
+  /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)
+   * @deprecated
+   */
   gridRowStart?: Property.GridRowStart;
-  /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) */
+  /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)
+   * @deprecated
+   */
   gridRowEnd?: Property.GridRowEnd;
-  /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) */
+  /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
+   * @deprecated
+   */
   gridColumn?: Property.GridColumn;
-  /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) */
+  /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
+   * @deprecated
+   */
   gridRow?: Property.GridRow;
-  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
+   * @deprecated
+   */
   gridArea?: Property.GridArea;
-  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
+  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
+   * @deprecated
+   */
   justifySelf?: Property.JustifySelf;
-  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
+  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
+   * @deprecated
+   */
   alignSelf?: Property.AlignSelf;
-  /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) */
+  /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self)
+   * @deprecated
+   */
   placeSelf?: Property.PlaceSelf;
 };
 
+/** @deprecated */
 export const gridItemStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'gridColumnStart',
@@ -79,6 +102,7 @@ export const gridItemStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const gridItemStyleFns = buildStyleFns(gridItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
@@ -92,5 +116,6 @@ export const gridItemStyleFns = buildStyleFns(gridItemStyleFnConfigs);
  *   </Grid.Item>
  * );
  * ```
+ * @deprecated
  */
 export const gridItem = buildStylePropFn<GridItemStyleProps>(gridItemStyleFns);

package/layout/lib/utils/layout.ts

@@ -3,52 +3,73 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for CSS layout properties */
+/** style props to for CSS layout properties
+ * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
+ */
 export type LayoutStyleProps = {
-  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) */
+  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+   * @deprecated
+   */
   display?: Property.Display;
   /**
    * - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   height?: SystemPropValues['space'];
-  /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) */
+  /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style)
+   * @deprecated
+   */
   listStyle?: Property.ListStyle;
   /**
    * - sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   maxHeight?: SystemPropValues['space'];
   /**
    * - sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   maxWidth?: SystemPropValues['space'];
   /**
    * - sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   minHeight?: SystemPropValues['space'];
   /**
    * - sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   minWidth?: SystemPropValues['space'];
-  /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) */
+  /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
+   * @deprecated
+   */
   overflow?: Property.Overflow;
-  /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) */
+  /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x)
+   * @deprecated
+   */
   overflowX?: Property.OverflowX;
-  /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) */
+  /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y)
+   * @deprecated
+   */
   overflowY?: Property.OverflowY;
-  /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) */
+  /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
+   * @deprecated
+   */
   verticalAlign?: Property.VerticalAlign;
   /**
    * - sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
    * - system tokens: `space`
-   * */
+   * @deprecated
+   */
   width?: SystemPropValues['space'];
 };
 
+/** @deprecated */
 export const layoutStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'display',
@@ -112,6 +133,7 @@ export const layoutStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const layoutStyleFns = buildStyleFns(layoutStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns layout styles.
@@ -125,5 +147,6 @@ export const layoutStyleFns = buildStyleFns(layoutStyleFnConfigs);
  *   </Box>
  * );
  * ```
+ * @deprecated
  */
 export const layout = buildStylePropFn<LayoutStyleProps>(layoutStyleFns);

package/layout/lib/utils/mergeStyles.ts

@@ -43,6 +43,7 @@ function isStyleProps(prop: string): boolean {
 /**
  * This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
  * adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
+ * @deprecated ⚠️ `mergeStyles` is deprecated since it supports style props. Use `handleCsProps` to ensure correct style merging order. For more information view our [docs](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-merging-styles--docs#handlecsprop).
  */
 export function mergeStyles<T extends {}>(
   /**