@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/toast/lib/ToastIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+
+export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
+
+export const ToastIcon = createComponent('div')({
+  displayName: 'Toast.Icon',
+  Component: (elemProps: ToastIconProps, ref, Element) => {
+    return (
+      <SystemIcon
+        colorHover={elemProps.color}
+        marginY="s"
+        marginX="xs"
+        alignSelf="start"
+        ref={ref}
+        as={Element}
+        {...elemProps}
+      />
+    );
+  },
+});

package/toast/lib/ToastLink.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
+
+export interface ToastLinkProps extends HyperlinkProps {}
+
+export const ToastLink = createComponent('a')({
+  displayName: 'Toast.Link',
+  Component: ({children, href, ...elemProps}: ToastLinkProps, ref, Element) => {
+    return (
+      <Hyperlink ref={ref} href={href} as={Element} {...elemProps}>
+        {children}
+      </Hyperlink>
+    );
+  },
+});

package/toast/lib/ToastMessage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {useToastModel} from './hooks/useToastModel';
+import {Subtext} from '@workday/canvas-kit-react/text';
+
+export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {}
+
+export const ToastMessage = createSubcomponent('p')({
+  modelHook: useToastModel,
+})<ToastMessageProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Subtext
+      size="large"
+      wordBreak="break-word"
+      marginY="zero"
+      id={model.state.id}
+      as={Element}
+      {...elemProps}
+    >
+      {children}
+    </Subtext>
+  );
+});

package/toast/lib/hooks/useToastModel.tsx

@@ -0,0 +1,29 @@
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+export type AriaRoleMode = 'dialog' | 'status' | 'alert';
+
+export const useToastModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: 'status' as AriaRoleMode,
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+     */
+    id: '',
+  },
+})(config => {
+  const id = useUniqueId(config.id);
+  const state = {
+    ...config,
+    id,
+  };
+
+  return {state, events: {}};
+});

package/tokens/index.ts

@@ -63,9 +63,6 @@ export {
   fontFamily,
   monoFontFamily,
   BrandingColor,
-  CanvasDepth,
-  CanvasDepthValues,
-  CSSProperties,
 };
 
 export type {
@@ -73,6 +70,8 @@ export type {
   CanvasBorderRadiusKeys,
   CanvasBorderRadiusValues,
   CanvasColor,
+  CanvasDepth,
+  CanvasDepthValues,
   CanvasSpace,
   CanvasSpaceKeys,
   CanvasSpaceValues,
@@ -82,4 +81,5 @@ export type {
   CanvasTypeProperties,
   CanvasTypeVariants,
   CanvasTypeHierarchy,
+  CSSProperties,
 }

package/tokens/lib/depth.ts

@@ -29,7 +29,7 @@ export type CanvasDepth = {
    * ```
    */
   1: {
-    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
+    boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 2
@@ -45,7 +45,7 @@ export type CanvasDepth = {
    * ```
    */
   2: {
-    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
+    boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 3
@@ -61,12 +61,11 @@ export type CanvasDepth = {
    * ```
    */
   3: {
-    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
+    boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 4
    *
-   *
    * @example
    * ```ts
    * import { depth } from '@workday/canvas-kit-react/tokens';
@@ -77,7 +76,7 @@ export type CanvasDepth = {
    * ```
    */
   4: {
-    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+    boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 5
@@ -93,7 +92,7 @@ export type CanvasDepth = {
    * ```
    */
   5: {
-    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+    boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 6
@@ -109,7 +108,7 @@ export type CanvasDepth = {
    * ```
    */
   6: {
-    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
+    boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)';
   };
 };
 
@@ -143,21 +142,21 @@ export const depth: CanvasDepth = {
     boxShadow: 'none',
   },
   1: {
-    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
+    boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)',
   },
   2: {
-    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
+    boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)',
   },
   3: {
-    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
+    boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)',
   },
   4: {
-    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+    boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)',
   },
   5: {
-    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+    boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)',
   },
   6: {
-    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
+    boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)',
   },
 };

package/tokens/lib/type/fontFamilies.ts

@@ -1,9 +1,10 @@
-import get from 'lodash/get';
+// prettier-ignore
+//@ts-ignore
+const canvasObject = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas;
 
-const inheritFont: boolean =
-  typeof window !== 'undefined' && get(window, 'window.workday.canvas.inheritFontFamily');
+const inheritFont: boolean = typeof canvasObject !== 'undefined' && canvasObject.inheritFontFamily;
 const inheritMonoFont: boolean | string =
-  typeof window !== 'undefined' && get(window, 'window.workday.canvas.inheritMonoFontFamily');
+  typeof canvasObject !== 'undefined' && canvasObject.inheritMonoFontFamily;
 
 export const fontFamily = inheritFont
   ? 'inherit'

package/tokens/lib/type/index.ts

@@ -14,7 +14,7 @@ export type {
 
 
 /** ### Canvas Type Properties
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+ * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
  *
  * ---
  * The type properties provide precise control and are only intended to be used when the type hierarchy tokens are not well-suited for the task.
@@ -35,7 +35,7 @@ const properties: CanvasTypeProperties = {
 
 /**
  * ### Canvas Type Tokens
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+ * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
  *
  * ---
  * Type tokens are separated into three sections:
@@ -52,7 +52,7 @@ export const type: CanvasType = {
 
 type CanvasTypeProperties = {
   /** ### Font Family Tokens
-   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
    *
    * ---
    * There are two font family tokens:
@@ -74,7 +74,7 @@ type CanvasTypeProperties = {
    */
   fontFamilies: CanvasFontFamilies;
   /** ### Font Size Tokens
-   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
    *
    * ---
    * There are twelve font size tokens. Here's a quick reference:
@@ -104,7 +104,7 @@ type CanvasTypeProperties = {
    */
   fontSizes: CanvasFontSizes;
   /** ### Font Weight Tokens
-   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
    *
    * ---
    * There are three font-weight tokens:
@@ -131,7 +131,7 @@ type CanvasTypeProperties = {
 
 export type CanvasType = {
   /** ### Canvas Type Hierarchy
-   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
    *
    * ---
    * The hierarchy is organized into four levels, which correspond to levels defined in Figma.
@@ -162,7 +162,7 @@ export type CanvasType = {
    */
   levels: CanvasTypeHierarchy;
   /** ### Canvas Type Properties
-   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
    *
    * ---
    * Type properties are organized in three parts:
@@ -178,7 +178,7 @@ export type CanvasType = {
    */
   properties: CanvasTypeProperties;
   /** ### Canvas Type Variants
-   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+   * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
    *
    * ---
    * There are three type variants:

package/tooltip/lib/Tooltip.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import innerText from 'react-innertext';
 
 import {getTransformFromPlacement, Placement, Popper} from '@workday/canvas-kit-react/popup';
-import {mergeCallback} from '@workday/canvas-kit-react/common';
+import {createComponent, mergeCallback} from '@workday/canvas-kit-react/common';
 
 import {TooltipContainer} from './TooltipContainer';
 import {useTooltip} from './useTooltip';
@@ -69,42 +69,45 @@ function mergeCallbacks<T extends {[key: string]: any}>(
   }, {} as {[key: string]: any});
 }
 
-export const Tooltip = ({
-  type = 'label',
-  placement = 'top',
-  title,
-  children,
-  showDelay = 300,
-  hideDelay = 100,
-  ...elemProps
-}: TooltipProps) => {
-  const titleText = innerText(title);
-  const {targetProps, popperProps, tooltipProps} = useTooltip({
-    type,
-    titleText,
-    showDelay,
-    hideDelay,
-  });
+export const Tooltip = createComponent('div')({
+  displayName: 'Tooltip',
+  Component({
+    type = 'label',
+    placement = 'top',
+    title,
+    children,
+    showDelay = 300,
+    hideDelay = 100,
+    ...elemProps
+  }: TooltipProps) {
+    const titleText = innerText(title);
+    const {targetProps, popperProps, tooltipProps} = useTooltip({
+      type,
+      titleText,
+      showDelay,
+      hideDelay,
+    });
 
-  return (
-    <React.Fragment>
-      {React.cloneElement(children, {
-        ...targetProps,
-        ...mergeCallbacks(children.props, targetProps),
-        ...(type === 'muted' && children.props['aria-label']
-          ? {'aria-label': children.props['aria-label']}
-          : {}),
-      })}
-      <Popper placement={placement} {...popperProps}>
-        {({placement}) => {
-          const transformOrigin = getTransformFromPlacement(placement);
-          return (
-            <TooltipContainer transformOrigin={transformOrigin} {...elemProps} {...tooltipProps}>
-              {title}
-            </TooltipContainer>
-          );
-        }}
-      </Popper>
-    </React.Fragment>
-  );
-};
+    return (
+      <React.Fragment>
+        {React.cloneElement(children, {
+          ...targetProps,
+          ...mergeCallbacks(children.props, targetProps),
+          ...(type === 'muted' && children.props['aria-label']
+            ? {'aria-label': children.props['aria-label']}
+            : {}),
+        })}
+        <Popper placement={placement} {...popperProps}>
+          {({placement}) => {
+            const transformOrigin = getTransformFromPlacement(placement);
+            return (
+              <TooltipContainer transformOrigin={transformOrigin} {...elemProps} {...tooltipProps}>
+                {title}
+              </TooltipContainer>
+            );
+          }}
+        </Popper>
+      </React.Fragment>
+    );
+  },
+});

package/tooltip/lib/useTooltip.tsx

@@ -133,19 +133,26 @@ export function useTooltip<T extends Element = Element>({
 
   const visible = popupModel.state.visibility !== 'hidden';
 
+  const targetProps = {
+    // extra description of the target element for assistive technology
+    'aria-describedby': type === 'describe' && visible ? id : undefined,
+    // This will replace the accessible name of the target element
+    'aria-label': type === 'label' ? titleText : undefined,
+    onMouseEnter: onOpenFromTarget,
+    onMouseLeave: onHide,
+    onMouseDown,
+    onFocus,
+    onBlur: onHide,
+  };
+
+  // remove `aria-describedby` if undefined to not override what's provided
+  if (targetProps['aria-describedby'] === undefined) {
+    delete targetProps['aria-describedby'];
+  }
+
   return {
     /** Mix these properties into the target element. **Must be an Element** */
-    targetProps: {
-      // extra description of the target element for assistive technology
-      'aria-describedby': type === 'describe' && visible ? id : undefined,
-      // This will replace the accessible name of the target element
-      'aria-label': type === 'label' ? titleText : undefined,
-      onMouseEnter: onOpenFromTarget,
-      onMouseLeave: onHide,
-      onMouseDown,
-      onFocus,
-      onBlur: onHide,
-    },
+    targetProps,
     /** Mix these properties into the `Popper` component */
     popperProps: {
       open: visible,

package/dist/commonjs/layout/lib/Column.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-/**
- * ### Deprecated Layout Column Props
- *
- * As of Canvas Kit v8, Layout is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
- */
-export interface DeprecatedColumnProps {
-    /**
-     * The children of the DeprecatedColumn (cannot be empty).
-     */
-    children?: React.ReactNode;
-    /**
-     * The left and right padding of the DeprecatedColumn (inherits from Layout prop).
-     * @default 12
-     */
-    spacing?: number;
-    /**
-     * The size of the 12-column grid.
-     */
-    columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /**
-     * The width of the columns. This will take precedence over `columns`.
-     */
-    width?: number | string;
-}
-export declare class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
-//# sourceMappingURL=Column.d.ts.map

package/dist/commonjs/layout/lib/Column.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAsCD,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASV,MAAM;CASd"}

package/dist/commonjs/layout/lib/Column.js

@@ -1,109 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeprecatedColumn = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
-var ColumnContainer = styled_1.default('div', {
-    shouldForwardProp: function (prop) { return is_prop_valid_1.default(prop) && prop !== 'spacing'; },
-})({
-    '&:first-of-type': {
-        paddingLeft: 0,
-    },
-    '&:last-child': {
-        paddingRight: 0,
-    },
-}, function (_a) {
-    var spacing = _a.spacing;
-    if (spacing === 0) {
-        return;
-    }
-    return { padding: "0 " + spacing + "px" };
-}, function (_a) {
-    var columns = _a.columns, width = _a.width, spacing = _a.spacing;
-    if (width) {
-        return { width: width };
-    }
-    if (columns) {
-        if (columns === 12) {
-            return { width: "100%" };
-        }
-        else {
-            var compensation = ((12 - columns) / 12) * ((spacing || 0) * 2);
-            return { width: "calc(" + (columns / 12) * 100 + "% - " + compensation + "px)" };
-        }
-    }
-    return { flex: 1 };
-});
-var DeprecatedColumn = /** @class */ (function (_super) {
-    __extends(DeprecatedColumn, _super);
-    function DeprecatedColumn() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DeprecatedColumn.prototype.componentDidMount = function () {
-        console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n      For more information, please see the V8 upgrade guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n      ");
-    };
-    DeprecatedColumn.prototype.render = function () {
-        var _a = this.props, children = _a.children, spacing = _a.spacing, columns = _a.columns, width = _a.width, elemProps = __rest(_a, ["children", "spacing", "columns", "width"]);
-        return (React.createElement(ColumnContainer, __assign({ spacing: spacing, columns: columns, width: width }, elemProps), children));
-    };
-    return DeprecatedColumn;
-}(React.Component));
-exports.DeprecatedColumn = DeprecatedColumn;

package/dist/commonjs/layout/lib/Layout.d.ts

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { DeprecatedColumn, DeprecatedColumnProps } from './Column';
-/**
- * ### Deprecated Layout Props
- *
- * As of Canvas Kit v8, Layout is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
- */
-export interface DeprecatedLayoutProps {
-    /**
-     * The children of the DeprecatedLayout (cannot be empty).
-     */
-    children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
-    /**
-     * The spacing of the DeprecatedLayout children.
-     */
-    spacing?: number;
-    /**
-     * The padding of the DeprecatedLayout's outside container.
-     * @default 12
-     */
-    gutter?: number | string;
-    /**
-     * If true, set the max width of the DeprecatedLayout container to `1280px`.
-     * @default false
-     */
-    capWidth?: boolean;
-}
-/**
- * ### Deprecated Layout
- *
- * As of Canvas Kit v8, Layout is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
- */
-export declare class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
-    componentDidMount(): void;
-    static Column: typeof DeprecatedColumn;
-    private renderChild;
-    render(): JSX.Element;
-}
-//# sourceMappingURL=Layout.d.ts.map

package/dist/commonjs/layout/lib/Layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,gBAAgB,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAIjE;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASjB,OAAc,MAAM,0BAAoB;IAExC,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed"}