@pingux/astro 2.27.0-alpha.0 → 2.27.0-alpha.2

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

@@ -42,14 +42,6 @@ var baseBadge = {
   }
 };
 exports.baseBadge = baseBadge;
-var defaultBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: 'white !important',
-  border: 'solid 1px',
-  borderColor: 'neutral.80',
-  '& span': {
-    color: 'text.primary'
-  }
-});
 var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -196,25 +188,24 @@ var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 var _default = {
-  activeStatusBadge: activeStatusBadge,
-  badgeDeleteButton: badgeDeleteButton,
   baseBadge: baseBadge,
-  convenienceDefault: convenienceDefault,
-  countBadge: countBadge,
-  countNeutral: countNeutral,
-  criticalStatusBadge: criticalStatusBadge,
-  defaultBadge: defaultBadge,
-  deleteButton: deleteButton,
   environmentBadge: environmentBadge,
-  errorCalloutBadge: errorCalloutBadge,
-  healthyStatusBadge: healthyStatusBadge,
-  infoCalloutBadge: infoCalloutBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
   selectedItemBadge: selectedItemBadge,
-  successCalloutBadge: successCalloutBadge,
+  deleteButton: deleteButton,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  badgeDeleteButton: badgeDeleteButton,
+  convenienceDefault: convenienceDefault,
+  errorCalloutBadge: errorCalloutBadge,
   warningCalloutBadge: warningCalloutBadge,
-  warningStatusBadge: warningStatusBadge
+  successCalloutBadge: successCalloutBadge,
+  infoCalloutBadge: infoCalloutBadge,
+  criticalStatusBadge: criticalStatusBadge,
+  warningStatusBadge: warningStatusBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  activeStatusBadge: activeStatusBadge
 };
 exports["default"] = _default;

package/lib/cjs/index.d.ts

@@ -65,7 +65,6 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
-export { NoticeIcon } from './components/Icon/NoticeIcon';
 export { default as IconBadge } from './components/IconBadge';
 export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';

package/lib/cjs/index.js

@@ -54,7 +54,6 @@ var _exportNames = {
   FileInputField: true,
   HelpHint: true,
   Icon: true,
-  NoticeIcon: true,
   IconBadge: true,
   IconButton: true,
   IconButtonToggle: true,
@@ -551,12 +550,6 @@ _Object$defineProperty(exports, "NavBarSection", {
     return _NavBarSection["default"];
   }
 });
-_Object$defineProperty(exports, "NoticeIcon", {
-  enumerable: true,
-  get: function get() {
-    return _NoticeIcon.NoticeIcon;
-  }
-});
 _Object$defineProperty(exports, "NumberField", {
   enumerable: true,
   get: function get() {
@@ -1154,7 +1147,6 @@ _forEachInstanceProperty(_context25 = _Object$keys(_Icon)).call(_context25, func
     }
   });
 });
-var _NoticeIcon = require("./components/Icon/NoticeIcon");
 var _IconBadge = _interopRequireWildcard(require("./components/IconBadge"));
 _forEachInstanceProperty(_context26 = _Object$keys(_IconBadge)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/Badge/Badge.styles.js

@@ -34,14 +34,6 @@ export var baseBadge = {
     }
   }
 };
-var defaultBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: 'white !important',
-  border: 'solid 1px',
-  borderColor: 'neutral.80',
-  '& span': {
-    color: 'text.primary'
-  }
-});
 var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -186,24 +178,23 @@ var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 export default {
-  activeStatusBadge: activeStatusBadge,
-  badgeDeleteButton: badgeDeleteButton,
   baseBadge: baseBadge,
-  convenienceDefault: convenienceDefault,
-  countBadge: countBadge,
-  countNeutral: countNeutral,
-  criticalStatusBadge: criticalStatusBadge,
-  defaultBadge: defaultBadge,
-  deleteButton: deleteButton,
   environmentBadge: environmentBadge,
-  errorCalloutBadge: errorCalloutBadge,
-  healthyStatusBadge: healthyStatusBadge,
-  infoCalloutBadge: infoCalloutBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
   selectedItemBadge: selectedItemBadge,
-  successCalloutBadge: successCalloutBadge,
+  deleteButton: deleteButton,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  badgeDeleteButton: badgeDeleteButton,
+  convenienceDefault: convenienceDefault,
+  errorCalloutBadge: errorCalloutBadge,
   warningCalloutBadge: warningCalloutBadge,
-  warningStatusBadge: warningStatusBadge
+  successCalloutBadge: successCalloutBadge,
+  infoCalloutBadge: infoCalloutBadge,
+  criticalStatusBadge: criticalStatusBadge,
+  warningStatusBadge: warningStatusBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  activeStatusBadge: activeStatusBadge
 };

package/lib/index.js

@@ -69,7 +69,6 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
-export { NoticeIcon } from './components/Icon/NoticeIcon';
 export { default as IconBadge } from './components/IconBadge';
 export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';
@@ -186,6 +185,4 @@ export * from './components/DataTable';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
-export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
-
-// Experimental
+export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';

package/package.json

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

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

@@ -1,441 +0,0 @@
-"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.LabelValuePairs = exports.EditPanel = exports.DisplayPanel = exports.ColorBlockButton = exports.AddAttributeButton = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
-var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
-var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
-var _hooks = require("../hooks");
-var _index = require("../index");
-var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
-var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
-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: 'Experimental/PanelContent',
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var colorBlockButtons = [{
-  text: 'Groups',
-  subtext: '21',
-  isConfigured: true
-}, {
-  text: 'Population',
-  subtext: 'Denver',
-  isConfigured: true
-}, {
-  text: 'MFA',
-  subtext: 'Enabled',
-  isConfigured: true
-}, {
-  text: 'Roles',
-  subtext: '0'
-}];
-var data = {
-  contactInfo: {
-    label: 'Contact Info',
-    key: 'contactInfoKey',
-    fields: [{
-      label: 'Email',
-      value: 'ednepomuceno@pingidentity.com',
-      isVerified: true
-    }, {
-      label: 'Primary',
-      value: '+1 767-777-3333'
-    }, {
-      label: 'Address',
-      value: '1234 W California St, Denver CO 80101'
-    }]
-  },
-  personalInfo: {
-    label: 'Personal Info',
-    key: 'personalInfoKey',
-    image: _UserImage["default"],
-    fields: [{
-      label: 'Given Name',
-      value: 'Ed'
-    }, {
-      label: 'Famile Name',
-      value: 'Nepomuceno'
-    }]
-  },
-  companyInfo: {
-    label: 'Company Info',
-    key: 'companyInfoKey',
-    fields: [{
-      label: 'Tile',
-      value: 'Interaction Designer'
-    }]
-  },
-  customAttributes: {
-    label: 'Custom Attributes',
-    key: 'customAttributesKey',
-    fields: [{
-      label: 'T-Shirt Size',
-      value: 'Large'
-    }, {
-      label: 'Example Multi-Value Attribute',
-      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
-    }]
-  },
-  jsonAttributes: {
-    label: 'JSON Attributes',
-    key: 'jsonAttributesKey',
-    badges: ['Address', 'Contact', 'Another Json'],
-    fields: []
-  }
-};
-var OverlayWrapper = function OverlayWrapper(_ref) {
-  var children = _ref.children;
-  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
-      isDefaultOpen: true
-    }),
-    state = _useOverlayPanelState.state,
-    onClose = _useOverlayPanelState.onClose;
-  var triggerRef = (0, _react.useRef)();
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    ref: triggerRef,
-    onPress: state.open
-  }, "Open Panel"), (0, _react2.jsx)(_index.OverlayPanel, {
-    isOpen: state.isOpen,
-    isTransitioning: state.isTransitioning,
-    size: "large",
-    p: "0"
-  }, (0, _react2.jsx)(_index.PanelHeader, {
-    data: {
-      image: {
-        src: _UserImage["default"],
-        alt: 'user image'
-      },
-      text: data.personalInfo.fields[0].value,
-      subtext: data.personalInfo.fields[1].value
-    }
-  }, (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
-    onPress: onClose
-  })), children));
-};
-var DisplayPanel = function DisplayPanel() {
-  var _context, _context2;
-  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
-    p: "lg",
-    pt: "xs"
-  }, (0, _react2.jsx)(_index.Tabs, {
-    tabListProps: {
-      justifyContent: 'center',
-      mb: 'lg'
-    }
-  }, (0, _react2.jsx)(_index.Tab, {
-    title: "Profile"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "20px"
-  }, (0, _map["default"])(colorBlockButtons).call(colorBlockButtons, function (tileData) {
-    return (0, _react2.jsx)(ColorBlockButton, {
-      buttonData: tileData,
-      key: "".concat(tileData.text, "-key")
-    });
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _map["default"])(_context = (0, _keys["default"])(data)).call(_context, function (item) {
-      return data[item].key;
-    }),
-    labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context2 = (0, _keys["default"])(data)).call(_context2, function (item) {
-    var _context3;
-    return (0, _react2.jsx)(_reactStately.Item, {
-      "data-id": data[item].label,
-      key: data[item].key,
-      label: data[item].label,
-      textValue: data[item].label
-    }, data[item].image ? (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      gap: "md"
-    }, (0, _react2.jsx)(_index.Image, {
-      src: _UserImage["default"],
-      alt: "user"
-    }), (0, _react2.jsx)(LabelValuePairs, {
-      fields: data[item].fields
-    })) : (0, _react2.jsx)(LabelValuePairs, {
-      fields: data[item].fields
-    }), data[item].badges && (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      gap: "sm"
-    }, (0, _map["default"])(_context3 = data[item].badges).call(_context3, function (badge) {
-      return (0, _react2.jsx)(_index.Badge, {
-        label: badge,
-        variant: "defaultBadge",
-        key: "".concat(badge, "-key")
-      });
-    })));
-  })), (0, _react2.jsx)(_index.EditButton, {
-    size: "lg"
-  }))), (0, _react2.jsx)(_index.Tab, {
-    title: "Groups"
-  }, "Groups"), (0, _react2.jsx)(_index.Tab, {
-    title: "Roles"
-  }, "Roles"), (0, _react2.jsx)(_index.Tab, {
-    title: "Services"
-  }, "Services"), (0, _react2.jsx)(_index.Tab, {
-    title: "API"
-  }, "API"))));
-};
-exports.DisplayPanel = DisplayPanel;
-var ColorBlockButton = function ColorBlockButton(_ref2) {
-  var _ref2$buttonData = _ref2.buttonData,
-    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "colorBlock",
-    className: buttonData.isConfigured ? 'is-configured' : ''
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    variant: "buttonTitle"
-  }, buttonData.text), (0, _react2.jsx)(_index.Text, {
-    variant: "buttonSubtitle"
-  }, buttonData.subtext)), (0, _react2.jsx)(_index.Icon, {
-    icon: _PencilIcon["default"],
-    title: {
-      name: 'Create Icon'
-    }
-  }));
-};
-exports.ColorBlockButton = ColorBlockButton;
-var LabelValuePairs = function LabelValuePairs(_ref3) {
-  var _ref3$fields = _ref3.fields,
-    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
-  return (0, _react2.jsx)(_index.Box, {
-    gap: "md"
-  }, (0, _map["default"])(fields).call(fields, function (_ref4) {
-    var label = _ref4.label,
-      value = _ref4.value,
-      isVerified = _ref4.isVerified;
-    return (0, _react2.jsx)(_index.Box, {
-      gap: "xs",
-      key: "".concat(label, "-key")
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "h4"
-    }, label), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      gap: "md"
-    }, (0, _react2.jsx)(_index.Text, null, value), isVerified && (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      gap: "xs"
-    }, (0, _react2.jsx)(_index.NoticeIcon, {
-      color: "success.dark",
-      status: _statuses["default"].SUCCESS,
-      "aria-label": "".concat(_statuses["default"].SUCCESS, "-icon"),
-      size: "xs"
-    }), (0, _react2.jsx)(_index.Text, {
-      variant: "listSubtitle",
-      color: "success.dark"
-    }, "Verified"))));
-  }));
-};
-exports.LabelValuePairs = LabelValuePairs;
-var editData = {
-  personalInfo: {
-    label: 'Personal Info',
-    key: 'personalInfoKey',
-    image: _UserImage["default"],
-    fields: [{
-      label: 'Prefix',
-      value: ''
-    }, {
-      label: 'Given Name',
-      value: 'Ed'
-    }, {
-      label: 'Middle Name',
-      value: ''
-    }, {
-      label: 'Family Name',
-      value: 'Nepomuceno'
-    }, {
-      label: 'Suffix',
-      value: ''
-    }, {
-      label: 'Formatted',
-      value: ''
-    }, {
-      label: 'Nickname',
-      value: ''
-    }]
-  },
-  contactInfo: {
-    label: 'Contact Info',
-    key: 'contactInfoKey',
-    fields: [{
-      label: 'Email',
-      value: 'ednepomuceno@pingidentity.com',
-      slot: (0, _react2.jsx)(_index.CheckboxField, {
-        mt: "xs",
-        label: "Require Email to be Verified"
-      })
-    }, {
-      label: 'Phone Number',
-      value: '123-456-7890'
-    }, {
-      label: 'Street Address',
-      value: '123 Example St'
-    }, {
-      label: 'Country Code',
-      value: ''
-    }, {
-      label: 'Loality',
-      value: ''
-    }, {
-      label: 'Region',
-      value: ''
-    }, {
-      label: 'Zip Code',
-      value: '12345'
-    }]
-  },
-  companyInfo: {
-    label: 'Company Info',
-    key: 'companyInfoKey',
-    fields: [{
-      label: 'Account ID',
-      value: ''
-    }, {
-      label: 'Type',
-      value: ''
-    }, {
-      label: 'Title',
-      value: ''
-    }]
-  }
-};
-var EditPanel = function EditPanel() {
-  var _context4, _context5, _context6;
-  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
-    p: "lg",
-    pb: "0"
-  }, (0, _react2.jsx)(_index.Box, {
-    gap: "md",
-    mb: "20px",
-    width: "500px"
-  }, (0, _react2.jsx)(_index.TextField, {
-    defaultValue: "ednepomuceno",
-    isRequired: true,
-    label: "Username"
-  }), (0, _react2.jsx)(_index.SelectField, {
-    label: "Population",
-    isRequired: true,
-    defaultSelectedKey: "population"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "population"
-  }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _concat["default"])(_context4 = []).call(_context4, (0, _map["default"])(_context5 = (0, _keys["default"])(editData)).call(_context5, function (item) {
-      return editData[item].key;
-    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
-    labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context6 = (0, _keys["default"])(editData)).call(_context6, function (item) {
-    var _context7;
-    return (0, _react2.jsx)(_reactStately.Item, {
-      "data-id": editData[item].label,
-      key: editData[item].key,
-      label: editData[item].label,
-      textValue: editData[item].label
-    }, (0, _react2.jsx)(_index.Box, {
-      gap: "md",
-      width: "500px"
-    }, editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
-      label: "Photo",
-      previewHeight: 40,
-      previewWidth: 40,
-      previewImage: _UserImage["default"]
-    }), (0, _map["default"])(_context7 = editData[item].fields).call(_context7, function (_ref5) {
-      var label = _ref5.label,
-        value = _ref5.value,
-        slot = _ref5.slot;
-      return (0, _react2.jsx)(_index.Box, {
-        key: "".concat(label, "-key")
-      }, (0, _react2.jsx)(_index.TextField, {
-        label: label,
-        defaultValue: value
-      }), slot);
-    })));
-  }), (0, _react2.jsx)(_reactStately.Item, {
-    "data-id": "preferences",
-    key: "preferencesKey",
-    label: "Preferences",
-    textValue: "Preferences"
-  }, (0, _react2.jsx)(_index.Box, {
-    gap: "md",
-    width: "500px"
-  }, (0, _react2.jsx)(_index.SelectField, {
-    label: "Preferred Language",
-    defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "language"
-  }, "Select a Language")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Locale",
-    defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "language"
-  }, "Select a locale")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Timezone",
-    defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "language"
-  }, "Select a timezone")))), (0, _react2.jsx)(_reactStately.Item, {
-    "data-id": "customAttributes",
-    key: "customAttributesKey",
-    label: "Custom Attributes",
-    textValue: "Custom Attributes"
-  }, (0, _react2.jsx)(AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
-    fontWeight: "-1",
-    fontSize: "md",
-    textAlign: "center"
-  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_reactStately.Item, {
-    "data-id": "jsonAttributes",
-    key: "jsonAttributesKey",
-    label: "JSON Attributes",
-    textValue: "JSON Attributes"
-  }, (0, _react2.jsx)(AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
-    fontWeight: "-1",
-    fontSize: "md",
-    textAlign: "center"
-  }, "Click + Add to select a JSON attribute")))), (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
-    variant: "primary"
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    variant: "link"
-  }, "Cancel")));
-};
-exports.EditPanel = EditPanel;
-var AddAttributeButton = function AddAttributeButton() {
-  return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      position: 'relative',
-      left: '700px',
-      top: '-35px',
-      width: 0,
-      height: 0
-    }
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "inlineWithIcon"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
-    size: "xs"
-  }), "Add"));
-};
-exports.AddAttributeButton = AddAttributeButton;

package/lib/recipes/PanelContent.stories.js

@@ -1,422 +0,0 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useRef } from 'react';
-import { Item } from 'react-stately';
-import PencilIcon from '@pingux/mdi-react/PencilIcon';
-import PlusIcon from '@pingux/mdi-react/PlusIcon';
-import { useOverlayPanelState } from '../hooks';
-import { AccordionGroup, Badge, Box, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
-import UserImage from '../utils/devUtils/assets/UserImage.png';
-import statuses from '../utils/devUtils/constants/statuses';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Experimental/PanelContent',
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  }
-};
-var colorBlockButtons = [{
-  text: 'Groups',
-  subtext: '21',
-  isConfigured: true
-}, {
-  text: 'Population',
-  subtext: 'Denver',
-  isConfigured: true
-}, {
-  text: 'MFA',
-  subtext: 'Enabled',
-  isConfigured: true
-}, {
-  text: 'Roles',
-  subtext: '0'
-}];
-var data = {
-  contactInfo: {
-    label: 'Contact Info',
-    key: 'contactInfoKey',
-    fields: [{
-      label: 'Email',
-      value: 'ednepomuceno@pingidentity.com',
-      isVerified: true
-    }, {
-      label: 'Primary',
-      value: '+1 767-777-3333'
-    }, {
-      label: 'Address',
-      value: '1234 W California St, Denver CO 80101'
-    }]
-  },
-  personalInfo: {
-    label: 'Personal Info',
-    key: 'personalInfoKey',
-    image: UserImage,
-    fields: [{
-      label: 'Given Name',
-      value: 'Ed'
-    }, {
-      label: 'Famile Name',
-      value: 'Nepomuceno'
-    }]
-  },
-  companyInfo: {
-    label: 'Company Info',
-    key: 'companyInfoKey',
-    fields: [{
-      label: 'Tile',
-      value: 'Interaction Designer'
-    }]
-  },
-  customAttributes: {
-    label: 'Custom Attributes',
-    key: 'customAttributesKey',
-    fields: [{
-      label: 'T-Shirt Size',
-      value: 'Large'
-    }, {
-      label: 'Example Multi-Value Attribute',
-      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
-    }]
-  },
-  jsonAttributes: {
-    label: 'JSON Attributes',
-    key: 'jsonAttributesKey',
-    badges: ['Address', 'Contact', 'Another Json'],
-    fields: []
-  }
-};
-var OverlayWrapper = function OverlayWrapper(_ref) {
-  var children = _ref.children;
-  var _useOverlayPanelState = useOverlayPanelState({
-      isDefaultOpen: true
-    }),
-    state = _useOverlayPanelState.state,
-    onClose = _useOverlayPanelState.onClose;
-  var triggerRef = useRef();
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-    ref: triggerRef,
-    onPress: state.open
-  }, "Open Panel"), ___EmotionJSX(OverlayPanel, {
-    isOpen: state.isOpen,
-    isTransitioning: state.isTransitioning,
-    size: "large",
-    p: "0"
-  }, ___EmotionJSX(PanelHeader, {
-    data: {
-      image: {
-        src: UserImage,
-        alt: 'user image'
-      },
-      text: data.personalInfo.fields[0].value,
-      subtext: data.personalInfo.fields[1].value
-    }
-  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null), ___EmotionJSX(PanelHeaderCloseButton, {
-    onPress: onClose
-  })), children));
-};
-export var DisplayPanel = function DisplayPanel() {
-  var _context, _context2;
-  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
-    p: "lg",
-    pt: "xs"
-  }, ___EmotionJSX(Tabs, {
-    tabListProps: {
-      justifyContent: 'center',
-      mb: 'lg'
-    }
-  }, ___EmotionJSX(Tab, {
-    title: "Profile"
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    mb: "20px"
-  }, _mapInstanceProperty(colorBlockButtons).call(colorBlockButtons, function (tileData) {
-    return ___EmotionJSX(ColorBlockButton, {
-      buttonData: tileData,
-      key: "".concat(tileData.text, "-key")
-    });
-  })), ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _mapInstanceProperty(_context = _Object$keys(data)).call(_context, function (item) {
-      return data[item].key;
-    }),
-    labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context2 = _Object$keys(data)).call(_context2, function (item) {
-    var _context3;
-    return ___EmotionJSX(Item, {
-      "data-id": data[item].label,
-      key: data[item].key,
-      label: data[item].label,
-      textValue: data[item].label
-    }, data[item].image ? ___EmotionJSX(Box, {
-      isRow: true,
-      gap: "md"
-    }, ___EmotionJSX(Image, {
-      src: UserImage,
-      alt: "user"
-    }), ___EmotionJSX(LabelValuePairs, {
-      fields: data[item].fields
-    })) : ___EmotionJSX(LabelValuePairs, {
-      fields: data[item].fields
-    }), data[item].badges && ___EmotionJSX(Box, {
-      isRow: true,
-      gap: "sm"
-    }, _mapInstanceProperty(_context3 = data[item].badges).call(_context3, function (badge) {
-      return ___EmotionJSX(Badge, {
-        label: badge,
-        variant: "defaultBadge",
-        key: "".concat(badge, "-key")
-      });
-    })));
-  })), ___EmotionJSX(EditButton, {
-    size: "lg"
-  }))), ___EmotionJSX(Tab, {
-    title: "Groups"
-  }, "Groups"), ___EmotionJSX(Tab, {
-    title: "Roles"
-  }, "Roles"), ___EmotionJSX(Tab, {
-    title: "Services"
-  }, "Services"), ___EmotionJSX(Tab, {
-    title: "API"
-  }, "API"))));
-};
-export var ColorBlockButton = function ColorBlockButton(_ref2) {
-  var _ref2$buttonData = _ref2.buttonData,
-    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
-  return ___EmotionJSX(Button, {
-    variant: "colorBlock",
-    className: buttonData.isConfigured ? 'is-configured' : ''
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "buttonTitle"
-  }, buttonData.text), ___EmotionJSX(Text, {
-    variant: "buttonSubtitle"
-  }, buttonData.subtext)), ___EmotionJSX(Icon, {
-    icon: PencilIcon,
-    title: {
-      name: 'Create Icon'
-    }
-  }));
-};
-export var LabelValuePairs = function LabelValuePairs(_ref3) {
-  var _ref3$fields = _ref3.fields,
-    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
-  return ___EmotionJSX(Box, {
-    gap: "md"
-  }, _mapInstanceProperty(fields).call(fields, function (_ref4) {
-    var label = _ref4.label,
-      value = _ref4.value,
-      isVerified = _ref4.isVerified;
-    return ___EmotionJSX(Box, {
-      gap: "xs",
-      key: "".concat(label, "-key")
-    }, ___EmotionJSX(Text, {
-      variant: "h4"
-    }, label), ___EmotionJSX(Box, {
-      isRow: true,
-      gap: "md"
-    }, ___EmotionJSX(Text, null, value), isVerified && ___EmotionJSX(Box, {
-      isRow: true,
-      gap: "xs"
-    }, ___EmotionJSX(NoticeIcon, {
-      color: "success.dark",
-      status: statuses.SUCCESS,
-      "aria-label": "".concat(statuses.SUCCESS, "-icon"),
-      size: "xs"
-    }), ___EmotionJSX(Text, {
-      variant: "listSubtitle",
-      color: "success.dark"
-    }, "Verified"))));
-  }));
-};
-var editData = {
-  personalInfo: {
-    label: 'Personal Info',
-    key: 'personalInfoKey',
-    image: UserImage,
-    fields: [{
-      label: 'Prefix',
-      value: ''
-    }, {
-      label: 'Given Name',
-      value: 'Ed'
-    }, {
-      label: 'Middle Name',
-      value: ''
-    }, {
-      label: 'Family Name',
-      value: 'Nepomuceno'
-    }, {
-      label: 'Suffix',
-      value: ''
-    }, {
-      label: 'Formatted',
-      value: ''
-    }, {
-      label: 'Nickname',
-      value: ''
-    }]
-  },
-  contactInfo: {
-    label: 'Contact Info',
-    key: 'contactInfoKey',
-    fields: [{
-      label: 'Email',
-      value: 'ednepomuceno@pingidentity.com',
-      slot: ___EmotionJSX(CheckboxField, {
-        mt: "xs",
-        label: "Require Email to be Verified"
-      })
-    }, {
-      label: 'Phone Number',
-      value: '123-456-7890'
-    }, {
-      label: 'Street Address',
-      value: '123 Example St'
-    }, {
-      label: 'Country Code',
-      value: ''
-    }, {
-      label: 'Loality',
-      value: ''
-    }, {
-      label: 'Region',
-      value: ''
-    }, {
-      label: 'Zip Code',
-      value: '12345'
-    }]
-  },
-  companyInfo: {
-    label: 'Company Info',
-    key: 'companyInfoKey',
-    fields: [{
-      label: 'Account ID',
-      value: ''
-    }, {
-      label: 'Type',
-      value: ''
-    }, {
-      label: 'Title',
-      value: ''
-    }]
-  }
-};
-export var EditPanel = function EditPanel() {
-  var _context4, _context5, _context6;
-  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
-    p: "lg",
-    pb: "0"
-  }, ___EmotionJSX(Box, {
-    gap: "md",
-    mb: "20px",
-    width: "500px"
-  }, ___EmotionJSX(TextField, {
-    defaultValue: "ednepomuceno",
-    isRequired: true,
-    label: "Username"
-  }), ___EmotionJSX(SelectField, {
-    label: "Population",
-    isRequired: true,
-    defaultSelectedKey: "population"
-  }, ___EmotionJSX(Item, {
-    key: "population"
-  }, "Denver"))), ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _concatInstanceProperty(_context4 = []).call(_context4, _mapInstanceProperty(_context5 = _Object$keys(editData)).call(_context5, function (item) {
-      return editData[item].key;
-    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
-    labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context6 = _Object$keys(editData)).call(_context6, function (item) {
-    var _context7;
-    return ___EmotionJSX(Item, {
-      "data-id": editData[item].label,
-      key: editData[item].key,
-      label: editData[item].label,
-      textValue: editData[item].label
-    }, ___EmotionJSX(Box, {
-      gap: "md",
-      width: "500px"
-    }, editData[item].image && ___EmotionJSX(ImageUploadField, {
-      label: "Photo",
-      previewHeight: 40,
-      previewWidth: 40,
-      previewImage: UserImage
-    }), _mapInstanceProperty(_context7 = editData[item].fields).call(_context7, function (_ref5) {
-      var label = _ref5.label,
-        value = _ref5.value,
-        slot = _ref5.slot;
-      return ___EmotionJSX(Box, {
-        key: "".concat(label, "-key")
-      }, ___EmotionJSX(TextField, {
-        label: label,
-        defaultValue: value
-      }), slot);
-    })));
-  }), ___EmotionJSX(Item, {
-    "data-id": "preferences",
-    key: "preferencesKey",
-    label: "Preferences",
-    textValue: "Preferences"
-  }, ___EmotionJSX(Box, {
-    gap: "md",
-    width: "500px"
-  }, ___EmotionJSX(SelectField, {
-    label: "Preferred Language",
-    defaultSelectedKey: "language"
-  }, ___EmotionJSX(Item, {
-    key: "language"
-  }, "Select a Language")), ___EmotionJSX(SelectField, {
-    label: "Locale",
-    defaultSelectedKey: "language"
-  }, ___EmotionJSX(Item, {
-    key: "language"
-  }, "Select a locale")), ___EmotionJSX(SelectField, {
-    label: "Timezone",
-    defaultSelectedKey: "language"
-  }, ___EmotionJSX(Item, {
-    key: "language"
-  }, "Select a timezone")))), ___EmotionJSX(Item, {
-    "data-id": "customAttributes",
-    key: "customAttributesKey",
-    label: "Custom Attributes",
-    textValue: "Custom Attributes"
-  }, ___EmotionJSX(AddAttributeButton, null), ___EmotionJSX(Text, {
-    fontWeight: "-1",
-    fontSize: "md",
-    textAlign: "center"
-  }, "Click + Add to select a custom attribute")), ___EmotionJSX(Item, {
-    "data-id": "jsonAttributes",
-    key: "jsonAttributesKey",
-    label: "JSON Attributes",
-    textValue: "JSON Attributes"
-  }, ___EmotionJSX(AddAttributeButton, null), ___EmotionJSX(Text, {
-    fontWeight: "-1",
-    fontSize: "md",
-    textAlign: "center"
-  }, "Click + Add to select a JSON attribute")))), ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
-    variant: "primary"
-  }, "Save"), ___EmotionJSX(Button, {
-    variant: "link"
-  }, "Cancel")));
-};
-export var AddAttributeButton = function AddAttributeButton() {
-  return ___EmotionJSX(Box, {
-    sx: {
-      position: 'relative',
-      left: '700px',
-      top: '-35px',
-      width: 0,
-      height: 0
-    }
-  }, ___EmotionJSX(Button, {
-    variant: "inlineWithIcon"
-  }, ___EmotionJSX(Icon, {
-    icon: PlusIcon,
-    size: "xs"
-  }), "Add"));
-};