@pingux/astro 2.91.0-alpha.1 → 2.92.0-alpha.0

package/lib/recipes/NextGen/ListViewNextGen.stories.js

@@ -1,142 +1,13 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-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) { _defineProperty(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; }
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import { AstroProvider, Box, Item, ListView, ListViewItem, NextGenTheme, Text } from '../../index';
+import { Box } from '../../index';
+import { ListViewNextGen } from '../../styles/themes/next-gen/stories/ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var items = _Array$from({
-  length: 300
-}, function (_, index) {
-  var id = (index + 1).toString();
-  return {
-    key: "Animal".concat(id),
-    name: "Animal".concat(id),
-    id: id
-  };
-});
-var iconStyles = [{
-  backgroundColor: 'cyan-100',
-  fill: 'cyan-800',
-  color: 'cyan-800'
-}, {
-  backgroundColor: 'pink-100',
-  color: 'pink-800',
-  fill: 'pink-800'
-}, {
-  backgroundColor: 'green-100',
-  color: 'green-800',
-  fill: 'green-800'
-}, {
-  backgroundColor: 'orange-100',
-  color: 'orange-800',
-  fill: 'orange-800'
-}, {
-  backgroundColor: 'blue-100',
-  color: 'blue-800',
-  fill: 'blue-800'
-}, {
-  backgroundColor: 'red-100',
-  color: 'red-800',
-  fill: 'red-800'
-}, {
-  backgroundColor: 'teal-100',
-  color: 'teal-800',
-  fill: 'teal-800'
-}, {
-  backgroundColor: 'yellow-100',
-  color: 'yellow-800',
-  fill: 'yellow-800'
-}, {
-  backgroundColor: 'indigo-100',
-  color: 'indigo-800',
-  fill: 'indigo-800'
-}, {
-  backgroundColor: 'purple-100',
-  color: 'purple-800',
-  fill: 'purple-800'
-}];
-var createIcons = function createIcons(index) {
-  var lastDigit = index % 10;
-  return {
-    size: '32px',
-    sx: _objectSpread({
-      borderRadius: '50%',
-      padding: '6px'
-    }, iconStyles[lastDigit])
-  };
-};
 export default {
   title: 'Next Gen Recipes/ListView'
 };
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
-    backgroundColor: "white"
-  }, ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
-    height: "400px",
-    backgroundColor: "white"
-  }, ___EmotionJSX(ListView, {
-    items: items,
-    selectionMode: "single"
-  }, _mapInstanceProperty(items).call(items, function (item, index) {
-    return ___EmotionJSX(Item, _extends({
-      key: item.name
-    }, item, {
-      index: index
-    }), ___EmotionJSX(ListViewItem, {
-      sx: {},
-      data: {
-        text: item.name,
-        icon: FormSelectIcon
-      },
-      iconProps: _objectSpread({}, createIcons(index)),
-      hasSeparator: false,
-      index: index,
-      items: items
-    }));
-  })))));
-};
-export var Expandable = function Expandable() {
-  return ___EmotionJSX(Box, {
-    backgroundColor: "white"
-  }, ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
-    height: "400px",
-    backgroundColor: "white"
-  }, ___EmotionJSX(ListView, {
-    items: items,
-    selectionMode: "expansion"
-  }, _mapInstanceProperty(items).call(items, function (item, index) {
-    return ___EmotionJSX(Item, _extends({
-      key: item.name
-    }, item, {
-      index: index
-    }), ___EmotionJSX(ListViewItem, {
-      data: {
-        text: item.name,
-        icon: FormSelectIcon
-      },
-      iconProps: _objectSpread({}, createIcons(index)),
-      hasSeparator: false,
-      index: index,
-      items: items
-    }), ___EmotionJSX(Box, {
-      py: "lg",
-      px: "sm"
-    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")));
-  })))));
+    backgroundColor: "background.base",
+    p: "lg"
+  }, ___EmotionJSX(ListViewNextGen, null));
 };

package/lib/recipes/NextGen/ModalNextGen.stories.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { useModalState } from '../../hooks';
-import { AstroProvider, Box, Button, Modal, NextGenTheme, OverlayProvider, Text } from '../../index';
+import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Next Gen Recipes/Modal'
 };
 export var Default = function Default() {
   var state = useModalState();
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     onPress: state.open,
     "aria-label": "Open modal"
   }, "Open Modal"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(Modal, {
@@ -26,17 +24,20 @@ export var Default = function Default() {
     sx: {
       p: '1rem 1.5rem',
       borderBottom: '1px solid',
-      borderBottomColor: 'gray-300'
+      borderBottomColor: 'border.base',
+      bg: 'background.base'
     }
   }, ___EmotionJSX(Text, {
     variant: "modalTitle"
   }, "Modal Title")), ___EmotionJSX(Box, {
     p: "1.5rem 1.5rem"
-  }, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?")), ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Text, {
+    color: "text.primary"
+  }, "Do you want to continue with this action that you\u2018re performing?")), ___EmotionJSX(Box, {
     isRow: true,
     sx: {
       borderTop: '1px solid',
-      borderTopColor: 'gray-300',
+      borderTopColor: 'border.base',
       p: '1rem 1.5rem'
     }
   }, ___EmotionJSX(Box, {
@@ -59,5 +60,5 @@ export var Default = function Default() {
     ml: ".25rem",
     "aria-label": "Continue",
     isDisabled: true
-  }, "Next"))))));
+  }, "Next")))));
 };

package/lib/recipes/NextGen/NavBarNextGen.stories.js

@@ -1,223 +1,9 @@
 import React from 'react';
-import AccountCheckIcon from '@pingux/mdi-react/AccountCheckOutlineIcon';
-import AccountMultipleOutlineIcon from '@pingux/mdi-react/AccountMultipleOutlineIcon';
-import AppsIcon from '@pingux/mdi-react/AppsIcon';
-import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
-import CodeTagsIcon from '@pingux/mdi-react/CodeTagsIcon';
-import CogOutlineIcon from '@pingux/mdi-react/CogOutlineIcon';
-import FileTreeIcon from '@pingux/mdi-react/FileTreeIcon';
-import LayersOutlineIcon from '@pingux/mdi-react/LayersOutlineIcon';
-import PaletteOutlineIcon from '@pingux/mdi-react/PaletteOutlineIcon';
-import ShieldCheckOutlineIcon from '@pingux/mdi-react/ShieldCheckOutlineIcon';
-import ShowChartIcon from '@pingux/mdi-react/ShowChartIcon';
-import DashboardIcon from '@pingux/mdi-react/ViewDashboardOutlineIcon';
-import WidgetsOutlineIcon from '@pingux/mdi-react/WidgetsOutlineIcon';
-import { AstroProvider, Box, NavBar, NavBarItem, NavBarItemButton, NavBarSection, NextGenTheme, Separator } from '../../index';
+import { NavBarNextGenComponent } from '../../styles/themes/next-gen/stories/NavBarNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Next Gen Recipes/NavBar'
 };
-var data = [{
-  'data-id': 'dashboard-data-id',
-  heading: 'Monitoring',
-  icon: ShowChartIcon,
-  key: 'Monitoring',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Dashboards",
-    id: "Dashboards"
-  }, "Dashboards"), ___EmotionJSX(NavBarItemButton, {
-    key: "Audit",
-    id: "Audit"
-  }, "Audits")]
-}, {
-  'data-id': 'Directory-data-id',
-  heading: 'Directory',
-  icon: AccountMultipleOutlineIcon,
-  key: 'Directory',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Users",
-    id: "Users"
-  }, "Users"), ___EmotionJSX(NavBarItemButton, {
-    key: "Group",
-    id: "Group"
-  }, "Groups")]
-}, {
-  'data-id': 'Applications-data-id',
-  heading: 'Applications',
-  icon: AppsIcon,
-  key: 'Applications',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Applications-sub",
-    id: "Applications-sub"
-  }, "Applications"), ___EmotionJSX(NavBarItemButton, {
-    key: "Resources",
-    id: "Resources"
-  }, "Resourcess")]
-}];
-var secondData = [{
-  'data-id': 'Authentication-data-id',
-  heading: 'Authentication',
-  icon: CheckCircleOutlineIcon,
-  key: 'Authentication',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Authentication-Policies",
-    id: "Authentication-Policies"
-  }, "Authentication Policies"), ___EmotionJSX(NavBarItemButton, {
-    key: "Password-Policies",
-    id: "Password-Policies"
-  }, "Password Policies")]
-}, {
-  'data-id': 'Threat Protection-data-id',
-  heading: 'Threat Protection',
-  icon: ShieldCheckOutlineIcon,
-  key: 'Threat Protection',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Risk Policies",
-    id: "Risk Policies"
-  }, "Risk Policies"), ___EmotionJSX(NavBarItemButton, {
-    key: "Predictors",
-    id: "Predictors"
-  }, "Predictors")]
-}, {
-  'data-id': 'Threat Protection-data-id',
-  heading: 'Identity Verification',
-  icon: LayersOutlineIcon,
-  key: 'Identity Verification',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Verify Policies",
-    id: "Verify Policies"
-  }, "Verify Policies")]
-}, {
-  'data-id': 'Digital Credentials-data-id',
-  heading: 'Digital Credentials',
-  icon: CodeTagsIcon,
-  key: 'Digital Credentials',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Management",
-    id: "Management"
-  }, "Management")]
-}, {
-  'data-id': 'Authorization-data-id',
-  heading: 'Authorization',
-  icon: AccountCheckIcon,
-  key: 'Authorization',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Trust Framework",
-    id: "Trust Framework"
-  }, "Trust Framework"), ___EmotionJSX(NavBarItemButton, {
-    key: "Policies",
-    id: "Policies"
-  }, "Policies")]
-}];
-var thirdData = [{
-  'data-id': 'Integrations-data-id',
-  heading: 'Integrations',
-  icon: WidgetsOutlineIcon,
-  key: 'Integrations',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "External IDPs",
-    id: "External IDPs"
-  }, "External IDPs"), ___EmotionJSX(NavBarItemButton, {
-    key: "Provisioning",
-    id: "Provisioning"
-  }, "Provisioning")]
-}, {
-  'data-id': 'User Experience-data-id',
-  heading: 'User Experience',
-  icon: PaletteOutlineIcon,
-  key: 'User Experience',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Notification Templates",
-    id: "Notification Templates"
-  }, "Notification Templates"), ___EmotionJSX(NavBarItemButton, {
-    key: "Notification Policies",
-    id: "Notification Policies"
-  }, "Notification Policies")]
-}, {
-  'data-id': 'Settings-data-id',
-  heading: 'Settings',
-  icon: CogOutlineIcon,
-  key: 'Settings',
-  children: [___EmotionJSX(NavBarItemButton, {
-    key: "Certificates & Key Pairs",
-    id: "Certificates & Key Pairs"
-  }, "Certificates & Key Pairs"), ___EmotionJSX(NavBarItemButton, {
-    key: "Domains",
-    id: "Domains"
-  }, "Domains")]
-}];
-var logo = ___EmotionJSX("svg", {
-  width: "161",
-  height: "28",
-  viewBox: "0 0 2385 415",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, ___EmotionJSX("g", {
-  "clip-path": "url(#clip0_10475_59692)"
-}, ___EmotionJSX("path", {
-  d: "M0 372.674H372.613V0.000147457H0V372.674Z",
-  fill: "#B3282D"
-}), ___EmotionJSX("mask", {
-  id: "mask0_10475_59692",
-  maskUnits: "userSpaceOnUse",
-  x: "0",
-  y: "0",
-  width: "2385",
-  height: "415"
-}, ___EmotionJSX("path", {
-  d: "M0 0H2385V415H0V0Z",
-  fill: "white"
-})), ___EmotionJSX("g", {
-  mask: "url(#mask0_10475_59692)"
-}, ___EmotionJSX("path", {
-  d: "M1974.57 113.426L2006.72 108.051V326.877H1974.57V113.426ZM2100.71 138.143V276.131C2100.71 299.777 2106.68 307.961 2126.13 307.961C2134.89 307.961 2132.57 308.056 2138.16 305.039L2142.53 326.545C2132.57 332.106 2128.91 333.724 2115 333.724C2104.67 333.724 2096.74 331.591 2089.17 327.727C2075.28 320.419 2070.12 306.666 2070.12 285.153V138.143H2044.3V112.787H2070.12V31.6623H2101.92V112.787H2151.58L2142.05 138.143H2100.71ZM2355.46 320.461C2343.1 320.461 2333.12 309.882 2333.12 295.254C2333.12 280.613 2343.1 270.051 2355.46 270.051C2367.81 270.051 2377.81 280.613 2377.81 295.254C2377.81 309.882 2367.81 320.461 2355.46 320.461ZM2355.46 263.967C2339.19 263.967 2325.91 278.01 2325.91 295.254C2325.91 312.485 2339.19 326.516 2355.46 326.516C2371.75 326.516 2385 312.485 2385 295.254C2385 278.01 2371.75 263.967 2355.46 263.967ZM2350.31 292.569V282.426H2355.86C2359.06 282.426 2362.66 283.107 2362.66 287.269C2362.66 292.037 2359.48 292.569 2355.79 292.569H2350.31ZM2368.88 287.813C2368.88 280.351 2364.54 277.4 2356.51 277.4H2344.09V312.862H2350.31V297.594H2354.06L2362.73 312.862H2369.12L2360.13 297.341C2365.61 296.802 2368.88 293.863 2368.88 287.813ZM2342.12 112.787L2274.19 334.583C2260.68 377.602 2244.77 405.967 2210.22 415.002L2201.08 392.218C2220.42 385.661 2230.56 376.129 2239.01 352.831C2235.84 335.936 2234.05 328.591 2234.05 328.591C2231.68 314.838 2220.94 273.113 2214.19 251.637L2171.65 117.513L2202.28 106.313L2242.81 245.167C2248.75 265.403 2254.71 298.487 2254.71 298.487H2255.51C2255.51 298.487 2263.04 270.985 2267.83 253.364L2306.76 112.787H2342.12ZM1385.26 272.263C1385.26 272.263 1381.67 281.293 1373.34 287.755C1360.6 297.623 1351.46 301.504 1335.21 301.504C1316.93 301.504 1304.59 294.2 1295.47 276.566C1289.1 264.108 1287.52 245.611 1287.52 220.674C1287.52 190.582 1290.68 175.12 1300.23 158.781C1308.57 144.169 1321.68 136.429 1337.2 136.429C1360.6 136.429 1375.34 143.754 1385.26 158.781V272.263ZM1416.66 31.6623H1385.65V102.918C1385.65 118.364 1386.04 135.997 1386.04 135.997C1374.15 118.812 1354.65 108.931 1332.42 108.931C1318.11 108.931 1306.99 112.786 1294.27 122.248C1267.25 142.426 1253.36 175.97 1253.36 221.537C1253.36 289.871 1282.76 329.852 1333.99 329.852C1357.04 329.852 1372.16 322.573 1386.45 304.952C1386.84 316.091 1390.82 326.877 1390.82 326.877H1422.61C1418.21 314.393 1416.66 294.615 1416.66 257.68V31.6623ZM1889.71 113.214H1940.82L1931.3 138.575H1888.51V276.566C1888.51 300.225 1894.47 308.405 1913.94 308.405C1922.69 308.405 1920.38 308.505 1925.96 305.467L1930.34 326.985C1920.38 332.554 1916.72 334.168 1902.8 334.168C1892.48 334.168 1884.55 332.039 1876.98 328.167C1863.09 320.859 1857.91 307.098 1857.91 285.597V138.575H1832.1V113.214H1857.91V32.1022H1889.71V113.214ZM1799.51 139.438C1802.68 147.173 1804.28 155.76 1804.28 164.375V326.893H1772.88V181.992C1772.88 159.196 1771.29 153.631 1765.72 146.31C1761.37 140.728 1753 137.28 1743.88 137.28C1727.95 137.28 1703.36 151.07 1689.05 167.384V326.893H1658.85V161.802C1658.85 131.266 1651.33 116.65 1651.33 116.65L1681.49 107.624C1681.49 107.624 1688.68 123.502 1688.68 141.164C1709.29 118.812 1729.95 108.051 1751.03 108.051C1772.49 108.051 1791.56 120.539 1799.51 139.438ZM1492.67 200.032C1494.24 155.747 1510.14 133.408 1538.35 133.408C1553.46 133.408 1567.34 140.728 1574.09 152.324C1580.07 162.636 1582.85 176.829 1583.24 200.032H1492.67ZM1539.93 107.176C1516.08 107.176 1496.63 116.65 1480.74 136.848C1464.05 158.378 1456.92 181.564 1456.92 217.678C1456.92 288.63 1489.86 331.591 1544.7 331.591C1570.14 331.591 1594 322.142 1611.44 304.952L1599.52 283.426C1585.63 297.204 1570.14 303.633 1551.05 303.633C1531.18 303.633 1512.91 295.909 1501.79 277.429C1495.03 266.278 1492.67 250.778 1492.67 230.58V225.401H1616.2V220.674C1615.44 169.538 1610.64 149.331 1593.59 130.391C1580.07 115.376 1561.39 107.176 1539.93 107.176ZM1178.26 31.9653H1210.05V326.877H1178.26V31.9653Z",
-  fill: "#263746"
-}), ___EmotionJSX("path", {
-  d: "M836.686 159.866C826.225 159.866 812.64 167.269 800.607 178.756V327.575H748.544V175.05C748.544 156.969 746.208 139.705 741.561 125.724L787.752 111.763C792.428 120.403 795.146 129.43 795.146 138.062C802.905 132.289 809.511 127.359 818.063 122.437C828.54 116.697 842.142 113.415 853.781 113.415C875.918 113.415 895.338 125.724 901.545 143.83C904.259 151.636 905.429 160.667 905.429 173.826V327.575H854.159V190.684C854.159 166.85 850.283 159.866 836.686 159.866ZM985.056 184.927C985.056 165.207 996.326 153.682 1016.12 153.682C1035.95 153.682 1047.59 165.207 1047.59 184.927C1047.59 204.25 1036.33 214.932 1015.74 214.932C997.484 214.932 985.056 206.308 985.056 184.927ZM1035.95 273.729L1007.98 273.314C1002.53 273.314 999.446 271.247 999.446 268.372C999.446 262.632 1006.82 257.702 1020.01 251.103C1023.88 251.527 1025.44 251.527 1027.78 251.527C1070.11 251.527 1101.2 225.195 1101.2 189.028C1101.2 175.05 1097.28 164.356 1089.51 154.52C1092.62 154.935 1098.07 155.736 1103.13 155.736C1117.49 155.736 1128.34 151.209 1139.62 140.112L1117.88 105.164C1105.83 116.697 1091.08 123.275 1076.71 123.275C1070.11 123.275 1063.1 121.603 1052.25 118.739C1037.87 115.054 1027.78 113.415 1016.51 113.415C965.662 113.415 932.645 141.357 932.645 184.521C932.645 215.758 946.616 235.076 975.355 242.899C942.724 251.921 938.857 264.69 938.857 278.249C938.857 292.641 944.662 302.09 953.998 305.771C963.33 309.901 978.467 311.934 1001.75 312.357L1023.88 312.772C1044.49 313.183 1060.39 318.952 1060.39 337.847C1060.39 346.487 1055.35 354.289 1047.59 359.211C1039.45 364.577 1028.18 366.191 1014.99 366.191C990.907 366.191 977.678 357.169 977.678 340.299C977.678 334.552 978.073 331.692 980.027 326.758H931.869C929.919 330.85 927.213 336.631 927.213 348.139C927.213 362.494 932.645 374.856 943.521 385.53C961.375 403.217 990.513 408.135 1018.84 408.135C1049.9 408.135 1079.82 400.757 1097.28 381.007C1108.17 368.685 1113.22 355.131 1113.22 337.452C1113.22 318.528 1107.77 304.145 1096.13 292.641C1082.14 279.058 1066.22 274.128 1035.95 273.729ZM654.178 120.781L706.199 112.145V327.575H654.178V120.781ZM648.34 59.1327C648.34 40.2294 663.1 25.0155 680.959 25.0155C698.436 25.0155 712.428 40.2294 712.428 59.1327C712.428 78.0359 698.042 93.2581 680.174 93.2581C662.718 93.2581 648.34 78.0359 648.34 59.1327ZM566.36 160.667C559.003 172.59 552.393 175.474 530.265 175.474H501.924V88.3113H536.455C559.381 88.3113 572.962 104.351 572.962 131.069C572.962 144.648 571.045 152.881 566.36 160.667ZM593.572 55.85C578.41 46.7989 564.427 41.8729 518.609 41.8729H447.559V327.575H501.924V222.344H531.812C561.7 222.344 573.364 219.049 585.792 212.878C615.298 198.087 632.365 167.663 632.365 129.861C632.365 96.9516 618.784 70.6531 593.572 55.85Z",
-  fill: "#263746"
-}))), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
-  id: "clip0_10475_59692"
-}, ___EmotionJSX("rect", {
-  width: "2385",
-  height: "415",
-  fill: "white"
-}))));
 export var Default = function Default() {
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
-    padding: "md",
-    pb: "0px",
-    key: "top-logo-parent"
-  }, logo), ___EmotionJSX(Box, {
-    paddingBottom: "xl",
-    key: "first-section-container"
-  }, ___EmotionJSX(NavBarItem, {
-    "data-id": "nav-bar-item",
-    icon: DashboardIcon,
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
-  }), ___EmotionJSX(NavBarSection, {
-    items: data,
-    "data-id": "nav-bar-section"
-  }), ___EmotionJSX(Separator, {
-    m: 0,
-    backgroundColor: "neutral.60"
-  }), ___EmotionJSX(NavBarItem, {
-    "data-id": "nav-bar-item",
-    icon: FileTreeIcon,
-    id: "DaVinci",
-    key: "DaVinci",
-    text: "DaVinci"
-  }), ___EmotionJSX(NavBarSection, {
-    items: secondData,
-    "data-id": "second-nav-bar-section"
-  }), ___EmotionJSX(Separator, {
-    m: 0,
-    backgroundColor: "neutral.60"
-  }), ___EmotionJSX(NavBarSection, {
-    items: thirdData,
-    "data-id": "third-nav-bar-section"
-  }))));
+  return ___EmotionJSX(NavBarNextGenComponent, null);
 };

package/lib/recipes/NextGen/NextGenDataTable.stories.js

@@ -1,142 +1,9 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { AstroProvider, Badge, Box, DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableMenu, DataTableRow, NextGenTheme, Text } from '../../index';
+import { DataTableNextGenComponent } from '../../styles/themes/next-gen/stories/DataTableNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Next Gen Recipes/DataTable'
 };
-var getCellProps = function getCellProps(columnKey, align) {
-  return {
-    pr: columnKey !== 'menu' ? 'lg' : 12,
-    pl: columnKey === 'menu' ? 0 : 'lg',
-    hideHeader: columnKey === 'menu',
-    align: align
-  };
-};
 export var Default = function Default() {
-  var date = '2023-05-03';
-  var time = '07:16:30 pm UTC';
-  var timestampCell = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, date), ___EmotionJSX(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: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
-    status: ___EmotionJSX(Badge, {
-      label: "Approved",
-      variant: "success",
-      sx: {
-        width: '100px'
-      }
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 2,
-    timestamp: timestampCell,
-    eventType: 'User Access Denied',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-      display: "block"
-    }, "Passed Role Access"), ___EmotionJSX(Box, {
-      display: "block"
-    }, "Control")),
-    status: ___EmotionJSX(Badge, {
-      label: "Rejected",
-      variant: "danger",
-      sx: {
-        width: '100px'
-      }
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 3,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-      display: "block"
-    }, "Passed Role Access"), ___EmotionJSX(Box, {
-      display: "block"
-    }, "Control")),
-    status: ___EmotionJSX(Badge, {
-      label: "Inactive",
-      variant: "secondary",
-      sx: {
-        width: '100px'
-      }
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 4,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
-    status: ___EmotionJSX(Badge, {
-      label: "Approved",
-      variant: "success",
-      sx: {
-        width: '100px'
-      }
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 5,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
-    status: ___EmotionJSX(Badge, {
-      label: "Approved",
-      variant: "success",
-      sx: {
-        width: '100px'
-      }
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }];
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
-    backgroundColor: "white"
-  }, ___EmotionJSX(DataTable, {
-    "aria-label": "Static table",
-    height: "100%",
-    density: "spacious",
-    scale: "xl"
-  }, ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
-      minWidth: column.key !== 'menu' ? 175 : 50,
-      width: column.key !== 'menu' ? '19.4%' : 50
-    }), ___EmotionJSX(Text, null, column.name));
-  }), ___EmotionJSX(DataTableBody, {
-    items: rows
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
-    });
-  }))));
+  return ___EmotionJSX(DataTableNextGenComponent, null);
 };

package/lib/styles/sizes.js

@@ -0,0 +1,11 @@
+export default {
+  buttonHeight: 36,
+  column: 400,
+  container: {
+    xs: '400px',
+    sm: '550px',
+    md: '800px',
+    lg: '1200px',
+    full: '100%'
+  }
+};

package/lib/styles/theme.js

@@ -9,14 +9,16 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
+import { themes } from '../utils/devUtils/constants/themes';
 import breakpoints from './breakpoints';
 import colors, { accent, focus, line, shadow } from './colors';
 import forms from './forms';
+import sizes from './sizes';
 import spacing from './spacing';
 import { fontSizes, fontWeights, textColors } from './text';
 import { badges, buttons, cards, grids, images, links, text, variants } from './variants';
 export default {
-  name: 'Astro',
+  name: themes.ASTRO,
   space: spacing,
   colors: _objectSpread(_objectSpread({}, colors), {}, {
     background: accent[99]
@@ -34,17 +36,7 @@ export default {
   lineHeights: {
     md: '1.5'
   },
-  sizes: {
-    buttonHeight: 36,
-    column: 400,
-    container: {
-      xs: '400px',
-      sm: '550px',
-      md: '800px',
-      lg: '1200px',
-      full: '100%'
-    }
-  },
+  sizes: sizes,
   shadows: {
     standard: "0 1px 3px ".concat(shadow),
     row: "0 0 9px ".concat(accent[95]),