@pingux/astro 2.129.0 → 2.130.0-alpha.1

package/lib/cjs/components/Button/Button.stories.d.ts

@@ -66,3 +66,4 @@ export declare const ColorBlockButton: {
         };
     };
 };
+export declare const Filter: () => React.JSX.Element;

package/lib/cjs/components/Button/Button.stories.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
+exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -222,4 +222,10 @@ ColorBlockButton.parameters = {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.button.colorBlockButton
   }
-};
+};
+var Filter = function Filter() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "filter"
+  }, "Filter Text");
+};
+exports.Filter = Filter;

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -890,5 +890,53 @@ declare const _default: {
         flexShrink: number;
         whiteSpace: string;
     };
+    filter: {
+        px: string;
+        borderColor: string;
+        height: number;
+        color: string;
+        display: string;
+        bg: string;
+        border: string;
+        '&.is-hovered': {
+            bg: string;
+            border: string;
+            borderColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            border: string;
+            borderColor: string;
+            color: string;
+            boxShadow: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        fontSize: string;
+        fontWeight: number;
+        fontFamily: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+        cursor: string;
+        lineHeight: string;
+        minWidth: string;
+        padding: string;
+        outline: string;
+        alignItems: string;
+        justifyContent: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+    };
 };
 export default _default;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -197,6 +197,13 @@ var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
 var colorBlock = {
   bg: 'neutral.95',
   border: '1px solid',
@@ -311,6 +318,7 @@ var _default = {
   primaryWithIcon: primaryWithIcon,
   quiet: quiet,
   success: success,
-  withIcon: withIcon
+  withIcon: withIcon,
+  filter: filter
 };
 exports["default"] = _default;

package/lib/cjs/components/Callout/Callout.js

@@ -14,33 +14,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("../..");
+var _hooks = require("../../hooks");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "status", "icon"];
+var _excluded = ["children", "status", "icon", "className", "iconProps"];
 var _calloutProps;
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CALLOUT_TEST_ID = 'CalloutTestId';
 exports.CALLOUT_TEST_ID = CALLOUT_TEST_ID;
 var calloutProps = (_calloutProps = {}, (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].DEFAULT, {
-  color: 'text.secondary',
-  variant: 'callout.base'
+  color: 'text.secondary'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].ERROR, {
-  color: 'critical.bright',
-  variant: 'callout.error'
+  color: 'critical.bright'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].SUCCESS, {
-  color: 'success.bright',
-  variant: 'callout.success'
+  color: 'success.bright'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].WARNING, {
-  color: 'warning.bright',
-  variant: 'callout.warning'
+  color: 'warning.bright'
 }), _calloutProps);
-var defaultIconProps = {
-  mr: 'md',
-  ml: 'md',
-  size: 'md'
-};
 
 /**
  Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
@@ -53,18 +45,24 @@ var Callout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? _statuses["default"].DEFAULT : _ref$status,
     icon = _ref.icon,
+    className = _ref.className,
+    iconProps = _ref.iconProps,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
+    statusClasses = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: calloutProps[status].variant
+    variant: "callout.base",
+    className: statusClasses
   }, others), icon || (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
     color: calloutProps[status].color,
     status: status,
+    variant: "callout.icon",
     "aria-label": "".concat(status, "-icon")
-  }, defaultIconProps)), children);
+  }, iconProps)), children);
 });
 Callout.displayName = 'Callout';
 var _default = Callout;

package/lib/cjs/components/Callout/Callout.stories.d.ts

@@ -4,6 +4,7 @@ import { CalloutProps } from '../../types/callout';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<CalloutProps>;
+export declare const Customizations: () => React.JSX.Element;
 export declare const ErrorStatus: StoryFn;
 export declare const Success: StoryFn;
 export declare const WithLink: {
@@ -13,6 +14,14 @@ export declare const WithLink: {
             type: string;
             url: string;
         };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
     };
 };
 export declare const Warning: StoryFn;

package/lib/cjs/components/Callout/Callout.stories.js

@@ -12,11 +12,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = exports.Customizations = 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 _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
+var _LightbulbOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LightbulbOutlineIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -56,6 +57,20 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.callout["default"]
   }
 };
+var Customizations = function Customizations() {
+  return (0, _react2.jsx)(_index.Callout, {
+    icon: (0, _react2.jsx)(_index.Icon, {
+      icon: _LightbulbOutlineIcon["default"],
+      size: "sm",
+      color: "teal-500",
+      mr: "md"
+    }),
+    sx: {
+      borderLeftColor: 'teal-500'
+    }
+  }, (0, _react2.jsx)(_index.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."));
+};
+exports.Customizations = Customizations;
 var ErrorStatus = function ErrorStatus(args) {
   return (0, _react2.jsx)(_index.Callout, (0, _extends2["default"])({
     status: _statuses["default"].ERROR
@@ -96,6 +111,14 @@ WithLink.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.callout.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
   }
 };
 var Warning = function Warning(args) {

package/lib/cjs/components/Callout/Callout.styles.d.ts

@@ -6,30 +6,22 @@ declare const _default: {
         fontSize: string;
         p: string;
         width: string;
+        '&.is-success, > .is-success': {
+            borderColor: string;
+        };
+        '&.is-warning, > .is-warning': {
+            borderColor: string;
+        };
+        '&.is-error, > .is-error': {
+            borderColor: string;
+        };
     };
-    error: {
-        borderColor: string;
-        alignItems: string;
-        border: string;
-        fontSize: string;
-        p: string;
-        width: string;
-    };
-    success: {
-        borderColor: string;
-        alignItems: string;
-        border: string;
-        fontSize: string;
-        p: string;
-        width: string;
-    };
-    warning: {
-        borderColor: string;
-        alignItems: string;
-        border: string;
-        fontSize: string;
-        p: string;
+    icon: {
+        mr: string;
+        ml: string;
+        minWidth: string;
         width: string;
+        height: string;
     };
 };
 export default _default;

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

@@ -1,42 +1,38 @@
 "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["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (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 _tShirtSizes = _interopRequireDefault(require("../../styles/themes/astro/customProperties/tShirtSizes"));
 var base = {
   alignItems: 'center',
   border: '1px solid',
   borderColor: 'text.secondary',
   fontSize: 'md',
   p: '15px 12px 15px 0',
-  width: '600px'
+  width: '600px',
+  '&.is-success, > .is-success': {
+    borderColor: 'success.bright'
+  },
+  '&.is-warning, > .is-warning': {
+    borderColor: 'warning.bright'
+  },
+  '&.is-error, > .is-error': {
+    borderColor: 'critical.bright'
+  }
+};
+var icon = {
+  mr: 'md',
+  ml: 'md',
+  minWidth: "".concat(_tShirtSizes["default"].md, " !important"),
+  width: "".concat(_tShirtSizes["default"].md, " !important"),
+  height: "".concat(_tShirtSizes["default"].md, " !important")
 };
-var error = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'critical.bright'
-});
-var success = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'success.bright'
-});
-var warning = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'warning.bright'
-});
 var _default = {
   base: base,
-  error: error,
-  success: success,
-  warning: warning
+  icon: icon
 };
 exports["default"] = _default;

package/lib/cjs/components/Callout/stories/CalloutNextGenComponent.d.ts

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

package/lib/cjs/components/Callout/stories/CalloutNextGenComponent.js

@@ -0,0 +1,33 @@
+"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.CalloutNextGenComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LightbulbOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LightbulbOutlineIcon"));
+var _ = require("../../..");
+var _statuses = _interopRequireDefault(require("../../../utils/devUtils/constants/statuses"));
+var _react2 = require("@emotion/react");
+var CalloutNextGenComponent = function CalloutNextGenComponent() {
+  return (0, _react2.jsx)(_.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_.Callout, null, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].SUCCESS
+  }, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].WARNING
+  }, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].ERROR
+  }, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].SUCCESS,
+    icon: (0, _react2.jsx)(_.Icon, {
+      icon: _LightbulbOutlineIcon["default"],
+      size: "sm",
+      color: "success.bright",
+      mr: "md"
+    })
+  }, (0, _react2.jsx)(_.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.")));
+};
+exports.CalloutNextGenComponent = CalloutNextGenComponent;

package/lib/cjs/components/Callout/stories/NextGenCallout.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/components/Callout/stories/NextGenCallout.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 _CalloutNextGenComponent = require("./CalloutNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Callout'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_CalloutNextGenComponent.CalloutNextGenComponent, null));
+};
+exports.Default = Default;

package/lib/cjs/components/Callout/stories/NextGenDarkCallout.chomatic.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/components/Callout/stories/NextGenDarkCallout.chomatic.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 _CalloutNextGenComponent = require("./CalloutNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark Callout'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenDarkTheme]
+  }, (0, _react2.jsx)(_CalloutNextGenComponent.CalloutNextGenComponent, null));
+};
+exports.Default = Default;

package/lib/cjs/components/Card/Card.styles.d.ts

@@ -129,5 +129,16 @@ declare const _default: {
         flex: string;
         p: string;
     };
+    tableWrapper: {
+        padding: number;
+        boxShadow: string;
+        display: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+        p: string;
+    };
 };
 export default _default;

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

@@ -93,6 +93,10 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     }
   }
 });
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  padding: 0,
+  boxShadow: 'none'
+});
 var _default = {
   container: container,
   interactive: interactive,
@@ -100,6 +104,7 @@ var _default = {
   footer: footer,
   flat: flat,
   body: body,
-  activeCard: activeCard
+  activeCard: activeCard,
+  tableWrapper: tableWrapper
 };
 exports["default"] = _default;

package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.mdx

@@ -10,7 +10,7 @@ This component should:
 - Be used for a single-item selection.
 - Contain concise labels.
 
-It shouldn’t be used as a replacement for RadioButton.
+It should not be used as a replacement for RadioButton.
 
 ### Required Components
 

package/lib/cjs/components/Table/Table.stories.js

@@ -55,10 +55,9 @@ var objects = [{
   total_grant: '75,000'
 }];
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Table, args, (0, _react2.jsx)(_index.TableCaption, null, (0, _react2.jsx)(_index.Text, {
-    fontWeight: 3,
-    fontSize: "lg"
-  }, caption)), (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+  return (0, _react2.jsx)(_index.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_index.Table, args, (0, _react2.jsx)(_index.TableCaption, null, caption), (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react2.jsx)(_index.TableCell, {
@@ -74,6 +73,6 @@ var Default = function Default(args) {
         key: value
       }, value);
     }));
-  })));
+  }))));
 };
 exports.Default = Default;

package/lib/cjs/components/Table/Table.styles.d.ts

@@ -4,14 +4,16 @@ declare const _default: {
         borderTopColor: string;
         borderBottom: string;
         borderBottomColor: string;
-        '&& > tr:nth-of-type(odd) ': {
+        '& > tr:nth-of-type(odd)': {
             backgroundColor: string;
         };
     };
     caption: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        p: string;
         textAlign: string;
-        marginBottom: string;
-        lineHeight: string;
     };
     container: {
         width: string;

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

@@ -21,18 +21,18 @@ var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
   fontWeight: 500,
   width: '100%',
   flexDirection: 'row !important',
-  p: '10px'
+  p: 'sm'
 });
 var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
   width: '100%',
-  p: '10px'
+  p: 'sm'
 });
 var body = {
   borderTop: '1px solid',
   borderTopColor: 'neutral.40',
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
-  '&& > tr:nth-of-type(odd) ': {
+  '& > tr:nth-of-type(odd)': {
     backgroundColor: 'neutral.95'
   }
 };
@@ -44,9 +44,11 @@ var container = {
   width: '100%'
 };
 var caption = {
-  textAlign: 'left',
-  marginBottom: 'xs',
-  lineHeight: '21px'
+  fontFamily: 'standard',
+  fontSize: 'lg',
+  fontWeight: '2',
+  p: 'sm',
+  textAlign: 'left'
 };
 var _default = {
   body: body,

package/lib/cjs/components/TableBase/TableBase.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TableBaseProps, TableCellProps, TableColumnHeaderProps, TableHeaderRowProps, TableRowGroupProps, TableRowProps } from '../../types/tableBase';
+declare const TableBase: React.ForwardRefExoticComponent<TableBaseProps & React.RefAttributes<HTMLTableElement>>;
+export default TableBase;
+export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableHeaderRow: (props: TableHeaderRowProps) => React.JSX.Element;
+export declare const TableColumnHeader: (props: TableColumnHeaderProps) => React.JSX.Element;
+export declare const TableRow: (props: TableRowProps) => React.JSX.Element;
+export declare function TableCell(props: TableCellProps): React.JSX.Element;