@pingux/astro 1.30.0-alpha.6 → 1.31.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.30.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.29.0...@pingux/astro@1.30.0) (2022-10-05)
+
+
+### Bug Fixes
+
+* [UIP-5379] NavBar a11y issues ([bed33a1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/bed33a16f1474cbf7c1853b302d43d61009392df))
+* [UIP-5694] Correct line spacing for CodeView ([a34459a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a34459a1c119834e5d924c7337127e249e686782))
+* handle image error status codes ([56f535e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/56f535ea21130a29bce52f45079f2bba852943db))
+
+
+### Features
+
+* [UIP-5514] Icon badge component ([ffa21c4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ffa21c44ef29a5c84ce551a85361bd93b8360be9))
+
+
+
+
+
 # [1.29.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.28.1...@pingux/astro@1.29.0) (2022-09-29)
 
 

package/lib/cjs/components/Image/Image.js

@@ -93,8 +93,8 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      hasTimedOut = _useState6[0],
-      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      shouldShowFallback = _useState6[0],
+      setShouldShowFallback = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -106,7 +106,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
       return fallbackImage;
     }
 
@@ -115,7 +115,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var imgSrc = (0, _react.useMemo)(function () {
     return setImgSrc();
-  }, [src, isLoading, hasTimedOut]);
+  }, [src, isLoading, shouldShowFallback]);
   var imgRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -146,12 +146,13 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
+    setShouldShowFallback(true);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setHasTimedOut(true);
+      setShouldShowFallback(true);
     }
   };
 
@@ -179,9 +180,9 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
+    alt: alt,
     className: classNames,
     ref: imgRef,
-    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -69,6 +69,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var placeholder = props.placeholder,
+      isDisabled = props.isDisabled,
       status = props.status;
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
@@ -94,7 +95,8 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "link"
+    variant: "link",
+    tabIndex: isDisabled ? -1 : 0
   }, triggerProps, ariaProps), (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"

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

@@ -8,12 +8,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithError = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
+var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
+
 var _index = require("../index");
 
 var _react2 = require("@emotion/react");
@@ -22,126 +24,157 @@ var _default = {
   title: 'Recipes/Attribute Mapping Read Only Field'
 };
 exports["default"] = _default;
+var sx = {
+  alertCircleIcon: {
+    position: 'absolute',
+    right: '4px',
+    top: '4px',
+    fill: '#A31300'
+  },
+  attributeMappingTitle: {
+    fontSize: 'lg',
+    lineHeight: '21px',
+    fontWeight: 3,
+    color: 'text.primary'
+  },
+  attributeMappingTitleWrapper: {
+    marginBottom: 'md',
+    alignItems: 'center'
+  },
+  chip: {
+    width: 'xx',
+    height: '22px',
+    alignSelf: 'center',
+    minWidth: 'fit-content',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    backgroundColor: 'white !important',
+    marginLeft: 8,
+    '& span': {
+      fontSize: 'sm',
+      lineHeight: 1,
+      color: '#253746'
+    }
+  },
+  createIconButton: {
+    marginLeft: 'xs'
+  },
+  defaultFieldsWrapperBox: {
+    padding: '10px 10px 24px 10px',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
+  fieldColumnTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    lineHeight: '18px',
+    marginBottom: 'xs'
+  },
+  fieldColumnTitleWrapper: {
+    width: 'calc(50% - 22px)'
+  },
+  fieldRowWrapper: {
+    alignItems: 'center',
+    marginTop: 'sm'
+  },
+  separator: {
+    width: '21px',
+    margin: '0 2px'
+  },
+  tooltipBox: {
+    marginLeft: 'xs',
+    height: 'md',
+    width: 'md'
+  }
+};
 
-var Default = function Default() {
-  var Row = function Row(props) {
-    var withChip = props.withChip,
-        withTooltip = props.withTooltip,
-        leftValue = props.leftValue,
-        rightValue = props.rightValue;
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignItems: "center",
-      mt: "10px"
-    }, (0, _react2.jsx)(_index.TextField, {
-      isReadOnly: true,
-      value: leftValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(leftValue),
-        sx: {
-          width: '165px'
-        }
-      }
-    }), (0, _react2.jsx)(_index.Separator, {
+var Row = function Row(props) {
+  var withChip = props.withChip,
+      withTooltip = props.withTooltip,
+      withError = props.withError,
+      leftValue = props.leftValue,
+      rightValue = props.rightValue;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.fieldRowWrapper
+  }, (0, _react2.jsx)(_index.TextField, {
+    isReadOnly: true,
+    value: leftValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(leftValue),
       sx: {
-        width: '21px',
-        ml: '2px',
-        mr: '2px'
-      }
-    }), (0, _react2.jsx)(_index.TextField, {
-      isReadOnly: true,
-      value: rightValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(rightValue),
-        sx: {
-          width: '165px'
-        }
+        width: '165px'
       }
-    }), withChip && (0, _react2.jsx)(_index.Chip, {
-      label: "Required",
+    },
+    slots: withError && {
+      inContainer: (0, _react2.jsx)(_index.Icon, {
+        icon: _AlertCircleIcon["default"],
+        sx: sx.alertCircleIcon
+      })
+    }
+  }), (0, _react2.jsx)(_index.Separator, {
+    sx: sx.separator
+  }), (0, _react2.jsx)(_index.TextField, {
+    isReadOnly: true,
+    value: rightValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(rightValue),
       sx: {
-        width: '65px',
-        height: '22px',
-        alignSelf: 'center',
-        minWidth: 'fit-content',
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        backgroundColor: 'white !important',
-        ml: 8,
-        '& span': {
-          fontSize: 'sm',
-          lineHeight: 1,
-          color: '#253746'
-        }
-      }
-    }), withTooltip && (0, _react2.jsx)(_index.Box, {
-      ml: "5px",
-      height: "15px",
-      width: "15px"
-    }, (0, _react2.jsx)(_index.HelpHint, {
-      tooltipProps: {
-        direction: 'bottom'
+        width: '165px'
       }
-    }, "Population set to default")));
-  };
+    }
+  }), withChip && (0, _react2.jsx)(_index.Chip, {
+    label: "Required",
+    sx: sx.chip
+  }), withTooltip && (0, _react2.jsx)(_index.Box, {
+    sx: sx.tooltipBox
+  }, (0, _react2.jsx)(_index.HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    }
+  }, "Population set to default")));
+};
 
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+var Title = function Title() {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignItems: "center",
-    mb: "15px"
+    sx: sx.attributeMappingTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'lg',
-      lineHeight: '21px',
-      fontWeight: 3,
-      color: 'text.primary'
-    }
+    sx: sx.attributeMappingTitle
   }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.createIconButton,
     variant: "inverted",
     "aria-label": "edit header button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: 18
-  })))), (0, _react2.jsx)(_index.Box, {
-    backgroundColor: "accent.99",
-    width: "450px",
-    padding: "10px 10px 25px 10px"
+  }))));
+};
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Box, {
+    sx: sx.defaultFieldsWrapperBox
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
       width: '100%'
     }
   }, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "PingOne")), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withChip: true,
     leftValue: "UserId",
@@ -162,4 +195,61 @@ var Default = function Default() {
   })));
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var WithError = function WithError() {
+  var withError = true;
+  var withErrorSx = {
+    errorBox: {
+      flexDirection: 'row !important',
+      alignItems: 'center',
+      padding: '13px 12px 13px 15px',
+      gap: 'md',
+      border: '1px solid #A31300',
+      width: '450px',
+      marginBottom: 'xs'
+    },
+    text: {
+      fontSize: 'sm',
+      lineHeight: '15px'
+    }
+  };
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), withError && (0, _react2.jsx)(_index.Box, {
+    sx: withErrorSx.errorBox
+  }, (0, _react2.jsx)(_index.Icon, {
+    size: 24,
+    icon: _AlertCircleIcon["default"],
+    color: "#A31300"
+  }), (0, _react2.jsx)(_index.Text, {
+    sx: withErrorSx.text
+  }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), (0, _react2.jsx)(_index.Box, {
+    sx: sx.defaultFieldsWrapperBox
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.fieldColumnTitle
+  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.fieldColumnTitle
+  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), (0, _react2.jsx)(Row, {
+    withError: withError,
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), (0, _react2.jsx)(Row, {
+    withError: withError,
+    leftValue: "familyName",
+    rightValue: "lastName"
+  })));
+};
+
+exports.WithError = WithError;

package/lib/components/Image/Image.js

@@ -57,8 +57,8 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      hasTimedOut = _useState6[0],
-      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      shouldShowFallback = _useState6[0],
+      setShouldShowFallback = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -70,7 +70,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
       return fallbackImage;
     }
 
@@ -79,7 +79,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var imgSrc = useMemo(function () {
     return setImgSrc();
-  }, [src, isLoading, hasTimedOut]);
+  }, [src, isLoading, shouldShowFallback]);
   var imgRef = useRef();
   /* istanbul ignore next */
 
@@ -110,12 +110,13 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
+    setShouldShowFallback(true);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setHasTimedOut(true);
+      setShouldShowFallback(true);
     }
   };
 
@@ -143,9 +144,9 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
+    alt: alt,
     className: classNames,
     ref: imgRef,
-    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -33,6 +33,7 @@ import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
+      isDisabled = props.isDisabled,
       status = props.status;
 
   var _getAriaAttributeProp = getAriaAttributeProps(props),
@@ -59,7 +60,8 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var trigger = ___EmotionJSX(Button, _extends({
     className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "link"
+    variant: "link",
+    tabIndex: isDisabled ? -1 : 0
   }, triggerProps, ariaProps), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -1,129 +1,162 @@
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Attribute Mapping Read Only Field'
 };
-export var Default = function Default() {
-  var Row = function Row(props) {
-    var withChip = props.withChip,
-        withTooltip = props.withTooltip,
-        leftValue = props.leftValue,
-        rightValue = props.rightValue;
-    return ___EmotionJSX(Box, {
-      isRow: true,
-      alignItems: "center",
-      mt: "10px"
-    }, ___EmotionJSX(TextField, {
-      isReadOnly: true,
-      value: leftValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(leftValue),
-        sx: {
-          width: '165px'
-        }
-      }
-    }), ___EmotionJSX(Separator, {
+var sx = {
+  alertCircleIcon: {
+    position: 'absolute',
+    right: '4px',
+    top: '4px',
+    fill: '#A31300'
+  },
+  attributeMappingTitle: {
+    fontSize: 'lg',
+    lineHeight: '21px',
+    fontWeight: 3,
+    color: 'text.primary'
+  },
+  attributeMappingTitleWrapper: {
+    marginBottom: 'md',
+    alignItems: 'center'
+  },
+  chip: {
+    width: 'xx',
+    height: '22px',
+    alignSelf: 'center',
+    minWidth: 'fit-content',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    backgroundColor: 'white !important',
+    marginLeft: 8,
+    '& span': {
+      fontSize: 'sm',
+      lineHeight: 1,
+      color: '#253746'
+    }
+  },
+  createIconButton: {
+    marginLeft: 'xs'
+  },
+  defaultFieldsWrapperBox: {
+    padding: '10px 10px 24px 10px',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
+  fieldColumnTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    lineHeight: '18px',
+    marginBottom: 'xs'
+  },
+  fieldColumnTitleWrapper: {
+    width: 'calc(50% - 22px)'
+  },
+  fieldRowWrapper: {
+    alignItems: 'center',
+    marginTop: 'sm'
+  },
+  separator: {
+    width: '21px',
+    margin: '0 2px'
+  },
+  tooltipBox: {
+    marginLeft: 'xs',
+    height: 'md',
+    width: 'md'
+  }
+};
+
+var Row = function Row(props) {
+  var withChip = props.withChip,
+      withTooltip = props.withTooltip,
+      withError = props.withError,
+      leftValue = props.leftValue,
+      rightValue = props.rightValue;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.fieldRowWrapper
+  }, ___EmotionJSX(TextField, {
+    isReadOnly: true,
+    value: leftValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(leftValue),
       sx: {
-        width: '21px',
-        ml: '2px',
-        mr: '2px'
-      }
-    }), ___EmotionJSX(TextField, {
-      isReadOnly: true,
-      value: rightValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(rightValue),
-        sx: {
-          width: '165px'
-        }
+        width: '165px'
       }
-    }), withChip && ___EmotionJSX(Chip, {
-      label: "Required",
+    },
+    slots: withError && {
+      inContainer: ___EmotionJSX(Icon, {
+        icon: AlertCircleIcon,
+        sx: sx.alertCircleIcon
+      })
+    }
+  }), ___EmotionJSX(Separator, {
+    sx: sx.separator
+  }), ___EmotionJSX(TextField, {
+    isReadOnly: true,
+    value: rightValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(rightValue),
       sx: {
-        width: '65px',
-        height: '22px',
-        alignSelf: 'center',
-        minWidth: 'fit-content',
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        backgroundColor: 'white !important',
-        ml: 8,
-        '& span': {
-          fontSize: 'sm',
-          lineHeight: 1,
-          color: '#253746'
-        }
-      }
-    }), withTooltip && ___EmotionJSX(Box, {
-      ml: "5px",
-      height: "15px",
-      width: "15px"
-    }, ___EmotionJSX(HelpHint, {
-      tooltipProps: {
-        direction: 'bottom'
+        width: '165px'
       }
-    }, "Population set to default")));
-  };
+    }
+  }), withChip && ___EmotionJSX(Chip, {
+    label: "Required",
+    sx: sx.chip
+  }), withTooltip && ___EmotionJSX(Box, {
+    sx: sx.tooltipBox
+  }, ___EmotionJSX(HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    }
+  }, "Population set to default")));
+};
 
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+var Title = function Title() {
+  return ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    mb: "15px"
+    sx: sx.attributeMappingTitleWrapper
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'lg',
-      lineHeight: '21px',
-      fontWeight: 3,
-      color: 'text.primary'
-    }
+    sx: sx.attributeMappingTitle
   }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.createIconButton,
     variant: "inverted",
     "aria-label": "edit header button"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: 18
-  })))), ___EmotionJSX(Box, {
-    backgroundColor: "accent.99",
-    width: "450px",
-    padding: "10px 10px 25px 10px"
+  }))));
+};
+
+export var Default = function Default() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Box, {
+    sx: sx.defaultFieldsWrapperBox
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
       width: '100%'
     }
   }, ___EmotionJSX(Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "PingOne")), ___EmotionJSX(Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withChip: true,
     leftValue: "UserId",
@@ -142,4 +175,58 @@ export var Default = function Default() {
     leftValue: "password",
     rightValue: "password"
   })));
+};
+export var WithError = function WithError() {
+  var withError = true;
+  var withErrorSx = {
+    errorBox: {
+      flexDirection: 'row !important',
+      alignItems: 'center',
+      padding: '13px 12px 13px 15px',
+      gap: 'md',
+      border: '1px solid #A31300',
+      width: '450px',
+      marginBottom: 'xs'
+    },
+    text: {
+      fontSize: 'sm',
+      lineHeight: '15px'
+    }
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), withError && ___EmotionJSX(Box, {
+    sx: withErrorSx.errorBox
+  }, ___EmotionJSX(Icon, {
+    size: 24,
+    icon: AlertCircleIcon,
+    color: "#A31300"
+  }), ___EmotionJSX(Text, {
+    sx: withErrorSx.text
+  }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), ___EmotionJSX(Box, {
+    sx: sx.defaultFieldsWrapperBox
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, ___EmotionJSX(Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, ___EmotionJSX(Text, {
+    sx: sx.fieldColumnTitle
+  }, "PingOne")), ___EmotionJSX(Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, ___EmotionJSX(Text, {
+    sx: sx.fieldColumnTitle
+  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), ___EmotionJSX(Row, {
+    withError: withError,
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), ___EmotionJSX(Row, {
+    withError: withError,
+    leftValue: "familyName",
+    rightValue: "lastName"
+  })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.30.0-alpha.6",
+  "version": "1.31.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",