@telefonica/mistica 12.0.0 → 12.2.0

package/dist/overscroll-color-context.js

@@ -36,24 +36,25 @@ function _interopRequireWildcard(obj) {
     }
 }
 var ref = (0, _nestableContext).default(""), Provider = ref.Provider, Getter = ref.Getter, useSetValue = ref.useSetValue;
-var shouldRender = (0, _platform).getPlatform() === "ios";
-var OverscrollColorProviderNoOp = function OverscrollColorProviderNoOp(param) {
-    var children = param.children;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
-        children: children || null
-    });
+var shouldRender = function shouldRender() {
+    return (0, _platform).getPlatform() === "ios";
 };
-var OverscrollColorProviderComponent = function OverscrollColorProviderComponent(param) {
+var OverscrollColorProvider = function OverscrollColorProvider(param) {
     var children = param.children;
     var platformOverrides = (0, _hooks).useTheme().platformOverrides;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var theme = (0, _hooks).useTheme();
-    return isTabletOrSmaller ? /*#__PURE__*/ (0, _jsxRuntime).jsx(Provider, {
+    if (!shouldRender()) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Provider, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Getter, {
             children: function children1(color) {
                 return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        isTabletOrSmaller ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                             style: {
                                 position: "absolute",
                                 zIndex: 1,
@@ -64,17 +65,14 @@ var OverscrollColorProviderComponent = function OverscrollColorProviderComponent
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"
                             }
-                        }),
+                        }) : null,
                         children
                     ]
                 });
             }
         })
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
-        children: children
     });
 };
-var OverscrollColorProvider = shouldRender ? OverscrollColorProviderComponent : OverscrollColorProviderNoOp;
 exports.OverscrollColorProvider = OverscrollColorProvider;
 var OverscrollColorComponent = function OverscrollColorComponent() {
     var isInverseVariant = (0, _themeVariantContext).useIsInverseVariant();
@@ -85,6 +83,6 @@ var OverscrollColorComponent = function OverscrollColorComponent() {
 var OverscrollColorNoOp = function OverscrollColorNoOp() {
     return null;
 };
-var OverscrollColor = shouldRender ? OverscrollColorComponent : OverscrollColorNoOp;
+var OverscrollColor = shouldRender() ? OverscrollColorComponent : OverscrollColorNoOp;
 var _default = OverscrollColor;
 exports.default = _default;

package/dist/overscroll-color-context.js.flow

@@ -4,6 +4,6 @@ import * as React from "react";
 declare type ProviderProps = {
   children: React.Node,
 };
-declare export var OverscrollColorProvider: React.ComponentType<ProviderProps>;
+declare export var OverscrollColorProvider: (x: ProviderProps) => React.Node;
 declare var OverscrollColor: () => null;
 declare export default typeof OverscrollColor;

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "12.0.0";
+var PACKAGE_VERSION = "12.2.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/popover.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { TrackingEvent } from './utils/types';
 declare type Position = 'top' | 'bottom' | 'left' | 'right';
 declare type Props = {
-    description: string;
+    description?: string;
     target: React.ReactNode;
     title?: string;
     asset?: React.ReactNode;
@@ -12,6 +12,7 @@ declare type Props = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     isVisible?: boolean;
     children?: void;
+    extra?: React.ReactNode;
 };
 declare const Popover: React.FC<Props>;
 export default Popover;

package/dist/popover.js

@@ -9,6 +9,10 @@ var _jss = require("./jss");
 var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _hooks = require("./hooks");
+var _stack = _interopRequireDefault(require("./stack"));
+var _box = _interopRequireDefault(require("./box"));
+var _inline = _interopRequireDefault(require("./inline"));
+var _text = require("./text");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -131,7 +135,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2,
             boxShadow: function boxShadow(param) {
                 var position = param.position;
@@ -154,46 +158,27 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             zIndex: 9,
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
             backgroundColor: theme.colors.backgroundContainer,
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 8
         },
-        title: {
-            marginBottom: 4,
-            color: theme.colors.textPrimary,
-            fontWeight: 400,
-            lineHeight: 1.5,
-            fontSize: 16
-        },
-        boxContainer: {
-            position: "relative",
+        textAlign: {
             display: "flex",
-            justifyContent: "space-between"
+            alignItems: "center",
+            height: "100%"
+        },
+        boxContent: {
+            display: "flex"
         },
         textContent: {
-            display: "flex",
-            flexDirection: "column",
-            margin: 16,
-            marginRight: 8,
-            justifyContent: "center",
+            textAlign: "left",
             width: "100%",
             wordBreak: "break-word"
         },
-        assetContent: {
-            width: 40,
-            minWidth: 40,
-            height: 40,
-            margin: 16,
-            marginRight: 0
-        },
-        text: {
-            color: theme.colors.textSecondary,
-            textAlign: "left",
-            lineHeight: 1.42857142,
-            fontSize: 14
-        },
         closeButtonIcon: {
-            paddingTop: 8,
-            paddingRight: 8
+            position: "absolute",
+            top: 8,
+            right: 8,
+            zIndex: 1
         }
     };
 });
@@ -277,7 +262,7 @@ var getTargetPosition = function getTargetPosition(targetWrapper) {
     } : null;
 };
 var Popover = function Popover(param) {
-    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
+    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible, extra = param.extra;
     var ref = (0, _hooks).useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
@@ -318,40 +303,50 @@ var Popover = function Popover(param) {
                         className: classes.arrow
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-                    className: classes.boxContainer,
+                /*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
+                    padding: 16,
                     children: [
-                        asset && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                            className: classes.assetContent,
-                            children: asset
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-                            className: classes.textContent,
-                            children: [
-                                title && /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
-                                    className: classes.title,
-                                    children: title
-                                }),
-                                /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
-                                    className: classes.text,
-                                    children: description
-                                })
-                            ]
+                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                            paddingRight: 24,
+                            className: classes.boxContent,
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_inline.default, {
+                                space: 16,
+                                children: [
+                                    asset,
+                                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                                        className: classes.textAlign,
+                                        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                            space: 4,
+                                            className: classes.textContent,
+                                            children: [
+                                                title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+                                                    regular: true,
+                                                    children: title
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                                    regular: true,
+                                                    color: colors.textSecondary,
+                                                    children: description
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
                             className: classes.closeButtonIcon,
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-                                onPress: function onPress(e) {
-                                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                                    e.stopPropagation();
-                                },
-                                trackingEvent: trackingEvent,
-                                "aria-label": texts.modalClose,
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
-                                    color: colors.neutralHigh
-                                })
+                            onPress: function onPress(e) {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                e.stopPropagation();
+                            },
+                            trackingEvent: trackingEvent,
+                            "aria-label": texts.modalClose,
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
+                                color: colors.neutralHigh
                             })
-                        })
+                        }),
+                        extra
                     ]
                 })
             ]

package/dist/popover.js.flow

@@ -4,7 +4,7 @@ import * as React from "react";
 import type { TrackingEvent } from "./utils/types";
 declare type Position = "top" | "bottom" | "left" | "right";
 declare type Props = {
-  description: string,
+  description?: string,
   target: React.Node,
   title?: string,
   asset?: React.Node,
@@ -13,6 +13,7 @@ declare type Props = {
   width?: number,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   isVisible?: boolean,
+  extra?: React.Node,
 };
 declare var Popover: React.ComponentType<Props>;
 declare export default typeof Popover;

package/dist/skeleton-base.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type SkeletonBaseProps = {
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    className?: string;
+};
+declare const SkeletonBase: ({ width, height, radius, className, }: SkeletonBaseProps) => JSX.Element;
+export default SkeletonBase;

package/dist/skeleton-base.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _themeVariantContext = require("./theme-variant-context");
+var React = _interopRequireWildcard(require("react"));
+var _jss = require("./jss");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+var useSkeletonBaseStyles = (0, _jss).createUseStyles(function(param1) {
+    var colors = param1.colors;
+    return {
+        skeletonBase: {
+            borderRadius: function borderRadius(param) {
+                var radius = param.radius;
+                return radius;
+            },
+            height: function height(param) {
+                var height1 = param.height;
+                return height1;
+            },
+            width: function width(param) {
+                var width1 = param.width;
+                return width1;
+            },
+            background: function background(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? colors.backgroundSkeletonInverse : colors.backgroundSkeleton;
+            }
+        }
+    };
+});
+var SkeletonBase = function SkeletonBase(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? 8 : _height, _radius = param.radius, radius = _radius === void 0 ? 8 : _radius, className = param.className;
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var classes = useSkeletonBaseStyles({
+        isInverse: isInverse,
+        width: width,
+        height: height,
+        radius: radius
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        className: (0, _classnames).default(classes.skeletonBase, className),
+        "aria-hidden": true
+    });
+};
+var _default = SkeletonBase;
+exports.default = _default;

package/dist/skeleton-base.js.flow

@@ -0,0 +1,11 @@
+// @flow
+import * as React from "react";
+
+declare type SkeletonBaseProps = {
+  width?: string | number,
+  height?: string | number,
+  radius?: string | number,
+  className?: string,
+};
+declare var SkeletonBase: (x: SkeletonBaseProps) => React.Node;
+declare export default typeof SkeletonBase;

package/dist/skeletons.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { DataAttributes } from './utils/types';
+declare type SkeletonLineProps = {
+    width?: string | number;
+    ariaLabel?: string;
+    dataAttributes?: DataAttributes;
+};
+export declare const SkeletonLine: ({ width, ariaLabel, dataAttributes }: SkeletonLineProps) => JSX.Element;
+declare type SkeletonTextProps = Omit<SkeletonLineProps, 'width'>;
+export declare const SkeletonText: ({ ariaLabel, dataAttributes }: SkeletonTextProps) => JSX.Element;
+declare type SkeletonCircleProps = Omit<SkeletonLineProps, 'width'> & {
+    size?: number | string;
+};
+export declare const SkeletonCircle: ({ ariaLabel, size, dataAttributes }: SkeletonCircleProps) => JSX.Element;
+declare type SkeletonRowProps = SkeletonLineProps;
+export declare const SkeletonRow: ({ width, ariaLabel, dataAttributes }: SkeletonRowProps) => JSX.Element;
+declare type SkeletonRectangleProps = SkeletonLineProps & {
+    height: number | string;
+};
+export declare const SkeletonRectangle: ({ width, height, ariaLabel, dataAttributes, }: SkeletonRectangleProps) => JSX.Element;
+export {};

package/dist/skeletons.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.SkeletonRectangle = exports.SkeletonRow = exports.SkeletonCircle = exports.SkeletonText = exports.SkeletonLine = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _skeletonBase = _interopRequireDefault(require("./skeleton-base"));
+var _jss = require("./jss");
+var _stack = _interopRequireDefault(require("./stack"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dom = require("./utils/dom");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
+var transition = "1.5s linear";
+var useAnimation = (0, _jss).createUseStyles(function() {
+    return {
+        animation: {
+            animation: "$pulse ".concat(transition, " infinite")
+        },
+        "@keyframes pulse": {
+            "0%": {
+                opacity: 1
+            },
+            "50%": {
+                opacity: 0.5
+            },
+            "100%": {
+                opacity: 1
+            }
+        }
+    };
+});
+var useSkeletonStyles = (0, _jss).createUseStyles(function() {
+    return {
+        wrap: {
+            borderRadius: 8,
+            height: function height(param) {
+                var _height = param.height, height1 = _height === void 0 ? 8 : _height;
+                return height1;
+            },
+            width: function width(param) {
+                var _width = param.width, width1 = _width === void 0 ? "100%" : _width;
+                return width1;
+            }
+        }
+    };
+});
+var SkeletonLine = function SkeletonLine(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {})
+    }));
+};
+exports.SkeletonLine = SkeletonLine;
+var SkeletonText = function SkeletonText(param) {
+    var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        height: "fit-content"
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        space: 16,
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                width: "75%"
+            })
+        ]
+    }));
+};
+exports.SkeletonText = SkeletonText;
+var SkeletonCircle = function SkeletonCircle(param) {
+    var ariaLabel = param.ariaLabel, _size = param.size, size = _size === void 0 ? 40 : _size, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: size,
+        height: size
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+            height: size,
+            width: size,
+            radius: "50%"
+        })
+    }));
+};
+exports.SkeletonCircle = SkeletonCircle;
+var useSkeletonRowStyles = (0, _jss).createUseStyles(function() {
+    return {
+        row: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        circle: {
+            flexShrink: 0,
+            flexGrow: 0
+        },
+        line: {
+            flexShrink: 1,
+            marginLeft: 16
+        }
+    };
+});
+var SkeletonRow = function SkeletonRow(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width,
+        height: "100%"
+    });
+    var rowClass = useSkeletonRowStyles();
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap, rowClass.row),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                height: 40,
+                width: 40,
+                radius: "50%",
+                className: rowClass.circle
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                width: width,
+                className: rowClass.line
+            })
+        ]
+    }));
+};
+exports.SkeletonRow = SkeletonRow;
+var SkeletonRectangle = function SkeletonRectangle(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width,
+        height: "100%"
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
+        role: "status",
+        "aria-hidden": true,
+        "aria-busy": true,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+            height: height,
+            width: width
+        })
+    }));
+};
+exports.SkeletonRectangle = SkeletonRectangle;

package/dist/skeletons.js.flow

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+
+import type { DataAttributes } from "./utils/types";
+declare type SkeletonLineProps = {
+  width?: string | number,
+  ariaLabel?: string,
+  dataAttributes?: DataAttributes,
+};
+declare export var SkeletonLine: (x: SkeletonLineProps) => React.Node;
+declare type SkeletonTextProps = $Diff<SkeletonLineProps, { width: any }>;
+declare export var SkeletonText: (x: SkeletonTextProps) => React.Node;
+declare type SkeletonCircleProps = {
+  ...$Diff<SkeletonLineProps, { width: any }>,
+  ...{
+    size?: number | string,
+  },
+};
+declare export var SkeletonCircle: (x: SkeletonCircleProps) => React.Node;
+declare type SkeletonRowProps = SkeletonLineProps;
+declare export var SkeletonRow: (x: SkeletonRowProps) => React.Node;
+declare type SkeletonRectangleProps = {
+  ...SkeletonLineProps,
+  ...{
+    height: number | string,
+  },
+};
+declare export var SkeletonRectangle: (x: SkeletonRectangleProps) => React.Node;
+declare export {};