@pingux/astro 2.9.2 → 2.13.0-alpha.11

package/lib/cjs/recipes/{AttributesAndPingOneMapping.stories.js → AttributeMapping.stories.js}

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Edit = exports.DisplayWithError = exports.Display = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -16,27 +16,84 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _AddIcon = _interopRequireDefault(require("@pingux/mdi-react/AddIcon"));
+var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
 var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
+var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
+var _uuid = require("uuid");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
 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 items = [{
-  name: 'Aardvark',
-  id: '1'
-}, {
-  name: 'Kangaroo',
-  id: '2'
-}, {
-  name: 'Snake',
-  id: '3'
-}];
 var _default = {
-  title: 'Recipes/Attributes And PingOne Mapping'
+  title: 'Recipes/Attribute Mappings'
 };
 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'
+  },
+  badge: {
+    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 editSx = {
   rowBox: {
     mb: '24.95px'
   },
@@ -49,7 +106,7 @@ var sx = {
   },
   headingText: {
     fontSize: 'sm',
-    fontWeight: 400,
+    fontWeight: 0,
     color: 'neutral.40'
   },
   firstRowTitle: {
@@ -62,11 +119,322 @@ var sx = {
   secondRowTitle: {
     fontWeight: 3,
     fontSize: 'md',
-    ml: '10px',
+    ml: 'sm',
     flexGrow: 1
+  },
+  comboBoxAndIconParentBox: {
+    width: '378px',
+    ml: '12px',
+    alignItems: 'center'
+  },
+  headingParentBox: {
+    alignItems: 'center',
+    mb: 'md',
+    ml: 'xs'
+  },
+  addRowButton: {
+    ml: 'auto',
+    height: '22px',
+    minWidth: '0',
+    width: '70px'
+  },
+  addButtonIconBox: {
+    alignItems: 'center',
+    width: '38px',
+    justifyContent: 'center'
+  },
+  addIcon: {
+    mr: 'xs',
+    color: 'active'
+  },
+  editAttributesBox: {
+    bg: 'accent.99',
+    p: '16px'
+  },
+  scrollBox: {
+    mt: 'md',
+    maxHeight: '700px'
+  }
+};
+var helperTextId = (0, _uuid.v4)();
+var Row = function Row(props) {
+  var withBadge = props.withBadge,
+    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: '165px'
+      }
+    },
+    "aria-labelledby": withError && helperTextId,
+    slots: withError && {
+      inContainer: (0, _react2.jsx)(_index.Icon, {
+        icon: _AlertCircleIcon["default"],
+        sx: sx.alertCircleIcon,
+        title: {
+          name: 'Alert Circle Icon'
+        }
+      })
+    }
+  }), (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: '165px'
+      }
+    }
+  }), withBadge && (0, _react2.jsx)(_index.Badge, {
+    label: "Required",
+    sx: sx.badge
+  }), withTooltip && (0, _react2.jsx)(_index.Box, {
+    sx: sx.tooltipBox
+  }, (0, _react2.jsx)(_index.HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    }
+  }, "Population set to default")));
+};
+var Title = function Title() {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.attributeMappingTitleWrapper
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.attributeMappingTitle
+  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    sx: sx.createIconButton,
+    variant: "inverted",
+    "aria-label": "edit header button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "sm",
+    title: {
+      name: 'Create Icon'
+    }
+  }))));
+};
+var Display = function Display() {
+  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: 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, {
+    withBadge: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "familyName",
+    rightValue: "lastName"
+  }), (0, _react2.jsx)(Row, {
+    withTooltip: true,
+    leftValue: "population",
+    rightValue: "population"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "password",
+    rightValue: "password"
+  })));
+};
+exports.Display = Display;
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.attributeMappings.display
+  }
+};
+var DisplayWithError = function DisplayWithError() {
+  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",
+    title: {
+      name: 'Alert Circle Icon'
+    }
+  }), (0, _react2.jsx)(_index.Text, {
+    sx: withErrorSx.text,
+    id: helperTextId,
+    role: "alert"
+  }, "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, {
+    withBadge: 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.DisplayWithError = DisplayWithError;
+var Edit = function Edit() {
+  var defaultRows = [{
+    isDisabled: false,
+    textValue: '',
+    inputValue: '',
+    name: 'first default'
+  }, {
+    isDisabled: false,
+    textValue: '',
+    inputValue: '',
+    name: 'second default'
+  }];
+  var _useState = (0, _react.useState)(defaultRows),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isSubmitted = _useState4[0],
+    submitFields = _useState4[1];
+  var addRow = function addRow() {
+    var _context;
+    var newRow = {
+      isDisabled: false,
+      isNewRow: true,
+      textValue: '',
+      inputValue: '',
+      name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
+    };
+    setRows((0, _concat["default"])(_context = []).call(_context, rows, [newRow]));
+  };
+  var removeRow = function removeRow(rowIndex) {
+    var _context2;
+    var newArray = (0, _filter["default"])(rows).call(rows, function (row, index) {
+      return rowIndex !== index;
+    });
+    setRows((0, _concat["default"])(_context2 = []).call(_context2, newArray));
+  };
+  var updateRow = function updateRow(rowIndex, value, attribute) {
+    var _context3;
+    var newArray = (0, _map["default"])(rows).call(rows, function (row, index) {
+      if (rowIndex === index) {
+        var thisRow = rows[index];
+        thisRow[attribute] = value;
+        return thisRow;
+      }
+      return row;
+    });
+    setRows((0, _concat["default"])(_context3 = []).call(_context3, newArray));
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    maxWidth: "740px"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: editSx.headingParentBox
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: editSx.headingText
+  }, "Create new attributes and map predefined attributes with their PingOne Mappings."), (0, _react2.jsx)(_index.Button, {
+    variant: "inline",
+    onPress: addRow,
+    sx: editSx.addRowButton
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: editSx.addButtonIconBox
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _AddIcon["default"],
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    },
+    sx: editSx.addIcon
+  }), "Add"))), (0, _react2.jsx)(_index.Box, {
+    sx: editSx.editAttributesBox
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: editSx.firstRowTitle
+  }, "Attributes"), (0, _react2.jsx)(_index.Text, {
+    sx: editSx.secondRowTitle
+  }, "PingOne Mappings")), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.ScrollBox, {
+    sx: editSx.scrollBox
+  }, (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(rows).call(rows, function (row, index) {
+    return (0, _react2.jsx)(EditRow, (0, _extends2["default"])({}, row, {
+      index: index,
+      removeRow: removeRow,
+      updateRow: updateRow,
+      key: "row container ".concat(row.name),
+      isSubmitted: isSubmitted,
+      submitFields: submitFields
+    }));
+  })))));
+};
+exports.Edit = Edit;
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.attributeMappings.edit
   }
 };
-var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
+var EditRow = /*#__PURE__*/(0, _react.memo)(function (props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,
     index = props.index,
@@ -77,6 +445,16 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     areRowsValid = props.areRowsValid,
     isSubmitted = props.isSubmitted,
     submitFields = props.submitFields;
+  var items = [{
+    name: 'Aardvark',
+    id: '1'
+  }, {
+    name: 'Kangaroo',
+    id: '2'
+  }, {
+    name: 'Snake',
+    id: '3'
+  }];
   var rowRef = (0, _react.useRef)();
   var textFieldRef = (0, _react.useRef)();
   var setTextValue = function setTextValue(value) {
@@ -93,6 +471,8 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
       textFieldRef.current.scrollIntoView();
     }
   }, []);
+  var isInputValueEmpty = !areRowsValid && isSubmitted && inputValue === '' && textValue !== '';
+  var isTextValueEmpty = !areRowsValid && isSubmitted && textValue === '' && inputValue !== '';
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
@@ -100,7 +480,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     ref: rowRef
   }, (0, _react2.jsx)(_index.Box, {
     width: "310px",
-    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? sx.rowBox : {}
+    sx: isInputValueEmpty ? editSx.rowBox : {}
   }, (0, _react2.jsx)(_index.TextField, {
     name: "custom-name",
     "aria-label": "text field",
@@ -109,7 +489,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
       mb: 0
     },
     controlProps: {
-      sx: sx.textField
+      sx: editSx.textField
     },
     id: "textField ".concat(index),
     key: "textField ".concat(index),
@@ -119,14 +499,11 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
       return setTextValue(e.target.value);
     },
     ref: textFieldRef,
-    status: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? 'error' : 'default',
+    status: isTextValueEmpty ? 'error' : 'default',
     helperText: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? 'Enter an attribute.' : null
   })), (0, _react2.jsx)(_index.Box, {
-    alignItems: "center",
-    ml: "12px",
     isRow: true,
-    width: "378px",
-    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? sx.rowBox : {}
+    sx: isInputValueEmpty ? editSx.rowBox : {} && editSx.comboBoxAndIconParentBox
   }, (0, _react2.jsx)(_index.Box, {
     flexGrow: "1",
     maxWidth: "310px"
@@ -135,8 +512,8 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     labelMode: "float",
     id: "inputField ".concat(index),
     key: "inputField ".concat(index),
-    status: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? 'error' : 'default',
-    helperText: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? 'Select an item.' : null,
+    status: isInputValueEmpty ? 'error' : 'default',
+    helperText: isInputValueEmpty ? 'Select an item.' : null,
     labelProps: {
       'aria-label': 'selection field',
       mb: 0
@@ -144,7 +521,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-label": "selection field",
     controlProps: {
       'aria-label': 'selection field',
-      sx: sx.comboBoxField
+      sx: editSx.comboBoxField
     },
     containerProps: {
       width: '100%',
@@ -160,11 +537,10 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
   })), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? {
+    ml: "xs",
+    sx: isInputValueEmpty && {
       mb: '22.475px',
       ml: 'xs'
-    } : {
-      ml: 'xs'
     }
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button with tooltip",
@@ -191,107 +567,4 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
       name: 'Delete Icon'
     }
   })))));
-});
-var Default = function Default() {
-  var defaultRows = [{
-    isDisabled: false,
-    textValue: '',
-    inputValue: '',
-    name: 'first default'
-  }, {
-    isDisabled: false,
-    textValue: '',
-    inputValue: '',
-    name: 'second default'
-  }];
-  var _useState = (0, _react.useState)(defaultRows),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    rows = _useState2[0],
-    setRows = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isSubmitted = _useState4[0],
-    submitFields = _useState4[1];
-  var addRow = function addRow() {
-    var _context;
-    var newRow = {
-      isDisabled: false,
-      isNewRow: true,
-      textValue: '',
-      inputValue: '',
-      name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
-    };
-    setRows((0, _concat["default"])(_context = []).call(_context, rows, [newRow]));
-  };
-  var removeRow = function removeRow(rowIndex) {
-    var _context2;
-    var newArray = (0, _filter["default"])(rows).call(rows, function (row, index) {
-      return rowIndex !== index;
-    });
-    setRows((0, _concat["default"])(_context2 = []).call(_context2, newArray));
-  };
-  var updateRow = function updateRow(rowIndex, value, attribute) {
-    var _context3;
-    var newArray = (0, _map["default"])(rows).call(rows, function (row, index) {
-      if (rowIndex === index) {
-        var thisRow = rows[index];
-        thisRow[attribute] = value;
-        return thisRow;
-      }
-      return row;
-    });
-    setRows((0, _concat["default"])(_context3 = []).call(_context3, newArray));
-  };
-  return (0, _react2.jsx)(_index.Box, {
-    maxWidth: "740px"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center",
-    mb: "md",
-    ml: "xs"
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.headingText
-  }, "Create new attributes and map predefined attributes with their PingOne Mappings."), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    ml: "auto",
-    height: "22px",
-    minWidth: "0px",
-    width: "70px",
-    onPress: addRow
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center",
-    width: "38px",
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _AddIcon["default"],
-    mr: "xs",
-    color: "active",
-    size: 15,
-    title: {
-      name: 'Add Icon'
-    }
-  }), "Add"))), (0, _react2.jsx)(_index.Box, {
-    backgroundColor: "accent.99",
-    p: "16px"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.firstRowTitle
-  }, "Attributes"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.secondRowTitle
-  }, "PingOne Mappings")), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.ScrollBox, {
-    mt: "md",
-    maxHeight: "700px"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(rows).call(rows, function (row, index) {
-    return (0, _react2.jsx)(Row, (0, _extends2["default"])({}, row, {
-      index: index,
-      removeRow: removeRow,
-      updateRow: updateRow,
-      key: "row container ".concat(row.name),
-      isSubmitted: isSubmitted,
-      submitFields: submitFields
-    }));
-  })))));
-};
-exports.Default = Default;
+});

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

@@ -24,7 +24,7 @@ var _Buttons = require("../components/Button/Buttons.styles");
 var _index = require("../index");
 var _react2 = require("@emotion/react");
 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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; } /* eslint-disable no-nested-ternary */
 var _default = {
   title: 'Recipes/Slider'
 };

package/lib/cjs/styles/colors.js

@@ -28,7 +28,7 @@ var critical = {
 };
 exports.critical = critical;
 var success = {
-  bright: '#00af18',
+  bright: '#00A817',
   dark: '#008512',
   light: '#e6ffe9'
 };

package/lib/cjs/styles/forms/index.js

@@ -32,7 +32,7 @@ var _TextArea = _interopRequireDefault(require("../../components/TextArea/TextAr
 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; }
 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; }
+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; } // 'switch' is a reserved keyword
 // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
 var _default = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {