@planningcenter/tapestry-react 2.9.0 → 2.9.2

package/dist/cjs/Box/Box.js

@@ -23,7 +23,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var defaultElement = 'div';
 /**

package/dist/cjs/FilterLayout/FilterLayout.js

@@ -80,8 +80,7 @@ function FilterLayout(props) {
     shrink: 1
   }, header)), /*#__PURE__*/React.createElement(_Divider["default"], null), /*#__PURE__*/React.createElement(_StackView["default"], {
     axis: "horizontal",
-    grow: 1,
-    overflow: "hidden"
+    grow: 1
   }, /*#__PURE__*/React.createElement(_StackView["default"], {
     visible: sidebarOpen,
     basis: fill ? '100%' : sidebarWidth + 'px',
@@ -92,7 +91,9 @@ function FilterLayout(props) {
     visibility: sidebarOpen && fill ? 'hidden' : 'visible',
     maxHeight: sidebarOpen && fill ? 0 : 'initial',
     grow: 1,
-    shrink: sidebarOpen && fill ? 0 : 1,
+    shrink: 1,
     basis: "100%"
-  }, toolbar, /*#__PURE__*/React.createElement(_Divider["default"], null), table)));
+  }, /*#__PURE__*/React.createElement(_Box["default"], {
+    overflow: "hidden"
+  }, toolbar), /*#__PURE__*/React.createElement(_Divider["default"], null), table)));
 }

package/dist/cjs/GridView/GridView.js

@@ -25,7 +25,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 function getTemplateValue(value) {
   return value ? value.constructor === Array ? value.map(function (v) {

package/dist/cjs/ItemList/ItemList.js

@@ -244,7 +244,10 @@ var ItemList = /*#__PURE__*/function (_Component) {
       return typeof selected === 'function' ? selected(data) : selected === data;
     });
     return _this;
-  }
+  } // String Search
+  // Highlight
+  // Select
+
 
   var _proto = ItemList.prototype;
 

package/dist/cjs/StackView/StackView.js

@@ -27,7 +27,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var BASELINE = 'baseline';
 var CENTER = 'center';

package/dist/cjs/Text/Text.js

@@ -25,7 +25,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var textPlugin = {
   styleProps: ['italic', 'truncate', 'size', 'underline', 'weight', 'wrap'],

package/dist/cjs/TileView/TileView.js

@@ -25,7 +25,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var tileViewPlugin = {
   styleProps: ['minCellWidth', 'spacing'],

package/dist/cjs/TimeField/TimeField.js

@@ -188,8 +188,13 @@ var TimeField = function TimeField(_ref) {
         setHours(updatedHoursValue);
         setHoursDisplay(updatedHoursValue);
       } else {
-        setHours(updatedHoursValue + 12);
-        setHoursDisplay(updatedHoursValue);
+        if (updatedHoursValue === 12) {
+          setHours(12);
+          setHoursDisplay(12);
+        } else {
+          setHours(updatedHoursValue + 12);
+          setHoursDisplay(updatedHoursValue);
+        }
       }
     } else {
       setHours(updatedHoursValue);

package/dist/cjs/ToggleSwitch/ToggleSwitch.js

@@ -72,12 +72,14 @@ function ToggleSwitch(props) {
     axis: "horizontal",
     spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    "aria-checked": isChecked,
     as: "button",
     backgroundColor: disabled ? _colors.colors.grays.light.neutral81 : isChecked ? backgroundColor : _colors.colors.grays.light.neutral62,
     onClick: onClick,
     opacity: 1,
     position: "relative",
     radius: "pill",
+    role: "switch",
     theme: false,
     disabled: disabled,
     tooltip: tooltip

package/dist/cjs/ToggleSwitch/ToggleSwitch.test.js

@@ -20,7 +20,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toBeInTheDocument();
   });
   it('should call onClick when clicked', function () {
@@ -33,7 +33,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render2.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
 
     _react2.fireEvent.click(toggleButton);
 
@@ -62,21 +62,43 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render4.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toHaveStyle("background-color: " + activeColor);
   });
+  it('should apply aria-checked="true" when isChecked is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: true,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should apply aria-checked="false" when isChecked is false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: false,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render6.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
   it('should not be clickable when disabled', function () {
     var mockOnClick = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
       disabled: true,
       isChecked: false,
       label: "Toggle me",
       onClick: mockOnClick
     })),
-        getByRole = _render5.getByRole;
+        getByRole = _render7.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
 
     _react2.fireEvent.click(toggleButton);
 
@@ -84,41 +106,41 @@ describe('ToggleSwitch component', function () {
   });
   describe('it should apply the correct size', function () {
     it("should apply the correct size for xs", function () {
-      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "xs"
       })),
-          getByRole = _render6.getByRole;
+          getByRole = _render8.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
     });
     it("should apply the correct size for sm", function () {
-      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "sm"
       })),
-          getByRole = _render7.getByRole;
+          getByRole = _render9.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
     });
     it("should apply the correct default size (md)", function () {
-      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "md"
       })),
-          getByRole = _render8.getByRole;
+          getByRole = _render10.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
     });

package/dist/cjs/system/button-themes.js

@@ -191,63 +191,63 @@ var buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
+      color: 'white',
+      backgroundColor: 'error',
       hover: {
-        backgroundColor: 'red-4'
+        backgroundColor: 'error-dark'
       },
       active: {
-        backgroundColor: 'red-3'
+        backgroundColor: 'error-darker'
       }
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
+      stroke: 'error',
+      color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     },
     naked: {
       color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     }
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
+      color: 'white',
+      backgroundColor: 'success',
       hover: {
-        backgroundColor: 'green-4'
+        backgroundColor: 'success-dark'
       },
       active: {
-        backgroundColor: 'green-3'
+        backgroundColor: 'success-darker'
       }
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
+      stroke: 'success',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     },
     naked: {
-      color: 'green',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     }
   },

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

@@ -19,6 +19,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _polished = require("polished");
 
+var _utils = require("../../utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -101,7 +103,7 @@ function flattenPalette(palette) {
 
     var value = parsedPalette[key];
     var aliasValue = parsedPalette[value];
-    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? (0, _utils.getCSSProperty)('colors', value) : value, _objectSpread5));
   }, {});
 } // ported from ChromaJS
 // https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee

package/dist/cjs/vendor/react-measure/Measure.js

@@ -111,7 +111,9 @@ var Measure = /*#__PURE__*/function (_Component) {
       }
     }));
     return _this;
-  }
+  } // prevent firing two renders when component mounts, getting measurements in bind
+  // is faster than attaching a ResizeObserver and waiting for the first callback
+
 
   var _proto = Measure.prototype;
 

package/dist/esm/FilterLayout/FilterLayout.js

@@ -67,8 +67,7 @@ export function FilterLayout(props) {
     shrink: 1
   }, header)), _ref, /*#__PURE__*/React.createElement(StackView, {
     axis: "horizontal",
-    grow: 1,
-    overflow: "hidden"
+    grow: 1
   }, /*#__PURE__*/React.createElement(StackView, {
     visible: sidebarOpen,
     basis: fill ? '100%' : sidebarWidth + 'px',
@@ -79,7 +78,9 @@ export function FilterLayout(props) {
     visibility: sidebarOpen && fill ? 'hidden' : 'visible',
     maxHeight: sidebarOpen && fill ? 0 : 'initial',
     grow: 1,
-    shrink: sidebarOpen && fill ? 0 : 1,
+    shrink: 1,
     basis: "100%"
-  }, toolbar, _ref2, table)));
+  }, /*#__PURE__*/React.createElement(Box, {
+    overflow: "hidden"
+  }, toolbar), _ref2, table)));
 }

package/dist/esm/ItemList/ItemList.js

@@ -255,7 +255,10 @@ var ItemList = /*#__PURE__*/function (_Component) {
     });
 
     return _this;
-  }
+  } // String Search
+  // Highlight
+  // Select
+
 
   var _proto = ItemList.prototype;
 

package/dist/esm/TimeField/TimeField.js

@@ -177,8 +177,13 @@ var TimeField = function TimeField(_ref) {
         setHours(updatedHoursValue);
         setHoursDisplay(updatedHoursValue);
       } else {
-        setHours(updatedHoursValue + 12);
-        setHoursDisplay(updatedHoursValue);
+        if (updatedHoursValue === 12) {
+          setHours(12);
+          setHoursDisplay(12);
+        } else {
+          setHours(updatedHoursValue + 12);
+          setHoursDisplay(updatedHoursValue);
+        }
       }
     } else {
       setHours(updatedHoursValue);

package/dist/esm/ToggleSwitch/ToggleSwitch.js

@@ -55,12 +55,14 @@ export function ToggleSwitch(props) {
     axis: "horizontal",
     spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
   }, /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-checked": isChecked,
     as: "button",
     backgroundColor: disabled ? colors.grays.light.neutral81 : isChecked ? backgroundColor : colors.grays.light.neutral62,
     onClick: onClick,
     opacity: 1,
     position: "relative",
     radius: "pill",
+    role: "switch",
     theme: false,
     disabled: disabled,
     tooltip: tooltip

package/dist/esm/ToggleSwitch/ToggleSwitch.test.js

@@ -12,7 +12,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toBeInTheDocument();
   });
   it('should call onClick when clicked', function () {
@@ -25,7 +25,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render2.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     fireEvent.click(toggleButton);
     expect(mockOnClick).toHaveBeenCalled();
   });
@@ -52,61 +52,83 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render4.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toHaveStyle("background-color: " + activeColor);
   });
+  it('should apply aria-checked="true" when isChecked is true', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isChecked: true,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should apply aria-checked="false" when isChecked is false', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isChecked: false,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render6.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
   it('should not be clickable when disabled', function () {
     var mockOnClick = jest.fn();
 
-    var _render5 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+    var _render7 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
       disabled: true,
       isChecked: false,
       label: "Toggle me",
       onClick: mockOnClick
     })),
-        getByRole = _render5.getByRole;
+        getByRole = _render7.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     fireEvent.click(toggleButton);
     expect(mockOnClick).not.toHaveBeenCalled();
   });
   describe('it should apply the correct size', function () {
     it("should apply the correct size for xs", function () {
-      var _render6 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      var _render8 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "xs"
       })),
-          getByRole = _render6.getByRole;
+          getByRole = _render8.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
     });
     it("should apply the correct size for sm", function () {
-      var _render7 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      var _render9 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "sm"
       })),
-          getByRole = _render7.getByRole;
+          getByRole = _render9.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
     });
     it("should apply the correct default size (md)", function () {
-      var _render8 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      var _render10 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "md"
       })),
-          getByRole = _render8.getByRole;
+          getByRole = _render10.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
     });

package/dist/esm/system/button-themes.js

@@ -187,63 +187,63 @@ export var buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
+      color: 'white',
+      backgroundColor: 'error',
       hover: {
-        backgroundColor: 'red-4'
+        backgroundColor: 'error-dark'
       },
       active: {
-        backgroundColor: 'red-3'
+        backgroundColor: 'error-darker'
       }
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
+      stroke: 'error',
+      color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     },
     naked: {
       color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     }
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
+      color: 'white',
+      backgroundColor: 'success',
       hover: {
-        backgroundColor: 'green-4'
+        backgroundColor: 'success-dark'
       },
       active: {
-        backgroundColor: 'green-3'
+        backgroundColor: 'success-darker'
       }
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
+      stroke: 'success',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     },
     naked: {
-      color: 'green',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     }
   },

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

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { darken, setLightness, parseToRgb, parseToHsl, rgba, mix, getLuminance, toColorString } from 'polished';
+import { getCSSProperty } from '../../utils';
 
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -81,7 +82,7 @@ export function flattenPalette(palette) {
 
     var value = parsedPalette[key];
     var aliasValue = parsedPalette[value];
-    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? getCSSProperty('colors', value) : value, _objectSpread5));
   }, {});
 } // ported from ChromaJS
 // https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee

package/dist/esm/vendor/react-measure/Measure.js

@@ -109,7 +109,9 @@ var Measure = /*#__PURE__*/function (_Component) {
     }));
 
     return _this;
-  }
+  } // prevent firing two renders when component mounts, getting measurements in bind
+  // is faster than attaching a ResizeObserver and waiting for the first callback
+
 
   var _proto = Measure.prototype;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "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",

package/src/Button/Button.mdx

@@ -10,6 +10,7 @@ isParent: true
 const themes = [
   { title: 'Default' },
   { title: 'Primary', theme: 'primary' },
+  { title: 'Success', theme: 'success' },
   { title: 'Warning', theme: 'warning' },
   { title: 'Error', theme: 'error' },
   { title: 'Info', theme: 'info' },

package/src/FilterLayout/FilterLayout.tsx

@@ -72,7 +72,7 @@ export function FilterLayout(props: Props) {
         </Box>
       </StackView>
       <Divider />
-      <StackView axis="horizontal" grow={1} overflow="hidden">
+      <StackView axis="horizontal" grow={1}>
         <StackView
           visible={sidebarOpen}
           basis={fill ? '100%' : sidebarWidth + 'px'}
@@ -86,10 +86,10 @@ export function FilterLayout(props: Props) {
           visibility={sidebarOpen && fill ? 'hidden' : 'visible'}
           maxHeight={sidebarOpen && fill ? 0 : 'initial'}
           grow={1}
-          shrink={sidebarOpen && fill ? 0 : 1}
+          shrink={1}
           basis="100%"
         >
-          {toolbar}
+          <Box overflow="hidden">{toolbar}</Box>
           <Divider />
           {table}
         </StackView>

package/src/TimeField/TimeField.tsx

@@ -198,8 +198,13 @@ const TimeField = ({
         setHours(updatedHoursValue)
         setHoursDisplay(updatedHoursValue)
       } else {
-        setHours(updatedHoursValue + 12)
-        setHoursDisplay(updatedHoursValue)
+        if (updatedHoursValue === 12) {
+          setHours(12)
+          setHoursDisplay(12)
+        } else {
+          setHours(updatedHoursValue + 12)
+          setHoursDisplay(updatedHoursValue)
+        }
       }
     } else {
       setHours(updatedHoursValue)

package/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -11,7 +11,7 @@ describe('ToggleSwitch component', () => {
       <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     expect(toggleButton).toBeInTheDocument()
   })
 
@@ -21,7 +21,7 @@ describe('ToggleSwitch component', () => {
       <ToggleSwitch isChecked={false} label="Toggle me" onClick={mockOnClick} />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     fireEvent.click(toggleButton)
 
     expect(mockOnClick).toHaveBeenCalled()
@@ -47,10 +47,28 @@ describe('ToggleSwitch component', () => {
       />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     expect(toggleButton).toHaveStyle(`background-color: ${activeColor}`)
   })
 
+  it('should apply aria-checked="true" when isChecked is true', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={true} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleButton = getByRole('switch')
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('should apply aria-checked="false" when isChecked is false', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleButton = getByRole('switch')
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false')
+  })
+
   it('should not be clickable when disabled', () => {
     const mockOnClick = jest.fn()
     const { getByRole } = render(
@@ -62,7 +80,7 @@ describe('ToggleSwitch component', () => {
       />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     fireEvent.click(toggleButton)
 
     expect(mockOnClick).not.toHaveBeenCalled()
@@ -79,7 +97,7 @@ describe('ToggleSwitch component', () => {
         />
       )
 
-      const toggleButton = getByRole('button')
+      const toggleButton = getByRole('switch')
       expect(toggleButton).toHaveStyle(`height: ${base * 2}px`)
       expect(toggleButton).toHaveStyle(`width: ${base * 3.5}px`)
     })
@@ -93,7 +111,7 @@ describe('ToggleSwitch component', () => {
         />
       )
 
-      const toggleButton = getByRole('button')
+      const toggleButton = getByRole('switch')
       expect(toggleButton).toHaveStyle(`height: ${base * 2.25}px`)
       expect(toggleButton).toHaveStyle(`width: ${base * 4}px`)
     })
@@ -107,7 +125,7 @@ describe('ToggleSwitch component', () => {
         />
       )
 
-      const toggleButton = getByRole('button')
+      const toggleButton = getByRole('switch')
       expect(toggleButton).toHaveStyle(`height: ${base * 2.5}px`)
       expect(toggleButton).toHaveStyle(`width: ${base * 4.375}px`)
     })

package/src/ToggleSwitch/ToggleSwitch.tsx

@@ -66,6 +66,7 @@ export function ToggleSwitch(props: Props) {
       spacing={size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1}
     >
       <Button
+        aria-checked={isChecked}
         as="button"
         backgroundColor={
           disabled
@@ -78,6 +79,7 @@ export function ToggleSwitch(props: Props) {
         opacity={1}
         position="relative"
         radius="pill"
+        role="switch"
         theme={false}
         {...{ disabled, tooltip }}
         {...toggleButtonProps}

package/src/system/button-themes.js

@@ -115,40 +115,40 @@ export const buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
-      hover: { backgroundColor: 'red-4' },
-      active: { backgroundColor: 'red-3' },
+      color: 'white',
+      backgroundColor: 'error',
+      hover: { backgroundColor: 'error-dark' },
+      active: { backgroundColor: 'error-darker' },
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
-      hover: { backgroundColor: 'red-0' },
-      active: { backgroundColor: 'red-1' },
+      stroke: 'error',
+      color: 'error',
+      hover: { backgroundColor: 'error-lightest' },
+      active: { backgroundColor: 'error-lighter' },
     },
     naked: {
       color: 'error',
-      hover: { backgroundColor: 'red-0' },
-      active: { backgroundColor: 'red-1' },
+      hover: { backgroundColor: 'error-lightest' },
+      active: { backgroundColor: 'error-lighter' },
     },
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
-      hover: { backgroundColor: 'green-4' },
-      active: { backgroundColor: 'green-3' },
+      color: 'white',
+      backgroundColor: 'success',
+      hover: { backgroundColor: 'success-dark' },
+      active: { backgroundColor: 'success-darker' },
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
-      hover: { backgroundColor: 'green-0' },
-      active: { backgroundColor: 'green-1' },
+      stroke: 'success',
+      color: 'success',
+      hover: { backgroundColor: 'success-lightest' },
+      active: { backgroundColor: 'success-lighter' },
     },
     naked: {
-      color: 'green',
-      hover: { backgroundColor: 'green-0' },
-      active: { backgroundColor: 'green-1' },
+      color: 'success',
+      hover: { backgroundColor: 'success-lightest' },
+      active: { backgroundColor: 'success-lighter' },
     },
   },
   info: {

package/src/system/colors/utils.js

@@ -8,6 +8,7 @@ import {
   getLuminance,
   toColorString,
 } from 'polished'
+import { getCSSProperty } from '../../utils'
 
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
@@ -91,7 +92,7 @@ export function flattenPalette(palette) {
     const aliasValue = parsedPalette[value]
     return {
       ...collection,
-      [key]: aliasValue ? `var(--colors-${value})` : value,
+      [key]: aliasValue ? getCSSProperty('colors', value) : value,
     }
   }, {})
 }