@pingux/astro 1.37.2 → 1.38.0-alpha.1

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

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.InnerPanel = exports.Default = exports.CustomWidth = void 0;
+exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -24,6 +24,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _collections = require("@react-stately/collections");
 
+var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightBottomLeftIcon"));
+
+var _ArrowCollapseIcon = _interopRequireDefault(require("mdi-react/ArrowCollapseIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _CogIcon = _interopRequireDefault(require("mdi-react/CogIcon"));
+
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+
 var _hooks = require("../../hooks");
 
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
@@ -32,6 +42,8 @@ var _index = require("../../index");
 
 var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
 
+var _images = require("../../utils/devUtils/constants/images");
+
 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); }
@@ -39,7 +51,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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: 'OverlayPanel',
+  title: 'Components/OverlayPanel',
   component: _OverlayPanel["default"],
   argTypes: {
     children: {
@@ -235,4 +247,262 @@ var CustomWidth = function CustomWidth() {
   );
 };
 
-exports.CustomWidth = CustomWidth;
+exports.CustomWidth = CustomWidth;
+
+var Expandable = function Expandable() {
+  var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
+      state = _useOverlayPanelState5.state,
+      onClose = _useOverlayPanelState5.onClose;
+
+  var triggerRef = (0, _react.useRef)();
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isExpanded = _useState4[0],
+      setIsExpanded = _useState4[1];
+
+  var sx = {
+    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': {
+        order: 2
+      }
+    },
+    colorField: {
+      width: '30px',
+      height: '20px'
+    },
+    tabContent: {
+      gap: 'md',
+      width: isExpanded ? '100%' : '400px',
+      transition: 'width 500ms'
+    },
+    footer: {
+      marginTop: 'auto',
+      padding: '15px 25px',
+      button: {
+        width: '65px',
+        height: '38px',
+        border: '0 !important'
+      }
+    }
+  };
+  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 header = (0, _react2.jsx)(_index.Box, {
+    sx: sx.header
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.header.infoAndButtonsContainer
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.header.pingOneAuthorizeContainer
+  }, (0, _react2.jsx)(_index.Avatar, {
+    src: _images.pingImg,
+    sx: {
+      width: '40px',
+      height: '40px'
+    }
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "bodyStrong",
+    fontSize: "md"
+  }, "PingOne Authorize"), (0, _react2.jsx)(_index.Text, {
+    variant: "subtitle",
+    fontSize: "sm"
+  }, "ID: kcdhaweyf2d"), (0, _react2.jsx)(_index.Text, {
+    variant: "subtitle",
+    fontSize: "sm"
+  }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "settings-icon",
+    size: 20
+  }, (0, _react2.jsx)(_CogIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "expand-icon",
+    size: 20,
+    onPress: function onPress() {
+      return setIsExpanded(!isExpanded);
+    }
+  }, isExpanded ? (0, _react2.jsx)(_ArrowCollapseIcon["default"], null) : (0, _react2.jsx)(_ArrowTopRightBottomLeftIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "close-icon",
+    size: 20,
+    onPress: onCloseHandler
+  }, (0, _react2.jsx)(_CloseIcon["default"], null)))), (0, _react2.jsx)(_index.Box, {
+    sx: sx.header.breadcrumbsContainer
+  }, (0, _react2.jsx)(_index.Breadcrumbs, {
+    icon: _ChevronRightIcon["default"]
+  }, (0, _react2.jsx)(_collections.Item, {
+    key: "home",
+    "data-id": "home"
+  }, "Capability"), (0, _react2.jsx)(_collections.Item, {
+    key: "editGroups",
+    variant: "neutralText",
+    "data-id": "editGroups"
+  }, "Make Decision Request"))));
+  var generalTabContent = (0, _react2.jsx)(_index.Box, {
+    sx: sx.tabContent
+  }, (0, _react2.jsx)(_index.TextField, {
+    label: "Node Title",
+    defaultValue: "The Value of the Text Input"
+  }), (0, _react2.jsx)(_index.TextField, {
+    label: "Node Description",
+    defaultValue: "The Value of the Text Input"
+  }), (0, _react2.jsx)(_index.ColorField, {
+    value: "#EACE91",
+    label: "Node Background Color",
+    buttonProps: {
+      sx: sx.colorField
+    }
+  }), (0, _react2.jsx)(_index.SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Authentication Token",
+    value: "expire-authentication-token"
+  }), (0, _react2.jsx)(_index.SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Flow Instance Cache",
+    value: "expire-flow-instance-cache"
+  }), (0, _react2.jsx)(_index.MultivaluesField, {
+    items: multivaluesFieldItems,
+    label: "Expire Node Instance Cache List",
+    inputProps: {
+      hintText: 'Example Hint'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+  var settingsTabContent = (0, _react2.jsx)(_index.Box, {
+    sx: sx.tabContent
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Authentication Token",
+    value: "expire-authentication-token"
+  }), (0, _react2.jsx)(_index.SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Flow Instance Cache",
+    value: "expire-flow-instance-cache"
+  }), (0, _react2.jsx)(_index.SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Node Instance Cache",
+    value: "expire-node-instance-cache"
+  }));
+  var schemaTabContent = (0, _react2.jsx)(_index.Box, {
+    sx: sx.tabContent
+  }, (0, _react2.jsx)(_index.TextField, {
+    hintText: "Example Hint",
+    label: "Log field Title",
+    defaultValue: "The Value of the Text Input"
+  }), (0, _react2.jsx)(_index.TextField, {
+    hintText: "Example Hint",
+    label: "Log field Description",
+    defaultValue: "The Value of the Text Input"
+  }));
+  var footer = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.footer
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: onCloseHandler,
+    sx: sx.footer.button,
+    variant: "primary"
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    onPress: onCloseHandler,
+    sx: sx.footer.button,
+    variant: "text"
+  }, "Cancel"));
+  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, {
+      ref: triggerRef,
+      onPress: state.open,
+      "aria-expanded": state.isOpen
+    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], {
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: sx.overlayPanel,
+      size: isExpanded ? 'full' : 'medium'
+    }, header, (0, _react2.jsx)(_index.Box, {
+      sx: sx.contentContainer
+    }, (0, _react2.jsx)(_index.Tabs, {
+      tabListProps: sx.tabs,
+      tabPanelProps: sx.tabPanel
+    }, (0, _react2.jsx)(_index.Tab, {
+      key: "tab1",
+      title: "General"
+    }, generalTabContent), (0, _react2.jsx)(_index.Tab, {
+      key: "tab2",
+      title: "Settings"
+    }, settingsTabContent), (0, _react2.jsx)(_index.Tab, {
+      key: "tab3",
+      title: "Schema"
+    }, schemaTabContent))), footer))
+  );
+};
+
+exports.Expandable = Expandable;

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

@@ -31,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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: 'PopoverMenu',
+  title: 'Components/PopoverMenu',
   component: _index.PopoverMenu,
   parameters: {
     docs: {

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

@@ -17,7 +17,7 @@ var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'RequirementsList',
+  title: 'Components/RequirementsList',
   component: _["default"],
   argTypes: {
     requirements: {

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

@@ -33,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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: 'RockerButtonGroup',
+  title: 'Components/RockerButtonGroup',
   component: _RockerButtonGroup["default"],
   parameters: {
     docs: {

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

@@ -21,7 +21,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'ScrollBox',
+  title: 'Components/ScrollBox',
   component: _ScrollBox["default"],
   argTypes: {
     maxHeight: {

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

@@ -21,7 +21,7 @@ var _Box = _interopRequireDefault(require("../Box/Box"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Separator',
+  title: 'Components/Separator',
   component: _Separator["default"]
 };
 exports["default"] = _default;

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

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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: 'Stepper',
+  title: 'Components/Stepper',
   component: _index.Stepper,
   args: {
     items: undefined,

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

@@ -33,7 +33,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Table',
+  title: 'Components/Table',
   component: _Table["default"]
 };
 exports["default"] = _default;

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

@@ -45,7 +45,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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: 'Tabs',
+  title: 'Components/Tabs',
   component: _Tabs["default"],
   argTypes: {
     isDisabled: {},

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

@@ -23,7 +23,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Text',
+  title: 'Components/Text',
   component: _index.Text,
   argTypes: {
     variant: {

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

@@ -25,7 +25,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'TooltipTrigger',
+  title: 'Components/TooltipTrigger',
   component: _index.TooltipTrigger
 };
 exports["default"] = _default;

package/lib/cjs/context/BadgeContext/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.BadgeContext = void 0;
+
+var _react = require("react");
+
+var defaultValue = 'inherit';
+var BadgeContext = /*#__PURE__*/(0, _react.createContext)(defaultValue);
+exports.BadgeContext = BadgeContext;

package/lib/cjs/{styles → docs/design}/ColorDocumentation.stories.js

@@ -12,14 +12,14 @@ exports["default"] = exports.Colors = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ColorDocumentation = require("./ColorDocumentation");
+var _ColorDocumentation = require("../../styles/ColorDocumentation");
 
-var _Box = _interopRequireDefault(require("../components/Box"));
+var _Box = _interopRequireDefault(require("../../components/Box"));
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Color Schema',
+  title: 'Docs/Design/Color Schema',
   component: _ColorDocumentation.ColorSchema
 };
 exports["default"] = _default;

package/lib/cjs/{styles → docs/design}/ContainerSizes.stories.js

@@ -14,12 +14,12 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = require("../index");
+var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Design/Container Sizes'
+  title: 'Docs/Design/Container Sizes'
 };
 exports["default"] = _default;
 var containerArray = [{

package/lib/cjs/{styles → docs/design}/Spacing.stories.js

@@ -18,16 +18,16 @@ var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Text = _interopRequireDefault(require("../components/Text"));
+var _Text = _interopRequireDefault(require("../../components/Text"));
 
-var _spacing = _interopRequireDefault(require("./spacing"));
+var _spacing = _interopRequireDefault(require("../../styles/spacing"));
 
-var _ = require("..");
+var _ = require("../..");
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Design/Spacing'
+  title: 'Docs/Design/Spacing'
 };
 exports["default"] = _default;
 var tableBodyStyles = {

package/lib/cjs/{styles → docs/design}/Typography.stories.js

@@ -18,16 +18,16 @@ var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Text = _interopRequireDefault(require("../components/Text"));
+var _Text = _interopRequireDefault(require("../../components/Text"));
 
-var _ = require("..");
+var _ = require("../..");
 
-var _text = require("./text");
+var _text = require("../../styles/text");
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Design/Typography'
+  title: 'Docs/Design/Typography'
 };
 exports["default"] = _default;
 var tableBodyStyles = {

package/lib/cjs/{styles → docs/theme}/ThemeDocumentation.js

@@ -14,7 +14,7 @@ var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-
 
 var _react = _interopRequireDefault(require("react"));
 
-var _theme = _interopRequireDefault(require("./theme"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
 
 var _react2 = require("@emotion/react");
 

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71;
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
@@ -28,6 +28,7 @@ var _exportNames = {
   AccordionGridItem: true,
   ArrayField: true,
   Avatar: true,
+  Badge: true,
   Box: true,
   Bracket: true,
   Breadcrumbs: true,
@@ -93,6 +94,7 @@ var _exportNames = {
   TableCell: true,
   TableHead: true,
   TableRow: true,
+  TableCaption: true,
   Tabs: true,
   Text: true,
   TextField: true,
@@ -163,6 +165,13 @@ _Object$defineProperty(exports, "Avatar", {
   }
 });
 
+_Object$defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _Badge["default"];
+  }
+});
+
 _Object$defineProperty(exports, "Box", {
   enumerable: true,
   get: function get() {
@@ -660,6 +669,13 @@ _Object$defineProperty(exports, "TableBody", {
   }
 });
 
+_Object$defineProperty(exports, "TableCaption", {
+  enumerable: true,
+  get: function get() {
+    return _TableCaption["default"];
+  }
+});
+
 _Object$defineProperty(exports, "TableCell", {
   enumerable: true,
   get: function get() {
@@ -856,6 +872,8 @@ _forEachInstanceProperty(_context7 = _Object$keys(_Avatar)).call(_context7, func
   });
 });
 
+var _Badge = _interopRequireDefault(require("./components/Chip/Badge"));
+
 var _Box = _interopRequireWildcard(require("./components/Box"));
 
 _forEachInstanceProperty(_context8 = _Object$keys(_Box)).call(_context8, function (key) {
@@ -1714,9 +1732,24 @@ _forEachInstanceProperty(_context63 = _Object$keys(_TableRow)).call(_context63,
   });
 });
 
+var _TableCaption = _interopRequireWildcard(require("./components/TableCaption"));
+
+_forEachInstanceProperty(_context64 = _Object$keys(_TableCaption)).call(_context64, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TableCaption[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TableCaption[key];
+    }
+  });
+});
+
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
 
-_forEachInstanceProperty(_context64 = _Object$keys(_Tabs)).call(_context64, function (key) {
+_forEachInstanceProperty(_context65 = _Object$keys(_Tabs)).call(_context65, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tabs[key]) return;
@@ -1731,7 +1764,7 @@ _forEachInstanceProperty(_context64 = _Object$keys(_Tabs)).call(_context64, func
 
 var _Text = _interopRequireWildcard(require("./components/Text"));
 
-_forEachInstanceProperty(_context65 = _Object$keys(_Text)).call(_context65, function (key) {
+_forEachInstanceProperty(_context66 = _Object$keys(_Text)).call(_context66, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Text[key]) return;
@@ -1746,7 +1779,7 @@ _forEachInstanceProperty(_context65 = _Object$keys(_Text)).call(_context65, func
 
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
 
-_forEachInstanceProperty(_context66 = _Object$keys(_TextField)).call(_context66, function (key) {
+_forEachInstanceProperty(_context67 = _Object$keys(_TextField)).call(_context67, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextField[key]) return;
@@ -1761,7 +1794,7 @@ _forEachInstanceProperty(_context66 = _Object$keys(_TextField)).call(_context66,
 
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
 
-_forEachInstanceProperty(_context67 = _Object$keys(_TextArea)).call(_context67, function (key) {
+_forEachInstanceProperty(_context68 = _Object$keys(_TextArea)).call(_context68, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextArea[key]) return;
@@ -1776,7 +1809,7 @@ _forEachInstanceProperty(_context67 = _Object$keys(_TextArea)).call(_context67,
 
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
 
-_forEachInstanceProperty(_context68 = _Object$keys(_TextAreaField)).call(_context68, function (key) {
+_forEachInstanceProperty(_context69 = _Object$keys(_TextAreaField)).call(_context69, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextAreaField[key]) return;
@@ -1793,7 +1826,7 @@ var _TimeZonePicker = _interopRequireDefault(require("./components/TimeZonePicke
 
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
 
-_forEachInstanceProperty(_context69 = _Object$keys(_TooltipTrigger)).call(_context69, function (key) {
+_forEachInstanceProperty(_context70 = _Object$keys(_TooltipTrigger)).call(_context70, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TooltipTrigger[key]) return;
@@ -1814,7 +1847,7 @@ var _overlays2 = require("@react-stately/overlays");
 
 var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
 
-_forEachInstanceProperty(_context70 = _Object$keys(_DataTable)).call(_context70, function (key) {
+_forEachInstanceProperty(_context71 = _Object$keys(_DataTable)).call(_context71, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataTable[key]) return;

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -343,7 +343,8 @@ var Default = function Default() {
     isOpen: panelState.isOpen,
     state: panelState,
     triggerRef: panelTriggerRef,
-    p: 0
+    p: 0,
+    size: "large"
   }, panelState.isOpen && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_focus.FocusScope, {
     contain: true,
     restoreFocus: true,