@planningcenter/tapestry-react 2.9.0-rc.4 → 2.9.0-rc.8

package/dist/cjs/Button/Button.js

@@ -178,7 +178,18 @@ function Button(_ref) {
   }
 
   if (disabled) {
-    buttonProps.opacity = 0.65;
+    var themeData = buttonThemes[theme];
+
+    if (themeData) {
+      var variantData = themeData[variant];
+
+      if (variantData && variantData.disabled) {
+        buttonProps = _objectSpread(_objectSpread({}, buttonProps), variantData.disabled);
+      } else {
+        buttonProps.opacity = 0.65;
+      }
+    }
+
     buttonProps['aria-disabled'] = true;
     buttonProps.cursor = 'not-allowed';
 
@@ -198,9 +209,9 @@ function Button(_ref) {
     buttonProps.hover = undefined;
     buttonProps.active = undefined;
   } else {
-    buttonProps.focus = _objectSpread(_objectSpread({}, buttonProps.focus), {}, {
+    buttonProps.focus = _objectSpread({
       zIndex: 5
-    });
+    }, buttonProps.focus);
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
     buttonProps.onClick = onClick;
@@ -280,7 +291,11 @@ function Button(_ref) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(_Tooltip["default"], tooltip, /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({}, buttonProps, restProps), iconLeft && /*#__PURE__*/React.createElement(_Icon["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/React.createElement(_Tooltip["default"], tooltip, /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({}, buttonProps, restProps, {
+    css: {
+      '&:focus-visible': _objectSpread({}, buttonProps.focusVisible)
+    }
+  }), iconLeft && /*#__PURE__*/React.createElement(_Icon["default"], (0, _extends2["default"])({
     size: size,
     color: buttonProps.color,
     marginRight: paddingHorizontalDense

package/dist/cjs/FilterLayout/FilterLayout.js

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

package/dist/cjs/TimeField/TimeField.js

@@ -271,20 +271,20 @@ var TimeField = function TimeField(_ref) {
     ref: ref,
     inline: true
   }, restProps), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    "aria-label": "Hours",
     autoWidth: false,
     fontVariantNumeric: "tabular-nums",
-    moveFocusOnMax: true,
-    value: hoursDisplay,
-    min: 0,
-    max: twelveHourClock ? 12 : 23,
-    pad: 2,
     grow: 0,
-    width: "2ch",
-    textAlign: "center",
-    "aria-label": "Hours",
+    max: twelveHourClock ? 12 : 23,
+    min: 0,
+    moveFocusOnMax: true,
+    onBlur: handleHoursBlur,
     onChange: handleHoursChange,
     onKeyDown: handleHoursKeyDown,
-    onBlur: handleHoursBlur,
+    pad: 2,
+    textAlign: "center",
+    value: hoursDisplay,
+    width: "2ch",
     ignoredKeys: ignoredKeys
   }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     as: "span",
@@ -292,31 +292,31 @@ var TimeField = function TimeField(_ref) {
     textAlign: "center",
     userSelect: "none"
   }, ":"), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    "aria-label": "Minutes",
     autoWidth: false,
     fontVariantNumeric: "tabular-nums",
-    moveFocusOnMax: true,
-    value: minutes,
-    min: 0,
-    max: 59,
-    pad: 2,
     grow: 0,
-    width: "2ch",
-    textAlign: "center",
-    "aria-label": "Minutes",
+    max: 59,
+    min: 0,
+    moveFocusOnMax: true,
     onChange: function onChange(e) {
       return setMinutes(e);
     },
     onKeyDown: handleMinutesKeyDown,
+    pad: 2,
+    textAlign: "center",
+    value: minutes,
+    width: "2ch",
     ignoredKeys: ignoredKeys
   }), twelveHourClock && /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
-    highlightOnInteraction: true,
-    value: meridiem,
-    grow: 0,
-    width: "2em",
-    textAlign: "center",
     "aria-label": "AM/PM",
+    grow: 0,
+    highlightOnInteraction: true,
     onChange: _utils.noop,
-    onKeyDown: handleAMPMKeyDown
+    onKeyDown: handleAMPMKeyDown,
+    textAlign: "center",
+    value: meridiem,
+    width: "2em"
   }));
 };
 

package/dist/cjs/TimeField/utils.js

@@ -27,12 +27,18 @@ function addHoursToTime(time, hoursToAdd) {
 function addMinutesToTime(time, minutesToAdd) {
   var hours = time[0],
       minutes = time[1];
-  var totalTimeInMinutes = hours * 60 + minutes;
-  var totalMinutesInDay = 24 * 60;
-  var newTime = parseInt(totalTimeInMinutes) + parseInt(minutesToAdd);
-  var newHours = newTime > totalMinutesInDay ? Math.floor(newTime / 60) - 24 : Math.floor(newTime / 60);
-  var newMinutes = newTime % 60;
-  return [newHours, newMinutes];
+  var nextMinutes = minutes + minutesToAdd;
+  var remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR);
+
+  if (remainderMinutes >= 0) {
+    var nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR);
+    hours = modulo(nextHours, HOURS_IN_DAY);
+    minutes = remainderMinutes;
+  } else {
+    minutes = nextMinutes;
+  }
+
+  return [hours, minutes];
 }
 
 function addTimeToDate(date, time) {

package/dist/cjs/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ToggleSwitch = ToggleSwitch;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = require("../Box");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _colors = require("../system/colors");
+
+var _StackView = require("../StackView");
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _system = require("../system");
+
+function ToggleSwitch(props) {
+  var _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      isChecked = props.isChecked,
+      label = props.label,
+      onClick = props.onClick,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      tooltip = props.tooltip,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["disabled", "isChecked", "label", "onClick", "size", "tooltip"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('toggleSwitch', restProps),
+      backgroundColor = _useThemeProps.backgroundColor;
+
+  var toggleButtonProps = {
+    height: 2.5,
+    width: 4.375
+  };
+  var toggleNotchProps = {
+    height: 2,
+    width: 2
+  };
+
+  if (size === 'sm') {
+    toggleButtonProps = {
+      height: 2.25,
+      width: 4
+    };
+    toggleNotchProps = {
+      height: 1.75,
+      width: 1.75
+    };
+  } else if (size === 'xs') {
+    toggleButtonProps = {
+      height: 2,
+      width: 3.5
+    };
+    toggleNotchProps = {
+      height: 1.5,
+      width: 1.5
+    };
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView.StackView, {
+    alignment: "center",
+    axis: "horizontal",
+    spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    as: "button",
+    backgroundColor: disabled ? _colors.colors.grays.light.neutral81 : isChecked ? backgroundColor : _colors.colors.grays.light.neutral62,
+    onClick: onClick,
+    opacity: 1,
+    position: "relative",
+    radius: "pill",
+    theme: false,
+    disabled: disabled,
+    tooltip: tooltip
+  }, toggleButtonProps), /*#__PURE__*/_react["default"].createElement(_Box.Box, (0, _extends2["default"])({
+    background: "#fff",
+    left: 0.25,
+    pointerEvents: "none",
+    position: "absolute",
+    radius: "circle",
+    top: 0.25,
+    transform: "translateX(" + (isChecked ? 'calc(100% - 1px)' : '0%') + ")",
+    transition: "120ms"
+  }, toggleNotchProps))), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    size: size === 'xs' ? 5 : size === 'sm' ? 4 : 3
+  }, label));
+}
+
+var _default = ToggleSwitch;
+exports["default"] = _default;

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

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var base = 8;
+describe('ToggleSwitch component', function () {
+  it('should render with default properties', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: false,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render.getByRole;
+
+    var toggleButton = getByRole('button');
+    expect(toggleButton).toBeInTheDocument();
+  });
+  it('should call onClick when clicked', function () {
+    var mockOnClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: false,
+      label: "Toggle me",
+      onClick: mockOnClick
+    })),
+        getByRole = _render2.getByRole;
+
+    var toggleButton = getByRole('button');
+
+    _react2.fireEvent.click(toggleButton);
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+  it('should display the label', function () {
+    var label = 'Toggle me';
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: false,
+      label: label,
+      onClick: function onClick() {}
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+  it('should apply active color when isChecked is true', function () {
+    var activeColor = 'green';
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      backgroundColor: activeColor,
+      isChecked: true,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render4.getByRole;
+
+    var toggleButton = getByRole('button');
+    expect(toggleButton).toHaveStyle("background-color: " + activeColor);
+  });
+  it('should not be clickable when disabled', function () {
+    var mockOnClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      disabled: true,
+      isChecked: false,
+      label: "Toggle me",
+      onClick: mockOnClick
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('button');
+
+    _react2.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 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "xs"
+      })),
+          getByRole = _render6.getByRole;
+
+      var toggleButton = getByRole('button');
+      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"], {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "sm"
+      })),
+          getByRole = _render7.getByRole;
+
+      var toggleButton = getByRole('button');
+      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"], {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "md"
+      })),
+          getByRole = _render8.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
+    });
+  });
+});

package/dist/cjs/ToggleSwitch/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _ToggleSwitch = require("./ToggleSwitch");
+
+exports["default"] = _ToggleSwitch.ToggleSwitch;
+Object.keys(_ToggleSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ToggleSwitch[key]) return;
+  exports[key] = _ToggleSwitch[key];
+});

package/dist/cjs/index.d.js

@@ -61,6 +61,7 @@ var _exportNames = {
   Tabs: true,
   TextArea: true,
   TimeField: true,
+  ToggleSwitch: true,
   Toolbar: true,
   TokenInput: true,
   Tooltip: true,
@@ -72,7 +73,7 @@ var _exportNames = {
   Select: true,
   Sortable: true
 };
-exports.Sortable = exports.Select = exports.List = exports.Input = exports.Checkbox = exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.TimeField = exports.TextArea = exports.Tabs = exports.Table = exports.Summary = exports.StepperProgress = exports.StepperField = exports.Sidebar = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Pagination = exports.PagerView = exports.PageToolbar = exports.PageTitle = exports.PageTabList = exports.PageTab = exports.PageHeader = exports.PageDropdown = exports.PageButton = exports.PageBody = exports.PageActions = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.LinkList = exports.Link = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Calendar = exports.Badge = exports.Avatar = exports.utils = exports.server = exports.hooks = exports.designSystem = void 0;
+exports.Sortable = exports.Select = exports.List = exports.Input = exports.Checkbox = exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.ToggleSwitch = exports.TimeField = exports.TextArea = exports.Tabs = exports.Table = exports.Summary = exports.StepperProgress = exports.StepperField = exports.Sidebar = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Pagination = exports.PagerView = exports.PageToolbar = exports.PageTitle = exports.PageTabList = exports.PageTab = exports.PageHeader = exports.PageDropdown = exports.PageButton = exports.PageBody = exports.PageActions = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.LinkList = exports.Link = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Calendar = exports.Badge = exports.Avatar = exports.utils = exports.server = exports.hooks = exports.designSystem = void 0;
 
 var _Alert = require("./Alert");
 
@@ -218,6 +219,15 @@ Object.keys(_TileView).forEach(function (key) {
   exports[key] = _TileView[key];
 });
 
+var _ToggleSwitch = require("./ToggleSwitch");
+
+Object.keys(_ToggleSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ToggleSwitch[key]) return;
+  exports[key] = _ToggleSwitch[key];
+});
+
 var _ThemeProvider = require("./ThemeProvider");
 
 Object.keys(_ThemeProvider).forEach(function (key) {
@@ -353,6 +363,8 @@ var TextArea;
 exports.TextArea = TextArea;
 var TimeField;
 exports.TimeField = TimeField;
+var ToggleSwitch;
+exports.ToggleSwitch = ToggleSwitch;
 var Toolbar;
 exports.Toolbar = Toolbar;
 var TokenInput;

package/dist/cjs/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
 exports.__esModule = true;
-exports.utils = exports.server = exports.hooks = exports.designSystem = exports.PageToolbar = exports.PageTitle = exports.PageTabList = exports.PageTab = exports.PageHeader = exports.PageDropdown = exports.PageButton = exports.PageBody = exports.PageActions = exports.WrapView = exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.TimeField = exports.TileView = exports.ThemeProvider = exports.TextArea = exports.Text = exports.Tabs = exports.Table = exports.Tab = exports.Summary = exports.StepperProgress = exports.StepperField = exports.StackView = exports.Spinner = exports.Sortable = exports.Sidebar = exports.Select = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.Scrim = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Portal = exports.Popover = exports.Pagination = exports.PagerView = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.List = exports.LinkList = exports.Link = exports.Input = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.Group = exports.GridView = exports.FilterLayout = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.Divider = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Checkbox = exports.Card = exports.Calendar = exports.Button = exports.Box = exports.Badge = exports.Avatar = exports.Alert = exports.ActionsDropdown = void 0;
+exports.utils = exports.server = exports.hooks = exports.designSystem = exports.PageToolbar = exports.PageTitle = exports.PageTabList = exports.PageTab = exports.PageHeader = exports.PageDropdown = exports.PageButton = exports.PageBody = exports.PageActions = exports.WrapView = exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.ToggleSwitch = exports.TimeField = exports.TileView = exports.ThemeProvider = exports.TextArea = exports.Text = exports.Tabs = exports.Table = exports.Tab = exports.Summary = exports.StepperProgress = exports.StepperField = exports.StackView = exports.Spinner = exports.Sortable = exports.Sidebar = exports.Select = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.Scrim = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Portal = exports.Popover = exports.Pagination = exports.PagerView = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.List = exports.LinkList = exports.Link = exports.Input = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.Group = exports.GridView = exports.FilterLayout = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.Divider = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Checkbox = exports.Card = exports.Calendar = exports.Button = exports.Box = exports.Badge = exports.Avatar = exports.Alert = exports.ActionsDropdown = void 0;
 
 require("focus-options-polyfill");
 
@@ -315,6 +315,10 @@ var _TimeField = _interopRequireDefault(require("./TimeField"));
 
 exports.TimeField = _TimeField["default"];
 
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+exports.ToggleSwitch = _ToggleSwitch["default"];
+
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
 exports.Toolbar = _Toolbar["default"];

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

@@ -6,7 +6,24 @@ exports.colors = exports.palette = void 0;
 
 var _utils = require("./utils");
 
+// NOTE: this is a solution for using the UX palette in Tapestry-React
+// that will likely be replaced with a tokenized palette in the future
+var tapestry = {
+  create: {
+    create35: 'hsl(86deg 91% 35% / 100%)'
+  },
+  grays: {
+    light: {
+      neutral62: 'hsl(0deg 0% 62% / 100%)',
+      neutral81: 'hsl(0deg 0% 81% / 100%)'
+    }
+  },
+  interaction: {
+    interaction66: 'hsl(221deg 91% 66% / 100%)'
+  }
+};
 var palette = {
+  tapestry: tapestry,
   primary: {
     lightest: 'hsl(88, 24%, 92%)',
     lighter: 'hsl(88, 32%, 86%)',

package/dist/cjs/system/default-theme.js

@@ -72,6 +72,9 @@ var defaultTheme = {
       xxl: 9
     },
     trackColor: 'primary-lighter'
+  },
+  toggleSwitch: {
+    backgroundColor: 'interaction66'
   }
 };
 var _default = defaultTheme;

package/dist/cjs/system/plugins/color.js

@@ -20,8 +20,9 @@ function color(_ref, theme) {
       borderTopColor = _ref.borderTopColor,
       color = _ref.color,
       fill = _ref.fill,
+      outlineColor = _ref.outlineColor,
       stroke = _ref.stroke,
-      styles = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke"]);
+      styles = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "outlineColor", "stroke"]);
   var colorProps = {
     backgroundColor: backgroundColor,
     borderColor: borderColor,
@@ -31,6 +32,7 @@ function color(_ref, theme) {
     borderTopColor: borderTopColor,
     color: color,
     fill: fill,
+    outlineColor: outlineColor,
     stroke: stroke
   };
   Object.keys(colorProps).forEach(function (key) {

package/dist/cjs/system/style-names.js

@@ -4,7 +4,7 @@ exports.__esModule = true;
 exports.pseudoPropNames = exports.stylePropNames = exports.customStyleNames = exports.colorStyleNames = exports.nativeStyleNames = void 0;
 var nativeStyleNames = ['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundSize', 'baselineShift', 'border', 'borderBottom', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'clear', 'clip', 'clipPath', 'clipRule', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantLigatures', 'fontVariantNumeric', 'fontWeight', 'gap', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'mask', 'maskType', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'motion', 'objectFit', 'objectPosition', 'opacity', 'order', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'resize', 'right', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textTransform', 'top', 'touchAction', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'verticalAlign', 'visibility', 'clipPath', 'filter', 'userSelect', 'WebkitOverflowScrolling', 'writingMode', 'whiteSpace', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'zIndex'];
 exports.nativeStyleNames = nativeStyleNames;
-var colorStyleNames = ['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'fill', 'stroke'];
+var colorStyleNames = ['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'fill', 'outlineColor', 'stroke'];
 exports.colorStyleNames = colorStyleNames;
 var customStyleNames = ['css', 'column', 'columnStart', 'columnEnd', 'row', 'rowStart', 'rowEnd', 'basis', 'elevation', 'grow', 'marginHorizontal', 'marginVertical', 'paddingHorizontal', 'paddingVertical', 'radius', 'radiusTop', 'radiusRight', 'radiusBottom', 'radiusLeft', 'x', 'y', 'rotate', 'scale', 'uppercase', 'shrink', 'wrap', 'strokeAlign', 'strokeWeight'];
 exports.customStyleNames = customStyleNames;

package/dist/cjs/utils.js

@@ -21,7 +21,6 @@ exports.insertAtIndex = insertAtIndex;
 exports.isArray = isArray;
 exports.isElementInteractive = isElementInteractive;
 exports.isFunction = isFunction;
-exports.isNumber = isNumber;
 exports.isValueInArray = isValueInArray;
 exports.joinChildren = joinChildren;
 exports.lockScroll = lockScroll;
@@ -400,14 +399,6 @@ function isArray(value) {
 function isFunction(value) {
   return value && value.constructor === Function;
 }
-/**
- * Determines if value is a number
- */
-
-
-function isNumber(value) {
-  return /^[0-9]$/i.test(value);
-}
 /**
  * Determines if a value is present in an array by
  * performing a shallow equal check on each item.

package/dist/esm/Button/Button.js

@@ -171,7 +171,18 @@ export function Button(_ref) {
   }
 
   if (disabled) {
-    buttonProps.opacity = 0.65;
+    var themeData = buttonThemes[theme];
+
+    if (themeData) {
+      var variantData = themeData[variant];
+
+      if (variantData && variantData.disabled) {
+        buttonProps = _objectSpread(_objectSpread({}, buttonProps), variantData.disabled);
+      } else {
+        buttonProps.opacity = 0.65;
+      }
+    }
+
     buttonProps['aria-disabled'] = true;
     buttonProps.cursor = 'not-allowed';
 
@@ -191,9 +202,9 @@ export function Button(_ref) {
     buttonProps.hover = undefined;
     buttonProps.active = undefined;
   } else {
-    buttonProps.focus = _objectSpread(_objectSpread({}, buttonProps.focus), {}, {
+    buttonProps.focus = _objectSpread({
       zIndex: 5
-    });
+    }, buttonProps.focus);
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
     buttonProps.onClick = onClick;
@@ -265,7 +276,11 @@ export function Button(_ref) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(StackView, _extends({}, buttonProps, restProps), iconLeft && /*#__PURE__*/React.createElement(Icon, _extends({
+  return /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(StackView, _extends({}, buttonProps, restProps, {
+    css: {
+      '&:focus-visible': _objectSpread({}, buttonProps.focusVisible)
+    }
+  }), iconLeft && /*#__PURE__*/React.createElement(Icon, _extends({
     size: size,
     color: buttonProps.color,
     marginRight: paddingHorizontalDense

package/dist/esm/FilterLayout/FilterLayout.js

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