@planningcenter/tapestry-react 2.6.1 → 2.7.0

package/dist/cjs/Button/Button.js

@@ -175,13 +175,25 @@ function Button(_ref) {
     if (iconRight) {
       iconRight['color'] = 'transparent';
     }
-  } // don't allow interacting with button when disabled
-
+  }
 
   if (disabled) {
-    buttonProps['aria-disabled'] = true;
-    buttonProps.cursor = 'not-allowed';
     buttonProps.opacity = 0.65;
+
+    if (buttonProps.type === "button" || buttonProps.type === "reset") {
+      buttonProps.disabled = true;
+    } else if (buttonProps.type === "submit") {
+      buttonProps['aria-disabled'] = true;
+      buttonProps.cursor = 'not-allowed';
+
+      buttonProps.onClick = function (event) {
+        return event.preventDefault();
+      };
+
+      buttonProps.onKeyDown = function (event) {
+        return event.preventDefault();
+      };
+    }
   } // don't apply hover/active styles or events when disabled or spinner is present
 
 

package/dist/cjs/Button/Button.test.js

@@ -24,39 +24,60 @@ it("should render as <button> with type=\"submit\"", function () {
   var button = container.querySelector('button');
   expect(button.getAttribute('type')).toEqual('submit');
 });
+it("should render \"disabled\" attribute, if <button> is disabled", function () {
+  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    disabled: true
+  })),
+      container = _render3.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute("aria-disabled")).toEqual(null);
+  expect(button.disabled).toBe(true);
+});
+it("should render \"aria-disabled\" attribute, if <button type=\"submit\"> is disabled", function () {
+  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    type: "submit",
+    disabled: true
+  })),
+      container = _render4.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute("aria-disabled")).toEqual("true");
+  expect(button.disabled).toBe(false);
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     title: title
   })),
-      getByText = _render3.getByText;
+      getByText = _render5.getByText;
 
   getByText(title);
 });
 it("should render <a> without a type if \"to\" is provided", function () {
-  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     to: "#"
   })),
-      container = _render4.container;
+      container = _render6.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('type')).toBeNull();
 });
 it("should render <a> without a type if \"href\" is provided", function () {
-  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     href: "#"
   })),
-      container = _render5.container;
+      container = _render7.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('type')).toBeNull();
 });
 it("should render <a> with \"href\" if \"to\" is specifed", function () {
-  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     to: "#"
   })),
-      container = _render6.container;
+      container = _render8.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('href')).toEqual('#');
@@ -64,12 +85,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render7.getByText;
+      getByText = _render9.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -79,18 +100,18 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: onClick
   })),
-      container = _render8.container;
+      container = _render10.container;
 
   _react2.fireEvent.click(container.firstChild);
 
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
-      container = _render9.container;
+  var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
+      container = _render11.container;
 
   _react2.fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/cjs/DataTable/DataTable.js

@@ -171,12 +171,13 @@ var DataTable = function DataTable(props) {
       onDrop: onDrop
     }, function (provided) {
       return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+        className: css(getVariant('body')),
+        "data-dnd-ignore-scrollable": true,
         ref: function ref(_ref2) {
           bodyRef.current = _ref2;
           provided.innerRef(_ref2);
         },
-        role: "rowgroup",
-        className: css(getVariant('body'))
+        role: "rowgroup"
       }, provided.droppableProps), /*#__PURE__*/_react["default"].createElement(_components.BodyRows, bodyRowsProps), provided.placeholder);
     }));
   } else {

package/dist/cjs/Input/Input.js

@@ -78,7 +78,8 @@ var Input = /*#__PURE__*/function (_Component) {
         highlightOnInteraction = _this$props.highlightOnInteraction,
         type = _this$props.type,
         value = _this$props.value,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value"]);
+        required = _this$props.required,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value", "required"]);
     var ariaLabel = restProps['aria-label'];
 
     if (ariaLabel) {
@@ -119,7 +120,8 @@ var Input = /*#__PURE__*/function (_Component) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp
+      onKeyUp: onKeyUp,
+      required: required
     }));
   };
 

package/dist/cjs/system/colors/colors.js

@@ -17,25 +17,28 @@ var palette = {
     darkest: 'hsl(88, 72%, 20%)'
   },
   warning: {
-    lighter: 'hsl(60, 99%, 90%)',
-    light: 'hsl(56, 97%, 74%)',
-    base: 'hsl(50, 94%, 56%)',
-    dark: 'hsl(48, 93%, 48%)',
-    darker: 'hsl(42, 90%, 30%)'
+    lightest: 'hsl(42, 87%, 97%)',
+    lighter: 'hsl(42, 87%, 94%)',
+    light: 'hsl(42, 87%, 90%)',
+    base: 'hsl(42, 84%, 63%)',
+    dark: 'hsl(42, 84%, 55%)',
+    darker: 'hsl(42, 84%, 49%)'
   },
   error: {
-    lighter: 'hsl(7, 60%, 90%)',
-    light: 'hsl(7, 72%, 76%)',
-    base: 'hsl(7, 78%, 64%)',
-    dark: 'hsl(7, 80%, 52%)',
-    darker: 'hsl(7, 86%, 30%)'
+    lightest: 'hsl(7, 60%, 97%)',
+    lighter: 'hsl(9, 59%, 93%)',
+    light: 'hsl(8, 60%, 85%)',
+    base: 'hsl(8, 60%, 47%)',
+    dark: 'hsl(8, 60%, 45%)',
+    darker: 'hsl(9, 61%, 43%)'
   },
   success: {
-    lighter: 'hsl(96, 24%, 92%)',
-    light: 'hsl(96, 32%, 76%)',
-    base: 'hsl(96, 40%, 58%)',
-    dark: 'hsl(96, 44%, 50%)',
-    darker: 'hsl(96, 60%, 20%)'
+    lightest: 'hsl(93, 53%, 97%)',
+    lighter: 'hsl(95, 50%, 91%)',
+    light: 'hsl(86, 91%, 35%)',
+    base: 'hsl(86, 91%, 27%)',
+    dark: 'hsl(86, 91%, 25%)',
+    darker: 'hsl(86, 91%, 23%)'
   },
   red: ['hsl(8, 73%, 96%)', 'hsl(8, 74%, 92%)', 'hsl(8, 75%, 88%)', 'hsl(8, 76%, 68%)', 'hsl(8, 77%, 60%)', 'hsl(8, 78%, 56%)', 'hsl(8, 79%, 52%)', 'hsl(8, 80%, 48%)', 'hsl(8, 81%, 40%)', 'hsl(8, 82%, 30%)'],
   blue: ['hsl(197, 56%, 92%)', 'hsl(197, 56%, 88%)', 'hsl(197, 56%, 72%)', 'hsl(197, 56%, 64%)', 'hsl(197, 56%, 52%)', 'hsl(197, 56%, 44%)', 'hsl(197, 56%, 40%)', 'hsl(197, 56%, 32%)', 'hsl(197, 56%, 24%)', 'hsl(197, 56%, 20%)'],

package/dist/esm/Button/Button.js

@@ -168,13 +168,25 @@ export function Button(_ref) {
     if (iconRight) {
       iconRight['color'] = 'transparent';
     }
-  } // don't allow interacting with button when disabled
-
+  }
 
   if (disabled) {
-    buttonProps['aria-disabled'] = true;
-    buttonProps.cursor = 'not-allowed';
     buttonProps.opacity = 0.65;
+
+    if (buttonProps.type === "button" || buttonProps.type === "reset") {
+      buttonProps.disabled = true;
+    } else if (buttonProps.type === "submit") {
+      buttonProps['aria-disabled'] = true;
+      buttonProps.cursor = 'not-allowed';
+
+      buttonProps.onClick = function (event) {
+        return event.preventDefault();
+      };
+
+      buttonProps.onKeyDown = function (event) {
+        return event.preventDefault();
+      };
+    }
   } // don't apply hover/active styles or events when disabled or spinner is present
 
 

package/dist/esm/Button/Button.test.js

@@ -23,48 +23,75 @@ it("should render as <button> with type=\"submit\"", function () {
   var button = container.querySelector('button');
   expect(button.getAttribute('type')).toEqual('submit');
 });
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, {
+  disabled: true
+});
+
+it("should render \"disabled\" attribute, if <button> is disabled", function () {
+  var _render3 = render(_ref3),
+      container = _render3.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute("aria-disabled")).toEqual(null);
+  expect(button.disabled).toBe(true);
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit",
+  disabled: true
+});
+
+it("should render \"aria-disabled\" attribute, if <button type=\"submit\"> is disabled", function () {
+  var _render4 = render(_ref4),
+      container = _render4.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute("aria-disabled")).toEqual("true");
+  expect(button.disabled).toBe(false);
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render5 = render( /*#__PURE__*/React.createElement(Button, {
     title: title
   })),
-      getByText = _render3.getByText;
+      getByText = _render5.getByText;
 
   getByText(title);
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(Button, {
+var _ref5 = /*#__PURE__*/React.createElement(Button, {
   to: "#"
 });
 
 it("should render <a> without a type if \"to\" is provided", function () {
-  var _render4 = render(_ref3),
-      container = _render4.container;
+  var _render6 = render(_ref5),
+      container = _render6.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('type')).toBeNull();
 });
 
-var _ref4 = /*#__PURE__*/React.createElement(Button, {
+var _ref6 = /*#__PURE__*/React.createElement(Button, {
   href: "#"
 });
 
 it("should render <a> without a type if \"href\" is provided", function () {
-  var _render5 = render(_ref4),
-      container = _render5.container;
+  var _render7 = render(_ref6),
+      container = _render7.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('type')).toBeNull();
 });
 
-var _ref5 = /*#__PURE__*/React.createElement(Button, {
+var _ref7 = /*#__PURE__*/React.createElement(Button, {
   to: "#"
 });
 
 it("should render <a> with \"href\" if \"to\" is specifed", function () {
-  var _render6 = render(_ref5),
-      container = _render6.container;
+  var _render8 = render(_ref7),
+      container = _render8.container;
 
   var button = container.querySelector('a');
   expect(button.getAttribute('href')).toEqual('#');
@@ -72,12 +99,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render7 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render9 = render( /*#__PURE__*/React.createElement(Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render7.getByText;
+      getByText = _render9.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -87,20 +114,20 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render8 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render10 = render( /*#__PURE__*/React.createElement(Button, {
     onClick: onClick
   })),
-      container = _render8.container;
+      container = _render10.container;
 
   fireEvent.click(container.firstChild);
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 
-var _ref6 = /*#__PURE__*/React.createElement(Button, null);
+var _ref8 = /*#__PURE__*/React.createElement(Button, null);
 
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render9 = render(_ref6),
-      container = _render9.container;
+  var _render11 = render(_ref8),
+      container = _render11.container;
 
   fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/esm/DataTable/DataTable.js

@@ -150,12 +150,13 @@ var DataTable = function DataTable(props) {
       onDrop: onDrop
     }, function (provided) {
       return /*#__PURE__*/React.createElement("div", _extends({
+        className: css(getVariant('body')),
+        "data-dnd-ignore-scrollable": true,
         ref: function ref(_ref2) {
           bodyRef.current = _ref2;
           provided.innerRef(_ref2);
         },
-        role: "rowgroup",
-        className: css(getVariant('body'))
+        role: "rowgroup"
       }, provided.droppableProps), /*#__PURE__*/React.createElement(BodyRows, bodyRowsProps), provided.placeholder);
     }));
   } else {

package/dist/esm/Input/Input.js

@@ -64,7 +64,8 @@ var Input = /*#__PURE__*/function (_Component) {
         highlightOnInteraction = _this$props.highlightOnInteraction,
         type = _this$props.type,
         value = _this$props.value,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value"]);
+        required = _this$props.required,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value", "required"]);
 
     var ariaLabel = restProps['aria-label'];
 
@@ -106,7 +107,8 @@ var Input = /*#__PURE__*/function (_Component) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp
+      onKeyUp: onKeyUp,
+      required: required
     }));
   };
 

package/dist/esm/system/colors/colors.js

@@ -10,25 +10,28 @@ export var palette = {
     darkest: 'hsl(88, 72%, 20%)'
   },
   warning: {
-    lighter: 'hsl(60, 99%, 90%)',
-    light: 'hsl(56, 97%, 74%)',
-    base: 'hsl(50, 94%, 56%)',
-    dark: 'hsl(48, 93%, 48%)',
-    darker: 'hsl(42, 90%, 30%)'
+    lightest: 'hsl(42, 87%, 97%)',
+    lighter: 'hsl(42, 87%, 94%)',
+    light: 'hsl(42, 87%, 90%)',
+    base: 'hsl(42, 84%, 63%)',
+    dark: 'hsl(42, 84%, 55%)',
+    darker: 'hsl(42, 84%, 49%)'
   },
   error: {
-    lighter: 'hsl(7, 60%, 90%)',
-    light: 'hsl(7, 72%, 76%)',
-    base: 'hsl(7, 78%, 64%)',
-    dark: 'hsl(7, 80%, 52%)',
-    darker: 'hsl(7, 86%, 30%)'
+    lightest: 'hsl(7, 60%, 97%)',
+    lighter: 'hsl(9, 59%, 93%)',
+    light: 'hsl(8, 60%, 85%)',
+    base: 'hsl(8, 60%, 47%)',
+    dark: 'hsl(8, 60%, 45%)',
+    darker: 'hsl(9, 61%, 43%)'
   },
   success: {
-    lighter: 'hsl(96, 24%, 92%)',
-    light: 'hsl(96, 32%, 76%)',
-    base: 'hsl(96, 40%, 58%)',
-    dark: 'hsl(96, 44%, 50%)',
-    darker: 'hsl(96, 60%, 20%)'
+    lightest: 'hsl(93, 53%, 97%)',
+    lighter: 'hsl(95, 50%, 91%)',
+    light: 'hsl(86, 91%, 35%)',
+    base: 'hsl(86, 91%, 27%)',
+    dark: 'hsl(86, 91%, 25%)',
+    darker: 'hsl(86, 91%, 23%)'
   },
   red: ['hsl(8, 73%, 96%)', 'hsl(8, 74%, 92%)', 'hsl(8, 75%, 88%)', 'hsl(8, 76%, 68%)', 'hsl(8, 77%, 60%)', 'hsl(8, 78%, 56%)', 'hsl(8, 79%, 52%)', 'hsl(8, 80%, 48%)', 'hsl(8, 81%, 40%)', 'hsl(8, 82%, 30%)'],
   blue: ['hsl(197, 56%, 92%)', 'hsl(197, 56%, 88%)', 'hsl(197, 56%, 72%)', 'hsl(197, 56%, 64%)', 'hsl(197, 56%, 52%)', 'hsl(197, 56%, 44%)', 'hsl(197, 56%, 40%)', 'hsl(197, 56%, 32%)', 'hsl(197, 56%, 24%)', 'hsl(197, 56%, 20%)'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -63,7 +63,6 @@
     "@types/react-dom": "^18.0.8",
     "babel-eslint": "10.1.0",
     "chokidar-cli": "^2.1.0",
-    "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^8.2.0",
     "eslint": "7.20.0",
     "eslint-config-react-app": "6.0.0",
@@ -88,8 +87,8 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
-    "@planningcenter/icons": "^14.12.0",
-    "@planningcenter/react-beautiful-dnd": "^13.2.1",
+    "@planningcenter/icons": "^14.18.1",
+    "@planningcenter/react-beautiful-dnd": "^13.3.0",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",
     "@react-hook/window-size": "^3.1.1",

package/src/Button/Button.test.tsx

@@ -14,6 +14,20 @@ it(`should render as <button> with type="submit"`, () => {
   expect(button.getAttribute('type')).toEqual('submit')
 })
 
+it(`should render "disabled" attribute, if <button> is disabled`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute("aria-disabled")).toEqual(null)
+  expect(button.disabled).toBe(true)
+})
+
+it(`should render "aria-disabled" attribute, if <button type="submit"> is disabled`, () => {
+  const { container } = render(<Button type="submit" disabled />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute("aria-disabled")).toEqual("true")
+  expect(button.disabled).toBe(false)
+})
+
 it(`should render title`, () => {
   const title = 'Hello'
   const { getByText } = render(<Button title={title} />)

package/src/Button/Button.tsx

@@ -254,11 +254,17 @@ export function Button({
     }
   }
 
-  // don't allow interacting with button when disabled
   if (disabled) {
-    buttonProps['aria-disabled'] = true
-    buttonProps.cursor = 'not-allowed'
     buttonProps.opacity = 0.65
+  
+    if (buttonProps.type === "button" || buttonProps.type === "reset") {
+      buttonProps.disabled = true
+    } else if (buttonProps.type === "submit") {
+      buttonProps['aria-disabled'] = true
+      buttonProps.cursor = 'not-allowed'
+      buttonProps.onClick = (event) => event.preventDefault()
+      buttonProps.onKeyDown = (event) => event.preventDefault()
+    }
   }
 
   // don't apply hover/active styles or events when disabled or spinner is present

package/src/DataTable/DataTable.js

@@ -436,12 +436,13 @@ const DataTable = (props: Props) => {
         >
           {(provided) => (
             <div
+              className={css(getVariant('body'))}
+              data-dnd-ignore-scrollable
               ref={(ref) => {
                 bodyRef.current = ref
                 provided.innerRef(ref)
               }}
               role="rowgroup"
-              className={css(getVariant('body'))}
               {...provided.droppableProps}
             >
               <BodyRows {...bodyRowsProps} />

package/src/Icon/Icon.mdx

@@ -68,8 +68,9 @@ Preview all of the available icon sets and their icon's names from `@planningcen
 
 ```jsx live
 render(() => {
-  const [value, setValue] = React.useState('')
-  const [appName, setAppName] = React.useState('general')
+  const iconSets = Object.keys(icons).filter(icons => icons !== "tapestry")
+  const [searchValue, setSearchValue] = React.useState('')
+  const [selectedIconSet, setSelectedIconSet] = React.useState('general')
 
   return (
     <StackView grow={1}>
@@ -77,12 +78,12 @@ render(() => {
         <Select
           basis={26}
           emptyValue="Choose icon set"
-          onChange={(event) => setAppName(event.value)}
-          defaultValue={appName}
+          onChange={(event) => setSelectedIconSet(event.value)}
+          defaultValue={selectedIconSet}
         >
-          {appNames.map((appName) => (
-            <Select.Option key={appName} value={appName}>
-              {appName}
+          {iconSets.map((icons) => (
+            <Select.Option key={icons} value={icons}>
+              {icons}
             </Select.Option>
           ))}
         </Select>
@@ -91,14 +92,14 @@ render(() => {
           autoFocus
           renderLeft={<Icon name="general.search" />}
           placeholder="Search by icon name"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
         />
       </StackView>
       <TileView minCellWidth={16} spacing={4} margin={4}>
-        {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
+        {matchSorter(Object.keys(icons[selectedIconSet]), searchValue).map((iconName) => (
           <StackView key={iconName} alignment="center" spacing={1}>
-            <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
+            <Icon key={iconName} name={`${selectedIconSet}.${iconName}`} size="xl" />
             <Text fontSize={5} color="foregroundSecondary">
               {iconName}
             </Text>

package/src/Input/Input.js

@@ -119,6 +119,11 @@ type InputProps = {
    * Changes color of the input's placeholder text. Both [theme colors](/colors) and html values are supported.
    */
   placeholderColor?: string,
+
+  /**
+   * Sets the input's required attribute.
+   */
+  required?: boolean,
 }
 
 class Input extends Component<InputProps> {
@@ -162,6 +167,7 @@ class Input extends Component<InputProps> {
       highlightOnInteraction,
       type,
       value,
+      required,
       ...restProps
     } = this.props
     const ariaLabel = restProps['aria-label']
@@ -206,6 +212,7 @@ class Input extends Component<InputProps> {
           onBlur={onBlur}
           onKeyDown={onKeyDown}
           onKeyUp={onKeyUp}
+          required={required}
         />
       </InputBox>
     )

package/src/system/colors/colors.js

@@ -12,27 +12,30 @@ export const palette = {
   },
 
   warning: {
-    lighter: 'hsl(60, 99%, 90%)',
-    light: 'hsl(56, 97%, 74%)',
-    base: 'hsl(50, 94%, 56%)',
-    dark: 'hsl(48, 93%, 48%)',
-    darker: 'hsl(42, 90%, 30%)',
+    lightest: 'hsl(42, 87%, 97%)',
+    lighter: 'hsl(42, 87%, 94%)',
+    light: 'hsl(42, 87%, 90%)',
+    base: 'hsl(42, 84%, 63%)',
+    dark: 'hsl(42, 84%, 55%)',
+    darker: 'hsl(42, 84%, 49%)',
   },
 
   error: {
-    lighter: 'hsl(7, 60%, 90%)',
-    light: 'hsl(7, 72%, 76%)',
-    base: 'hsl(7, 78%, 64%)',
-    dark: 'hsl(7, 80%, 52%)',
-    darker: 'hsl(7, 86%, 30%)',
+    lightest: 'hsl(7, 60%, 97%)',
+    lighter: 'hsl(9, 59%, 93%)',
+    light: 'hsl(8, 60%, 85%)',
+    base: 'hsl(8, 60%, 47%)',
+    dark: 'hsl(8, 60%, 45%)',
+    darker: 'hsl(9, 61%, 43%)',
   },
 
   success: {
-    lighter: 'hsl(96, 24%, 92%)',
-    light: 'hsl(96, 32%, 76%)',
-    base: 'hsl(96, 40%, 58%)',
-    dark: 'hsl(96, 44%, 50%)',
-    darker: 'hsl(96, 60%, 20%)',
+    lightest: 'hsl(93, 53%, 97%)',
+    lighter: 'hsl(95, 50%, 91%)',
+    light: 'hsl(86, 91%, 35%)',
+    base: 'hsl(86, 91%, 27%)',
+    dark: 'hsl(86, 91%, 25%)',
+    darker: 'hsl(86, 91%, 23%)',
   },
 
   red: [