@pingux/astro 1.27.0-alpha.9 → 1.28.0

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -19,6 +19,29 @@ var items = [{
   name: 'Third Option',
   id: '3'
 }];
+var sx = {
+  actionIcon: {
+    color: 'neutral.30'
+  },
+  dragVerticalIcon: {
+    color: 'neutral.50'
+  },
+  iconButton: {
+    ml: 'xs'
+  },
+  iconButtonToggleContainer: {
+    mx: 'sm',
+    flexShrink: 0
+  },
+  iconContainer: {
+    alignItems: 'center',
+    ml: '12px',
+    mr: '12px'
+  },
+  outerContainer: {
+    alignItems: 'center'
+  }
+};
 export var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
     return ___EmotionJSX("svg", _extends({
@@ -66,24 +89,22 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
+    "aria-label": "Row one value",
     containerProps: {
       width: '275px'
     },
     labelProps: {
       mb: 0
     },
-    "aria-label": "Row one value",
     controlProps: {
       'aria-label': 'test'
     }
@@ -93,10 +114,7 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -126,35 +144,29 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))), ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -174,10 +186,7 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -207,24 +216,20 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))));

package/lib/recipes/RowLineChart.stories.js

@@ -138,6 +138,34 @@ var zeroData = [{
   id: 12,
   value: 0
 }];
+var sx = {
+  container: {
+    backgroundColor: 'accent.99',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    pr: '20px'
+  },
+  button: {
+    ml: 'md',
+    pr: 'md'
+  },
+  chartTitleContainer: {
+    ml: '20px',
+    pr: 'md'
+  },
+  chartContainer: {
+    width: '100%',
+    height: '100%'
+  },
+  chart: {
+    width: '50',
+    height: '18'
+  },
+  chartTrendContainer: {
+    ml: 'md',
+    width: '50px'
+  }
+};
 export var Default = function Default() {
   var _useResizeObserver = useResizeObserver(),
       ref = _useResizeObserver.ref,
@@ -161,10 +189,7 @@ export var Default = function Default() {
 
   var EmptyData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     ref: ref
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -178,8 +203,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -192,8 +216,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -202,11 +225,9 @@ export var Default = function Default() {
   }, ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -217,8 +238,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -229,10 +249,7 @@ export var Default = function Default() {
 
   var FullData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -246,8 +263,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -260,8 +276,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -271,11 +286,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -286,8 +299,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -298,10 +310,7 @@ export var Default = function Default() {
 
   var PartialData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -315,8 +324,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -329,8 +337,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -340,11 +347,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: partialDataData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -355,8 +360,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -367,10 +371,7 @@ export var Default = function Default() {
 
   var ZeroData = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -384,8 +385,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -398,8 +398,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -409,11 +408,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -424,8 +421,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -436,10 +432,7 @@ export var Default = function Default() {
 
   var ZeroValues = ___EmotionJSX(Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -453,8 +446,7 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -467,8 +459,7 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -478,11 +469,9 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroValuesData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -493,8 +482,7 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {

package/lib/styles/variants/variants.js

@@ -35,6 +35,7 @@ import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
 import collapsiblePanel from './collapsiblePanel';
+import dataTable from './../../components/DataTable/DataTable.styles';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
@@ -58,5 +59,6 @@ export default _objectSpread(_objectSpread({
   stepper: stepper,
   table: table
 }, tabs), {}, {
-  tooltip: tooltip
+  tooltip: tooltip,
+  dataTable: dataTable
 });

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.9",
+  "version": "1.28.0",
   "description": "PingUX themeable React component library",
-  "author": "ux-development@pingidentity.com",
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.corp.pingidentity.com:ux/pingux.git"
+  },
   "license": "Apache-2.0",
+  "author": "ux-development@pingidentity.com",
   "main": "lib/cjs/index.js",
   "module": "lib/index.js",
   "directories": {
@@ -12,10 +16,6 @@
   "files": [
     "lib"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.corp.pingidentity.com:ux/pingux.git"
-  },
   "scripts": {
     "build": "rm -rf lib && npm-run-all build:*",
     "build:cjs": "BABEL_ENV=cjs babel --config-file ./babel.config.js ./src --out-dir lib/cjs",
@@ -24,51 +24,10 @@
     "coverage": "yarn test --coverage",
     "coverage-ci": "yarn test --coverage --ci",
     "demo": "rm -rf ./demo && build-storybook -o demo",
-    "test": "jest",
     "lint": "eslint --ext .js,.jsx .",
     "start": "start-storybook -p 6006",
-    "storybook": "yarn start"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.4.0",
-    "@emotion/eslint-plugin": "^11.2.0",
-    "@faker-js/faker": "^7.1.0",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
-    "@testing-library/react-hooks": "^3.4.1",
-    "@testing-library/user-event": "^12.8.3",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-node-env-inline": "^0.4.3",
-    "chromatic": "^6.5.3",
-    "countries-list": "^2.6.1",
-    "eslint-plugin-jest-dom": "^3.9.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "eslint-plugin-testing-library": "^4.6.0",
-    "jest-axe": "^5.0.1",
-    "jest-emotion": "^11.0.0",
-    "mutationobserver-shim": "^0.3.7",
-    "react": "^16.8.6",
-    "react-dom": "^16.13.1",
-    "react-is": "^16.13.1",
-    "use-resize-observer": "^8.0.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.13.1"
+    "storybook": "yarn start",
+    "test": "jest"
   },
   "dependencies": {
     "@emotion/jest": "^11.5.0",
@@ -101,19 +60,22 @@
     "@react-aria/separator": "^3.1.1",
     "@react-aria/slider": "^3.0.7",
     "@react-aria/switch": "3.1.1",
+    "@react-aria/table": "^3.3.0",
     "@react-aria/tabs": "^3.0.1",
     "@react-aria/tooltip": "^3.1.2",
     "@react-aria/utils": "^3.12.0",
     "@react-aria/virtualizer": "^3.3.2",
     "@react-aria/visually-hidden": "3.2.1",
     "@react-spectrum/provider": "^3.2.1",
+    "@react-spectrum/table": "^3.3.0",
+    "@react-spectrum/tooltip": "^3.2.1",
     "@react-spectrum/utils": "3.6.1",
     "@react-stately/collections": "~3.3.8",
     "@react-stately/color": "^3.0.0-beta.2",
     "@react-stately/combobox": "^3.0.0",
     "@react-stately/data": "^3.4.0",
     "@react-stately/grid": "^3.1.4",
-    "@react-stately/layout": "^3.2.1",
+    "@react-stately/layout": "~3.6.0",
     "@react-stately/list": "^3.2.1",
     "@react-stately/menu": "^3.2.1",
     "@react-stately/numberfield": "~3.0.7",
@@ -123,11 +85,13 @@
     "@react-stately/select": "^3.1.1",
     "@react-stately/selection": "~3.10.2",
     "@react-stately/slider": "^3.0.7",
+    "@react-stately/table": "^3.2.1",
     "@react-stately/tabs": "^3.0.1",
     "@react-stately/toggle": "^3.2.0",
     "@react-stately/tooltip": "^3.0.4",
     "@react-stately/tree": "^3.1.2",
     "@react-stately/utils": "~3.4.1",
+    "@react-stately/virtualizer": "^3.2.1",
     "@rebass/forms": "^4.0.6",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/props": "^5.1.5",
@@ -152,5 +116,46 @@
     "theme-ui": "^0.10.0",
     "tippy.js": "6.2.7",
     "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/cache": "^11.4.0",
+    "@emotion/eslint-plugin": "^11.2.0",
+    "@faker-js/faker": "~7.5.0",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.4",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/user-event": "^12.8.3",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-node-env-inline": "^0.4.3",
+    "chromatic": "^6.5.3",
+    "countries-list": "^2.6.1",
+    "eslint-plugin-jest-dom": "^3.9.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "eslint-plugin-testing-library": "^4.6.0",
+    "jest-axe": "^5.0.1",
+    "jest-emotion": "^11.0.0",
+    "mutationobserver-shim": "^0.3.7",
+    "react": "^16.8.6",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "use-resize-observer": "^8.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.13.1"
   }
 }