@pingux/astro 1.2.0-alpha.1 → 1.2.0-alpha.5

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

@@ -8,12 +8,18 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+exports.ColorBlockButton = exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
 
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _ = _interopRequireDefault(require("."));
@@ -56,6 +62,13 @@ var _default = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 exports["default"] = _default;
@@ -110,4 +123,32 @@ var InlineButton = function InlineButton() {
   }, "Inline");
 };
 
-exports.InlineButton = InlineButton;
+exports.InlineButton = InlineButton;
+
+var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = (0, _objectWithoutProperties2["default"])(args, ["isConfigured"]);
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Text["default"], {
+    variant: "buttonTitle"
+  }, "Title"), (0, _react2.jsx)(_Text["default"], {
+    variant: "buttonSubtitle"
+  }, "Info")), (0, _react2.jsx)(_Icon["default"], {
+    icon: _CreateIcon["default"]
+  }));
+};
+
+exports.ColorBlockButton = ColorBlockButton;
+ColorBlockButton.story = {
+  argTypes: {
+    isConfigured: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    }
+  }
+};

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

@@ -122,4 +122,30 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});
+test('color block button renders in default state', function () {
+  getComponent({
+    variant: 'colorBlock'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+  expect(button).not.toHaveClass('is-configured');
+
+  _userEvent["default"].tab();
+
+  expect(button).toHaveClass('is-focused');
+  expect(button).toHaveFocus();
+});
+test('color block button renders in configured state', function () {
+  getComponent({
+    variant: 'colorBlock',
+    className: 'is-configured'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass('is-configured');
 });

package/lib/cjs/components/CopyText/CopyButton.js

@@ -18,6 +18,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
 
+var _lodash = require("lodash");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -29,10 +33,13 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     "aria-label": "copy",
     variant: "buttons.copy"
-  }, props), (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
     size: 15
-  }));
+  }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
+CopyButton.propTypes = {
+  iconProps: _propTypes["default"].shape({})
+};
 var _default = CopyButton;
 exports["default"] = _default;

package/lib/cjs/components/Messages/Messages.reducer.js

@@ -8,7 +8,7 @@ _Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.multiMessagesReducer = void 0;
+exports["default"] = exports.multiMessagesReducer = exports.messagesReducer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
 
@@ -35,6 +35,7 @@ function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(obje
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
 
 var messagesReducer = _utils.messagesReducer;
+exports.messagesReducer = messagesReducer;
 var multiMessagesReducer = _utils.multiMessagesReducer;
 exports.multiMessagesReducer = multiMessagesReducer;
 

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

@@ -52,7 +52,7 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _ = require("../..");
 
-var _Messages = _interopRequireWildcard(require("./Messages.reducer"));
+var _index = require("./index");
 
 var _react2 = require("@emotion/react");
 
@@ -233,21 +233,21 @@ var UseReducer = function UseReducer() {
   //   showErrorMessage: makeShowMessage('error', -1),
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
-  var _useReducer = (0, _react.useReducer)(_Messages["default"]),
+  var _useReducer = (0, _react.useReducer)(_index.messagesReducerStory),
       _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
       items = _useReducer2[0],
       dispatch = _useReducer2[1];
 
   var showAMessage = function showAMessage() {
-    var actionFn = [_Messages["default"].actions.showSuccessMessage, _Messages["default"].actions.showErrorMessage, _Messages["default"].actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var actionFn = [_index.messagesReducerStory.actions.showSuccessMessage, _index.messagesReducerStory.actions.showErrorMessage, _index.messagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(message)(dispatch);
   };
 
   var removeMessage = function removeMessage(key) {
-    dispatch(_Messages["default"].actions.hideMessage(key));
+    dispatch(_index.messagesReducerStory.actions.hideMessage(key));
     (0, _setTimeout2["default"])(function () {
-      return dispatch(_Messages["default"].actions.removeMessage(key));
+      return dispatch(_index.messagesReducerStory.actions.removeMessage(key));
     }, 200);
   };
 
@@ -256,7 +256,7 @@ var UseReducer = function UseReducer() {
   }, "Add Message"), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_.Button, {
     mt: "md",
     onPress: function onPress() {
-      return dispatch(_Messages["default"].actions.clearMessages());
+      return dispatch(_index.messagesReducerStory.actions.clearMessages());
     }
   }, "Clear messages"), (0, _react2.jsx)(_.Messages, {
     items: items,
@@ -269,7 +269,7 @@ var UseReducer = function UseReducer() {
 exports.UseReducer = UseReducer;
 
 var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
-  var _useReducer3 = (0, _react.useReducer)(_Messages.multiMessagesReducer, {
+  var _useReducer3 = (0, _react.useReducer)(_index.multiMessagesReducerStory, {
     'container-one': [],
     'container-two': []
   }),
@@ -278,15 +278,15 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       dispatch = _useReducer4[1];
 
   var showAMessage = function showAMessage(container) {
-    var actionFn = [_Messages.multiMessagesReducer.actions.showSuccessMessage, _Messages.multiMessagesReducer.actions.showCriticalMessage, _Messages.multiMessagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var actionFn = [_index.multiMessagesReducerStory.actions.showSuccessMessage, _index.multiMessagesReducerStory.actions.showCriticalMessage, _index.multiMessagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(container, message)(dispatch);
   };
 
   var removeMessage = function removeMessage(key, container) {
-    dispatch(_Messages.multiMessagesReducer.actions.hideMessage(container, key));
+    dispatch(_index.multiMessagesReducerStory.actions.hideMessage(container, key));
     (0, _setTimeout2["default"])(function () {
-      return dispatch(_Messages.multiMessagesReducer.actions.removeMessage(container, key));
+      return dispatch(_index.multiMessagesReducerStory.actions.removeMessage(container, key));
     }, 200);
   };
 

package/lib/cjs/components/Messages/Messages.test.js

@@ -26,7 +26,7 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _ = _interopRequireDefault(require("."));
+var _ = _interopRequireWildcard(require("."));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -211,4 +211,18 @@ describe('announcements', function () {
     expect(messages.childElementCount).toBe(1);
     expect(_liveAnnouncer.announce).toHaveBeenCalledWith('New message 1', 'polite');
   });
+});
+test('should render messages with messagesReducerStory', function () {
+  getComponent();
+
+  _.messagesReducerStory.actions.showSuccessMessage();
+
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render messages with multiMessagesReducerStory', function () {
+  getComponent();
+
+  _.multiMessagesReducerStory.actions.showSuccessMessage();
+
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
 });

package/lib/cjs/components/Messages/index.js

@@ -14,7 +14,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _exportNames = {};
+var _exportNames = {
+  messagesReducerStory: true,
+  multiMessagesReducerStory: true
+};
 
 _Object$defineProperty(exports, "default", {
   enumerable: true,
@@ -23,6 +26,20 @@ _Object$defineProperty(exports, "default", {
   }
 });
 
+_Object$defineProperty(exports, "messagesReducerStory", {
+  enumerable: true,
+  get: function get() {
+    return _Messages2.messagesReducer;
+  }
+});
+
+_Object$defineProperty(exports, "multiMessagesReducerStory", {
+  enumerable: true,
+  get: function get() {
+    return _Messages2.multiMessagesReducer;
+  }
+});
+
 var _Messages = _interopRequireDefault(require("./Messages"));
 
 var _utils = require("./utils");
@@ -37,4 +54,6 @@ _forEachInstanceProperty(_context = _Object$keys(_utils)).call(_context, functio
       return _utils[key];
     }
   });
-});
+});
+
+var _Messages2 = require("./Messages.reducer");

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -320,7 +320,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           height: '100%',
           m: 5,
           mr: 10,
-          py: 2
+          ml: 0,
+          py: 3,
+          pr: 0
         },
         textProps: {
           sx: {

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.MaxLength = exports.WithoutStatusIndicator = exports.WithHelpHint = exports.Warning = exports.Success = exports.Error = exports.DynamicRequired = exports.Required = exports.ReadOnly = exports.Disabled = exports.Password = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.SmallVariant = exports.Default = exports["default"] = void 0;
+exports.WithSlots = exports.MaxLength = exports.WithoutStatusIndicator = exports.WithHelpHint = exports.Warning = exports.Success = exports.Error = exports.DynamicRequired = exports.Required = exports.ReadOnly = exports.Disabled = exports.Password = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.SmallVariant = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -32,6 +32,10 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
+
+var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -259,4 +263,77 @@ var MaxLength = function MaxLength() {
   });
 };
 
-exports.MaxLength = MaxLength;
+exports.MaxLength = MaxLength;
+
+var WithSlots = function WithSlots() {
+  var _useState5 = (0, _react.useState)("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      addressesValue = _useState6[0],
+      setAddressesValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      jsonValue = _useState8[0],
+      setJsonValue = _useState8[1];
+
+  var copyAddressesToClipboard = (0, _useCopyToClipboard["default"])(addressesValue);
+  var copyJsonToClipboard = (0, _useCopyToClipboard["default"])(jsonValue);
+  var buttonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '5px'
+  };
+  var containerSx = {
+    sx: {
+      '& input': {
+        paddingRight: '40px'
+      }
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_["default"], {
+    label: "Multiple Addresses",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setAddressesValue(e.target.value);
+    },
+    value: addressesValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: (0, _react2.jsx)(_CopyButton["default"], {
+        onPress: copyAddressesToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    },
+    mb: 30
+  }), (0, _react2.jsx)(_["default"], {
+    label: "Example JSON",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setJsonValue(e.target.value);
+    },
+    value: jsonValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: (0, _react2.jsx)(_CopyButton["default"], {
+        onPress: copyJsonToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    }
+  }));
+};
+
+exports.WithSlots = WithSlots;

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

@@ -376,7 +376,7 @@ var chipDeleteButton = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  ml: 'xs',
+  mx: '3px !important',
   p: 0,
   width: 14,
   '&.is-focused, &.is-hovered': {
@@ -556,6 +556,58 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -595,6 +647,7 @@ var _default = {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };
 exports["default"] = _default;

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

@@ -178,6 +178,20 @@ var text = {
     color: 'accent.30',
     fontFamily: 'standard'
   }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'text.secondary',
     textTransform: 'uppercase',

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

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
+import CreateIcon from 'mdi-react/CreateIcon';
 import Box from '../Box';
 import Button from '.';
 import Icon from '../Icon';
@@ -36,6 +39,13 @@ export default {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 export var Default = function Default(args) {
@@ -74,4 +84,30 @@ export var InlineButton = function InlineButton() {
     mb: "sm",
     variant: "inline"
   }, "Inline");
+};
+export var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = _objectWithoutProperties(args, ["isConfigured"]);
+
+  return ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+ColorBlockButton.story = {
+  argTypes: {
+    isConfigured: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    }
+  }
 };

package/lib/components/Button/Button.test.js

@@ -89,4 +89,24 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});
+test('color block button renders in default state', function () {
+  getComponent({
+    variant: 'colorBlock'
+  });
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  expect(button).not.toHaveClass('is-configured');
+  userEvent.tab();
+  expect(button).toHaveClass('is-focused');
+  expect(button).toHaveFocus();
+});
+test('color block button renders in configured state', function () {
+  getComponent({
+    variant: 'colorBlock',
+    className: 'is-configured'
+  });
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass('is-configured');
 });

package/lib/components/CopyText/CopyButton.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import ContentCopy from 'mdi-react/ContentCopyIcon';
+import { omit } from 'lodash';
+import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -9,9 +11,12 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     "aria-label": "copy",
     variant: "buttons.copy"
-  }, props), ___EmotionJSX(Icon, {
+  }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
     size: 15
-  }));
+  }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
+CopyButton.propTypes = {
+  iconProps: PropTypes.shape({})
+};
 export default CopyButton;

package/lib/components/Messages/Messages.reducer.js

@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { messagesReducer as messagesReducerCore, multiMessagesReducer as multiMessagesReducerCore } from './utils';
-var messagesReducer = messagesReducerCore;
+export var messagesReducer = messagesReducerCore;
 export var multiMessagesReducer = multiMessagesReducerCore;
 
 var makeShowMessage = function makeShowMessage(status, timeout) {

package/lib/components/Messages/Messages.stories.js

@@ -23,7 +23,7 @@ import { Item } from '@react-stately/collections';
 import AccountIcon from 'mdi-react/AccountIcon';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, Button, Messages } from '../..';
-import messagesReducer, { multiMessagesReducer } from './Messages.reducer';
+import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Messages',

package/lib/components/Messages/Messages.test.js

@@ -9,7 +9,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import Messages from '.';
+import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
 import Button from '../Button';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('@react-aria/live-announcer');
@@ -173,4 +173,14 @@ describe('announcements', function () {
     expect(messages.childElementCount).toBe(1);
     expect(announce).toHaveBeenCalledWith('New message 1', 'polite');
   });
+});
+test('should render messages with messagesReducerStory', function () {
+  getComponent();
+  messagesReducerStory.actions.showSuccessMessage();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render messages with multiMessagesReducerStory', function () {
+  getComponent();
+  multiMessagesReducerStory.actions.showSuccessMessage();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
 });

package/lib/components/Messages/index.js

@@ -1,2 +1,3 @@
 export { default } from './Messages';
-export * from './utils';
+export * from './utils';
+export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -278,7 +278,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           height: '100%',
           m: 5,
           mr: 10,
-          py: 2
+          ml: 0,
+          py: 3,
+          pr: 0
         },
         textProps: {
           sx: {

package/lib/components/TextField/TextField.stories.js

@@ -8,6 +8,8 @@ import TextField from '.';
 import { modes as labelModes } from '../Label/constants';
 import statuses from '../../utils/devUtils/constants/statuses.js';
 import Box from '../Box';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import CopyButton from '../CopyText/CopyButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
@@ -186,4 +188,74 @@ export var MaxLength = function MaxLength() {
     label: "Example label",
     maxLength: 9
   });
+};
+export var WithSlots = function WithSlots() {
+  var _useState5 = useState("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
+      _useState6 = _slicedToArray(_useState5, 2),
+      addressesValue = _useState6[0],
+      setAddressesValue = _useState6[1];
+
+  var _useState7 = useState("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
+      _useState8 = _slicedToArray(_useState7, 2),
+      jsonValue = _useState8[0],
+      setJsonValue = _useState8[1];
+
+  var copyAddressesToClipboard = useCopyToClipboard(addressesValue);
+  var copyJsonToClipboard = useCopyToClipboard(jsonValue);
+  var buttonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '5px'
+  };
+  var containerSx = {
+    sx: {
+      '& input': {
+        paddingRight: '40px'
+      }
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Multiple Addresses",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setAddressesValue(e.target.value);
+    },
+    value: addressesValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: ___EmotionJSX(CopyButton, {
+        onPress: copyAddressesToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    },
+    mb: 30
+  }), ___EmotionJSX(TextField, {
+    label: "Example JSON",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setJsonValue(e.target.value);
+    },
+    value: jsonValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: ___EmotionJSX(CopyButton, {
+        onPress: copyJsonToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    }
+  }));
 };

package/lib/styles/variants/buttons.js

@@ -354,7 +354,7 @@ var chipDeleteButton = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  ml: 'xs',
+  mx: '3px !important',
   p: 0,
   width: 14,
   '&.is-focused, &.is-hovered': {
@@ -534,6 +534,58 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -573,5 +625,6 @@ export default {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };

package/lib/styles/variants/text.js

@@ -158,6 +158,20 @@ export var text = {
     color: 'accent.30',
     fontFamily: 'standard'
   }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'text.secondary',
     textTransform: 'uppercase',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.2.0-alpha.1",
+  "version": "1.2.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",