@pingux/astro 2.148.0-alpha.2 → 2.148.1-alpha.0

package/lib/cjs/components/Button/Button.js

@@ -94,6 +94,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
   (0, _hooks.useAriaLabelWarning)('Button', ariaLabel, variant === 'filter');
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    buttonLoaderSize = _useGetTheme.buttonLoaderSize;
   return (0, _react2.jsx)(_interactions.Pressable, {
     ref: buttonRef
   }, (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
@@ -113,7 +115,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       visibility: 'hidden'
     }
   }, children) : children, isLoading && (0, _react2.jsx)(_Loader["default"], {
-    size: "0.5em",
+    size: buttonLoaderSize,
     sx: {
       position: 'absolute'
     }

package/lib/cjs/components/Button/Button.stories.d.ts

@@ -67,3 +67,4 @@ export declare const ColorBlockButton: {
     };
 };
 export declare const Filter: () => React.JSX.Element;
+export declare const WithLoading: (args: any) => React.JSX.Element;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
+exports["default"] = exports.WithLoading = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -224,4 +224,10 @@ var Filter = function Filter() {
     variant: "filter"
   }, "Filter Text");
 };
-exports.Filter = Filter;
+exports.Filter = Filter;
+var WithLoading = function WithLoading(args) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
+    isLoading: true
+  }), "Save");
+};
+exports.WithLoading = WithLoading;

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

@@ -209,16 +209,8 @@ 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',
-          sx: {
-            gap: '9px'
-          },
-          dotProps: {
-            sx: {
-              m: 0
-            }
-          }
+          variant: "loader.withinDataTable"
         }));
       default:
         return undefined;

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -245,7 +245,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isDisabled: isDisabled || isLoading,
     textProps: textProps
   }, ariaProps))), isLoading && (0, _react2.jsx)(_.Loader, {
-    color: "active",
+    variant: "loader.withinInput",
     sx: {
       position: 'absolute'
     },

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -41,7 +41,8 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var placeholder = props.placeholder,
     isDisabled = props.isDisabled,
     status = props.status,
-    helperText = props.helperText;
+    helperText = props.helperText,
+    hasInlineLoader = props.hasInlineLoader;
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
@@ -75,7 +76,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     color: isOnyx ? 'font.link' : 'active'
   }, placeholder), (0, _react2.jsx)(_.Box, {
     isRow: true
-  }, isLoadingInitial && (0, _react2.jsx)(_.Loader, {
+  }, hasInlineLoader && isLoadingInitial && (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinInput"
   }), (0, _react2.jsx)(_.Box, {
     as: "span",
@@ -160,7 +161,9 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: _propTypes["default"].func
+  onSelectionChange: _propTypes["default"].func,
+  /** Display an inline loader inside the select trigger while loading. */
+  hasInlineLoader: _propTypes["default"].bool
 }, _statusProp.statusPropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

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

@@ -148,10 +148,11 @@ test('select field with helper text', function () {
   expect(fieldHelperText[1]).toBeInTheDocument();
   expect(fieldHelperText[1]).toHaveClass("is-".concat(_statuses["default"].ERROR));
 });
-test('displays a loader while loading', function () {
+test('displays a inline loader while loading', function () {
   var _getComponent = getComponent({
       items: [],
-      isLoading: true
+      isLoading: true,
+      hasInlineLoader: true
     }),
     rerender = _getComponent.rerender;
   var button = _testWrapper.screen.getByRole('button');

package/lib/cjs/components/ListView/ListViewItem.js

@@ -122,7 +122,7 @@ var ListViewItem = function ListViewItem(props) {
   }, listItemProps), item.rendered, state.isLoading && isFocusVisibleWithin && (0, _react2.jsx)(_index.Box, {
     variant: "listViewItem.loaderContainer"
   }, (0, _react2.jsx)(_index.Loader, {
-    color: "neutral.50"
+    variant: "loader.withinListView"
   })))));
 };
 ListViewItem.propTypes = {

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

@@ -24,7 +24,7 @@ var _hooks = require("../../hooks");
 var _useCircularLoader2 = _interopRequireDefault(require("../../hooks/useCircularLoader/useCircularLoader"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["dotProps", "progress", "strokeColor", "strokeBaseColor"];
+var _excluded = ["dotProps", "progress", "strokeColor", "strokeBaseColor", "size"];
 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; }
@@ -35,6 +35,7 @@ var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     progress = _props$progress === void 0 ? 75 : _props$progress,
     strokeColor = props.strokeColor,
     strokeBaseColor = props.strokeBaseColor,
+    loaderSize = props.size,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     activeColor = _useGetTheme.activeColor,
@@ -90,7 +91,7 @@ var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     isRow: true,
-    fontSize: size,
+    fontSize: loaderSize,
     variant: "loader.container",
     role: "alert",
     "aria-live": "assertive",

package/lib/cjs/components/Loader/Loader.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryFn } from '@storybook/react';
+import type { LoaderProps } 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<LoaderProps>;
+export declare const CustomColor: StoryFn<LoaderProps>;
+export declare const CustomSize: StoryFn<LoaderProps>;
+export declare const Circular: StoryFn<LoaderProps>;
+export declare const CustomCircular: StoryFn<LoaderProps>;

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

@@ -20,9 +20,9 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _index = require("../../index");
+var _ = require("../..");
 var _colors = require("../../styles/colors");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _iconSizeProps = require("../../utils/docUtils/iconSizeProps");
 var _Loader = _interopRequireDefault(require("./Loader.mdx"));
 var _react2 = require("@emotion/react");
@@ -30,7 +30,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { (0, _defineProperty2["default"])(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 _default = {
   title: 'Components/Loader',
-  component: _index.Loader,
+  component: _.Loader,
   decorators: [_storybookAddonDesigns.withDesign],
   parameters: {
     docs: {
@@ -60,7 +60,7 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Loader, args);
+  return (0, _react2.jsx)(_.Loader, args);
 };
 exports.Default = Default;
 Default.parameters = {
@@ -70,26 +70,26 @@ Default.parameters = {
   }
 };
 var CustomColor = function CustomColor(args) {
-  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_.Loader, (0, _extends2["default"])({}, args, {
     color: "neutral.50"
   }));
 };
 exports.CustomColor = CustomColor;
 var CustomSize = function CustomSize(args) {
-  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_.Loader, (0, _extends2["default"])({}, args, {
     size: 32
   }));
 };
 exports.CustomSize = CustomSize;
 var Circular = function Circular(args) {
-  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_.Loader, (0, _extends2["default"])({}, args, {
     size: 120,
     isCircle: true
   }));
 };
 exports.Circular = Circular;
 var CustomCircular = function CustomCircular(args) {
-  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_.Loader, (0, _extends2["default"])({}, args, {
     size: "lg",
     isCircle: true,
     strokeColor: "magenta"

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

@@ -56,5 +56,11 @@ declare const _default: {
         alignItems: string;
         justifyContent: string;
     };
+    withinDataTable: {
+        color: string;
+        padding: string;
+        alignItems: string;
+        justifyContent: string;
+    };
 };
 export default _default;

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

@@ -25,20 +25,26 @@ var container = {
   fontSize: '1em'
 };
 var withinInput = {
-  color: 'neutral.60',
+  color: 'active',
   fontSize: '6px',
   alignItems: 'center',
   marginRight: 'xs'
 };
 var withinListbox = {
-  color: 'neutral.60',
+  color: 'active',
   fontSize: '6px',
   padding: 'md',
   alignItems: 'center',
   justifyContent: 'center'
 };
 var withinListView = {
-  color: 'neutral.60',
+  color: 'active',
+  padding: 'md',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+var withinDataTable = {
+  color: 'active',
   padding: 'md',
   alignItems: 'center',
   justifyContent: 'center'
@@ -80,6 +86,7 @@ var _default = {
   container: container,
   withinInput: withinInput,
   withinListbox: withinListbox,
-  withinListView: withinListView
+  withinListView: withinListView,
+  withinDataTable: withinDataTable
 };
 exports["default"] = _default;

package/lib/cjs/components/Loader/stories/LoaderOnyxComponent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LoaderOnyxComponent: () => React.JSX.Element;

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

@@ -0,0 +1,30 @@
+"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.LoaderOnyxComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var LoaderOnyxComponent = function LoaderOnyxComponent() {
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.Loader, {
+    size: "sm",
+    isCircle: true
+  }), (0, _react2.jsx)(_index.Loader, {
+    size: "md",
+    isCircle: true
+  }), (0, _react2.jsx)(_index.Loader, {
+    size: "lg",
+    isCircle: true
+  }), (0, _react2.jsx)(_index.Loader, {
+    size: 120,
+    isCircle: true,
+    strokeColor: "magenta"
+  }));
+};
+exports.LoaderOnyxComponent = LoaderOnyxComponent;

package/lib/cjs/components/Loader/stories/OnyxDarkLoader.chomatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/Loader/stories/OnyxDarkLoader.chomatic.stories.js

@@ -0,0 +1,22 @@
+"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["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _LoaderOnyxComponent = require("./LoaderOnyxComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark Loader'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.OnyxDarkTheme]
+  }, (0, _react2.jsx)(_LoaderOnyxComponent.LoaderOnyxComponent, null));
+};
+exports.Default = Default;

package/lib/cjs/components/Loader/stories/OnyxLoader.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/Loader/stories/OnyxLoader.chromatic.stories.js

@@ -0,0 +1,22 @@
+"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["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _LoaderOnyxComponent = require("./LoaderOnyxComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Loader'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.OnyxTheme
+  }, (0, _react2.jsx)(_LoaderOnyxComponent.LoaderOnyxComponent, null));
+};
+exports.Default = Default;

package/lib/cjs/components/TableBase/TableBase.js

@@ -142,7 +142,7 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     px: "lg",
     py: "md"
   }, (0, _react2.jsx)(_.Loader, {
-    color: "active"
+    variant: "loader.withinDataTable"
   })), (0, _map["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
     var _context4;
     return (0, _react2.jsx)(TableRow, {

package/lib/cjs/components/TreeView/TreeViewSection.js

@@ -197,7 +197,7 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
     "aria-live": "polite"
   }, loaderState === false && (isExpanded && items.length > 0 ? ' Loading successful' : 'Loading unsuccessful')), loaderState ? (0, _react2.jsx)(_index2.Loader, {
-    color: "active",
+    variant: "loader.withinInput",
     ml: "31px"
   }) : (0, _map["default"])(_context3 = (0, _from["default"])(items)).call(_context3, function (_item, _index) {
     var _item$children;

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -56,6 +56,7 @@ declare const useGetTheme: () => {
     accordionItemDefaultLabelTag: string;
     iFrameContentDivBackgroundColor: string;
     rockerButtonGap: string;
+    buttonLoaderSize: import("../..").LoaderSize;
     themeState: {
         isOnyx: boolean;
         isAstro: boolean;
@@ -105,6 +106,7 @@ declare const useGetTheme: () => {
     accordionItemMarginLeft: string;
     defaultLoaderSize: number;
     defaultIconColor: string;
+    buttonLoaderSize: import("../..").LoaderSize;
     name: string;
     themeState: {
         isAstro: boolean;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -49,4 +49,5 @@ export declare const nextGenDarkThemeValues: {
     };
     accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;
+    buttonLoaderSize: import("../../../..").LoaderSize;
 };

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconSize } from '../../../../types';
+import { IconSize, LoaderSize } from '../../../../types';
 export declare const astroThemeValues: {
     accordionItemDefaultLabelTag: string;
     activeColor: string;
@@ -42,4 +42,5 @@ export declare const astroThemeValues: {
     accordionItemMarginLeft: string;
     defaultLoaderSize: number;
     defaultIconColor: string;
+    buttonLoaderSize: LoaderSize;
 };

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -25,6 +25,7 @@ var pageHeaderTitleMargin = 'xs';
 var activeColor = '#4462ED';
 var backgroundBaseColor = 'white';
 var defaultLoaderSize = 16;
+var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
 var astroThemeValues = {
@@ -44,6 +45,7 @@ var astroThemeValues = {
   rockerButtonGap: rockerButtonGap,
   accordionItemMarginLeft: accordionItemMarginLeft,
   defaultLoaderSize: defaultLoaderSize,
-  defaultIconColor: defaultIconColor
+  defaultIconColor: defaultIconColor,
+  buttonLoaderSize: buttonLoaderSize
 };
 exports.astroThemeValues = astroThemeValues;

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

@@ -25,7 +25,7 @@ var astroBlacklistStory = {
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
   Text: ['Onyx'],
-  Loader: ['Circular', 'CustomCircular']
+  Loader: ['Circular', 'Custom Circular']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
 var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { LoaderSize } from '../../../../types';
 export declare const nextGenThemeValues: {
-    copyButtonSize: import("../../../..").IconSize;
-    breadcrumbIconSize: import("../../../..").IconSize;
+    copyButtonSize: import("../../../../types").IconSize;
+    breadcrumbIconSize: import("../../../../types").IconSize;
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
@@ -50,4 +51,5 @@ export declare const nextGenThemeValues: {
     accordionItemDefaultLabelTag: string;
     iFrameContentDivBackgroundColor: string;
     rockerButtonGap: string;
+    buttonLoaderSize: LoaderSize;
 };

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -30,6 +30,7 @@ var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
+var buttonLoaderSize = 'sm';
 var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
@@ -41,6 +42,7 @@ var nextGenThemeValues = _objectSpread({
   defaultIconColor: defaultIconColor,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
-  rockerButtonGap: '0px'
+  rockerButtonGap: '0px',
+  buttonLoaderSize: buttonLoaderSize
 }, _customSizes["default"]);
 exports.nextGenThemeValues = nextGenThemeValues;

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

@@ -11,4 +11,5 @@ export interface LoaderProps extends StyleProps {
     progress?: number;
     strokeColor?: string;
     strokeBaseColor?: string;
+    isCircle?: boolean;
 }

package/lib/components/Button/Button.js

@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { Button as ThemeUIButton } from 'theme-ui';
-import { useAriaLabelWarning, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
+import { useAriaLabelWarning, useGetTheme, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -83,6 +83,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
   useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
+  var _useGetTheme = useGetTheme(),
+    buttonLoaderSize = _useGetTheme.buttonLoaderSize;
   return ___EmotionJSX(Pressable, {
     ref: buttonRef
   }, ___EmotionJSX(ThemeUIButton, _extends({
@@ -102,7 +104,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       visibility: 'hidden'
     }
   }, children) : children, isLoading && ___EmotionJSX(Loader, {
-    size: "0.5em",
+    size: buttonLoaderSize,
     sx: {
       position: 'absolute'
     }

package/lib/components/Button/Button.stories.js

@@ -208,4 +208,9 @@ export var Filter = function Filter() {
   return ___EmotionJSX(Button, {
     variant: "filter"
   }, "Filter Text");
+};
+export var WithLoading = function WithLoading(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
+    isLoading: true
+  }), "Save");
 };

package/lib/components/DataTable/DataTable.js

@@ -198,16 +198,8 @@ 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',
-          sx: {
-            gap: '9px'
-          },
-          dotProps: {
-            sx: {
-              m: 0
-            }
-          }
+          variant: "loader.withinDataTable"
         }));
       default:
         return undefined;

package/lib/components/FileInputField/FileInputField.js

@@ -233,7 +233,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled: isDisabled || isLoading,
     textProps: textProps
   }, ariaProps))), isLoading && ___EmotionJSX(Loader, {
-    color: "active",
+    variant: "loader.withinInput",
     sx: {
       position: 'absolute'
     },

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -30,7 +30,8 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
     isDisabled = props.isDisabled,
     status = props.status,
-    helperText = props.helperText;
+    helperText = props.helperText,
+    hasInlineLoader = props.hasInlineLoader;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
@@ -64,7 +65,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     color: isOnyx ? 'font.link' : 'active'
   }, placeholder), ___EmotionJSX(Box, {
     isRow: true
-  }, isLoadingInitial && ___EmotionJSX(Loader, {
+  }, hasInlineLoader && isLoadingInitial && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
   }), ___EmotionJSX(Box, {
     as: "span",
@@ -149,7 +150,9 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: PropTypes.func
+  onSelectionChange: PropTypes.func,
+  /** Display an inline loader inside the select trigger while loading. */
+  hasInlineLoader: PropTypes.bool
 }, statusPropTypes), inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

package/lib/components/LinkSelectField/LinkSelectField.test.js

@@ -145,10 +145,11 @@ test('select field with helper text', function () {
   expect(fieldHelperText[1]).toBeInTheDocument();
   expect(fieldHelperText[1]).toHaveClass("is-".concat(statuses.ERROR));
 });
-test('displays a loader while loading', function () {
+test('displays a inline loader while loading', function () {
   var _getComponent = getComponent({
       items: [],
-      isLoading: true
+      isLoading: true,
+      hasInlineLoader: true
     }),
     rerender = _getComponent.rerender;
   var button = screen.getByRole('button');

package/lib/components/ListView/ListViewItem.js

@@ -110,7 +110,7 @@ var ListViewItem = function ListViewItem(props) {
   }, listItemProps), item.rendered, state.isLoading && isFocusVisibleWithin && ___EmotionJSX(Box, {
     variant: "listViewItem.loaderContainer"
   }, ___EmotionJSX(Loader, {
-    color: "neutral.50"
+    variant: "loader.withinListView"
   })))));
 };
 ListViewItem.propTypes = {

package/lib/components/Loader/Loader.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["dotProps", "progress", "strokeColor", "strokeBaseColor"];
+var _excluded = ["dotProps", "progress", "strokeColor", "strokeBaseColor", "size"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -24,6 +24,7 @@ var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
     progress = _props$progress === void 0 ? 75 : _props$progress,
     strokeColor = props.strokeColor,
     strokeBaseColor = props.strokeBaseColor,
+    loaderSize = props.size,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
     activeColor = _useGetTheme.activeColor,
@@ -79,7 +80,7 @@ var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
-    fontSize: size,
+    fontSize: loaderSize,
     variant: "loader.container",
     role: "alert",
     "aria-live": "assertive",

package/lib/components/Loader/Loader.stories.js

@@ -15,9 +15,9 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Loader } from '../../index';
+import { Loader } from '../..';
 import { flatColorList } from '../../styles/colors';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
 import LoaderReadme from './Loader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Loader/Loader.styles.js

@@ -18,20 +18,26 @@ var container = {
   fontSize: '1em'
 };
 var withinInput = {
-  color: 'neutral.60',
+  color: 'active',
   fontSize: '6px',
   alignItems: 'center',
   marginRight: 'xs'
 };
 var withinListbox = {
-  color: 'neutral.60',
+  color: 'active',
   fontSize: '6px',
   padding: 'md',
   alignItems: 'center',
   justifyContent: 'center'
 };
 var withinListView = {
-  color: 'neutral.60',
+  color: 'active',
+  padding: 'md',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+var withinDataTable = {
+  color: 'active',
   padding: 'md',
   alignItems: 'center',
   justifyContent: 'center'
@@ -73,5 +79,6 @@ export default {
   container: container,
   withinInput: withinInput,
   withinListbox: withinListbox,
-  withinListView: withinListView
+  withinListView: withinListView,
+  withinDataTable: withinDataTable
 };

package/lib/components/Loader/stories/LoaderOnyxComponent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box, Loader } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var LoaderOnyxComponent = function LoaderOnyxComponent() {
+  return ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(Loader, {
+    size: "sm",
+    isCircle: true
+  }), ___EmotionJSX(Loader, {
+    size: "md",
+    isCircle: true
+  }), ___EmotionJSX(Loader, {
+    size: "lg",
+    isCircle: true
+  }), ___EmotionJSX(Loader, {
+    size: 120,
+    isCircle: true,
+    strokeColor: "magenta"
+  }));
+};

package/lib/components/Loader/stories/OnyxDarkLoader.chomatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxDarkTheme } from '../../..';
+import { LoaderOnyxComponent } from './LoaderOnyxComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Loader'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [OnyxDarkTheme]
+  }, ___EmotionJSX(LoaderOnyxComponent, null));
+};

package/lib/components/Loader/stories/OnyxLoader.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxTheme } from '../../..';
+import { LoaderOnyxComponent } from './LoaderOnyxComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Loader'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxTheme
+  }, ___EmotionJSX(LoaderOnyxComponent, null));
+};

package/lib/components/TableBase/TableBase.js

@@ -131,7 +131,7 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     px: "lg",
     py: "md"
   }, ___EmotionJSX(Loader, {
-    color: "active"
+    variant: "loader.withinDataTable"
   })), _mapInstanceProperty(_context3 = _Array$from(collection.body.childNodes)).call(_context3, function (row) {
     var _context4;
     return ___EmotionJSX(TableRow, {

package/lib/components/TreeView/TreeViewSection.js

@@ -181,7 +181,7 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(VisuallyHidden, {
     "aria-live": "polite"
   }, loaderState === false && (isExpanded && items.length > 0 ? ' Loading successful' : 'Loading unsuccessful')), loaderState ? ___EmotionJSX(Loader, {
-    color: "active",
+    variant: "loader.withinInput",
     ml: "31px"
   }) : _mapInstanceProperty(_context3 = _Array$from(items)).call(_context3, function (_item, _index) {
     var _item$children;

package/lib/styles/themes/astro/customProperties/index.js

@@ -12,6 +12,7 @@ var pageHeaderTitleMargin = 'xs';
 var activeColor = '#4462ED';
 var backgroundBaseColor = 'white';
 var defaultLoaderSize = 16;
+var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
 export var astroThemeValues = {
@@ -31,5 +32,6 @@ export var astroThemeValues = {
   rockerButtonGap: rockerButtonGap,
   accordionItemMarginLeft: accordionItemMarginLeft,
   defaultLoaderSize: defaultLoaderSize,
-  defaultIconColor: defaultIconColor
+  defaultIconColor: defaultIconColor,
+  buttonLoaderSize: buttonLoaderSize
 };

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

@@ -17,7 +17,7 @@ export var astroBlacklistStory = {
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
   Text: ['Onyx'],
-  Loader: ['Circular', 'CustomCircular']
+  Loader: ['Circular', 'Custom Circular']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -19,6 +19,7 @@ var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
+var buttonLoaderSize = 'sm';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
@@ -30,5 +31,6 @@ export var nextGenThemeValues = _objectSpread({
   defaultIconColor: defaultIconColor,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
-  rockerButtonGap: '0px'
+  rockerButtonGap: '0px',
+  buttonLoaderSize: buttonLoaderSize
 }, customSizes);

package/package.json

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