@pingux/astro 2.112.0-alpha.0 → 2.112.0-alpha.2

package/lib/cjs/components/DataTable/DataTable.js

@@ -203,7 +203,15 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'loader':
         return (0, _react2.jsx)(CenteredWrapper, null, (0, _react2.jsx)(_index.Loader, {
           color: "accent.70",
-          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
+          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading',
+          sx: {
+            gap: '9px'
+          },
+          dotProps: {
+            sx: {
+              m: 0
+            }
+          }
         }));
       default:
         return undefined;

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

@@ -154,6 +154,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
+var getHeaderProps = function getHeaderProps() {
+  return {
+    sx: {
+      fontWeight: '3'
+    }
+  };
+};
 var getCellProps = function getCellProps(columnKey, align) {
   return {
     pr: columnKey !== 'menu' ? 'lg' : 0,
@@ -189,7 +196,7 @@ var Default = function Default(args) {
     id: 1,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    description: (0, _react2.jsx)(_index.Box, null, "Passed Role Access Control"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -199,13 +206,10 @@ var Default = function Default(args) {
     id: 2,
     timestamp: timestampCell,
     eventType: 'User Access Denied',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-      display: "block"
-    }, "Passed Role Access"), (0, _react2.jsx)(_index.Box, {
-      display: "block"
-    }, "Control"), (0, _react2.jsx)(_index.Box, {
-      display: "block"
-    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words")),
+    description: (0, _react2.jsx)(_index.Box, {
+      display: "-webkit-box",
+      variant: "dataTable.truncateText"
+    }, "Passed Role Access Control Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Rejected"
     }),
@@ -215,7 +219,10 @@ var Default = function Default(args) {
     id: 3,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: 'Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words',
+    description: (0, _react2.jsx)(_index.Box, {
+      display: "-webkit-box",
+      variant: "dataTable.truncateText"
+    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -225,7 +232,7 @@ var Default = function Default(args) {
     id: 4,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    description: (0, _react2.jsx)(_index.Box, null, "Passed Role Access Control"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -235,7 +242,7 @@ var Default = function Default(args) {
     id: 5,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    description: (0, _react2.jsx)(_index.Box, null, "Passed Role Access Control"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -248,7 +255,7 @@ var Default = function Default(args) {
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
-    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), {
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), getHeaderProps(), {
       minWidth: column.key !== 'menu' ? 175 : 32,
       width: column.key !== 'menu' ? '19.4%' : 32
     }), column.name);
@@ -308,7 +315,7 @@ var Dynamic = function Dynamic(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -415,7 +422,7 @@ var Sortable = function Sortable(args) {
     id: 6,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 7,
     country: 'USA',
@@ -550,7 +557,7 @@ var Selection = function Selection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -635,7 +642,7 @@ var ControlledSelection = function ControlledSelection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',

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

@@ -51,7 +51,6 @@ declare const _default: {
     };
     tableCellContents: {
         maxHeight: number;
-        overflow: string;
         display: string;
         '-webkit-line-clamp': string;
         '-webkit-box-orient': string;
@@ -167,5 +166,12 @@ declare const _default: {
         borderRadius: string;
         mr: string;
     };
+    truncateText: {
+        whiteSpace: string;
+        WebkitBoxOrient: string;
+        display: string;
+        WebkitLineClamp: string;
+        overflow: string;
+    };
 };
 export default _default;

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

@@ -48,7 +48,7 @@ var tableCell = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
 });
 var tableCellContents = {
   maxHeight: 80,
-  overflow: 'hidden',
+  // overflow: 'hidden',
   display: '-webkit-box !important',
   '-webkit-line-clamp': '4',
   '-webkit-box-orient': 'vertical'
@@ -159,6 +159,13 @@ var tableMenu = {
   borderRadius: '50px',
   mr: 'md'
 };
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '2',
+  overflow: 'hidden'
+};
 var _default = {
   selectableTableRow: selectableTableRow,
   tableBody: tableBody,
@@ -168,6 +175,7 @@ var _default = {
   tableCell: tableCell,
   tableRow: tableRow,
   tableHeadCell: tableHeadCell,
-  tableMenu: tableMenu
+  tableMenu: tableMenu,
+  truncateText: truncateText
 };
 exports["default"] = _default;

package/lib/cjs/components/DataTable/DataTableBadge.js

@@ -11,9 +11,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
-var _AlertIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertIcon"));
-var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 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); }
@@ -25,53 +22,29 @@ var DataTableBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var componentProps = {
     'Pending': {
       badgeProps: {
-        variant: 'dataTable.pending'
-      },
-      iconProps: {
-        icon: _CheckIcon["default"]
+        variant: 'activeStatusBadge'
       }
     },
     'Failed': {
       badgeProps: {
-        variant: 'dataTable.failed'
-      },
-      iconProps: {
-        icon: _AlertIcon["default"],
-        title: {
-          name: 'Alert Icon'
-        }
+        variant: 'warningStatusBadge'
       }
     },
     'Rejected': {
       badgeProps: {
-        variant: 'dataTable.rejected'
-      },
-      iconProps: {
-        icon: _AlertCircleIcon["default"],
-        title: {
-          name: 'Alert Circle Icon'
-        }
+        variant: 'criticalStatusBadge'
       }
     },
     'Approved': {
       badgeProps: {
-        variant: 'dataTable.approved'
-      },
-      iconProps: {
-        icon: _CheckIcon["default"],
-        title: {
-          name: 'Check Icon'
-        }
+        variant: 'healthyStatusBadge'
       }
     }
   };
   return (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
     label: cell,
     ref: ref
-  }, cell && componentProps[cell].badgeProps), cell && cell !== 'Pending' && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
-    mr: "xs",
-    size: "14px"
-  }, cell && componentProps[cell].iconProps)));
+  }, cell && componentProps[cell].badgeProps));
 });
 var _default = DataTableBadge;
 exports["default"] = _default;

package/lib/cjs/components/DataTable/DataTableBadge.test.js

@@ -23,7 +23,6 @@ test('renders component with rejected label', function () {
     cell: cell
   });
   expect(_react2.screen.queryByText('Rejected')).toBeInTheDocument();
-  expect(_react2.screen.queryByText('Alert Circle Icon')).toBeInTheDocument();
 });
 test('renders component with pending label', function () {
   var cell = 'Pending';
@@ -38,7 +37,6 @@ test('renders component with failed label', function () {
     cell: cell
   });
   expect(_react2.screen.queryByText('Failed')).toBeInTheDocument();
-  expect(_react2.screen.queryByText('Alert Icon')).toBeInTheDocument();
 });
 test('renders component with null cell', function () {
   var cell = null;

package/lib/cjs/components/Loader/Loader.js

@@ -14,11 +14,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["size"];
+var _excluded = ["size", "dotProps"];
 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; }
 var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var size = props.size,
+    dotProps = props.dotProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
@@ -28,13 +29,13 @@ var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "alert",
     "aria-live": "assertive",
     "aria-label": "Loading in progress"
-  }, others), (0, _react2.jsx)(_Box["default"], {
+  }, others), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "loader.dotLeft"
-  }), (0, _react2.jsx)(_Box["default"], {
+  }, dotProps)), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "loader.dotCenter"
-  }), (0, _react2.jsx)(_Box["default"], {
+  }, dotProps)), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "loader.dotRight"
-  }));
+  }, dotProps)));
 });
 var _default = Loader;
 exports["default"] = _default;

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

@@ -1,4 +1,5 @@
 import { IconSize, StyleProps } from './shared';
+import { BoxProps } from '.';
 export interface LoaderProps extends StyleProps {
     /**
      * Color key from theme or string value.
@@ -6,4 +7,5 @@ export interface LoaderProps extends StyleProps {
     */
     color?: string;
     size?: IconSize;
+    dotProps?: BoxProps;
 }

package/lib/components/DataTable/DataTable.js

@@ -192,7 +192,15 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'loader':
         return ___EmotionJSX(CenteredWrapper, null, ___EmotionJSX(Loader, {
           color: "accent.70",
-          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
+          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading',
+          sx: {
+            gap: '9px'
+          },
+          dotProps: {
+            sx: {
+              m: 0
+            }
+          }
         }));
       default:
         return undefined;

package/lib/components/DataTable/DataTable.stories.js

@@ -142,6 +142,13 @@ export default {
     overflowMode: 'truncate'
   }
 };
+var getHeaderProps = function getHeaderProps() {
+  return {
+    sx: {
+      fontWeight: '3'
+    }
+  };
+};
 var getCellProps = function getCellProps(columnKey, align) {
   return {
     pr: columnKey !== 'menu' ? 'lg' : 0,
@@ -177,7 +184,7 @@ export var Default = function Default(args) {
     id: 1,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -187,13 +194,10 @@ export var Default = function Default(args) {
     id: 2,
     timestamp: timestampCell,
     eventType: 'User Access Denied',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-      display: "block"
-    }, "Passed Role Access"), ___EmotionJSX(Box, {
-      display: "block"
-    }, "Control"), ___EmotionJSX(Box, {
-      display: "block"
-    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words")),
+    description: ___EmotionJSX(Box, {
+      display: "-webkit-box",
+      variant: "dataTable.truncateText"
+    }, "Passed Role Access Control Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Rejected"
     }),
@@ -203,7 +207,10 @@ export var Default = function Default(args) {
     id: 3,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: 'Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words',
+    description: ___EmotionJSX(Box, {
+      display: "-webkit-box",
+      variant: "dataTable.truncateText"
+    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -213,7 +220,7 @@ export var Default = function Default(args) {
     id: 4,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -223,7 +230,7 @@ export var Default = function Default(args) {
     id: 5,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -236,7 +243,7 @@ export var Default = function Default(args) {
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), getHeaderProps(), {
       minWidth: column.key !== 'menu' ? 175 : 32,
       width: column.key !== 'menu' ? '19.4%' : 32
     }), column.name);
@@ -295,7 +302,7 @@ export var Dynamic = function Dynamic(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -401,7 +408,7 @@ export var Sortable = function Sortable(args) {
     id: 6,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 7,
     country: 'USA',
@@ -535,7 +542,7 @@ export var Selection = function Selection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -619,7 +626,7 @@ export var ControlledSelection = function ControlledSelection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',

package/lib/components/DataTable/DataTable.styles.js

@@ -41,7 +41,7 @@ var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
 });
 var tableCellContents = {
   maxHeight: 80,
-  overflow: 'hidden',
+  // overflow: 'hidden',
   display: '-webkit-box !important',
   '-webkit-line-clamp': '4',
   '-webkit-box-orient': 'vertical'
@@ -152,6 +152,13 @@ var tableMenu = {
   borderRadius: '50px',
   mr: 'md'
 };
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '2',
+  overflow: 'hidden'
+};
 export default {
   selectableTableRow: selectableTableRow,
   tableBody: tableBody,
@@ -161,5 +168,6 @@ export default {
   tableCell: tableCell,
   tableRow: tableRow,
   tableHeadCell: tableHeadCell,
-  tableMenu: tableMenu
+  tableMenu: tableMenu,
+  truncateText: truncateText
 };

package/lib/components/DataTable/DataTableBadge.js

@@ -1,62 +1,35 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 /* eslint-disable no-nested-ternary */
 import React, { forwardRef } from 'react';
-import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
-import AlertIcon from '@pingux/mdi-react/AlertIcon';
-import CheckIcon from '@pingux/mdi-react/CheckIcon';
-import { Badge, Icon } from '../../index';
+import { Badge } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cell = _ref.cell;
   var componentProps = {
     'Pending': {
       badgeProps: {
-        variant: 'dataTable.pending'
-      },
-      iconProps: {
-        icon: CheckIcon
+        variant: 'activeStatusBadge'
       }
     },
     'Failed': {
       badgeProps: {
-        variant: 'dataTable.failed'
-      },
-      iconProps: {
-        icon: AlertIcon,
-        title: {
-          name: 'Alert Icon'
-        }
+        variant: 'warningStatusBadge'
       }
     },
     'Rejected': {
       badgeProps: {
-        variant: 'dataTable.rejected'
-      },
-      iconProps: {
-        icon: AlertCircleIcon,
-        title: {
-          name: 'Alert Circle Icon'
-        }
+        variant: 'criticalStatusBadge'
       }
     },
     'Approved': {
       badgeProps: {
-        variant: 'dataTable.approved'
-      },
-      iconProps: {
-        icon: CheckIcon,
-        title: {
-          name: 'Check Icon'
-        }
+        variant: 'healthyStatusBadge'
       }
     }
   };
   return ___EmotionJSX(Badge, _extends({
     label: cell,
     ref: ref
-  }, cell && componentProps[cell].badgeProps), cell && cell !== 'Pending' && ___EmotionJSX(Icon, _extends({
-    mr: "xs",
-    size: "14px"
-  }, cell && componentProps[cell].iconProps)));
+  }, cell && componentProps[cell].badgeProps));
 });
 export default DataTableBadge;

package/lib/components/DataTable/DataTableBadge.test.js

@@ -20,7 +20,6 @@ test('renders component with rejected label', function () {
     cell: cell
   });
   expect(screen.queryByText('Rejected')).toBeInTheDocument();
-  expect(screen.queryByText('Alert Circle Icon')).toBeInTheDocument();
 });
 test('renders component with pending label', function () {
   var cell = 'Pending';
@@ -35,7 +34,6 @@ test('renders component with failed label', function () {
     cell: cell
   });
   expect(screen.queryByText('Failed')).toBeInTheDocument();
-  expect(screen.queryByText('Alert Icon')).toBeInTheDocument();
 });
 test('renders component with null cell', function () {
   var cell = null;

package/lib/components/Loader/Loader.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["size"];
+var _excluded = ["size", "dotProps"];
 import React, { forwardRef } from 'react';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
   var size = props.size,
+    dotProps = props.dotProps,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -15,12 +16,12 @@ var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "alert",
     "aria-live": "assertive",
     "aria-label": "Loading in progress"
-  }, others), ___EmotionJSX(Box, {
+  }, others), ___EmotionJSX(Box, _extends({
     variant: "loader.dotLeft"
-  }), ___EmotionJSX(Box, {
+  }, dotProps)), ___EmotionJSX(Box, _extends({
     variant: "loader.dotCenter"
-  }), ___EmotionJSX(Box, {
+  }, dotProps)), ___EmotionJSX(Box, _extends({
     variant: "loader.dotRight"
-  }));
+  }, dotProps)));
 });
 export default Loader;

package/package.json

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