@pingux/astro 2.110.1-alpha.1 → 2.111.0-alpha.0

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -546,8 +546,19 @@ _forEachInstanceProperty(_context49 = _Object$keys(_shared)).call(_context49, fu
     }
   });
 });
+var _skeleton = require("./skeleton");
+_forEachInstanceProperty(_context50 = _Object$keys(_skeleton)).call(_context50, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeleton[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _skeleton[key];
+    }
+  });
+});
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context50 = _Object$keys(_switchField)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_switchField)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context51 = _Object$keys(_tab)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_tab)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_tab)).call(_context51, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context52 = _Object$keys(_table)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_table)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_table)).call(_context52, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context53 = _Object$keys(_tabs)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_tabs)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_tabs)).call(_context53, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context54 = _Object$keys(_text)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_text)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_text)).call(_context54, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context55 = _Object$keys(_textField)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_textField)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_textField)).call(_context55,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context56 = _Object$keys(_timefield)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_timefield)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_timefield)).call(_context56,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context57 = _Object$keys(_tooltipTrigger)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_tooltipTrigger)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/skeleton.d.ts

@@ -0,0 +1,6 @@
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+export interface SkeletonProps extends BoxProps, TestingAttributes {
+    animation?: 'pulsate';
+    variant?: 'text' | 'circular' | 'rounded';
+}

package/lib/cjs/types/skeleton.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Skeleton/Skeleton.js

@@ -0,0 +1,113 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "variant", "fontSize", "sx", "animation"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useResizeObserver } from '@react-aria/utils';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import Box from '../Box/Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Skeleton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    variant = props.variant,
+    fontSize = props.fontSize,
+    sx = props.sx,
+    animation = props.animation,
+    others = _objectWithoutProperties(props, _excluded);
+  var skeletonRef = useLocalOrForwardRef(ref);
+  var childrenRef = useRef(null);
+  var _useState = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var hasChildren = React.Children.count(children) > 0;
+  var onResize = useCallback(function () {
+    if (childrenRef.current) {
+      var _childrenRef$current = childrenRef.current,
+        offsetWidth = _childrenRef$current.offsetWidth,
+        offsetHeight = _childrenRef$current.offsetHeight;
+      if (offsetWidth > 0 && offsetHeight > 0) {
+        setDimensions({
+          width: offsetWidth,
+          height: offsetHeight
+        });
+      }
+    }
+  }, []);
+  useResizeObserver({
+    ref: childrenRef,
+    onResize: onResize
+  });
+  useLayoutEffect(onResize, [onResize]);
+  useEffect(function () {
+    if (childrenRef.current) {
+      var _childrenRef$current2 = childrenRef.current,
+        offsetWidth = _childrenRef$current2.offsetWidth,
+        offsetHeight = _childrenRef$current2.offsetHeight;
+      setDimensions({
+        width: offsetWidth,
+        height: offsetHeight
+      });
+    }
+  }, []);
+  var _useStatusClasses = useStatusClasses(className, {
+      isPulsate: animation === 'pulsate'
+    }),
+    classNames = _useStatusClasses.classNames;
+  var inferrerDimensions = hasChildren ? {
+    width: dimensions.width > 0 ? "".concat(dimensions.width, "px") : 'auto',
+    height: dimensions.height > 0 ? "".concat(dimensions.height, "px") : 'auto'
+  } : {};
+  var styleObj = _objectSpread(_objectSpread({}, sx), {}, {
+    height: variant === 'text' && fontSize ? fontSize : undefined
+  }, inferrerDimensions);
+  var renderedChildren = function renderedChildren() {
+    if (hasChildren) {
+      var _context;
+      var childProps = {
+        ref: childrenRef,
+        style: {
+          visibility: 'hidden'
+        }
+      };
+      var childWithRefProp = function childWithRefProp(child) {
+        return /*#__PURE__*/React.cloneElement(child, childProps);
+      };
+      return _mapInstanceProperty(_context = React.Children).call(_context, children, function (child) {
+        if ( /*#__PURE__*/React.isValidElement(child)) {
+          return childWithRefProp(child);
+        }
+        return child;
+      });
+    }
+    return undefined;
+  };
+  return ___EmotionJSX(Box, _extends({
+    ref: skeletonRef,
+    className: classNames,
+    variant: variant && "skeleton.".concat(variant),
+    sx: styleObj
+  }, others), renderedChildren());
+});
+Skeleton.defaultProps = {
+  variant: 'text',
+  animation: 'pulsate'
+};
+Skeleton.displayName = 'Skeleton';
+export default Skeleton;

package/lib/components/Skeleton/Skeleton.mdx

@@ -0,0 +1,13 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Skeleton/Skeleton" />
+
+# Skeleton
+
+The Skeleton component is a basic skeleton that accepts most of the styling props from [styled-system](https://styled-system.com/table).
+
+Show a placeholder preview of your content while the data loads to minimize load-time frustration.
+
+### Required Components
+
+This component can be used independently and does not require additional components.

package/lib/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,74 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Avatar, Box, Skeleton, Text } from '../../index';
+import { pingImg } from '../../utils/devUtils/constants/images';
+import SkeletonReadme from './Skeleton.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SkeletonReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX(Box, {
+    width: "200px"
+  }, ___EmotionJSX(Skeleton, _extends({
+    variant: "text",
+    fontSize: "1rem"
+  }, args)), ___EmotionJSX(Skeleton, _extends({
+    variant: "circular",
+    width: "40px",
+    height: "40px",
+    mt: "sm"
+  }, args)), ___EmotionJSX(Skeleton, _extends({
+    variant: "rounded",
+    height: "60px",
+    width: "200px",
+    mt: "sm"
+  }, args)));
+};
+export var inferringDimensions = function inferringDimensions() {
+  var isLoaded = true;
+  return ___EmotionJSX(Box, {
+    width: "200px"
+  }, ___EmotionJSX(Box, {
+    mb: "sm",
+    isRow: true,
+    alignItems: "center",
+    gap: "md"
+  }, isLoaded && ___EmotionJSX(Skeleton, {
+    variant: "circular"
+  }, ___EmotionJSX(Avatar, {
+    src: pingImg
+  })), ___EmotionJSX(Box, {
+    flex: "1 1 0"
+  }, ___EmotionJSX(Skeleton, {
+    variant: "text"
+  }, isLoaded && ___EmotionJSX(Text, {
+    variant: "h1"
+  }, ".")))), ___EmotionJSX(Box, {
+    mb: "sm"
+  }, ___EmotionJSX(Skeleton, {
+    variant: "rounded"
+  }, isLoaded && ___EmotionJSX(Box, {
+    height: 100
+  }))));
+};

package/lib/components/Skeleton/Skeleton.styles.js

@@ -0,0 +1,63 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _context, _context2;
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import { keyframes } from '@emotion/react';
+import colors from '../../styles/themes/next-gen/colors/colors';
+
+// Animation keyframes
+var pulsate = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   0% {\n        opacity: 1;\n    }\n   50% {\n        opacity: 0.4;\n    }\n   100% {\n        opacity: 1;\n    }\n"], ["\n  \\ 0% {\n        opacity: 1;\n    }\n  \\ 50% {\n        opacity: 0.4;\n    }\n  \\ 100% {\n        opacity: 1;\n    }\n"])));
+var wave = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% { \n      -webkit-transform: translateX(-100%);\n      -moz-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n      transform: translateX(-100%);\n    }\n   50% { \n      -webkit-transform: translateX(100%);\n      -moz-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n      transform: translateX(100%);\n    }\n   100% {\n      -webkit-transform: translateX(100%);\n      -moz-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n      transform: translateX(100%);\n    }\n"], ["\n  \\ 0% { \n      -webkit-transform: translateX(-100%);\n      -moz-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n      transform: translateX(-100%);\n    }\n  \\ 50% { \n      -webkit-transform: translateX(100%);\n      -moz-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n      transform: translateX(100%);\n    }\n  \\ 100% {\n      -webkit-transform: translateX(100%);\n      -moz-transform: translateX(100%);\n      -ms-transform: translateX(100%);\n      transform: translateX(100%);\n    }\n"])));
+var animationSettings = '2s linear 0.5s infinite';
+var base = {
+  backgroundColor: colors['gray-200'],
+  position: 'relative',
+  overflow: 'hidden',
+  '&.is-pulsate': {
+    animation: _concatInstanceProperty(_context = "".concat(pulsate, " ")).call(_context, animationSettings)
+  },
+  '&.is-wave': {
+    webkitMaskImage: '-webkit-radial-gradient(white, black)',
+    '&:after': {
+      content: "''",
+      background: 'linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent)',
+      position: 'absolute',
+      webkitTransform: 'translateX(-100%)',
+      mozTransform: 'translateX(-100%)',
+      msTransform: 'translateX(-100%)',
+      transform: 'translateX(-100%)',
+      bottom: '0',
+      left: '0',
+      right: '0',
+      top: '0',
+      animation: _concatInstanceProperty(_context2 = "".concat(wave, " ")).call(_context2, animationSettings)
+    }
+  }
+};
+var text = _objectSpread(_objectSpread({}, base), {}, {
+  height: '1.2rem',
+  transform: 'scale(1, 0.60)',
+  borderRadius: '4px/6.7px'
+});
+var circular = _objectSpread(_objectSpread({}, base), {}, {
+  borderRadius: '50%'
+});
+var rounded = _objectSpread(_objectSpread({}, base), {}, {
+  borderRadius: '4px'
+});
+export default {
+  base: base,
+  text: text,
+  circular: circular,
+  rounded: rounded
+};

package/lib/components/Skeleton/Skeleton.test.js

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React from 'react';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Box from '../Box';
+import Skeleton from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var offsetHeight;
+var offsetWidth;
+var testId = 'test-skeleton';
+var defaultProps = {
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Skeleton, _extends({}, defaultProps, props)));
+};
+var getComponentWithChild = function getComponentWithChild() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Skeleton, _extends({}, defaultProps, props), ___EmotionJSX(Box, {
+    height: 100,
+    width: 200
+  }, ".")));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Skeleton, _extends({}, defaultProps, props));
+  }
+});
+describe('Skeleton component', function () {
+  beforeAll(function () {
+    offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    jest.useFakeTimers();
+  });
+  afterAll(function () {
+    offsetWidth.mockReset();
+    offsetHeight.mockReset();
+  });
+  test('renders Skeleton component', function () {
+    getComponent({
+      role: 'presentation'
+    });
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toBeInstanceOf(HTMLDivElement);
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveAttribute('role', 'presentation');
+  });
+  test('applies custom className if provided', function () {
+    getComponent({
+      className: 'custom-class'
+    });
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toHaveClass('custom-class');
+  });
+  test('applies default animation', function () {
+    getComponent();
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toHaveClass('is-pulsate');
+  });
+  test('when variant is passed', function () {
+    getComponent({
+      width: '40px',
+      height: '40px',
+      variant: 'circular'
+    });
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('border-radius: 50%');
+  });
+  test('when style object is passed', function () {
+    getComponent({
+      width: '40px',
+      height: '40px',
+      variant: 'circular',
+      sx: {
+        bg: 'red'
+      }
+    });
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('background: red');
+  });
+  test('when fontSize is passed', function () {
+    getComponent({
+      variant: 'text',
+      fontSize: '16px'
+    });
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('height: 16px');
+  });
+  test('check the inferrer dimensions', function () {
+    var originalOffsetHeight = _Object$getOwnPropertyDescriptor(window.HTMLDivElement.prototype, 'offsetHeight');
+    var originalOffsetWidth = _Object$getOwnPropertyDescriptor(window.HTMLDivElement.prototype, 'offsetWidth');
+    _Object$defineProperties(window.HTMLDivElement.prototype, {
+      offsetHeight: {
+        get: function get() {
+          return this.tagName === 'DIV' ? 100 : 500;
+        }
+      },
+      offsetWidth: {
+        get: function get() {
+          return this.tagName === 'DIV' ? 200 : 500;
+        }
+      }
+    });
+    getComponentWithChild({
+      variant: 'rounded'
+    });
+    var skeleton = screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('height: 100px');
+    expect(skeleton).toHaveStyle('width: 200px');
+    if (originalOffsetHeight) {
+      _Object$defineProperty(window.HTMLDivElement.prototype, 'offsetHeight', originalOffsetHeight);
+    }
+    if (originalOffsetWidth) {
+      _Object$defineProperty(window.HTMLDivElement.prototype, 'offsetWidth', originalOffsetWidth);
+    }
+  });
+});

package/lib/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { default } from './Skeleton';

package/lib/index.js

@@ -168,6 +168,8 @@ export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';
 export { default as Separator } from './components/Separator';
 export * from './components/Separator';
+export { default as Skeleton } from './components/Skeleton';
+export * from './components/Skeleton';
 export { Step, default as Stepper } from './components/Stepper';
 export * from './components/Stepper';
 export { default as Switch } from './components/Switch';

package/lib/styles/themeOverrides/nextGenDarkMode/variants/skeleton.js

@@ -0,0 +1,24 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var base = {
+  backgroundColor: '#ffffff22'
+};
+var text = _objectSpread({}, base);
+var circular = _objectSpread({}, base);
+var rounded = _objectSpread({}, base);
+var skeleton = {
+  base: base,
+  text: text,
+  circular: circular,
+  rounded: rounded
+};
+export default skeleton;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -4,6 +4,7 @@ import { listView, listViewItem } from './lsitview';
 import { menu, menuItem } from './menu';
 import { message } from './message';
 import { navBar } from './navbar';
+import skeleton from './skeleton';
 var listBox = {
   container: {
     backgroundColor: 'background.base',
@@ -58,5 +59,6 @@ export default {
   listBox: listBox,
   modal: modal,
   tab: tab,
-  iconBadge: iconBadge
+  iconBadge: iconBadge,
+  skeleton: skeleton
 };

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

package/lib/styles/themes/next-gen/variants/variants.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
+import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import { avatar } from './avatar';
 import button from './button';
@@ -325,5 +326,6 @@ export default {
   overlayPanel: overlayPanel,
   suggestions: suggestions,
   suggestion: suggestion,
-  response: response
+  response: response,
+  skeleton: skeleton
 };

package/lib/styles/variants/variants.js

@@ -45,6 +45,7 @@ import rangeCalendar from '../../components/RangeCalendar/RangeCalendar.styles';
 import rockerButton from '../../components/RockerButton/RockerButton.styles';
 import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
 import separator from '../../components/Separator/Separator.styles';
+import skeleton from '../../components/Skeleton/Skeleton.styles';
 import stepper from '../../components/Stepper/Stepper.styles';
 import table from '../../components/Table/Table.styles';
 import * as tab from '../../components/Tabs/Tabs.style';
@@ -90,6 +91,7 @@ export default _objectSpread({
   scrollBox: scrollBox,
   separator: separator,
   stepper: stepper,
+  skeleton: skeleton,
   table: table,
   timefield: timefield,
   timeZone: timeZone,

package/lib/types/index.js

@@ -47,6 +47,7 @@ export * from './scrollBox';
 export * from './searchField';
 export * from './separator';
 export * from './shared';
+export * from './skeleton';
 export * from './switchField';
 export * from './tab';
 export * from './table';

package/lib/types/skeleton.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.110.1-alpha.1",
+  "version": "2.111.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",