@pingux/astro 2.190.4 → 2.191.1-alpha.0

package/lib/cjs/components/IconWrapper/IconWrapper.js

@@ -20,6 +20,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _constants = require("../Avatar/constants");
+var _getColorFromUuid = _interopRequireDefault(require("../Avatar/getColorFromUuid"));
 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 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; }
@@ -33,8 +35,19 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title = props.title,
     className = props.className,
     isCircle = props.isCircle,
+    colorId = props.colorId,
     sx = props.sx;
   var theme = (0, _hooks.useGetTheme)();
+  var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
+  if (process.env.NODE_ENV !== 'production') {
+    if (!color && !colorId) {
+      console.warn("[Astro] IconWrapper: No 'color' or 'colorId' provided. " + 'The component is falling back to a default generated color.');
+    }
+  }
+  var finalColor = (0, _react.useMemo)(function () {
+    if (color) return color;
+    return (0, _getColorFromUuid["default"])(safeColorId, _constants.avatarColors);
+  }, [color, safeColorId]);
   var _useTShirtSize = (0, _hooks.useTShirtSize)({
       size: size,
       sizes: theme.iconWrapperSizes
@@ -48,14 +61,14 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     variant: "iconWrapper.".concat(size),
     sx: _objectSpread({
-      backgroundColor: "iconWrapper.wrapper.".concat(color)
+      backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
     className: classNames
   }, wrapperProps), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: icon,
     size: sizeProps.size,
     title: title,
-    color: "iconWrapper.icon.".concat(color)
+    color: "iconWrapper.icon.".concat(finalColor)
   }, iconProps)));
 });
 var _default = exports["default"] = IconWrapper;

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

@@ -17,7 +17,8 @@ var defaultProps = {
     name: 'earth icon'
   },
   icon: _EarthIcon["default"],
-  size: 'md'
+  size: 'md',
+  colorId: 'test-color-id'
 };
 var getComponent = function getComponent() {
   return (0, _react2.render)((0, _react3.jsx)(_IconWrapper["default"], (0, _extends2["default"])({}, defaultProps, {

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

@@ -385,15 +385,13 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
     return (0, _react2.jsx)(_2.Item, {
       key: item.name
     }, (0, _react2.jsx)(_2.ListViewItem, {
+      id: item.name,
       data: {
         text: item.name,
         icon: _FormSelectIcon["default"]
       },
       iconProps: {
         color: 'text.secondary'
-      },
-      iconWrapperProps: {
-        color: 'cyan'
       }
     }, (0, _react2.jsx)(Controls, null)));
   }));

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

@@ -69,7 +69,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    color: "white"
+    colorId: others.id
   }, iconWrapperProps)) : (0, _react2.jsx)(_.Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"

package/lib/cjs/components/Modal/Modal.js

@@ -31,7 +31,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps", "isNotFullPage"];
 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 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -55,6 +55,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     propsContentProps = props.contentProps,
     containerProps = props.containerProps,
     headerContainerProps = props.headerContainerProps,
+    isNotFullPage = props.isNotFullPage,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var contentProps = _objectSpread({
     id: id,
@@ -94,7 +95,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // useMountTransition hook will not break, because this className gives the
   // component the styling properties that it needs.
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition)),
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition), "isNotFullPage", isNotFullPage)),
     classNames = _useStatusClasses.classNames;
   var _React$Children$toArr = _react["default"].Children.toArray(children),
     _React$Children$toArr2 = (0, _toArray2["default"])(_React$Children$toArr),

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithPopoverMenu = exports.WithInputField = exports.WithComboBoxField = exports.LargeContentWithScroll = exports.LargeContent = exports.Default = void 0;
+exports["default"] = exports.WithPopoverMenu = exports.WithNotFullPage = exports.WithInputField = exports.WithComboBoxField = exports.LargeContentWithScroll = exports.LargeContent = exports.Default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -299,4 +299,28 @@ var WithComboBoxField = exports.WithComboBoxField = function WithComboBoxField()
       "data-id": item.name
     }, item.name);
   })))));
+};
+var WithNotFullPage = exports.WithNotFullPage = function WithNotFullPage(args) {
+  var state = (0, _hooks.useModalState)();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+      onPress: state.open,
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
+    }, "Open Modal"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      isNotFullPage: true
+    }), (0, _react2.jsx)(_index.ModalHeader, {
+      hasCloseButton: true,
+      onClose: state.close,
+      title: "Continue"
+    }), (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, "Do you want to continue with this action that you\u2018re performing?"))), (0, _react2.jsx)(_index.ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close,
+      primaryButtonText: "Continue"
+    })))
+  );
 };

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

@@ -24,6 +24,7 @@ export declare const astroBlacklistStory: {
     Card: string[];
     ListViewItem: string[];
     MaterialSymbolIcon: string[];
+    Modal: string[];
 };
 export declare const nextGenOnlyComponents: string[];
 export declare const onyxOnlyRecipes: string[];

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

@@ -30,7 +30,8 @@ var astroBlacklistStory = exports.astroBlacklistStory = {
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
   ListViewItem: ['With Expandable Item'],
-  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
+  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used'],
+  Modal: ['With Full Page']
 };
 var nextGenOnlyComponents = exports.nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 var onyxOnlyRecipes = exports.onyxOnlyRecipes = ['Vertical Onyx Stepper'];

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

@@ -3219,6 +3219,9 @@ declare const _default: {
         icons: {
             xxxl: string;
         };
+        sideNav: {
+            halfWidth: string;
+        };
     };
     badges: {
         dataTableBadge: {
@@ -5775,6 +5778,11 @@ declare const _default: {
                     width: string;
                     maxWidth: string[];
                 };
+                '&.is-not-full-page': {
+                    position: string;
+                    margin: string;
+                    left: string;
+                };
             };
             headingContainer: {
                 borderBottom: string;

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

@@ -36,5 +36,8 @@ declare const _default: {
     icons: {
         xxxl: string;
     };
+    sideNav: {
+        halfWidth: string;
+    };
 };
 export default _default;

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

@@ -6,6 +6,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
+var sidenavWidth = 230;
+var halfSidenavWidth = sidenavWidth / 2;
+var sideNav = {
+  halfWidth: "".concat(halfSidenavWidth, "px")
+};
 var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var avatar = {
   sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
@@ -50,5 +55,6 @@ var _default = exports["default"] = {
   avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,
-  icons: icons
+  icons: icons,
+  sideNav: sideNav
 };

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

@@ -1146,6 +1146,11 @@ declare const _default: {
                 width: string;
                 maxWidth: string[];
             };
+            '&.is-not-full-page': {
+                position: string;
+                margin: string;
+                left: string;
+            };
         };
         headingContainer: {
             borderBottom: string;

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

@@ -20,6 +20,7 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
+var _sizes = _interopRequireDefault(require("../sizes"));
 var _accordion = _interopRequireDefault(require("./accordion"));
 var _accordionGrid = _interopRequireDefault(require("./accordionGrid"));
 var _avatar = require("./avatar");
@@ -116,6 +117,11 @@ var modal = {
     '&.is-full': {
       width: '100%',
       maxWidth: modalSize.full
+    },
+    '&.is-not-full-page': {
+      position: 'relative',
+      margin: '4.75rem 0px',
+      left: _sizes["default"].sideNav.halfWidth // 115,
     }
   },
   headingContainer: {

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

@@ -60,6 +60,7 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
     /** Props object spread directly into the modal container Box. */
     containerProps?: object;
     headerContainerProps?: object;
+    isNotFullPage?: boolean;
 }
 export interface ModalHeaderProps extends StyleProps {
     titleProps?: object;

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

@@ -9,6 +9,7 @@ export interface IconWrapperProps extends StyleProps {
     size: string;
     className?: string;
     isCircle?: boolean;
+    colorId?: string | null;
     title?: {
         name: string;
         id?: string;

package/lib/components/IconWrapper/IconWrapper.js

@@ -10,9 +10,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { useGetTheme, useStatusClasses, useTShirtSize } from '../../hooks';
 import { Box, Icon } from '../../index';
+import { avatarColors } from '../Avatar/constants';
+import getColorFromUUID from '../Avatar/getColorFromUuid';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
@@ -23,8 +25,19 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     title = props.title,
     className = props.className,
     isCircle = props.isCircle,
+    colorId = props.colorId,
     sx = props.sx;
   var theme = useGetTheme();
+  var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
+  if (process.env.NODE_ENV !== 'production') {
+    if (!color && !colorId) {
+      console.warn("[Astro] IconWrapper: No 'color' or 'colorId' provided. " + 'The component is falling back to a default generated color.');
+    }
+  }
+  var finalColor = useMemo(function () {
+    if (color) return color;
+    return getColorFromUUID(safeColorId, avatarColors);
+  }, [color, safeColorId]);
   var _useTShirtSize = useTShirtSize({
       size: size,
       sizes: theme.iconWrapperSizes
@@ -38,14 +51,14 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     variant: "iconWrapper.".concat(size),
     sx: _objectSpread({
-      backgroundColor: "iconWrapper.wrapper.".concat(color)
+      backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
     className: classNames
   }, wrapperProps), ___EmotionJSX(Icon, _extends({
     icon: icon,
     size: sizeProps.size,
     title: title,
-    color: "iconWrapper.icon.".concat(color)
+    color: "iconWrapper.icon.".concat(finalColor)
   }, iconProps)));
 });
 export default IconWrapper;

package/lib/components/IconWrapper/IconWrapper.test.js

@@ -14,7 +14,8 @@ var defaultProps = {
     name: 'earth icon'
   },
   icon: Earth,
-  size: 'md'
+  size: 'md',
+  colorId: 'test-color-id'
 };
 var getComponent = function getComponent() {
   return render(___EmotionJSX(IconWrapper, _extends({}, defaultProps, {

package/lib/components/ListView/ListView.stories.js

@@ -375,15 +375,13 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
     return ___EmotionJSX(Item, {
       key: item.name
     }, ___EmotionJSX(ListViewItem, {
+      id: item.name,
       data: {
         text: item.name,
         icon: FormSelectIcon
       },
       iconProps: {
         color: 'text.secondary'
-      },
-      iconWrapperProps: {
-        color: 'cyan'
       }
     }, ___EmotionJSX(Controls, null)));
   }));

package/lib/components/ListViewItem/ListViewItem.js

@@ -57,7 +57,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    color: "white"
+    colorId: others.id
   }, iconWrapperProps)) : ___EmotionJSX(Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"

package/lib/components/Modal/Modal.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps", "isNotFullPage"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -45,6 +45,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     propsContentProps = props.contentProps,
     containerProps = props.containerProps,
     headerContainerProps = props.headerContainerProps,
+    isNotFullPage = props.isNotFullPage,
     others = _objectWithoutProperties(props, _excluded);
   var contentProps = _objectSpread({
     id: id,
@@ -84,7 +85,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   // useMountTransition hook will not break, because this className gives the
   // component the styling properties that it needs.
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
-  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition)),
+  var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "is-".concat(size || 'custom'), size), "isOpen", isOpen), "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), "isOpenNoTransition", isOpenNoTransition), "isNotFullPage", isNotFullPage)),
     classNames = _useStatusClasses.classNames;
   var _React$Children$toArr = React.Children.toArray(children),
     _React$Children$toArr2 = _toArray(_React$Children$toArr),

package/lib/components/Modal/Modal.stories.js

@@ -287,4 +287,28 @@ export var WithComboBoxField = function WithComboBoxField() {
       "data-id": item.name
     }, item.name);
   })))));
+};
+export var WithNotFullPage = function WithNotFullPage(args) {
+  var state = useModalState();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      onPress: state.open,
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
+    }, "Open Modal"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(Modal, _extends({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      isNotFullPage: true
+    }), ___EmotionJSX(ModalHeader, {
+      hasCloseButton: true,
+      onClose: state.close,
+      title: "Continue"
+    }), ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?"))), ___EmotionJSX(ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close,
+      primaryButtonText: "Continue"
+    })))
+  );
 };

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

@@ -23,7 +23,8 @@ export var astroBlacklistStory = {
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
   ListViewItem: ['With Expandable Item'],
-  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
+  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used'],
+  Modal: ['With Full Page']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 export var onyxOnlyRecipes = ['Vertical Onyx Stepper'];

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

@@ -1,4 +1,9 @@
 import { astroTokens } from '@pingux/onyx-tokens';
+var sidenavWidth = 230;
+var halfSidenavWidth = sidenavWidth / 2;
+var sideNav = {
+  halfWidth: "".concat(halfSidenavWidth, "px")
+};
 var fontSizes = astroTokens["default"]['font-size'];
 var avatar = {
   sm: "".concat(astroTokens.size.avatar.sm, "px"),
@@ -43,5 +48,6 @@ export default {
   avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,
-  icons: icons
+  icons: icons,
+  sideNav: sideNav
 };

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

@@ -13,6 +13,7 @@ import { astroTokens } from '@pingux/onyx-tokens';
 import attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
+import sizes from '../sizes';
 import accordion from './accordion';
 import accordionGrid from './accordionGrid';
 import { avatar } from './avatar';
@@ -106,6 +107,11 @@ var modal = {
     '&.is-full': {
       width: '100%',
       maxWidth: modalSize.full
+    },
+    '&.is-not-full-page': {
+      position: 'relative',
+      margin: '4.75rem 0px',
+      left: sizes.sideNav.halfWidth // 115,
     }
   },
   headingContainer: {

package/package.json

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