@pingux/astro 2.129.0 → 2.130.0-alpha.1

package/lib/cjs/styles/themes/next-gen/variants/tableBase.js

@@ -0,0 +1,99 @@
+"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.tableBase = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _button = require("./button");
+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 borderRadius = '16px';
+var defaultFocus = _objectSpread(_objectSpread({}, _button.defaultFocus), {}, {
+  outlineOffset: '-2px'
+});
+var caption = {
+  backgroundColor: 'background.base',
+  px: 'lg',
+  color: 'text.primary',
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base',
+  borderTopLeftRadius: borderRadius,
+  borderTopRightRadius: borderRadius
+};
+var row = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'background.hover'
+  },
+  '&:nth-of-type(odd)': {
+    bg: 'background.base',
+    '&.is-hovered': {
+      bg: 'background.hover'
+    }
+  }
+};
+var thead = {
+  backgroundColor: 'background.base',
+  '&:not(.has-caption)': {
+    '& > tr:first-child': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius,
+      '& > th:first-of-type': {
+        borderTopLeftRadius: borderRadius
+      },
+      '& > th:last-of-type': {
+        borderTopRightRadius: borderRadius
+      }
+    }
+  }
+};
+var head = {
+  px: 'lg',
+  py: 'sm',
+  fontSize: 'md',
+  fontWeight: '2',
+  color: 'text.primary',
+  lineHeight: 'body',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+var tbody = {
+  borderTopColor: 'border.base',
+  borderBottom: 'unset',
+  backgroundColor: 'background.base',
+  '& > tr:last-child': {
+    borderBottom: 'unset',
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    '& > td:first-of-type': {
+      borderBottomLeftRadius: borderRadius
+    },
+    '& > td:last-of-type': {
+      borderBottomRightRadius: borderRadius
+    }
+  }
+};
+var data = _objectSpread(_objectSpread({}, head), {}, {
+  py: 'md',
+  fontWeight: '1'
+});
+var tableBase = {
+  caption: caption,
+  row: row,
+  thead: thead,
+  head: head,
+  tbody: tbody,
+  data: data
+};
+exports.tableBase = tableBase;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1328,5 +1328,169 @@ declare const _default: {
             color: string;
         };
     };
+    callout: {
+        base: {
+            width: string;
+            backgroundColor: string;
+            lineHeight: string;
+            p: string;
+            border: string;
+            borderLeft: string;
+            borderLeftColor: string;
+            borderRadius: string;
+            alignItems: string;
+            color: string;
+            '&.is-success, > .is-success': {
+                borderColor: string;
+                borderLeftColor: string;
+            };
+            '&.is-warning, > .is-warning': {
+                borderColor: string;
+                borderLeftColor: string;
+            };
+            '&.is-error, > .is-error': {
+                borderColor: string;
+                borderLeftColor: string;
+            };
+        };
+        icon: {
+            ml: string;
+            mr: string;
+            minWidth: string;
+            width: string;
+            height: string;
+        };
+    };
+    table: {
+        container: {
+            overflow: string;
+        };
+        caption: {
+            px: string;
+            color: string;
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        head: {
+            px: string;
+            py: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            lineHeight: string;
+        };
+        body: {
+            borderTopColor: string;
+            borderBottom: string;
+            backgroundColor: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '&& > tr:not(:last-child)': {
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            '&& > tr:nth-of-type(odd) ': {
+                backgroundColor: string;
+            };
+            '&& > tr:last-child': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+            };
+        };
+        data: {
+            py: string;
+            fontWeight: string;
+            px: string;
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+        };
+    };
+    tableBase: {
+        caption: {
+            backgroundColor: string;
+            px: string;
+            color: string;
+            borderBottom: string;
+            borderBottomColor: string;
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+        row: {
+            borderBottom: string;
+            borderBottomColor: string;
+            '&.is-focused': {
+                outlineOffset: string;
+                outline: string;
+                outlineColor: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&:nth-of-type(odd)': {
+                bg: string;
+                '&.is-hovered': {
+                    bg: string;
+                };
+            };
+        };
+        thead: {
+            backgroundColor: string;
+            '&:not(.has-caption)': {
+                '& > tr:first-child': {
+                    borderTopLeftRadius: string;
+                    borderTopRightRadius: string;
+                    '& > th:first-of-type': {
+                        borderTopLeftRadius: string;
+                    };
+                    '& > th:last-of-type': {
+                        borderTopRightRadius: string;
+                    };
+                };
+            };
+        };
+        head: {
+            px: string;
+            py: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            lineHeight: string;
+            '&.is-focused': {
+                outlineOffset: string;
+                outline: string;
+                outlineColor: string;
+            };
+        };
+        tbody: {
+            borderTopColor: string;
+            borderBottom: string;
+            backgroundColor: string;
+            '& > tr:last-child': {
+                borderBottom: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '& > td:first-of-type': {
+                    borderBottomLeftRadius: string;
+                };
+                '& > td:last-of-type': {
+                    borderBottomRightRadius: string;
+                };
+            };
+        };
+        data: {
+            py: string;
+            fontWeight: string;
+            px: string;
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+            '&.is-focused': {
+                outlineOffset: string;
+                outline: string;
+                outlineColor: string;
+            };
+        };
+    };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -19,6 +19,7 @@ var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _avatar = require("./avatar");
 var _button = _interopRequireDefault(require("./button"));
+var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
 var _footer = require("./footer");
 var _iconWrapper = _interopRequireDefault(require("./iconWrapper"));
@@ -31,6 +32,8 @@ var _prompt = _interopRequireDefault(require("./prompt"));
 var _response = _interopRequireDefault(require("./response"));
 var _suggestion = _interopRequireDefault(require("./suggestion"));
 var _suggestions = _interopRequireDefault(require("./suggestions"));
+var _table = require("./table");
+var _tableBase = require("./tableBase");
 var _tabs = require("./tabs");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 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; }
@@ -389,6 +392,9 @@ var _default = {
   rockerButton: rockerButton,
   tooltip: _tooltip["default"],
   footer: _footer.footer,
-  loader: loader
+  loader: loader,
+  callout: _callout["default"],
+  table: _table.table,
+  tableBase: _tableBase.tableBase
 };
 exports["default"] = _default;

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

@@ -59,6 +59,7 @@ var _Skeleton = _interopRequireDefault(require("../../components/Skeleton/Skelet
 var _Slider = _interopRequireDefault(require("../../components/SliderField/Slider.styles"));
 var _Stepper = _interopRequireDefault(require("../../components/Stepper/Stepper.styles"));
 var _Table = _interopRequireDefault(require("../../components/Table/Table.styles"));
+var _TableBase = _interopRequireDefault(require("../../components/TableBase/TableBase.styles"));
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeField = _interopRequireDefault(require("../../components/TimeField/TimeField.styles"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
@@ -68,7 +69,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 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 _default = _objectSpread({
+var _default = _objectSpread(_objectSpread({
   accordion: _Accordion["default"],
   accordionGrid: _AccordionGrid["default"],
   box: _Box["default"],
@@ -116,5 +117,7 @@ var _default = _objectSpread({
   timeZone: _TimeZone["default"],
   tooltip: _Tooltip["default"],
   treeView: _TreeView["default"]
-}, tab);
+}, tab), {}, {
+  tableBase: _TableBase["default"]
+});
 exports["default"] = _default;

package/lib/cjs/types/callout.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { IconProps } from './icon';
 import { Status } from './item';
 import { DOMAttributes, StyleProps } from './shared';
 export interface CalloutProps extends StyleProps, DOMAttributes {
     status?: Status;
     icon?: React.ReactNode;
+    iconProps?: IconProps;
 }

package/lib/cjs/types/cell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { StyleProps } from './shared';
+declare module '@react-types/table' {
+    interface CellProps extends StyleProps {
+        /** Whether the cell should not wrap its contents. */
+        noWrap?: boolean;
+        /** The contents of the cell. */
+        children: React.ReactNode;
+        /** A string representation of the cell's contents, used for features like typeahead. */
+        textValue?: string;
+    }
+}

package/lib/cjs/types/cell.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/tableBase.d.ts

@@ -0,0 +1,45 @@
+import { Key, ReactNode } from 'react';
+import type { TableState } from '@react-stately/table';
+import type { GridNode } from '@react-types/grid';
+import type { Node } from '@react-types/shared';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+import { DOMAttributes } from './shared';
+export interface TableBaseProp extends BoxProps, TestingAttributes, DOMAttributes {
+}
+export interface TableBaseProps extends TableBaseProp {
+    'aria-label'?: string;
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    selectionMode?: 'single' | 'none';
+    'data-testid'?: string;
+    caption?: ReactNode | string;
+    tableBodyProps?: Record<string, unknown>;
+}
+export interface TableRowGroupProps extends TableBaseProp {
+    type: 'thead' | 'tbody' | 'tfoot';
+    children: ReactNode;
+    hasCaption?: boolean;
+}
+export interface TableHeaderRowProps extends TableBaseProp {
+    item: Node<object>;
+    state: TableState<object>;
+    children: ReactNode;
+    className?: string;
+}
+export interface TableColumnHeaderProps extends TableBaseProp {
+    column: GridNode<object>;
+    state: TableState<object>;
+    className?: string;
+}
+export interface TableRowProps extends TableBaseProp {
+    item: Node<object>;
+    state: TableState<object>;
+    children: ReactNode;
+    className?: string;
+}
+export interface TableCellProps extends TableBaseProp {
+    cell: GridNode<object>;
+    state: TableState<object>;
+    className?: string;
+}

package/lib/cjs/types/tableBase.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/devUtils/constants/items.d.ts

@@ -0,0 +1,10 @@
+import { Key } from 'react';
+interface Item {
+    id: Key;
+    email: string;
+    firstName: string;
+    lastName: string;
+    status: 'Pending' | 'Active' | 'Failed' | 'Rejected';
+}
+export declare const items: Item[];
+export {};

package/lib/cjs/utils/devUtils/constants/items.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.items = void 0;
+var items = [{
+  id: '1',
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  status: 'Failed'
+}, {
+  id: '2',
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  status: 'Active'
+}, {
+  id: '3',
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  status: 'Active'
+}, {
+  id: '4',
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  status: 'Active'
+}, {
+  id: '5',
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  status: 'Pending'
+}, {
+  id: '6',
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  status: 'Active'
+}, {
+  id: '7',
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  status: 'Pending'
+}, {
+  id: '8',
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  status: 'Active'
+}, {
+  id: '9',
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  status: 'Pending'
+}, {
+  id: '10',
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  status: 'Rejected'
+}, {
+  id: '11',
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  status: 'Pending'
+}, {
+  id: '12',
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  status: 'Active'
+}, {
+  id: '13',
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  status: 'Pending'
+}];
+exports.items = items;

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

@@ -207,4 +207,9 @@ ColorBlockButton.parameters = {
     type: 'figma',
     url: FIGMA_LINKS.button.colorBlockButton
   }
+};
+export var Filter = function Filter() {
+  return ___EmotionJSX(Button, {
+    variant: "filter"
+  }, "Filter Text");
 };

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

@@ -182,6 +182,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',
@@ -296,5 +303,6 @@ export default {
   primaryWithIcon: primaryWithIcon,
   quiet: quiet,
   success: success,
-  withIcon: withIcon
+  withIcon: withIcon,
+  filter: filter
 };

package/lib/components/Callout/Callout.js

@@ -1,32 +1,24 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["children", "status", "icon"];
+var _excluded = ["children", "status", "icon", "className", "iconProps"];
 var _calloutProps;
 import React, { forwardRef } from 'react';
 import { Box } from '../..';
+import { useStatusClasses } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CALLOUT_TEST_ID = 'CalloutTestId';
 var calloutProps = (_calloutProps = {}, _defineProperty(_calloutProps, statuses.DEFAULT, {
-  color: 'text.secondary',
-  variant: 'callout.base'
+  color: 'text.secondary'
 }), _defineProperty(_calloutProps, statuses.ERROR, {
-  color: 'critical.bright',
-  variant: 'callout.error'
+  color: 'critical.bright'
 }), _defineProperty(_calloutProps, statuses.SUCCESS, {
-  color: 'success.bright',
-  variant: 'callout.success'
+  color: 'success.bright'
 }), _defineProperty(_calloutProps, statuses.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)
@@ -39,18 +31,24 @@ var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
     icon = _ref.icon,
+    className = _ref.className,
+    iconProps = _ref.iconProps,
     others = _objectWithoutProperties(_ref, _excluded);
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
+    statusClasses = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: calloutProps[status].variant
+    variant: "callout.base",
+    className: statusClasses
   }, others), icon || ___EmotionJSX(NoticeIcon, _extends({
     color: calloutProps[status].color,
     status: status,
+    variant: "callout.icon",
     "aria-label": "".concat(status, "-icon")
-  }, defaultIconProps)), children);
+  }, iconProps)), children);
 });
 Callout.displayName = 'Callout';
 export default Callout;

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

@@ -12,6 +12,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 React from 'react';
 import CheckBoldIcon from '@pingux/mdi-react/CheckBoldIcon';
+import LightbulbOutlineIcon from '@pingux/mdi-react/LightbulbOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Callout, Icon, Link, Text } from '../../index';
@@ -49,6 +50,19 @@ Default.parameters = {
     url: FIGMA_LINKS.callout["default"]
   }
 };
+export var Customizations = function Customizations() {
+  return ___EmotionJSX(Callout, {
+    icon: ___EmotionJSX(Icon, {
+      icon: LightbulbOutlineIcon,
+      size: "sm",
+      color: "teal-500",
+      mr: "md"
+    }),
+    sx: {
+      borderLeftColor: 'teal-500'
+    }
+  }, ___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."));
+};
 export var ErrorStatus = function ErrorStatus(args) {
   return ___EmotionJSX(Callout, _extends({
     status: statuses.ERROR
@@ -86,6 +100,14 @@ WithLink.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.callout.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
   }
 };
 export var Warning = function Warning(args) {