@workday/canvas-kit-react 13.0.0-alpha.1007-next.0 → 13.0.0-alpha.1011-next.0

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/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"}

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { createComponent, filterOutProps } from '@workday/canvas-kit-react/common';
-import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
-const TextContainer = styled('div')({
-    marginBottom: space.m,
-});
-const Line = styled('div', {
-    shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
-})(({ backgroundColor, width }) => {
-    return {
-        backgroundColor,
-        width,
-        borderRadius: borderRadius.s,
-        height: '21px',
-        marginBottom: space.xs,
-    };
-});
-const createTextLines = (lineCount, backgroundColor) => {
-    const lines = new Array(lineCount).fill(null);
-    return lines.map((_value, index) => (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })));
-};
-export const SkeletonText = createComponent('div')({
-    displayName: 'Skeleton.Text',
-    Component: ({ backgroundColor = colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, { ref: ref, as: Element, ...elemProps }, createTextLines(lineCount, backgroundColor))),
-});

package/dist/es6/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/skeleton/lib/parts/skeletonHeader.tsx

@@ -1,48 +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 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 const SkeletonHeader = createComponent('div')({
-  displayName: 'Skeleton.Header',
-  Component: (
-    {
-      backgroundColor = colors.soap200,
-      height = '28px',
-      width = '100%',
-      ...elemProps
-    }: SkeletonHeaderProps,
-    ref,
-    Element
-  ) => (
-    <SkeletonShape
-      ref={ref}
-      as={Element}
-      backgroundColor={backgroundColor}
-      borderRadius={borderRadius.s}
-      height={height}
-      width={width}
-      {...elemProps}
-    />
-  ),
-});

package/skeleton/lib/parts/skeletonShape.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-
-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;
-}
-
-const Shape = styled('div')<SkeletonShapeProps & StyledType>(
-  ({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
-    }: SkeletonShapeProps,
-    ref,
-    Element
-  ) => (
-    <Shape
-      ref={ref}
-      as={Element}
-      backgroundColor={backgroundColor}
-      borderRadius={borderRadius}
-      height={height}
-      width={width}
-      {...elemProps}
-    />
-  ),
-});

package/skeleton/lib/parts/skeletonText.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import {createComponent, filterOutProps, StyledType} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
-
-const TextContainer = styled('div')<StyledType>({
-  marginBottom: space.m,
-});
-
-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 soap200
-   */
-  backgroundColor?: string;
-}
-
-const Line = styled('div', {
-  shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
-})<
-  {
-    backgroundColor: string;
-    width: number | string;
-  } & StyledType
->(({backgroundColor, width}) => {
-  return {
-    backgroundColor,
-    width,
-    borderRadius: borderRadius.s,
-    height: '21px',
-    marginBottom: space.xs,
-  };
-});
-
-const createTextLines = (lineCount: number, backgroundColor: string) => {
-  const lines = new Array(lineCount).fill(null);
-
-  return lines.map((_value, index) => (
-    <Line
-      key={index}
-      backgroundColor={backgroundColor}
-      width={index < lineCount - 1 || lineCount === 1 ? '100%' : '60%'}
-    />
-  ));
-};
-
-export const SkeletonText = createComponent('div')({
-  displayName: 'Skeleton.Text',
-  Component: (
-    {backgroundColor = colors.soap200, lineCount = 2, ...elemProps}: SkeletonTextProps,
-    ref,
-    Element
-  ) =>
-    lineCount <= 0 ? null : (
-      <TextContainer ref={ref} as={Element} {...elemProps}>
-        {createTextLines(lineCount, backgroundColor)}
-      </TextContainer>
-    ),
-});