@workday/canvas-kit-react 12.4.0-1015-next.0 → 13.0.0-alpha.1009-next.0

package/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -4,17 +4,6 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     /**
      * This should be a string in most cases. HTML is supported, but only text is understood
      * by assistive technology. This is true for both `label` and `describe` modes.
-     *
-     * **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly translated.
-     *
-     * ```jsx
-     * // The text will be understood as: You must accept terms and conditions
-     * <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
-     *
-     * // This will render a string including the html and will not be properly understood by voice over.
-     * const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
-     * <Tooltip type="description" title={MyComponent/>
-     * ```
      */
     title: React.ReactNode;
     /**
@@ -44,7 +33,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
      *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
      *   Ellipsis tooltips.
-     * - **Deprecated: `describe` is deprecated, please use `description`**.`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
+     * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
      *   information about the target.
      * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
      *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
@@ -54,7 +43,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Consider an alternate way to inform a user of additional important information.
      * @default 'label'
      */
-    type?: 'label' | 'describe' | 'muted' | 'description';
+    type?: 'label' | 'describe' | 'muted';
     /**
      * Amount of time (in ms) to delay before showing the tooltip
      */

package/dist/es6/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}

package/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -10,17 +10,17 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
      *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
      *   Ellipsis tooltips.
-     * - **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target
+     * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
+     *   information about the target.
      * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
      *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
      *   the tooltip yourself.
-     * - `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target
      *
      * **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
      * Consider an alternate way to inform a user of additional important information.
      * @default 'label'
      */
-    type?: 'label' | 'describe' | 'muted' | 'description';
+    type?: 'label' | 'describe' | 'muted';
     /**
      * The content of the `aria-label` if `type` is `label.
      */
@@ -37,7 +37,6 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
     /** Mix these properties into the target element. **Must be an Element** */
     targetProps: {
         'aria-describedby': string | undefined;
-        'aria-description': string | undefined;
         'aria-label': string | undefined;
         onMouseEnter: (event: React.SyntheticEvent) => void;
         onMouseLeave: () => void;

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAgEF,2EAA2E;;;;;8BA9C5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IA2CtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA+DF,2EAA2E;;;;8BA7C5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IA0CtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/dist/es6/tooltip/lib/useTooltip.js

@@ -78,7 +78,6 @@ export function useTooltip({ type = 'label', titleText = '', showDelay = 300, hi
     const targetProps = {
         // extra description of the target element for assistive technology
         'aria-describedby': type === 'describe' && visible ? id : undefined,
-        'aria-description': type === 'description' ? titleText : undefined,
         // This will replace the accessible name of the target element
         'aria-label': type === 'label' ? titleText : undefined,
         onMouseEnter: onOpenFromTarget,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.4.0-1015-next.0",
+  "version": "13.0.0-alpha.1009-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.4.0-1015-next.0",
-    "@workday/canvas-kit-styling": "^12.4.0-1015-next.0",
+    "@workday/canvas-kit-popup-stack": "^13.0.0-alpha.1009-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1009-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "d2351f7f9b4ef85afeaaf40ce7100fefb9f2d27b"
+  "gitHead": "86905802e45baf8c7c06c3f673597dc2792c6dc5"
 }

package/skeleton/index.ts

@@ -1 +1,4 @@
-export {Skeleton} from './lib/skeleton';
+export * from './lib/Skeleton';
+export {skeletonTextStencil} from './lib/parts/SkeletonText';
+export {skeletonShapeStencil} from './lib/parts/SkeletonShape';
+export {skeletonHeaderStencil} from './lib/parts/SkeletonHeader';

package/skeleton/lib/{skeleton.tsx → Skeleton.tsx}

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
-import styled from '@emotion/styled';
 
-import {accessibleHide, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {accessibleHide, createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, keyframes} from '@workday/canvas-kit-styling';
 
-import {SkeletonHeader} from './parts/skeletonHeader';
-import {SkeletonShape} from './parts/skeletonShape';
-import {SkeletonText} from './parts/skeletonText';
+import {SkeletonHeader} from './parts/SkeletonHeader';
+import {SkeletonShape} from './parts/SkeletonShape';
+import {SkeletonText} from './parts/SkeletonText';
 
 export interface SkeletonProps {
   /**
@@ -22,21 +21,22 @@ export interface SkeletonProps {
   children?: React.ReactNode;
 }
 
-const AccessibleHide = styled('div')(accessibleHide);
-
 const fade = keyframes({
   from: {opacity: 0.4},
   to: {opacity: 1},
 });
 
-const animation = `${fade} 0.8s linear infinite alternate`;
-
-const SkeletonAnimator = styled('div')<SkeletonProps & StyledType>({
-  animation,
-  overflow: 'hidden',
-  width: '100%',
-  height: '100%',
-  position: 'relative',
+export const skeletonStencil = createStencil({
+  base: () => ({
+    animation: `${fade} 0.8s linear infinite alternate`,
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    width: '100%',
+    '& [data-part="skeleton-accessible-hide"]': {
+      ...accessibleHide,
+    },
+  }),
 });
 
 /**
@@ -59,11 +59,10 @@ export const Skeleton = createComponent('div')({
     ref,
     Element
   ) => (
-    <SkeletonAnimator ref={ref} as={Element} {...elemProps}>
-      <AccessibleHide>{loadingAriaLabel}</AccessibleHide>
-
+    <Element ref={ref} {...handleCsProp(elemProps, skeletonStencil())}>
+      <div data-part="skeleton-accessible-hide">{loadingAriaLabel}</div>
       <div aria-hidden={true}>{children}</div>
-    </SkeletonAnimator>
+    </Element>
   ),
   subComponents: {
     /**

package/skeleton/lib/parts/SkeletonHeader.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {
+  createStencil,
+  handleCsProp,
+  px2rem,
+  cssVar,
+  calc,
+  CSProps,
+} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {SkeletonShape} from './SkeletonShape';
+
+export interface SkeletonHeaderProps extends CSProps {
+  /**
+   * The background color of the skeleton
+   * @default `system.color.bg.alt.strong`
+   */
+  backgroundColor?: string;
+  /**
+   * The height of the shape in `px` or `%`.
+   * @default 28px
+   */
+  height?: number | string;
+  /**
+   *  The width of the shape in `px` or `%`.
+   * @default 100%
+   */
+  width?: number | string;
+}
+
+export const skeletonHeaderStencil = createStencil({
+  vars: {
+    width: '',
+    height: '',
+    backgroundColor: '',
+  },
+  base: ({width, backgroundColor, height}) => ({
+    backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
+    borderRadius: 0,
+    height: cssVar(height, calc.multiply(system.space.x1, 7)),
+    width: width,
+    marginBottom: system.space.x4,
+  }),
+});
+
+export const SkeletonHeader = createComponent('div')<SkeletonHeaderProps>({
+  displayName: 'Skeleton.Header',
+  Component: (
+    {width = '100%', backgroundColor, height, ...elemProps}: SkeletonHeaderProps,
+    ref,
+    Element
+  ) => (
+    <SkeletonShape
+      ref={ref}
+      as={Element}
+      {...handleCsProp(
+        elemProps,
+        skeletonHeaderStencil({
+          width: typeof width === 'number' ? px2rem(width) : width,
+          backgroundColor: backgroundColor,
+          height: typeof height === 'number' ? px2rem(height) : height,
+        })
+      )}
+    />
+  ),
+});

package/skeleton/lib/parts/SkeletonShape.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, CSProps, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export interface SkeletonShapeProps extends CSProps {
+  /**
+   *  The width of the shape in `px` or `%`.
+   * @default 100%
+   */
+  width?: number | string;
+  /**
+   * The height of the shape in `px` or `%`.
+   * @default 100%
+   */
+  height?: number | string;
+  /**
+   * The borderRadius of the shape in `px` or `%`.
+   * @default 0
+   */
+  borderRadius?: number | string;
+  /**
+   * The background color of the skeleton
+   * @default `system.color.bg.alt.strong`
+   */
+  backgroundColor?: string;
+}
+
+export const skeletonShapeStencil = createStencil({
+  vars: {
+    width: '',
+    height: '',
+    borderRadius: '',
+    backgroundColor: '',
+  },
+  base: ({width, height, borderRadius, backgroundColor}) => ({
+    backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
+    borderRadius: cssVar(borderRadius, system.space.zero),
+    height: cssVar(height, '100%'),
+    width: width,
+    marginBottom: system.space.x4,
+  }),
+});
+
+export const SkeletonShape = createComponent('div')({
+  displayName: 'Skeleton.Shape',
+  Component: (
+    {width = '100%', height, backgroundColor, borderRadius, ...elemProps}: SkeletonShapeProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Element
+        ref={ref}
+        {...handleCsProp(
+          elemProps,
+          skeletonShapeStencil({
+            width: typeof width === 'number' ? px2rem(width) : width,
+            height: typeof height === 'number' ? px2rem(height) : height,
+            backgroundColor,
+            borderRadius: typeof borderRadius === 'number' ? px2rem(borderRadius) : borderRadius,
+          })
+        )}
+      />
+    );
+  },
+});

package/skeleton/lib/parts/SkeletonText.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export interface SkeletonTextProps {
+  /**
+   * The number of "lines" that SkeletonText will display. If there is more than one line, the last line will have a width of `60%`.
+   * @default 2
+   */
+  lineCount?: number;
+  /**
+   * The background color of the skeleton
+   * @default `system.color.bg.alt.strong`
+   */
+  backgroundColor?: string;
+}
+
+export const skeletonTextStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+  },
+  base: ({backgroundColor}) => ({
+    marginBottom: system.space.x6,
+    '& [data-part="skeleton-text-lines"]': {
+      backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
+      height: px2rem(21),
+      marginBlockEnd: system.space.x3,
+      borderRadius: system.shape.half,
+      width: '100%',
+    },
+    '& [data-part="skeleton-text-lines"]:last-child': {
+      width: '60%',
+    },
+  }),
+});
+
+export const SkeletonText = createComponent('div')({
+  displayName: 'Skeleton.Text',
+  Component: ({backgroundColor, lineCount = 2, ...elemProps}: SkeletonTextProps, ref, Element) => {
+    const lines = new Array(lineCount).fill(null);
+    return lineCount <= 0 ? null : (
+      <Element
+        ref={ref}
+        {...handleCsProp(
+          elemProps,
+          skeletonTextStencil({
+            backgroundColor,
+          })
+        )}
+      >
+        {lines.map((_value, index) => (
+          <div data-part={'skeleton-text-lines'} key={index}></div>
+        ))}
+      </Element>
+    );
+  },
+});

package/tooltip/lib/Tooltip.tsx

@@ -16,17 +16,6 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   /**
    * This should be a string in most cases. HTML is supported, but only text is understood
    * by assistive technology. This is true for both `label` and `describe` modes.
-   *
-   * **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly translated.
-   *
-   * ```jsx
-   * // The text will be understood as: You must accept terms and conditions
-   * <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
-   *
-   * // This will render a string including the html and will not be properly understood by voice over.
-   * const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
-   * <Tooltip type="description" title={MyComponent/>
-   * ```
    */
   title: React.ReactNode;
   /**
@@ -56,7 +45,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
    *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
    *   Ellipsis tooltips.
-   * - **Deprecated: `describe` is deprecated, please use `description`**.`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
+   * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.
    * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
    *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
@@ -66,7 +55,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * Consider an alternate way to inform a user of additional important information.
    * @default 'label'
    */
-  type?: 'label' | 'describe' | 'muted' | 'description';
+  type?: 'label' | 'describe' | 'muted';
   /**
    * Amount of time (in ms) to delay before showing the tooltip
    */

package/tooltip/lib/useTooltip.tsx

@@ -65,17 +65,17 @@ export function useTooltip<T extends Element = Element>({
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
    *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
    *   Ellipsis tooltips.
-   * - **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target
+   * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
+   *   information about the target.
    * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
    *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
    *   the tooltip yourself.
-   * - `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target
    *
    * **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
    * Consider an alternate way to inform a user of additional important information.
    * @default 'label'
    */
-  type?: 'label' | 'describe' | 'muted' | 'description';
+  type?: 'label' | 'describe' | 'muted';
   /**
    * The content of the `aria-label` if `type` is `label.
    */
@@ -136,7 +136,6 @@ export function useTooltip<T extends Element = Element>({
   const targetProps = {
     // extra description of the target element for assistive technology
     'aria-describedby': type === 'describe' && visible ? id : undefined,
-    'aria-description': type === 'description' ? titleText : undefined,
     // This will replace the accessible name of the target element
     'aria-label': type === 'label' ? titleText : undefined,
     onMouseEnter: onOpenFromTarget,

package/dist/commonjs/skeleton/lib/parts/skeletonHeader.d.ts

@@ -1,19 +0,0 @@
-export interface SkeletonHeaderProps {
-    /**
-     * The background color of the skeleton
-     * @default soap200
-     */
-    backgroundColor?: string;
-    /**
-     * The height of the shape in `px` or `%`.
-     * @default 28px
-     */
-    height?: number | string;
-    /**
-     *  The width of the shape in `px` or `%`.
-     * @default 100%
-     */
-    width?: number | string;
-}
-export declare const SkeletonHeader: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonHeaderProps>;
-//# sourceMappingURL=skeletonHeader.d.ts.map

package/dist/commonjs/skeleton/lib/parts/skeletonHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,yFAsBzB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/skeletonShape.d.ts

@@ -1,24 +0,0 @@
-export interface SkeletonShapeProps {
-    /**
-     *  The width of the shape in `px` or `%`.
-     * @default 100%
-     */
-    width?: number | string;
-    /**
-     * The height of the shape in `px` or `%`.
-     * @default 100%
-     */
-    height?: number | string;
-    /**
-     * The borderRadius of the shape in `px` or `%`.
-     * @default 0
-     */
-    borderRadius?: number | string;
-    /**
-     * The background color of the skeleton
-     * @default soap200
-     */
-    backgroundColor?: string;
-}
-export declare const SkeletonShape: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonShapeProps>;
-//# sourceMappingURL=skeletonShape.d.ts.map

package/dist/commonjs/skeleton/lib/parts/skeletonShape.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonShape.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAYD,eAAO,MAAM,aAAa,wFAuBxB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/skeletonShape.js

@@ -1,44 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonShape = void 0;
-const React = __importStar(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const Shape = (0, styled_1.default)('div')(({ backgroundColor, borderRadius, height, width }) => ({
-    backgroundColor,
-    borderRadius,
-    height,
-    width,
-    marginBottom: tokens_1.space.s,
-}));
-exports.SkeletonShape = (0, common_1.createComponent)('div')({
-    displayName: 'Skeleton.Shape',
-    Component: ({ backgroundColor = tokens_1.colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, { ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width, ...elemProps })),
-});

package/dist/commonjs/skeleton/lib/parts/skeletonText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}

package/dist/commonjs/skeleton/lib/skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../skeleton/lib/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;IAcjB;;OAEG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;;CAGL,CAAC"}

package/dist/es6/skeleton/lib/parts/skeletonHeader.d.ts

@@ -1,19 +0,0 @@
-export interface SkeletonHeaderProps {
-    /**
-     * The background color of the skeleton
-     * @default soap200
-     */
-    backgroundColor?: string;
-    /**
-     * The height of the shape in `px` or `%`.
-     * @default 28px
-     */
-    height?: number | string;
-    /**
-     *  The width of the shape in `px` or `%`.
-     * @default 100%
-     */
-    width?: number | string;
-}
-export declare const SkeletonHeader: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonHeaderProps>;
-//# sourceMappingURL=skeletonHeader.d.ts.map

package/dist/es6/skeleton/lib/parts/skeletonHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,yFAsBzB,CAAC"}

package/dist/es6/skeleton/lib/parts/skeletonHeader.js

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
-import { SkeletonShape } from './skeletonShape';
-export const SkeletonHeader = createComponent('div')({
-    displayName: 'Skeleton.Header',
-    Component: ({ backgroundColor = colors.soap200, height = '28px', width = '100%', ...elemProps }, ref, Element) => (React.createElement(SkeletonShape, { ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius.s, height: height, width: width, ...elemProps })),
-});

package/dist/es6/skeleton/lib/parts/skeletonShape.d.ts

@@ -1,24 +0,0 @@
-export interface SkeletonShapeProps {
-    /**
-     *  The width of the shape in `px` or `%`.
-     * @default 100%
-     */
-    width?: number | string;
-    /**
-     * The height of the shape in `px` or `%`.
-     * @default 100%
-     */
-    height?: number | string;
-    /**
-     * The borderRadius of the shape in `px` or `%`.
-     * @default 0
-     */
-    borderRadius?: number | string;
-    /**
-     * The background color of the skeleton
-     * @default soap200
-     */
-    backgroundColor?: string;
-}
-export declare const SkeletonShape: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonShapeProps>;
-//# sourceMappingURL=skeletonShape.d.ts.map

package/dist/es6/skeleton/lib/parts/skeletonShape.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonShape.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAYD,eAAO,MAAM,aAAa,wFAuBxB,CAAC"}

package/dist/es6/skeleton/lib/parts/skeletonShape.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { colors, space } from '@workday/canvas-kit-react/tokens';
-const Shape = styled('div')(({ backgroundColor, borderRadius, height, width }) => ({
-    backgroundColor,
-    borderRadius,
-    height,
-    width,
-    marginBottom: space.s,
-}));
-export const SkeletonShape = createComponent('div')({
-    displayName: 'Skeleton.Shape',
-    Component: ({ backgroundColor = colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, { ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width, ...elemProps })),
-});

package/dist/es6/skeleton/lib/parts/skeletonText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}