@pingux/astro 2.164.0 → 2.164.1-alpha.1

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -30,23 +30,26 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin;
+    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin,
+    pageHeaderAddIconMargin = _useGetTheme.pageHeaderAddIconMargin,
+    pageHeaderAddIconSize = _useGetTheme.pageHeaderAddIconSize;
   var renderButton = buttonProps && (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     "aria-label": "icon button",
-    ml: "sm",
+    ml: pageHeaderAddIconMargin,
     variant: "inverted"
   }, buttonProps), (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
-    size: "sm"
+    size: pageHeaderAddIconSize
   }));
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref
   }, other), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    mb: pageHeaderTitleMargin
+    mb: pageHeaderTitleMargin,
+    alignItems: "center"
   }, (0, _react2.jsx)(_index.Text, {
     as: "h1",
-    variant: "H1"
+    variant: "pageHeaderTitle"
   }, title), renderButton), (0, _react2.jsx)(_index.Text, {
     variant: "pageHeaderBody",
     sx: linkStyles

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

@@ -37,7 +37,7 @@ var Default = exports.Default = function Default(args) {
     buttonProps: {
       onPress: function onPress() {}
     },
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
@@ -58,7 +58,7 @@ Default.parameters = {
 };
 var WithoutButton = exports.WithoutButton = function WithoutButton(args) {
   return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
@@ -82,7 +82,7 @@ var WithoutLink = exports.WithoutLink = function WithoutLink(args) {
     buttonProps: {
       onPress: function onPress() {}
     },
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description);
 };
 WithoutLink.parameters = {
@@ -96,7 +96,7 @@ var Customization = exports.Customization = function Customization(args) {
     buttonProps: {
       bg: 'critical.bright'
     },
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));

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

@@ -15,16 +15,19 @@ var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/obje
 var _Object$setPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/set-prototype-of");
 var _Promise = require("@babel/runtime-corejs3/core-js-stable/promise");
 var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var themeHook = _interopRequireWildcard(require("../../hooks"));
 var _index = require("../../index");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _react2 = require("@emotion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], _forEachInstanceProperty(t).call(t, w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = _Object$create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = _Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { var _context5; if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, _forEachInstanceProperty(_context5 = this.tryEntries).call(_context5, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty(e).call(e, 1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -99,4 +102,23 @@ test('when the button is pressed, it calls the onPress callback', /*#__PURE__*/(
         return _context.stop();
     }
   }, _callee);
-})));
+})));
+test('for default theme, it applies correct styles', function () {
+  getComponent();
+  var button = _testWrapper.screen.getByRole('button', {
+    name: /icon button/i
+  });
+  expect(button).toHaveStyleRule('margin-left', '10px');
+});
+test('for onyx theme, it applies correct styles', function () {
+  jest.spyOn(themeHook, 'useGetTheme').mockReturnValue({
+    pageHeaderTitleMargin: 'md',
+    pageHeaderAddIconMargin: 'md',
+    pageHeaderAddIconSize: 'md'
+  });
+  getComponent();
+  var button = _testWrapper.screen.getByRole('button', {
+    name: /icon button/i
+  });
+  expect(button).toHaveStyleRule('margin-left', '15px');
+});

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

@@ -6441,6 +6441,18 @@ export declare const text: {
         variant?: string;
         label?: string;
     };
+    pageHeaderTitle: {
+        lineHeight: string;
+        fontWeight: number;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     stepperTabContent: {
         fontSize: string;
     };

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

@@ -301,6 +301,7 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   attachmentTitle: attachmentTitle,
   messagesText: _objectSpread({}, base),
   stepperLabel: stepperLabel,
+  pageHeaderTitle: _objectSpread({}, HTags.H1),
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader
 });

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

@@ -39,7 +39,7 @@ var inputField = _objectSpread(_objectSpread({}, _Input.input), {}, {
 var segment = {
   '&:focus-visible': {
     outline: '1px solid',
-    outlineColor: 'active',
+    outlineColor: 'focus',
     borderRadius: 4
   }
 };

package/lib/cjs/components/TimeField/TimeSegment.js

@@ -10,6 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _datepicker = require("@react-aria/datepicker");
@@ -55,6 +56,6 @@ var TimeSegment = function TimeSegment(props) {
     ref: ref,
     variant: "forms.timeField.segment",
     onKeyUp: handleKeyEvents
-  }), text);
+  }), (0, _trim["default"])(text).call(text));
 };
 var _default = exports["default"] = TimeSegment;

package/lib/cjs/components/TimeField/stories/OnyxTimeField.d.ts

@@ -0,0 +1,2 @@
+declare const OnyxTimeField: () => import("react/jsx-runtime").JSX.Element;
+export default OnyxTimeField;

package/lib/cjs/components/TimeField/stories/OnyxTimeField.js

@@ -0,0 +1,39 @@
+"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"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var OnyxTimeField = function OnyxTimeField() {
+  return (0, _react2.jsx)(_.Box, {
+    gap: "md",
+    p: "md"
+  }, (0, _react2.jsx)(_.TimeField, {
+    "aria-label": "timeField-default"
+  }), (0, _react2.jsx)(_.TimeField, {
+    "aria-label": "timeField-default",
+    defaultValue: "12:30",
+    hourCycle: 12,
+    granularity: "second"
+  }), (0, _react2.jsx)(_.TimeField, {
+    "aria-label": "timeField-default",
+    isDisabled: true
+  }), (0, _react2.jsx)(_.TimeField, {
+    "aria-label": "timeField-default",
+    isReadOnly: true
+  }), (0, _react2.jsx)(_.TimeField, {
+    "aria-label": "timeField-default",
+    isRequired: true,
+    label: "Lorem Ipsum"
+  }), (0, _react2.jsx)(_.TimeField, {
+    "aria-label": "timeField-default",
+    defaultValue: "12:30",
+    isInvalid: true
+  }));
+};
+var _default = exports["default"] = OnyxTimeField;

package/lib/cjs/components/TimeField/stories/TimeFieldOnyx.chromatic.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/TimeField/stories/TimeFieldOnyx.chromatic.stories.js

@@ -0,0 +1,20 @@
+"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 _OnyxTimeField = _interopRequireDefault(require("./OnyxTimeField"));
+var _react2 = require("@emotion/react");
+var _default = exports["default"] = {
+  title: 'Onyx TimeField'
+};
+var Default = exports.Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.OnyxTheme
+  }, (0, _react2.jsx)(_OnyxTimeField["default"], null));
+};

package/lib/cjs/components/TimeField/stories/TimeFieldOnyxDark.chromatic.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/TimeField/stories/TimeFieldOnyxDark.chromatic.stories.js

@@ -0,0 +1,20 @@
+"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 _OnyxTimeField = _interopRequireDefault(require("./OnyxTimeField"));
+var _react2 = require("@emotion/react");
+var _default = exports["default"] = {
+  title: 'Onyx Dark TimeField'
+};
+var Default = exports.Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.OnyxDarkTheme
+  }, (0, _react2.jsx)(_OnyxTimeField["default"], null));
+};

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

@@ -71,6 +71,8 @@ declare const useGetTheme: () => {
     iFrameContentDivBackgroundColor: string;
     copyButtonSize: import("../..").IconSize;
     pageHeaderTitleMargin: string;
+    pageHeaderAddIconMargin: string;
+    pageHeaderAddIconSize: import("../..").IconSize;
     breadcrumbIconSize: import("../..").IconSize;
     breadcrumbIconMargin: number;
     rockerButtonGap: string;
@@ -151,6 +153,8 @@ declare const useGetTheme: () => {
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
+    pageHeaderAddIconMargin: string;
+    pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
     styles: {

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

@@ -55,6 +55,8 @@ export declare const nextGenDarkThemeValues: {
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
+    pageHeaderAddIconMargin: string;
+    pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
     styles: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts

@@ -33,6 +33,7 @@ declare const _default: {
         };
     };
     label: {
+        color: string;
         radioGroup: {
             color: string;
         };

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

@@ -42,6 +42,7 @@ var checkbox = exports.checkbox = {
   color: 'text.primary'
 };
 var label = {
+  color: 'gray-100',
   radioGroup: {
     color: 'white'
   },

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts

@@ -41,4 +41,10 @@ export declare const text: {
             };
         };
     };
+    pageHeaderBody: {
+        color: string;
+    };
+    pageHeaderTitle: {
+        color: string;
+    };
 };

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

@@ -47,5 +47,11 @@ var text = exports.text = {
         color: 'white'
       }
     }
+  },
+  pageHeaderBody: {
+    color: 'text.secondary'
+  },
+  pageHeaderTitle: {
+    color: 'gray-100'
   }
 };

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

@@ -65,6 +65,8 @@ export declare const astroThemeValues: {
     iFrameContentDivBackgroundColor: string;
     copyButtonSize: IconSize;
     pageHeaderTitleMargin: string;
+    pageHeaderAddIconMargin: string;
+    pageHeaderAddIconSize: IconSize;
     breadcrumbIconSize: IconSize;
     breadcrumbIconMargin: number;
     rockerButtonGap: string;

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

@@ -21,6 +21,8 @@ var iconBadgeCircleColor = 'white';
 var rockerButtonGap = '3px';
 var accordionItemMarginLeft = 'sm';
 var pageHeaderTitleMargin = 'xs';
+var pageHeaderAddIconMargin = 'sm';
+var pageHeaderAddIconSize = 'sm';
 var activeColor = '#4462ED';
 var backgroundBaseColor = 'white';
 var defaultLoaderSize = 16;
@@ -42,6 +44,8 @@ var astroThemeValues = exports.astroThemeValues = {
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   copyButtonSize: copyButtonSize,
   pageHeaderTitleMargin: pageHeaderTitleMargin,
+  pageHeaderAddIconMargin: pageHeaderAddIconMargin,
+  pageHeaderAddIconSize: pageHeaderAddIconSize,
   breadcrumbIconSize: breadcrumbIconSize,
   breadcrumbIconMargin: breadcrumbIconMargin,
   rockerButtonGap: rockerButtonGap,

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
 var componentSpecificNextGenBlacklist = exports.componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -5,6 +5,8 @@ declare const _default: {
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
+    pageHeaderAddIconMargin: string;
+    pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
 };
 export default _default;

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

@@ -9,7 +9,9 @@ var copyButtonSize = 'sm';
 var breadcrumbIconSize = 'sm';
 var breadcrumbIconMargin = 'md';
 var accordionItemMarginLeft = 'md';
-var pageHeaderTitleMargin = 'md';
+var pageHeaderTitleMargin = 'sm';
+var pageHeaderAddIconMargin = 'md';
+var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
 var _default = exports["default"] = {
   copyButtonSize: copyButtonSize,
@@ -17,5 +19,7 @@ var _default = exports["default"] = {
   breadcrumbIconMargin: breadcrumbIconMargin,
   accordionItemMarginLeft: accordionItemMarginLeft,
   pageHeaderTitleMargin: pageHeaderTitleMargin,
+  pageHeaderAddIconMargin: pageHeaderAddIconMargin,
+  pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize
 };

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

@@ -6,6 +6,8 @@ export declare const nextGenThemeValues: {
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
+    pageHeaderAddIconMargin: string;
+    pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
     backgroundBaseColor: string;