@pingux/astro 2.105.0 → 2.106.0-alpha.0

package/lib/cjs/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _hooks = require("../../../hooks");
+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); }
+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 _default = {
+  title: 'Chromatic Only OverlayPanel',
+  component: _index.OverlayPanel
+};
+exports["default"] = _default;
+var Default = function Default() {
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
+      isDefaultOpen: true
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = (0, _react.useRef)(null);
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      gap: '25px'
+    }
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen,
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Open Panel"), (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true,
+    isTransitioning: state.isTransitioning,
+    state: state,
+    triggerRef: triggerRef,
+    sx: {
+      p: 0
+    }
+  }, (0, _react2.jsx)(_index.PanelHeader, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com'
+    }
+  }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+    onPress: function onPress() {
+      onClose(state, triggerRef);
+    }
+  })), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      p: 25
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    pt: "md"
+  }, "Children render here.")))));
+};
+exports.Default = Default;

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -148,6 +148,9 @@ export declare const FIGMA_LINKS: {
     OnewayToBidirectionalArrow: {
         default: string;
     };
+    overlayPanel: {
+        default: string;
+    };
     panelContent: {
         displayPanel: string;
         editPanel: string;

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -155,6 +155,9 @@ var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  overlayPanel: {
+    "default": 'https://www.figma.com/proto/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58765-3123&t=qSq8hhXsmFeytcZL-1'
+  },
   panelContent: {
     displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
     editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -1,20 +1,15 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useCallback, useRef, useState } from 'react';
-import { Item } from 'react-stately';
+import React, { useRef, useState } from 'react';
+import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import ArrowCollapse from '@pingux/mdi-react/ArrowCollapseIcon';
 import ArrowTopRightBottomLeft from '@pingux/mdi-react/ArrowTopRightBottomLeftIcon';
-import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
-import CogIcon from '@pingux/mdi-react/CogIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
-import { Avatar, Box, Breadcrumbs, Button, ButtonBar, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
-import { pingImg } from '../../utils/devUtils/constants/images';
+import { Box, Button, IconButton, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Text } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
-import statuses from '../../utils/devUtils/constants/statuses';
 import OverlayPanelReadme from './OverlayPanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -58,60 +53,53 @@ export var Default = function Default(_ref) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
       ref: triggerRef,
       onPress: state.open,
-      "aria-expanded": state.isOpen
+      "aria-expanded": state.isOpen,
+      sx: {
+        maxWidth: 'fit-content'
+      }
     }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
       isOpen: state.isOpen,
       isTransitioning: state.isTransitioning,
       state: state
     }, args, {
-      triggerRef: triggerRef
-    }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-      onPress: function onPress() {
-        onClose(state, triggerRef);
-      },
-      "aria-expanded": state.isOpen
-    }, "Close Panel"), ___EmotionJSX(Text, {
-      pt: "md"
-    }, "Children render here."))))
-  );
-};
-export var CustomWidth = function CustomWidth() {
-  var _useOverlayPanelState2 = useOverlayPanelState(),
-    state = _useOverlayPanelState2.state,
-    onClose = _useOverlayPanelState2.onClose;
-  var triggerRef = useRef(null);
-  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(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
-      ref: triggerRef,
-      onPress: state.open,
-      "aria-expanded": state.isOpen
-    }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
-      isTransitioning: state.isTransitioning,
-      isOpen: state.isOpen,
-      state: state,
       triggerRef: triggerRef,
       sx: {
-        width: '720px'
+        p: 0
       }
-    }, ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    }), ___EmotionJSX(PanelHeader, {
+      data: {
+        icon: AccountIcon,
+        text: 'Fons Vernall',
+        subtext: 'rad_developer@pingidentity.com'
+      }
+    }, ___EmotionJSX(PanelHeaderCloseButton, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      },
-      "aria-expanded": state.isOpen
-    }, "Close Panel"), ___EmotionJSX(Text, {
-      pt: "md"
-    }, "Children render here."))))
+      }
+    })), ___EmotionJSX(Box, {
+      sx: {
+        p: 25
+      }
+    }, ___EmotionJSX(Text, null, "Children render here.")))))
   );
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.overlayPanel["default"]
+  }
+};
 export var Expandable = function Expandable() {
-  var _useOverlayPanelState3 = useOverlayPanelState(),
-    state = _useOverlayPanelState3.state,
-    onClose = _useOverlayPanelState3.onClose;
+  var _useOverlayPanelState2 = useOverlayPanelState(),
+    state = _useOverlayPanelState2.state,
+    onClose = _useOverlayPanelState2.onClose;
   var triggerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -121,229 +109,26 @@ export var Expandable = function Expandable() {
     overlayPanel: {
       padding: 0,
       transition: 'width 500ms, right 500ms'
-    },
-    header: {
-      height: '110px',
-      bg: '#F7F8FD',
-      infoAndButtonsContainer: {
-        justifyContent: 'space-between',
-        padding: '20px 20px 0 20px'
-      },
-      pingOneAuthorizeContainer: {
-        gap: '18px',
-        alignItems: 'center',
-        width: 'fit-content'
-      },
-      breadcrumbsContainer: {
-        marginLeft: '78px',
-        fontSize: 'md',
-        fontWeight: 500
-      }
-    },
-    contentContainer: {
-      padding: '15px 25px 0 25px'
-    },
-    tabs: {
-      justifyContent: 'center'
-    },
-    tabPanel: {
-      height: 'calc(100vh - 255px)',
-      overflow: 'scroll'
-    },
-    switchField: {
-      rowGap: 'xs',
-      display: 'grid !important',
-      gridTemplateColumns: 'max-content auto',
-      fontSize: 'sm',
-      fontWeight: 500,
-      color: 'text.secondary',
-      '& > div:first-child': {
-        order: 2
-      }
-    },
-    colorField: {
-      width: '30px',
-      height: '20px'
-    },
-    tabContent: {
-      gap: 'md',
-      width: isExpanded ? '100%' : '400px',
-      transition: 'width 500ms'
     }
   };
-  var multivaluesFieldItems = [{
-    id: 1,
-    name: 'node 1',
-    key: 'node1'
-  }, {
-    id: 2,
-    name: 'node 2',
-    key: 'node2'
-  }];
-  var onCloseHandler = function onCloseHandler() {
-    return onClose(state, triggerRef);
+  var onCloseFunction = function onCloseFunction() {
+    onClose(state, triggerRef);
+    setIsExpanded(false);
   };
-  var _useState3 = useState('#EACE91'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    color = _useState4[0],
-    setColor = _useState4[1];
-  var handleColorChange = useCallback(function (colorVal) {
-    if (typeof colorVal === 'string') {
-      setColor(colorVal);
-    } else if (colorVal.rgb) {
-      var _context, _context2, _context3;
-      var rgb = colorVal.rgb;
-      var r = rgb.r,
-        b = rgb.b,
-        g = rgb.g,
-        a = rgb.a;
-      setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
-    }
-  }, []);
-  var header = ___EmotionJSX(Box, {
-    sx: sx.header
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.header.infoAndButtonsContainer
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.header.pingOneAuthorizeContainer
-  }, ___EmotionJSX(Avatar, {
-    src: pingImg,
-    sx: {
-      width: '40px',
-      height: '40px'
-    }
-  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "bodyStrong",
-    fontSize: "md"
-  }, "PingOne Authorize"), ___EmotionJSX(Text, {
-    variant: "subtitle",
-    fontSize: "sm"
-  }, "ID: kcdhaweyf2d"), ___EmotionJSX(Text, {
-    variant: "subtitle",
-    fontSize: "sm"
-  }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "settings-icon",
-    size: 20
-  }, ___EmotionJSX(CogIcon, null)), ___EmotionJSX(IconButton, {
-    "aria-label": "expand-icon",
-    size: 20,
-    onPress: function onPress() {
-      return setIsExpanded(!isExpanded);
-    }
-  }, isExpanded ? ___EmotionJSX(ArrowCollapse, null) : ___EmotionJSX(ArrowTopRightBottomLeft, null)), ___EmotionJSX(IconButton, {
-    "aria-label": "close-icon",
-    size: 20,
-    onPress: onCloseHandler
-  }, ___EmotionJSX(CloseIcon, null)))), ___EmotionJSX(Box, {
-    sx: sx.header.breadcrumbsContainer
-  }, ___EmotionJSX(Breadcrumbs, {
-    icon: ChevronRightIcon
-  }, ___EmotionJSX(Item, {
-    key: "home",
-    "data-id": "home"
-  }, "Capability"), ___EmotionJSX(Item, {
-    key: "editGroups",
-    variant: "neutralText",
-    "data-id": "editGroups"
-  }, "Make Decision Request"))));
-  var generalTabContent = ___EmotionJSX(Box, {
-    sx: sx.tabContent
-  }, ___EmotionJSX(TextField, {
-    label: "Node Title",
-    defaultValue: "The Value of the Text Input"
-  }), ___EmotionJSX(TextField, {
-    label: "Node Description",
-    defaultValue: "The Value of the Text Input"
-  }), ___EmotionJSX(ColorField, {
-    value: color,
-    label: "Node Background Color",
-    buttonProps: {
-      sx: sx.colorField
-    },
-    onChange: handleColorChange
-  }), ___EmotionJSX(SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Authentication Token",
-    value: "expire-authentication-token"
-  }), ___EmotionJSX(SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Flow Instance Cache",
-    value: "expire-flow-instance-cache"
-  }), ___EmotionJSX(MultivaluesField, {
-    items: multivaluesFieldItems,
-    label: "Expire Node Instance Cache List",
-    inputProps: {
-      hintText: 'Example Hint'
-    }
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-  var settingsTabContent = ___EmotionJSX(Box, {
-    sx: sx.tabContent
-  }, ___EmotionJSX(SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Authentication Token",
-    value: "expire-authentication-token"
-  }), ___EmotionJSX(SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Flow Instance Cache",
-    value: "expire-flow-instance-cache"
-  }), ___EmotionJSX(SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Node Instance Cache",
-    value: "expire-node-instance-cache"
-  }));
-  var schemaTabContent = ___EmotionJSX(Box, {
-    sx: sx.tabContent
-  }, ___EmotionJSX(TextField, {
-    hintText: "Example Hint",
-    label: "Log field Title",
-    defaultValue: "The Value of the Text Input"
-  }), ___EmotionJSX(TextField, {
-    hintText: "Example Hint",
-    label: "Log field Description",
-    defaultValue: "The Value of the Text Input"
-  }));
-  var footer = ___EmotionJSX(ButtonBar, {
-    sx: {
-      backgroundColor: 'background.base'
-    }
-  }, ___EmotionJSX(Button, {
-    onPress: onCloseHandler,
-    variant: "primary"
-  }, "Save"), ___EmotionJSX(Button, {
-    onPress: onCloseHandler,
-    variant: "link"
-  }, "Cancel"));
   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, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
       ref: triggerRef,
       onPress: state.open,
-      "aria-expanded": state.isOpen
+      "aria-expanded": state.isOpen,
+      sx: {
+        maxWidth: 'fit-content'
+      }
     }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
       isTransitioning: state.isTransitioning,
       isOpen: state.isOpen,
@@ -351,40 +136,39 @@ export var Expandable = function Expandable() {
       triggerRef: triggerRef,
       sx: sx.overlayPanel,
       size: isExpanded ? 'full' : 'medium'
-    }, header, ___EmotionJSX(Box, {
-      sx: sx.contentContainer
-    }, ___EmotionJSX(Tabs, {
-      tabListProps: sx.tabs,
-      tabPanelProps: sx.tabPanel
-    }, ___EmotionJSX(Tab, {
-      key: "tab1",
-      title: "General"
-    }, generalTabContent), ___EmotionJSX(Tab, {
-      key: "tab2",
-      title: "Settings"
-    }, settingsTabContent), ___EmotionJSX(Tab, {
-      key: "tab3",
-      title: "Schema"
-    }, schemaTabContent))), footer))
+    }, ___EmotionJSX(PanelHeader, {
+      data: {
+        icon: AccountIcon,
+        text: 'Fons Vernall',
+        subtext: 'rad_developer@pingidentity.com'
+      }
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "expand-icon",
+      size: 20,
+      onPress: function onPress() {
+        return setIsExpanded(!isExpanded);
+      }
+    }, isExpanded ? ___EmotionJSX(ArrowCollapse, null) : ___EmotionJSX(ArrowTopRightBottomLeft, null)), ___EmotionJSX(PanelHeaderCloseButton, {
+      onPress: function onPress() {
+        onCloseFunction();
+      }
+    })), ___EmotionJSX(Box, {
+      sx: {
+        p: 25
+      }
+    }, ___EmotionJSX(Text, null, "Children render here")))))
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  var _useOverlayPanelState3 = useOverlayPanelState(),
+    state = _useOverlayPanelState3.state,
+    onClose = _useOverlayPanelState3.onClose;
   var _useOverlayPanelState4 = useOverlayPanelState(),
-    state = _useOverlayPanelState4.state,
-    onClose = _useOverlayPanelState4.onClose;
-  var _useOverlayPanelState5 = useOverlayPanelState(),
-    innerState = _useOverlayPanelState5.state,
-    onCloseInner = _useOverlayPanelState5.onClose;
+    innerState = _useOverlayPanelState4.state,
+    onCloseInner = _useOverlayPanelState4.onClose;
   var outerTriggerRef = useRef(null);
   var innerTriggerRef = useRef(null);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    messagesOpen = _useState6[0],
-    setMessagesOpen = _useState6[1];
-  var toggleMessagesOpen = function toggleMessagesOpen() {
-    setMessagesOpen(!messagesOpen);
-  };
   var closeOuterPanel = function closeOuterPanel() {
     if (innerState.isOpen) {
       innerState.close();
@@ -403,18 +187,7 @@ export var InnerPanel = function InnerPanel(_ref2) {
     triggerRef: innerTriggerRef
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
     onPress: closeInnerPanel
-  }, "Close Inner Panel"), ___EmotionJSX(Text, {
-    pt: "md"
-  }, "Children render here.")));
-  var items = [{
-    key: 'Form 1',
-    id: 1,
-    name: 'Form 1'
-  }, {
-    key: 'Form 2',
-    id: 2,
-    name: 'Form 2'
-  }];
+  }, "Close Inner Panel")));
   var outer =
   // should have higher z-index applied
   (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
@@ -426,29 +199,22 @@ export var InnerPanel = function InnerPanel(_ref2) {
   }, args, {
     state: state,
     triggerRef: outerTriggerRef
-  }), ___EmotionJSX(Box, {
+  }), ___EmotionJSX(PanelHeader, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com'
+    }
+  }, ___EmotionJSX(PanelHeaderCloseButton, {
+    onPress: function onPress() {
+      closeOuterPanel();
+    }
+  })), ___EmotionJSX(Box, {
     sx: {
-      p: '12px'
+      p: '25px',
+      gap: '25px'
     }
-  }, ___EmotionJSX(Button, {
-    onPress: closeOuterPanel,
-    "aria-expanded": state.isOpen
-  }, "Close Panel"), ___EmotionJSX(Text, {
-    pt: "md",
-    mb: "24px"
-  }, "Children render here."), ___EmotionJSX(ListView, {
-    items: items
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.id
-    }, ___EmotionJSX(ListViewItem, {
-      data: {
-        text: item.name
-      }
-    }));
-  }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
-    onPress: toggleMessagesOpen
-  }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+  }, ___EmotionJSX(Text, null, "Children render here."), ___EmotionJSX(Button, {
     ref: innerTriggerRef,
     onPress: innerState.open,
     "aria-expanded": innerState.isOpen
@@ -456,18 +222,62 @@ export var InnerPanel = function InnerPanel(_ref2) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
       ref: outerTriggerRef,
       onPress: state.open,
-      "aria-expanded": state.isOpen
-    }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
+      "aria-expanded": state.isOpen,
       sx: {
-        zIndex: 11
-      },
-      onClose: toggleMessagesOpen
-    }, ___EmotionJSX(Item, {
-      key: "message2",
-      status: statuses.SUCCESS
-    }, "Z Index higher than inner pannel")))
+        maxWidth: 'fit-content'
+      }
+    }, "Open Panel"), outer))
+  );
+};
+export var Customization = function Customization() {
+  var _useOverlayPanelState5 = useOverlayPanelState(),
+    state = _useOverlayPanelState5.state,
+    onClose = _useOverlayPanelState5.onClose;
+  var triggerRef = useRef(null);
+  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(Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
+      ref: triggerRef,
+      onPress: state.open,
+      "aria-expanded": state.isOpen,
+      sx: {
+        maxWidth: 'fit-content'
+      }
+    }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
+      isTransitioning: state.isTransitioning,
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: {
+        width: '720px',
+        p: 0
+      }
+    }, ___EmotionJSX(PanelHeader, {
+      data: {
+        icon: AccountIcon,
+        text: 'Fons Vernall',
+        subtext: 'rad_developer@pingidentity.com'
+      }
+    }, ___EmotionJSX(PanelHeaderCloseButton, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
+    })), ___EmotionJSX(Box, {
+      sx: {
+        p: 25
+      }
+    }, ___EmotionJSX(Text, null, "Children render here.")))))
   );
 };

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

@@ -202,8 +202,8 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   },
-  panelHeaderSubtext: listViewItemSubtext,
-  panelHeaderText: listViewItemText,
+  panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
+  panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   sectionTitle: sectionTitle,
   subtitle: subtitle,
   tabLabel: tabLabel,