@pingux/astro 2.91.0 → 2.92.0-alpha.0

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const DataTableNextGenComponent: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/DataTableNextGenComponent.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DataTableNextGenComponent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../../../index");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Next Gen Recipes/DataTable'
+};
+exports["default"] = _default;
+var getCellProps = function getCellProps(columnKey, align) {
+  return {
+    pr: columnKey !== 'menu' ? 'lg' : 12,
+    pl: columnKey === 'menu' ? 0 : 'lg',
+    hideHeader: columnKey === 'menu',
+    align: align
+  };
+};
+var DataTableNextGenComponent = function DataTableNextGenComponent() {
+  var date = '2023-05-03';
+  var time = '07:16:30 pm UTC';
+  var timestampCell = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, date), (0, _react2.jsx)(_index.Box, null, time));
+  var columns = [{
+    name: 'Timestamp',
+    key: 'timestamp'
+  }, {
+    name: 'Event Type',
+    key: 'eventType'
+  }, {
+    name: 'Description',
+    key: 'description'
+  }, {
+    name: 'Status',
+    key: 'status',
+    isSortable: true
+  }, {
+    name: 'User Identity',
+    key: 'userIdentity'
+  }, {
+    name: 'Menu',
+    key: 'menu'
+  }];
+  var rows = [{
+    id: 1,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    status: (0, _react2.jsx)(_index.Badge, {
+      label: "Approved",
+      variant: "success",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: (0, _react2.jsx)(_index.DataTableMenu, null)
+  }, {
+    id: 2,
+    timestamp: timestampCell,
+    eventType: 'User Access Denied',
+    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+      display: "block"
+    }, "Passed Role Access"), (0, _react2.jsx)(_index.Box, {
+      display: "block"
+    }, "Control")),
+    status: (0, _react2.jsx)(_index.Badge, {
+      label: "Rejected",
+      variant: "danger",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: (0, _react2.jsx)(_index.DataTableMenu, null)
+  }, {
+    id: 3,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+      display: "block"
+    }, "Passed Role Access"), (0, _react2.jsx)(_index.Box, {
+      display: "block"
+    }, "Control")),
+    status: (0, _react2.jsx)(_index.Badge, {
+      label: "Inactive",
+      variant: "secondary",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: (0, _react2.jsx)(_index.DataTableMenu, null)
+  }, {
+    id: 4,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    status: (0, _react2.jsx)(_index.Badge, {
+      label: "Approved",
+      variant: "success",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: (0, _react2.jsx)(_index.DataTableMenu, null)
+  }, {
+    id: 5,
+    timestamp: timestampCell,
+    eventType: 'User Access Allowed',
+    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    status: (0, _react2.jsx)(_index.Badge, {
+      label: "Approved",
+      variant: "success",
+      sx: {
+        width: '100px'
+      }
+    }),
+    userIdentity: 'Vincent Diep',
+    menu: (0, _react2.jsx)(_index.DataTableMenu, null)
+  }];
+  return (0, _react2.jsx)(_index.Box, {
+    backgroundColor: "background.base",
+    p: "lg"
+  }, (0, _react2.jsx)(_index.DataTable, {
+    "aria-label": "Static table",
+    height: "100%",
+    density: "spacious",
+    scale: "xl"
+  }, (0, _react2.jsx)(_index.DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), {
+      minWidth: column.key !== 'menu' ? 175 : 50,
+      width: column.key !== 'menu' ? '19.4%' : 50
+    }), (0, _react2.jsx)(_index.Text, null, column.name));
+  }), (0, _react2.jsx)(_index.DataTableBody, {
+    items: rows
+  }, function (item) {
+    return (0, _react2.jsx)(_index.DataTableRow, null, function (columnKey) {
+      return (0, _react2.jsx)(_index.DataTableCell, getCellProps(columnKey, false), item[columnKey]);
+    });
+  })));
+};
+exports.DataTableNextGenComponent = DataTableNextGenComponent;

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

@@ -0,0 +1,29 @@
+import React, { Key } from 'react';
+import { IconTypeExtended } from '../../../../index';
+export interface CustomItemProps {
+    iconData?: {
+        sx?: {
+            color?: string;
+            fill?: string;
+            backgroundColor?: string;
+        };
+        icon?: IconTypeExtended;
+    };
+    category?: string;
+    title?: string;
+    description?: string;
+    textValue?: string;
+    key: Key;
+    name: string;
+    subtext?: string;
+    id: string | number;
+    hasSeparator?: boolean;
+}
+export declare const TextSlot: (props: {
+    title?: string | undefined;
+    category?: string | undefined;
+    description?: string | undefined;
+}) => React.JSX.Element;
+export declare const ListViewItemNextGen: (props: {
+    item: CustomItemProps;
+}) => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/ListViewItemNextGen.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextSlot = exports.ListViewItemNextGen = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _TrashCanOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashCanOutlineIcon"));
+var _index = require("../../../../index");
+var _react2 = require("@emotion/react");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var textSlotContainerStyle = {
+  ml: 'md',
+  gap: '2px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  flexShrink: '4',
+  'div:has > div': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    flexGrow: 4
+  }
+};
+var TextSlot = function TextSlot(props) {
+  var title = props.title,
+    category = props.category,
+    description = props.description;
+  return (0, _react2.jsx)(_index.Box, {
+    sx: _objectSpread({}, textSlotContainerStyle)
+  }, (0, _react2.jsx)(_index.Text, {
+    textOverflow: "ellipsis",
+    fontWeight: "2",
+    color: "text.secondary"
+  }, title), (0, _react2.jsx)(_index.Text, {
+    textOverflow: "ellipsis"
+  }, description), (0, _react2.jsx)(_index.Badge, {
+    variant: "secondary",
+    label: category
+  }));
+};
+exports.TextSlot = TextSlot;
+var ListViewItemNextGen = function ListViewItemNextGen(props) {
+  var item = props.item;
+  return (0, _react2.jsx)(_index.ListViewItem, (0, _extends2["default"])({}, item, {
+    data: {
+      icon: null
+    },
+    slots: {
+      leftOfData: (0, _react2.jsx)(_index.IconWrapper, {
+        color: "purple",
+        icon: _TrashCanOutlineIcon["default"],
+        size: "md",
+        title: {
+          name: 'trash can'
+        },
+        isCircle: true
+      }),
+      rightOfData: (0, _react2.jsx)(TextSlot, item)
+    },
+    hasSeparator: false
+  }), (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_index.Item, {
+    key: "enable"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    px: "sm",
+    py: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _TrashCanOutlineIcon["default"]
+  }), (0, _react2.jsx)(_index.Text, null, "Delete")))));
+};
+exports.ListViewItemNextGen = ListViewItemNextGen;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ListViewNextGen: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/ListViewNextGenComponent.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListViewNextGen = void 0;
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireDefault(require("react"));
+var _TrashCanOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashCanOutlineIcon"));
+var _index = require("../../../../index");
+var _ListViewItemNextGen = require("./ListViewItemNextGen");
+var _react2 = require("@emotion/react");
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var items = (0, _from["default"])({
+  length: 300
+}, function (_, index) {
+  var id = (index + 1).toString();
+  return {
+    key: "Animal".concat(id),
+    name: "Animal".concat(id),
+    id: id
+  };
+});
+var colors = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink', 'yellow', 'green'];
+var getColor = function getColor(index) {
+  var lastDigit = index % 10;
+  return colors[lastDigit];
+};
+var ListViewNextGen = function ListViewNextGen() {
+  return (0, _react2.jsx)(_index.Box, {
+    backgroundColor: "background.base",
+    p: "lg"
+  }, (0, _react2.jsx)(_index.Box, {
+    height: "400px",
+    backgroundColor: "background.base"
+  }, (0, _react2.jsx)(_index.ListView, {
+    items: items,
+    selectionMode: "single"
+  }, (0, _map["default"])(items).call(items, function (item, index) {
+    return (0, _react2.jsx)(_index.Item, item, (0, _react2.jsx)(_index.ListViewItem, {
+      data: {
+        icon: null
+      },
+      slots: {
+        leftOfData: (0, _react2.jsx)(_index.IconWrapper, {
+          color: getColor(index),
+          icon: _TrashCanOutlineIcon["default"],
+          size: "md",
+          title: {
+            name: 'trash can'
+          },
+          isCircle: true
+        }),
+        rightOfData: (0, _react2.jsx)(_ListViewItemNextGen.TextSlot, {
+          title: item.name,
+          key: item.key,
+          description: loremText
+        })
+      },
+      hasSeparator: false
+    }));
+  }))));
+};
+exports.ListViewNextGen = ListViewNextGen;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NavBarNextGenComponent: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/NavBarNextGenComponent.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavBarNextGenComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AccountCheckOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountCheckOutlineIcon"));
+var _AccountMultipleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountMultipleOutlineIcon"));
+var _AppsIcon = _interopRequireDefault(require("@pingux/mdi-react/AppsIcon"));
+var _CheckCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleOutlineIcon"));
+var _CodeTagsIcon = _interopRequireDefault(require("@pingux/mdi-react/CodeTagsIcon"));
+var _CogOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CogOutlineIcon"));
+var _FileTreeIcon = _interopRequireDefault(require("@pingux/mdi-react/FileTreeIcon"));
+var _LayersOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LayersOutlineIcon"));
+var _PaletteOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PaletteOutlineIcon"));
+var _ShieldCheckOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ShieldCheckOutlineIcon"));
+var _ShowChartIcon = _interopRequireDefault(require("@pingux/mdi-react/ShowChartIcon"));
+var _ViewDashboardOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ViewDashboardOutlineIcon"));
+var _WidgetsOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/WidgetsOutlineIcon"));
+var _useGetTheme2 = _interopRequireDefault(require("../../../../hooks/useGetTheme"));
+var _index = require("../../../../index");
+var _react2 = require("@emotion/react");
+var data = [{
+  'data-id': 'dashboard-data-id',
+  heading: 'Monitoring',
+  icon: _ShowChartIcon["default"],
+  key: 'Monitoring',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Dashboards",
+    id: "Dashboards"
+  }, "Dashboards"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Audit",
+    id: "Audit"
+  }, "Audits")]
+}, {
+  'data-id': 'Directory-data-id',
+  heading: 'Directory',
+  icon: _AccountMultipleOutlineIcon["default"],
+  key: 'Directory',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Users",
+    id: "Users"
+  }, "Users"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Group",
+    id: "Group"
+  }, "Groups")]
+}, {
+  'data-id': 'Applications-data-id',
+  heading: 'Applications',
+  icon: _AppsIcon["default"],
+  key: 'Applications',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Applications-sub",
+    id: "Applications-sub"
+  }, "Applications"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Resources",
+    id: "Resources"
+  }, "Resourcess")]
+}];
+var secondData = [{
+  'data-id': 'Authentication-data-id',
+  heading: 'Authentication',
+  icon: _CheckCircleOutlineIcon["default"],
+  key: 'Authentication',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Authentication-Policies",
+    id: "Authentication-Policies"
+  }, "Authentication Policies"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Password-Policies",
+    id: "Password-Policies"
+  }, "Password Policies")]
+}, {
+  'data-id': 'Threat Protection-data-id',
+  heading: 'Threat Protection',
+  icon: _ShieldCheckOutlineIcon["default"],
+  key: 'Threat Protection',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Risk Policies",
+    id: "Risk Policies"
+  }, "Risk Policies"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Predictors",
+    id: "Predictors"
+  }, "Predictors")]
+}, {
+  'data-id': 'Threat Protection-data-id',
+  heading: 'Identity Verification',
+  icon: _LayersOutlineIcon["default"],
+  key: 'Identity Verification',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Verify Policies",
+    id: "Verify Policies"
+  }, "Verify Policies")]
+}, {
+  'data-id': 'Digital Credentials-data-id',
+  heading: 'Digital Credentials',
+  icon: _CodeTagsIcon["default"],
+  key: 'Digital Credentials',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Management",
+    id: "Management"
+  }, "Management")]
+}, {
+  'data-id': 'Authorization-data-id',
+  heading: 'Authorization',
+  icon: _AccountCheckOutlineIcon["default"],
+  key: 'Authorization',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Trust Framework",
+    id: "Trust Framework"
+  }, "Trust Framework"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Policies",
+    id: "Policies"
+  }, "Policies")]
+}];
+var thirdData = [{
+  'data-id': 'Integrations-data-id',
+  heading: 'Integrations',
+  icon: _WidgetsOutlineIcon["default"],
+  key: 'Integrations',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "External IDPs",
+    id: "External IDPs"
+  }, "External IDPs"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Provisioning",
+    id: "Provisioning"
+  }, "Provisioning")]
+}, {
+  'data-id': 'User Experience-data-id',
+  heading: 'User Experience',
+  icon: _PaletteOutlineIcon["default"],
+  key: 'User Experience',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Notification Templates",
+    id: "Notification Templates"
+  }, "Notification Templates"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Notification Policies",
+    id: "Notification Policies"
+  }, "Notification Policies")]
+}, {
+  'data-id': 'Settings-data-id',
+  heading: 'Settings',
+  icon: _CogOutlineIcon["default"],
+  key: 'Settings',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Certificates & Key Pairs",
+    id: "Certificates & Key Pairs"
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Domains",
+    id: "Domains"
+  }, "Domains")]
+}];
+var NavBarNextGenComponent = function NavBarNextGenComponent() {
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
+  return (0, _react2.jsx)(_index.NavBar, null, (0, _react2.jsx)(_index.Box, {
+    padding: "md",
+    key: "top-logo-parent"
+  }, icons.pingLogoHorizontalSmall), (0, _react2.jsx)(_index.Box, {
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _react2.jsx)(_index.NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: _ViewDashboardOutlineIcon["default"],
+    id: "Overview",
+    key: "Overview",
+    text: "Overview"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: data,
+    "data-id": "nav-bar-section"
+  }), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_index.NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: _FileTreeIcon["default"],
+    id: "DaVinci",
+    key: "DaVinci",
+    text: "DaVinci"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: secondData,
+    "data-id": "second-nav-bar-section"
+  }), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: thirdData,
+    "data-id": "third-nav-bar-section"
+  })));
+};
+exports.NavBarNextGenComponent = NavBarNextGenComponent;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/NextGenDataTable.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../../..");
+var _DataTableNextGenComponent = require("./DataTableNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only NextGen DataTable'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_DataTableNextGenComponent.DataTableNextGenComponent, null));
+};
+exports.Default = Default;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/NextGenListView.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../../..");
+var _ListViewNextGenComponent = require("./ListViewNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only NextGen ListView'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_ListViewNextGenComponent.ListViewNextGen, null));
+};
+exports.Default = Default;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/NextGenListViewItem.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../../..");
+var _ListViewItemNextGen = require("./ListViewItemNextGen");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Next Gen Recipes/NextGen ListViewItem',
+  component: 'Tabs'
+};
+exports["default"] = _default;
+var item = {
+  key: 'test',
+  id: 'test',
+  name: 'JavaScript Array For Each',
+  title: 'JavaScript Array For Each',
+  category: 'Code Snippet',
+  description: 'Sample code demonstrating how to iterate over a description'
+};
+var Default = function Default() {
+  return (0, _react2.jsx)(_.Box, {
+    sx: {
+      border: '1px solid',
+      borderColor: 'border.base'
+    }
+  }, (0, _react2.jsx)(_ListViewItemNextGen.ListViewItemNextGen, {
+    item: item
+  }));
+};
+exports.Default = Default;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;