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

package/lib/cjs/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SkeletonProps } from '../../types';
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export default Skeleton;

package/lib/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@react-aria/utils");
+var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box/Box"));
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "variant", "fontSize", "sx", "animation"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var Skeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    variant = props.variant,
+    fontSize = props.fontSize,
+    sx = props.sx,
+    animation = props.animation,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var skeletonRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var childrenRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var hasChildren = _react["default"].Children.count(children) > 0;
+  var onResize = (0, _react.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
+        });
+      }
+    }
+  }, []);
+  (0, _utils.useResizeObserver)({
+    ref: childrenRef,
+    onResize: onResize
+  });
+  (0, _react.useLayoutEffect)(onResize, [onResize]);
+  (0, _react.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 = (0, _hooks.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["default"].cloneElement(child, childProps);
+      };
+      return (0, _map["default"])(_context = _react["default"].Children).call(_context, children, function (child) {
+        if ( /*#__PURE__*/_react["default"].isValidElement(child)) {
+          return childWithRefProp(child);
+        }
+        return child;
+      });
+    }
+    return undefined;
+  };
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: skeletonRef,
+    className: classNames,
+    variant: variant && "skeleton.".concat(variant),
+    sx: styleObj
+  }, others), renderedChildren());
+});
+Skeleton.defaultProps = {
+  variant: 'text',
+  animation: 'pulsate'
+};
+Skeleton.displayName = 'Skeleton';
+var _default = Skeleton;
+exports["default"] = _default;

package/lib/cjs/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/cjs/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { SkeletonProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<SkeletonProps>;
+export declare const inferringDimensions: () => React.JSX.Element;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inferringDimensions = exports["default"] = exports.Default = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _images = require("../../utils/devUtils/constants/images");
+var _Skeleton = _interopRequireDefault(require("./Skeleton.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Skeleton',
+  component: _index.Skeleton,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Skeleton["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+  return (0, _react2.jsx)(_index.Box, {
+    width: "200px"
+  }, (0, _react2.jsx)(_index.Skeleton, (0, _extends2["default"])({
+    variant: "text",
+    fontSize: "1rem"
+  }, args)), (0, _react2.jsx)(_index.Skeleton, (0, _extends2["default"])({
+    variant: "circular",
+    width: "40px",
+    height: "40px",
+    mt: "sm"
+  }, args)), (0, _react2.jsx)(_index.Skeleton, (0, _extends2["default"])({
+    variant: "rounded",
+    height: "60px",
+    width: "200px",
+    mt: "sm"
+  }, args)));
+};
+exports.Default = Default;
+var inferringDimensions = function inferringDimensions() {
+  var isLoaded = true;
+  return (0, _react2.jsx)(_index.Box, {
+    width: "200px"
+  }, (0, _react2.jsx)(_index.Box, {
+    mb: "sm",
+    isRow: true,
+    alignItems: "center",
+    gap: "md"
+  }, isLoaded && (0, _react2.jsx)(_index.Skeleton, {
+    variant: "circular"
+  }, (0, _react2.jsx)(_index.Avatar, {
+    src: _images.pingImg
+  })), (0, _react2.jsx)(_index.Box, {
+    flex: "1 1 0"
+  }, (0, _react2.jsx)(_index.Skeleton, {
+    variant: "text"
+  }, isLoaded && (0, _react2.jsx)(_index.Text, {
+    variant: "h1"
+  }, ".")))), (0, _react2.jsx)(_index.Box, {
+    mb: "sm"
+  }, (0, _react2.jsx)(_index.Skeleton, {
+    variant: "rounded"
+  }, isLoaded && (0, _react2.jsx)(_index.Box, {
+    height: 100
+  }))));
+};
+exports.inferringDimensions = inferringDimensions;

package/lib/cjs/components/Skeleton/Skeleton.styles.d.ts

@@ -0,0 +1,108 @@
+declare const _default: {
+    base: {
+        backgroundColor: string;
+        position: string;
+        overflow: string;
+        '&.is-pulsate': {
+            animation: string;
+        };
+        '&.is-wave': {
+            webkitMaskImage: string;
+            '&:after': {
+                content: string;
+                background: string;
+                position: string;
+                webkitTransform: string;
+                mozTransform: string;
+                msTransform: string;
+                transform: string;
+                bottom: string;
+                left: string;
+                right: string;
+                top: string;
+                animation: string;
+            };
+        };
+    };
+    text: {
+        height: string;
+        transform: string;
+        borderRadius: string;
+        backgroundColor: string;
+        position: string;
+        overflow: string;
+        '&.is-pulsate': {
+            animation: string;
+        };
+        '&.is-wave': {
+            webkitMaskImage: string;
+            '&:after': {
+                content: string;
+                background: string;
+                position: string;
+                webkitTransform: string;
+                mozTransform: string;
+                msTransform: string;
+                transform: string;
+                bottom: string;
+                left: string;
+                right: string;
+                top: string;
+                animation: string;
+            };
+        };
+    };
+    circular: {
+        borderRadius: string;
+        backgroundColor: string;
+        position: string;
+        overflow: string;
+        '&.is-pulsate': {
+            animation: string;
+        };
+        '&.is-wave': {
+            webkitMaskImage: string;
+            '&:after': {
+                content: string;
+                background: string;
+                position: string;
+                webkitTransform: string;
+                mozTransform: string;
+                msTransform: string;
+                transform: string;
+                bottom: string;
+                left: string;
+                right: string;
+                top: string;
+                animation: string;
+            };
+        };
+    };
+    rounded: {
+        borderRadius: string;
+        backgroundColor: string;
+        position: string;
+        overflow: string;
+        '&.is-pulsate': {
+            animation: string;
+        };
+        '&.is-wave': {
+            webkitMaskImage: string;
+            '&:after': {
+                content: string;
+                background: string;
+                position: string;
+                webkitTransform: string;
+                mozTransform: string;
+                msTransform: string;
+                transform: string;
+                bottom: string;
+                left: string;
+                right: string;
+                top: string;
+                animation: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = _interopRequireDefault(require("../../styles/themes/next-gen/colors/colors"));
+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) { (0, _defineProperty2["default"])(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; }
+// Animation keyframes
+var pulsate = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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 = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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["default"]['gray-200'],
+  position: 'relative',
+  overflow: 'hidden',
+  '&.is-pulsate': {
+    animation: (0, _concat["default"])(_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: (0, _concat["default"])(_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'
+});
+var _default = {
+  base: base,
+  text: text,
+  circular: circular,
+  rounded: rounded
+};
+exports["default"] = _default;

package/lib/cjs/components/Skeleton/Skeleton.test.d.ts

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

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

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+var _defineProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _Box = _interopRequireDefault(require("../Box"));
+var _ = _interopRequireDefault(require("."));
+var _react2 = require("@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 (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getComponentWithChild = function getComponentWithChild() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_Box["default"], {
+    height: 100,
+    width: 200
+  }, ".")));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, 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 = _testWrapper.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 = _testWrapper.screen.getByTestId(testId);
+    expect(skeleton).toHaveClass('custom-class');
+  });
+  test('applies default animation', function () {
+    getComponent();
+    var skeleton = _testWrapper.screen.getByTestId(testId);
+    expect(skeleton).toHaveClass('is-pulsate');
+  });
+  test('when variant is passed', function () {
+    getComponent({
+      width: '40px',
+      height: '40px',
+      variant: 'circular'
+    });
+    var skeleton = _testWrapper.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 = _testWrapper.screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('background: red');
+  });
+  test('when fontSize is passed', function () {
+    getComponent({
+      variant: 'text',
+      fontSize: '16px'
+    });
+    var skeleton = _testWrapper.screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('height: 16px');
+  });
+  test('check the inferrer dimensions', function () {
+    var originalOffsetHeight = (0, _getOwnPropertyDescriptor["default"])(window.HTMLDivElement.prototype, 'offsetHeight');
+    var originalOffsetWidth = (0, _getOwnPropertyDescriptor["default"])(window.HTMLDivElement.prototype, 'offsetWidth');
+    (0, _defineProperties["default"])(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 = _testWrapper.screen.getByTestId(testId);
+    expect(skeleton).toHaveStyle('height: 100px');
+    expect(skeleton).toHaveStyle('width: 200px');
+    if (originalOffsetHeight) {
+      (0, _defineProperty["default"])(window.HTMLDivElement.prototype, 'offsetHeight', originalOffsetHeight);
+    }
+    if (originalOffsetWidth) {
+      (0, _defineProperty["default"])(window.HTMLDivElement.prototype, 'offsetWidth', originalOffsetWidth);
+    }
+  });
+});

package/lib/cjs/components/Skeleton/index.d.ts

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

package/lib/cjs/components/Skeleton/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Skeleton["default"];
+  }
+});
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));

package/lib/cjs/index.d.ts

@@ -164,6 +164,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';