@pingux/astro 1.27.0-alpha.14 → 1.27.0-alpha.16

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/Page Header'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var heading = 'Title of the Page';
+  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)), (0, _react2.jsx)(_index.Box, {
+    mt: "xl"
+  }, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13
+  }))), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)));
+};
+
+exports.Default = Default;

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

@@ -170,6 +170,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'
+  }
+};
 
 var Default = function Default() {
   var _useResizeObserver = (0, _useResizeObserver2["default"])(),
@@ -193,10 +221,7 @@ var Default = function Default() {
   }, [isMobile]);
   var EmptyData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     ref: ref
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -210,8 +235,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -224,8 +248,7 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -234,11 +257,9 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -249,8 +270,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -260,10 +280,7 @@ var Default = function Default() {
   }))));
   var FullData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -277,8 +294,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -291,8 +307,7 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -302,11 +317,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -317,8 +330,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -328,10 +340,7 @@ var Default = function Default() {
   }))));
   var PartialData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -345,8 +354,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -359,8 +367,7 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -370,11 +377,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: partialDataData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -385,8 +390,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -396,10 +400,7 @@ var Default = function Default() {
   }))));
   var ZeroData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -413,8 +414,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -427,8 +427,7 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -438,11 +437,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -453,8 +450,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -464,10 +460,7 @@ var Default = function Default() {
   }))));
   var ZeroValues = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -481,8 +474,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -495,8 +487,7 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -506,11 +497,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroValuesData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -521,8 +510,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {

package/lib/cjs/recipes/SelectedFieldOverlay.story.js

@@ -26,36 +26,40 @@ var _default = {
   title: 'Recipes/Selected Field Overlay'
 };
 exports["default"] = _default;
+var sx = {
+  container: {
+    padding: 'md',
+    position: 'relative',
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: 'active',
+    borderRadius: 4,
+    cursor: 'pointer'
+  },
+  overlay: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:focus': {
+      outline: 'none'
+    }
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
-    p: 15,
-    sx: {
-      position: 'relative',
-      borderWidth: 2,
-      borderStyle: 'solid',
-      borderColor: 'active',
-      borderRadius: 4,
-      cursor: 'pointer'
-    }
+    sx: sx.container
   }, (0, _react2.jsx)(_TextField["default"], {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: 0,
-      left: 0,
-      alignItems: 'center',
-      justifyContent: 'center',
-      '&:focus': {
-        outline: 'none'
-      }
-    },
+    sx: sx.overlay,
     tabIndex: "0"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _VisibilityOffOutlineIcon["default"],

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

@@ -137,6 +137,79 @@ var data = [{
     title: 'View a workflow'
   }]
 }];
+var sx = {
+  iconContainer: {
+    backgroundColor: 'accent.80',
+    alignItems: 'center',
+    justifyContent: 'center',
+    mr: 'sm',
+    borderRadius: '50%',
+    zIndex: 3
+  },
+  headingSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.80',
+    maxHeight: '100%',
+    width: '6px !important',
+    zIndex: 2,
+    m: '0px 5px 0px 17px !important'
+  },
+  title: {
+    fontSize: 'md',
+    color: 'accent.30',
+    lineHeight: '18px',
+    fontWeight: '3',
+    m: '12px 0px 28px 5px',
+    maxWidth: '195px'
+  },
+  linkRowIconButton: {
+    '&.is-pressed': {
+      backgroundColor: 'transparent'
+    },
+    '&.is-pressed > svg > path': {
+      fill: 'accent.30'
+    },
+    '&.is-hovered': {
+      backgroundColor: 'transparent'
+    }
+  },
+  linkRowIconSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.30'
+    }
+  },
+  linkRowIconNotSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.80'
+    }
+  },
+  linkRowSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.30',
+    maxHeight: '100%',
+    width: '1px !important',
+    zIndex: 2,
+    m: '-5px 5px -5px 11.5px !important'
+  },
+  linkRowText: {
+    fontSize: 'md',
+    color: '#163CE3',
+    lineHeight: '18px',
+    fontWeight: '0',
+    m: '3px 0px 20px 10px',
+    maxWidth: '140px'
+  },
+  container: {
+    p: '15px 15px 0px 15px',
+    width: '280px',
+    backgroundColor: 'accent.95',
+    borderRadius: '8px',
+    zIndex: 1,
+    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+  }
+};
 
 var Stage = function Stage(props) {
   var title = props.title,
@@ -172,14 +245,7 @@ var Stage = function Stage(props) {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
-    sx: {
-      backgroundColor: 'accent.80',
-      alignItems: 'center',
-      justifyContent: 'center',
-      mr: '10px',
-      borderRadius: '50%',
-      zIndex: 3
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     color: "accent.40",
@@ -188,24 +254,10 @@ var Stage = function Stage(props) {
       zIndex: 3
     }
   })), !isLastStage && (0, _react2.jsx)(_index.Separator, {
-    sx: {
-      flexGrow: 1,
-      backgroundColor: 'accent.80',
-      maxHeight: '100%',
-      width: '6px !important',
-      zIndex: 2,
-      m: '0px 5px 0px 17px !important'
-    },
+    sx: sx.headingSeparator,
     orientation: "vertical"
   })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: '15px',
-      color: 'accent.30',
-      lineHeight: '18px',
-      fontWeight: '3',
-      m: '12px 0px 28px 5px',
-      maxWidth: '195px'
-    }
+    sx: sx.title
   }, title), (0, _react2.jsx)(_index.Box, {
     pl: "0px",
     mb: "25px"
@@ -246,53 +298,19 @@ var LinkRow = function LinkRow(props) {
     }
   }, (0, _react2.jsx)(_index.IconButton, {
     onPress: onIconPress,
-    sx: {
-      '&.is-pressed': {
-        backgroundColor: 'transparent'
-      },
-      '&.is-pressed > svg > path': {
-        fill: 'accent.30'
-      },
-      '&.is-hovered': {
-        backgroundColor: 'transparent'
-      }
-    },
+    sx: sx.linkRowIconButton,
     "aria-label": "completed step icon indicator"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
     size: isSelected ? '20px' : '18px',
-    sx: isSelected ? {
-      zIndex: 3,
-      'path': {
-        fill: 'accent.30'
-      }
-    } : {
-      zIndex: 3,
-      'path': {
-        fill: 'accent.80'
-      }
-    }
+    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
   }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    sx: {
-      flexGrow: 1,
-      backgroundColor: 'accent.30',
-      maxHeight: '100%',
-      width: '1px !important',
-      zIndex: 2,
-      m: '-5px 5px -5px 11.5px !important'
-    },
+    sx: sx.linkRowSeparator,
     orientation: "vertical"
   })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
     target: "_blank",
-    sx: {
-      fontSize: '15px',
-      color: '#163CE3',
-      lineHeight: '18px',
-      fontWeight: '0',
-      m: '3px 0px 20px 10px',
-      maxWidth: '140px'
-    }
+    sx: sx.linkRowText
   }, title)));
 };
 
@@ -300,16 +318,7 @@ var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return (0, _react2.jsx)(_index.Box, {
     as: "nav",
-    backgroundColor: "accent.95",
-    width: "280px",
-    sx: {
-      p: '15px 15px 0px 15px',
-      width: '280px',
-      backgroundColor: 'accent.95',
-      borderRadius: '8px',
-      zIndex: 1,
-      boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
-    }
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     paddingLeft: "0px"
   }, (0, _map["default"])(data).call(data, function (stage, index) {

package/lib/cjs/styles/variants/variants.js

@@ -76,6 +76,8 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 
 var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
 
+var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
+
 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; }
@@ -107,7 +109,8 @@ var _default = _objectSpread(_objectSpread({
   stepper: _stepper["default"],
   table: _table["default"]
 }, tabs), {}, {
-  tooltip: _tooltip["default"]
+  tooltip: _tooltip["default"],
+  dataTable: _DataTable["default"]
 });
 
 exports["default"] = _default;