@pingux/astro 2.129.0-alpha.5 → 2.129.0

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

@@ -14,25 +14,33 @@ 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", "className", "iconProps"];
+var _excluded = ["children", "status", "icon"];
 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'
+  color: 'text.secondary',
+  variant: 'callout.base'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].ERROR, {
-  color: 'critical.bright'
+  color: 'critical.bright',
+  variant: 'callout.error'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].SUCCESS, {
-  color: 'success.bright'
+  color: 'success.bright',
+  variant: 'callout.success'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].WARNING, {
-  color: 'warning.bright'
+  color: 'warning.bright',
+  variant: 'callout.warning'
 }), _calloutProps);
+var defaultIconProps = {
+  mr: 'md',
+  ml: 'md',
+  size: 'md'
+};
 
 /**
  Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
@@ -45,24 +53,18 @@ 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: "callout.base",
-    className: statusClasses
+    variant: calloutProps[status].variant
   }, others), icon || (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
     color: calloutProps[status].color,
     status: status,
-    variant: "callout.icon",
     "aria-label": "".concat(status, "-icon")
-  }, iconProps)), children);
+  }, defaultIconProps)), children);
 });
 Callout.displayName = 'Callout';
 var _default = Callout;

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

@@ -4,7 +4,6 @@ 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: {
@@ -14,14 +13,6 @@ 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,12 +12,11 @@ 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 = exports.Customizations = void 0;
+exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = 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");
@@ -57,20 +56,6 @@ 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
@@ -111,14 +96,6 @@ 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,22 +6,30 @@ 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;
-        };
     };
-    icon: {
-        mr: string;
-        ml: string;
-        minWidth: 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;
         width: string;
-        height: string;
     };
 };
 export default _default;

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

@@ -1,38 +1,42 @@
 "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 _tShirtSizes = _interopRequireDefault(require("../../styles/themes/astro/customProperties/tShirtSizes"));
+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 base = {
   alignItems: 'center',
   border: '1px solid',
   borderColor: 'text.secondary',
   fontSize: 'md',
   p: '15px 12px 15px 0',
-  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")
+  width: '600px'
 };
+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,
-  icon: icon
+  error: error,
+  success: success,
+  warning: warning
 };
 exports["default"] = _default;

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

@@ -129,16 +129,5 @@ 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,10 +93,6 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     }
   }
 });
-var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
-  padding: 0,
-  boxShadow: 'none'
-});
 var _default = {
   container: container,
   interactive: interactive,
@@ -104,7 +100,6 @@ var _default = {
   footer: footer,
   flat: flat,
   body: body,
-  activeCard: activeCard,
-  tableWrapper: tableWrapper
+  activeCard: activeCard
 };
 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 should not be used as a replacement for RadioButton.
+It shouldn’t be used as a replacement for RadioButton.
 
 ### Required Components
 

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

@@ -55,9 +55,10 @@ var objects = [{
   total_grant: '75,000'
 }];
 var Default = function Default(args) {
-  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, {
+  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, {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react2.jsx)(_index.TableCell, {
@@ -73,6 +74,6 @@ var Default = function Default(args) {
         key: value
       }, value);
     }));
-  }))));
+  })));
 };
 exports.Default = Default;

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

@@ -4,16 +4,14 @@ 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: 'sm'
+  p: '10px'
 });
 var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
   width: '100%',
-  p: 'sm'
+  p: '10px'
 });
 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,11 +44,9 @@ var container = {
   width: '100%'
 };
 var caption = {
-  fontFamily: 'standard',
-  fontSize: 'lg',
-  fontWeight: '2',
-  p: 'sm',
-  textAlign: 'left'
+  textAlign: 'left',
+  marginBottom: 'xs',
+  lineHeight: '21px'
 };
 var _default = {
   body: body,

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -6,6 +6,9 @@ export declare const baseState: {
     isCustom: boolean;
 };
 declare const useGetTheme: () => {
+    styles: {
+        navButtonEstHeight: number;
+    };
     icons: {
         [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -13,14 +16,49 @@ declare const useGetTheme: () => {
         pingLogoHorizontalSmall: import("react").JSX.Element;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
-    styles: {
-        navButtonEstHeight: number;
-    };
     tShirtSizes: {
         xxs: string;
+        'icon-100': string;
         xs: string;
+        'icon-200': string;
         sm: string;
+        'icon-300': string;
         md: string;
+        'icon-400': string;
+        'icon-500': string;
+        'icon-600': string;
+        'icon-700': string;
+        'icon-800': string;
+        'icon-900': string;
+    };
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    themeState: {
+        isOnyx: boolean;
+        isAstro: boolean;
+        isOnyxDark: boolean;
+        isCustom: boolean;
+    };
+    name: string;
+} | {
+    icons: {
+        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        pingLogoHorizontalSmall: import("react").JSX.Element;
+        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
+    };
+    styles: {
+        navButtonEstHeight: number;
+    };
+    tShirtSizes: {
+        xxs: number;
+        xs: number;
+        sm: number;
+        md: number;
     };
     iconWrapperSizes: {
         sm: number;

package/lib/cjs/index.d.ts

@@ -184,8 +184,6 @@ export { default as Tab } from './components/Tab';
 export * from './components/Tab';
 export { default as Table } from './components/Table';
 export * from './components/Table';
-export * from './components/TableBase';
-export { default as TableBase } from './components/TableBase';
 export { default as TableBody } from './components/TableBody';
 export * from './components/TableBody';
 export { default as TableCaption } from './components/TableCaption';
@@ -220,4 +218,5 @@ export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Cell, Column, TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, Item, Row, Section, TableBody as TBody, TableHeader as THead, useOverlayTriggerState, useTreeData, } from 'react-stately';
+export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
+export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, } from 'react-stately';