@nulogy/components 6.4.1 → 6.6.1

package/dist/main.js

@@ -275,7 +275,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 10 Nov 2021 22:44:30 GMT
+   * Generated on Tue, 01 Feb 2022 18:28:25 GMT
    */
 
   const color_base_black = "#011e38";
@@ -356,6 +356,7 @@
   const z_indices_sidebar = 800;
   const z_indices_nav_bar = 900;
   const z_indices_overlay = 1000;
+  const z_indices_above_overlay = 1010;
   const z_indices_open_control = 1000;
 
   var Theme = {
@@ -467,6 +468,7 @@
       tabsScollIndicator: z_indices_tabs_scroll_indicator,
       tabsBar: z_indices_tabs_bar,
       overlay: z_indices_overlay,
+      aboveOverlay: z_indices_above_overlay,
       tableHeader: z_indices_table_header,
       modalHeaderAndFooter: z_indices_modal_header_and_footer,
       openControl: z_indices_open_control,
@@ -24525,7 +24527,7 @@
       }
     };
   });
-  var Switch = styled__default['default'].div.withConfig({
+  var Switch$1 = styled__default['default'].div.withConfig({
     displayName: "ToggleButton__Switch",
     componentId: "t7wo9n-1"
   })(function (_ref2) {
@@ -24574,7 +24576,7 @@
       }
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(Switch, {
+    return /*#__PURE__*/React__default['default'].createElement(Switch$1, {
       onClick: handleClick
     }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, Object.assign({
       ref: inputRef,
@@ -27492,6 +27494,55 @@
     label: null
   };
 
+  var FocusManager = function FocusManager(_ref) {
+    var children = _ref.children,
+        _ref$refs = _ref.refs,
+        refs = _ref$refs === void 0 ? undefined : _ref$refs;
+
+    var _useState = React.useState(0),
+        focusedIndex = _useState[0],
+        setFocusedIndex = _useState[1];
+
+    var focusPrevious = function focusPrevious() {
+      setFocusedIndex(function (prevFocusedIndex) {
+        return (prevFocusedIndex - 1 + refs.length) % refs.length;
+      });
+    };
+
+    var focusNext = function focusNext() {
+      setFocusedIndex(function (prevFocusedIndex) {
+        return (prevFocusedIndex + 1) % refs.length;
+      });
+    };
+
+    var handleArrowNavigation = function handleArrowNavigation(e) {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          focusPrevious();
+          break;
+
+        case "ArrowRight":
+          e.preventDefault();
+          focusNext();
+          break;
+      }
+    };
+
+    React.useEffect(function () {
+      var updateFocused = function updateFocused() {
+        refs[focusedIndex].focus();
+      };
+
+      updateFocused();
+    }, [focusedIndex, refs]);
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children({
+      focusedIndex: focusedIndex,
+      setFocusedIndex: setFocusedIndex,
+      handleArrowNavigation: handleArrowNavigation
+    }));
+  };
+
   var TabContainer = styled__default['default'](Box).withConfig({
     displayName: "TabContainer",
     componentId: "sc-1esq49v-0"
@@ -27520,94 +27571,6 @@
     };
   });
 
-  var TabFocusManager = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose__default['default'](TabFocusManager, _React$Component);
-
-    function TabFocusManager(props) {
-      var _this;
-
-      _this = _React$Component.call(this, props) || this;
-      _this.state = {
-        focusedIndex: 0
-      };
-      _this.handleArrowNavigation = _this.handleArrowNavigation.bind(_assertThisInitialized__default['default'](_this));
-      _this.focusNextTab = _this.focusNextTab.bind(_assertThisInitialized__default['default'](_this));
-      _this.focusPreviousTab = _this.focusPreviousTab.bind(_assertThisInitialized__default['default'](_this));
-      _this.setFocusToTab = _this.setFocusToTab.bind(_assertThisInitialized__default['default'](_this));
-      return _this;
-    }
-
-    var _proto = TabFocusManager.prototype;
-
-    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-      var focusedIndex = this.state.focusedIndex;
-
-      if (prevState.focusedIndex !== focusedIndex) {
-        this.updateFocusedTab();
-      }
-    };
-
-    _proto.setFocusToTab = function setFocusToTab(index) {
-      this.setState({
-        focusedIndex: index
-      });
-    };
-
-    _proto.handleArrowNavigation = function handleArrowNavigation(e) {
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault();
-          this.focusPreviousTab();
-          break;
-
-        case "ArrowRight":
-          e.preventDefault();
-          this.focusNextTab();
-          break;
-      }
-    };
-
-    _proto.focusNextTab = function focusNextTab() {
-      var tabRefs = this.props.tabRefs;
-      this.setState(function (prevState) {
-        return {
-          focusedIndex: (prevState.focusedIndex + 1) % tabRefs.length
-        };
-      });
-    };
-
-    _proto.focusPreviousTab = function focusPreviousTab() {
-      var tabRefs = this.props.tabRefs;
-      this.setState(function (prevState) {
-        return {
-          focusedIndex: (prevState.focusedIndex - 1 + tabRefs.length) % tabRefs.length
-        };
-      });
-    };
-
-    _proto.updateFocusedTab = function updateFocusedTab() {
-      var tabRefs = this.props.tabRefs;
-      var focusedIndex = this.state.focusedIndex;
-      tabRefs[focusedIndex].focus();
-    };
-
-    _proto.render = function render() {
-      var focusedIndex = this.state.focusedIndex;
-      var children = this.props.children;
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children({
-        focusedIndex: focusedIndex,
-        handleArrowNavigation: this.handleArrowNavigation,
-        setFocusToTab: this.setFocusToTab
-      }));
-    };
-
-    return TabFocusManager;
-  }(React__default['default'].Component);
-
-  TabFocusManager.defaultProps = {
-    tabRefs: undefined
-  };
-
   var TabScrollIndicatorButton = styled__default['default'].button.withConfig({
     displayName: "TabScrollIndicator__TabScrollIndicatorButton",
     componentId: "sc-91z16z-0"
@@ -28006,12 +27969,12 @@
       var spaceProps = getSubset(this.props, propTypes.space);
       return /*#__PURE__*/React__default['default'].createElement(Box, {
         position: "relative"
-      }, /*#__PURE__*/React__default['default'].createElement(TabFocusManager, {
-        tabRefs: this.tabRefs
+      }, /*#__PURE__*/React__default['default'].createElement(FocusManager, {
+        refs: this.tabRefs
       }, function (_ref2) {
-        var handleArrowNavigation = _ref2.handleArrowNavigation,
-            setFocusToTab = _ref2.setFocusToTab,
-            focusedIndex = _ref2.focusedIndex;
+        var focusedIndex = _ref2.focusedIndex,
+            setFocusedIndex = _ref2.setFocusedIndex,
+            handleArrowNavigation = _ref2.handleArrowNavigation;
         return /*#__PURE__*/React__default['default'].createElement(TabScrollIndicators, {
           tabRefs: _this3.tabRefs,
           tabContainerRef: _this3.tabContainerRef
@@ -28026,7 +27989,7 @@
           }, spaceProps), /*#__PURE__*/React__default['default'].createElement(ResizeDetector, {
             handleWidth: true,
             onResize: handleResize
-          }), _this3.getTabs(setFocusToTab, focusedIndex, handleArrowNavigation));
+          }), _this3.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation));
         });
       }), this.getTabContent());
     };
@@ -28044,6 +28007,109 @@
     onTabClick: undefined
   };
 
+  var Switcher = function Switcher(_a) {
+    var selected = _a.selected,
+        onChange = _a.onChange,
+        rest = __rest(_a, ["selected", "onChange"]);
+
+    var optionRefs = [];
+
+    var isSelected = function isSelected(value, index) {
+      if (!selected) return index === 0;
+      return value === selected;
+    };
+
+    var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
+      return React__default['default'].Children.map(rest.children, function (child, index) {
+        return /*#__PURE__*/React__default['default'].cloneElement(child, {
+          index: index,
+          tabIndex: index === focusedIndex ? 0 : -1,
+          selected: isSelected(child.props.value, index),
+          "aria-selected": isSelected(child.props.value, index),
+          onKeyDown: handleArrowNavigation,
+          ref: function ref(_ref) {
+            optionRefs[index] = _ref;
+          },
+          onFocus: function onFocus(e) {
+            e.stopPropagation();
+          },
+          onClick: function onClick() {
+            setFocusedIndex(index);
+            if (onChange) onChange(child.props.value);
+          }
+        });
+      });
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
+      display: "inline-flex",
+      bg: "whiteGrey",
+      borderRadius: "20px"
+    }, rest), /*#__PURE__*/React__default['default'].createElement(FocusManager, {
+      refs: optionRefs
+    }, function (_ref2) {
+      var focusedIndex = _ref2.focusedIndex,
+          setFocusedIndex = _ref2.setFocusedIndex,
+          handleArrowNavigation = _ref2.handleArrowNavigation;
+      return options(focusedIndex, setFocusedIndex, handleArrowNavigation);
+    }));
+  };
+
+  Switcher.propTypes = {
+    children: PropTypes__default['default'].node,
+    selected: PropTypes__default['default'].string,
+    onChange: PropTypes__default['default'].func
+  };
+
+  var SwitchButton = styled__default['default'].button.withConfig({
+    displayName: "Switch__SwitchButton",
+    componentId: "wsu5uq-0"
+  })(function (_ref) {
+    var selected = _ref.selected,
+        theme = _ref.theme;
+    return Object.assign(Object.assign(Object.assign({
+      height: theme.space.x4,
+      margin: 1,
+      padding: theme.space.half + " " + theme.space.x2,
+      background: selected ? theme.colors.white : "none",
+      color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
+      cursor: "pointer",
+      border: "none",
+      borderRadius: 20,
+      fontSize: theme.fontSizes.medium,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights.base,
+      textDecoration: "none",
+      whiteSpace: "nowrap"
+    }, selected && {
+      boxShadow: theme.shadows.small
+    }), {
+      "&:focus": {
+        outline: "none",
+        boxShadow: theme.shadows.focus
+      }
+    }), !selected && {
+      "&:hover": {
+        backgroundColor: theme.colors.lightGrey
+      }
+    });
+  });
+  /* eslint-disable-next-line react/display-name */
+
+  var Switch = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
+    var children = _a.children,
+        rest = __rest(_a, ["children"]);
+
+    return /*#__PURE__*/React__default['default'].createElement(SwitchButton, Object.assign({}, rest, {
+      ref: ref
+    }), children);
+  });
+  Switch.propTypes = {
+    children: PropTypes__default['default'].node,
+    selected: PropTypes__default['default'].bool,
+    value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number, PropTypes__default['default'].array])
+  };
+
   var getHoverBackground = function getHoverBackground(currentPage, disabled, theme) {
     if (currentPage) {
       return theme.colors.darkBlue;
@@ -43846,8 +43912,11 @@
         width: "240px",
         height: "24px",
         viewBox: "0 0 100 10",
-        preserveAspectRatio: "xMidYMid"
-      }, /*#__PURE__*/React__default['default'].createElement("g", {
+        preserveAspectRatio: "xMidYMid",
+        role: "img"
+      }, /*#__PURE__*/React__default['default'].createElement("title", {
+        id: "lightbulb11"
+      }, "Loading animation"), /*#__PURE__*/React__default['default'].createElement("g", {
         transform: "translate(4 5)"
       }, /*#__PURE__*/React__default['default'].createElement("circle", {
         cx: "0",
@@ -52786,6 +52855,8 @@
   exports.Sidebar = Sidebar;
   exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
+  exports.Switch = Switch;
+  exports.Switcher = Switcher;
   exports.Tab = Tab;
   exports.Table = Table;
   exports.Tabs = Tabs;

package/dist/main.module.js

@@ -249,7 +249,7 @@ function I18nextProvider(_ref) {
 
 /**
  * Do not edit directly
- * Generated on Wed, 10 Nov 2021 22:44:30 GMT
+ * Generated on Tue, 01 Feb 2022 18:28:25 GMT
  */
 
 const color_base_black = "#011e38";
@@ -330,6 +330,7 @@ const z_indices_tabs_bar = 210;
 const z_indices_sidebar = 800;
 const z_indices_nav_bar = 900;
 const z_indices_overlay = 1000;
+const z_indices_above_overlay = 1010;
 const z_indices_open_control = 1000;
 
 var Theme = {
@@ -441,6 +442,7 @@ var Theme = {
     tabsScollIndicator: z_indices_tabs_scroll_indicator,
     tabsBar: z_indices_tabs_bar,
     overlay: z_indices_overlay,
+    aboveOverlay: z_indices_above_overlay,
     tableHeader: z_indices_table_header,
     modalHeaderAndFooter: z_indices_modal_header_and_footer,
     openControl: z_indices_open_control,
@@ -24499,7 +24501,7 @@ var Slider = styled.span.withConfig({
     }
   };
 });
-var Switch = styled.div.withConfig({
+var Switch$1 = styled.div.withConfig({
   displayName: "ToggleButton__Switch",
   componentId: "t7wo9n-1"
 })(function (_ref2) {
@@ -24548,7 +24550,7 @@ var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(Switch, {
+  return /*#__PURE__*/React__default.createElement(Switch$1, {
     onClick: handleClick
   }, /*#__PURE__*/React__default.createElement(ToggleInput, Object.assign({
     ref: inputRef,
@@ -27466,6 +27468,55 @@ Tab.defaultProps = {
   label: null
 };
 
+var FocusManager = function FocusManager(_ref) {
+  var children = _ref.children,
+      _ref$refs = _ref.refs,
+      refs = _ref$refs === void 0 ? undefined : _ref$refs;
+
+  var _useState = useState(0),
+      focusedIndex = _useState[0],
+      setFocusedIndex = _useState[1];
+
+  var focusPrevious = function focusPrevious() {
+    setFocusedIndex(function (prevFocusedIndex) {
+      return (prevFocusedIndex - 1 + refs.length) % refs.length;
+    });
+  };
+
+  var focusNext = function focusNext() {
+    setFocusedIndex(function (prevFocusedIndex) {
+      return (prevFocusedIndex + 1) % refs.length;
+    });
+  };
+
+  var handleArrowNavigation = function handleArrowNavigation(e) {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        focusPrevious();
+        break;
+
+      case "ArrowRight":
+        e.preventDefault();
+        focusNext();
+        break;
+    }
+  };
+
+  useEffect(function () {
+    var updateFocused = function updateFocused() {
+      refs[focusedIndex].focus();
+    };
+
+    updateFocused();
+  }, [focusedIndex, refs]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children({
+    focusedIndex: focusedIndex,
+    setFocusedIndex: setFocusedIndex,
+    handleArrowNavigation: handleArrowNavigation
+  }));
+};
+
 var TabContainer = styled(Box).withConfig({
   displayName: "TabContainer",
   componentId: "sc-1esq49v-0"
@@ -27494,94 +27545,6 @@ var TabContainer = styled(Box).withConfig({
   };
 });
 
-var TabFocusManager = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose$2(TabFocusManager, _React$Component);
-
-  function TabFocusManager(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
-      focusedIndex: 0
-    };
-    _this.handleArrowNavigation = _this.handleArrowNavigation.bind(_assertThisInitialized$4(_this));
-    _this.focusNextTab = _this.focusNextTab.bind(_assertThisInitialized$4(_this));
-    _this.focusPreviousTab = _this.focusPreviousTab.bind(_assertThisInitialized$4(_this));
-    _this.setFocusToTab = _this.setFocusToTab.bind(_assertThisInitialized$4(_this));
-    return _this;
-  }
-
-  var _proto = TabFocusManager.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var focusedIndex = this.state.focusedIndex;
-
-    if (prevState.focusedIndex !== focusedIndex) {
-      this.updateFocusedTab();
-    }
-  };
-
-  _proto.setFocusToTab = function setFocusToTab(index) {
-    this.setState({
-      focusedIndex: index
-    });
-  };
-
-  _proto.handleArrowNavigation = function handleArrowNavigation(e) {
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        this.focusPreviousTab();
-        break;
-
-      case "ArrowRight":
-        e.preventDefault();
-        this.focusNextTab();
-        break;
-    }
-  };
-
-  _proto.focusNextTab = function focusNextTab() {
-    var tabRefs = this.props.tabRefs;
-    this.setState(function (prevState) {
-      return {
-        focusedIndex: (prevState.focusedIndex + 1) % tabRefs.length
-      };
-    });
-  };
-
-  _proto.focusPreviousTab = function focusPreviousTab() {
-    var tabRefs = this.props.tabRefs;
-    this.setState(function (prevState) {
-      return {
-        focusedIndex: (prevState.focusedIndex - 1 + tabRefs.length) % tabRefs.length
-      };
-    });
-  };
-
-  _proto.updateFocusedTab = function updateFocusedTab() {
-    var tabRefs = this.props.tabRefs;
-    var focusedIndex = this.state.focusedIndex;
-    tabRefs[focusedIndex].focus();
-  };
-
-  _proto.render = function render() {
-    var focusedIndex = this.state.focusedIndex;
-    var children = this.props.children;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children({
-      focusedIndex: focusedIndex,
-      handleArrowNavigation: this.handleArrowNavigation,
-      setFocusToTab: this.setFocusToTab
-    }));
-  };
-
-  return TabFocusManager;
-}(React__default.Component);
-
-TabFocusManager.defaultProps = {
-  tabRefs: undefined
-};
-
 var TabScrollIndicatorButton = styled.button.withConfig({
   displayName: "TabScrollIndicator__TabScrollIndicatorButton",
   componentId: "sc-91z16z-0"
@@ -27980,12 +27943,12 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     var spaceProps = getSubset(this.props, propTypes.space);
     return /*#__PURE__*/React__default.createElement(Box, {
       position: "relative"
-    }, /*#__PURE__*/React__default.createElement(TabFocusManager, {
-      tabRefs: this.tabRefs
+    }, /*#__PURE__*/React__default.createElement(FocusManager, {
+      refs: this.tabRefs
     }, function (_ref2) {
-      var handleArrowNavigation = _ref2.handleArrowNavigation,
-          setFocusToTab = _ref2.setFocusToTab,
-          focusedIndex = _ref2.focusedIndex;
+      var focusedIndex = _ref2.focusedIndex,
+          setFocusedIndex = _ref2.setFocusedIndex,
+          handleArrowNavigation = _ref2.handleArrowNavigation;
       return /*#__PURE__*/React__default.createElement(TabScrollIndicators, {
         tabRefs: _this3.tabRefs,
         tabContainerRef: _this3.tabContainerRef
@@ -28000,7 +27963,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, spaceProps), /*#__PURE__*/React__default.createElement(ResizeDetector, {
           handleWidth: true,
           onResize: handleResize
-        }), _this3.getTabs(setFocusToTab, focusedIndex, handleArrowNavigation));
+        }), _this3.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation));
       });
     }), this.getTabContent());
   };
@@ -28018,6 +27981,109 @@ Tabs.defaultProps = {
   onTabClick: undefined
 };
 
+var Switcher = function Switcher(_a) {
+  var selected = _a.selected,
+      onChange = _a.onChange,
+      rest = __rest(_a, ["selected", "onChange"]);
+
+  var optionRefs = [];
+
+  var isSelected = function isSelected(value, index) {
+    if (!selected) return index === 0;
+    return value === selected;
+  };
+
+  var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
+    return React__default.Children.map(rest.children, function (child, index) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        index: index,
+        tabIndex: index === focusedIndex ? 0 : -1,
+        selected: isSelected(child.props.value, index),
+        "aria-selected": isSelected(child.props.value, index),
+        onKeyDown: handleArrowNavigation,
+        ref: function ref(_ref) {
+          optionRefs[index] = _ref;
+        },
+        onFocus: function onFocus(e) {
+          e.stopPropagation();
+        },
+        onClick: function onClick() {
+          setFocusedIndex(index);
+          if (onChange) onChange(child.props.value);
+        }
+      });
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    display: "inline-flex",
+    bg: "whiteGrey",
+    borderRadius: "20px"
+  }, rest), /*#__PURE__*/React__default.createElement(FocusManager, {
+    refs: optionRefs
+  }, function (_ref2) {
+    var focusedIndex = _ref2.focusedIndex,
+        setFocusedIndex = _ref2.setFocusedIndex,
+        handleArrowNavigation = _ref2.handleArrowNavigation;
+    return options(focusedIndex, setFocusedIndex, handleArrowNavigation);
+  }));
+};
+
+Switcher.propTypes = {
+  children: PropTypes.node,
+  selected: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+var SwitchButton = styled.button.withConfig({
+  displayName: "Switch__SwitchButton",
+  componentId: "wsu5uq-0"
+})(function (_ref) {
+  var selected = _ref.selected,
+      theme = _ref.theme;
+  return Object.assign(Object.assign(Object.assign({
+    height: theme.space.x4,
+    margin: 1,
+    padding: theme.space.half + " " + theme.space.x2,
+    background: selected ? theme.colors.white : "none",
+    color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
+    cursor: "pointer",
+    border: "none",
+    borderRadius: 20,
+    fontSize: theme.fontSizes.medium,
+    fontWeight: theme.fontWeights.medium,
+    lineHeight: theme.lineHeights.base,
+    textDecoration: "none",
+    whiteSpace: "nowrap"
+  }, selected && {
+    boxShadow: theme.shadows.small
+  }), {
+    "&:focus": {
+      outline: "none",
+      boxShadow: theme.shadows.focus
+    }
+  }), !selected && {
+    "&:hover": {
+      backgroundColor: theme.colors.lightGrey
+    }
+  });
+});
+/* eslint-disable-next-line react/display-name */
+
+var Switch = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(SwitchButton, Object.assign({}, rest, {
+    ref: ref
+  }), children);
+});
+Switch.propTypes = {
+  children: PropTypes.node,
+  selected: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array])
+};
+
 var getHoverBackground = function getHoverBackground(currentPage, disabled, theme) {
   if (currentPage) {
     return theme.colors.darkBlue;
@@ -43820,8 +43886,11 @@ var LoadingAnimation = function LoadingAnimation(_ref) {
       width: "240px",
       height: "24px",
       viewBox: "0 0 100 10",
-      preserveAspectRatio: "xMidYMid"
-    }, /*#__PURE__*/React__default.createElement("g", {
+      preserveAspectRatio: "xMidYMid",
+      role: "img"
+    }, /*#__PURE__*/React__default.createElement("title", {
+      id: "lightbulb11"
+    }, "Loading animation"), /*#__PURE__*/React__default.createElement("g", {
       transform: "translate(4 5)"
     }, /*#__PURE__*/React__default.createElement("circle", {
       cx: "0",
@@ -52692,4 +52761,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };

package/dist/src/Switcher/Switch.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type SwitchProps = {
+    selected?: boolean;
+} & React.ComponentPropsWithRef<"button">;
+declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "selected"> & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/dist/src/Switcher/Switch.story.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Switch: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SelectedSwitch: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const UnSelectedSwitch: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Switcher/Switcher.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare type SwitchValue = HTMLButtonElement["value"];
+declare type SwitcherProps = {
+    children?: any;
+    selected?: SwitchValue;
+    onChange?: Function;
+};
+declare const Switcher: React.FC<SwitcherProps>;
+export default Switcher;

package/dist/src/Switcher/Switcher.story.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const WithSelectedValue: () => JSX.Element;
+export declare const WithContent: () => JSX.Element;
+declare const _default: {
+    title: string;
+};
+export default _default;

package/dist/src/Switcher/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Switcher } from "./Switcher";
+export { default as Switch } from "./Switch";

package/dist/src/Tabs/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Tab } from "./Tab";
 export { default as Tabs } from "./Tabs";
-export { default as TabFocusManager } from "./TabFocusManager";
 export { default as TabScrollIndicator } from "./TabScrollIndicator";
 export { default as TabScrollIndicators } from "./TabScrollIndicators";

package/dist/src/index.d.ts

@@ -26,6 +26,7 @@ export { Tooltip } from "./Tooltip";
 export { Card, CardSet } from "./Card";
 export { Modal } from "./Modal";
 export { Tab, Tabs } from "./Tabs";
+export { Switch, Switcher } from "./Switcher";
 export { Table } from "./Table";
 export type { TableProps, TableColumnType, TableRowType, TableCellInfoType, } from "./Table";
 export { StatusIndicator } from "./StatusIndicator";

package/dist/src/theme.type.d.ts

@@ -95,6 +95,7 @@ declare type ZIndices = {
     tabsScollIndicator: number;
     tabsBar: number;
     overlay: number;
+    aboveOverlay: number;
     tableHeader: number;
     modalHeaderAndFooter: number;
     openControl: number;

package/dist/src/utils/ts/FocusManager.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+declare type Reference = {
+    current?: JSX.Element;
+    focus?: (...args: any[]) => any;
+};
+declare type ChildrenHandlers = {
+    focusedIndex: number;
+    handleArrowNavigation: Function;
+    setFocusedIndex: Function;
+};
+declare type FocusManagerProps = {
+    refs?: Array<Reference>;
+    children: (handlers: ChildrenHandlers) => ReactNode;
+};
+declare const FocusManager: React.FC<FocusManagerProps>;
+export default FocusManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.4.1",
+  "version": "6.6.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -138,7 +138,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@nulogy/tokens": "^5.1.0",
+    "@nulogy/tokens": "^5.2.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "body-scroll-lock": "^3.1.5",

package/dist/src/Tabs/TabFocusManager.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-declare type TabFocusManagerProps = {
-    tabRefs?: {
-        current?: JSX.Element;
-        focus?: (...args: any[]) => any;
-    }[];
-};
-declare type TabFocusManagerState = {
-    focusedIndex: any;
-} & ((prevState: any) => {
-    focusedIndex: number;
-}) & ((prevState: any) => {
-    focusedIndex: number;
-}) & {
-    focusedIndex: number;
-};
-declare class TabFocusManager extends React.Component<TabFocusManagerProps, TabFocusManagerState> {
-    constructor(props: any);
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    setFocusToTab(index: any): void;
-    handleArrowNavigation(e: any): void;
-    focusNextTab(): void;
-    focusPreviousTab(): void;
-    updateFocusedTab(): void;
-    render(): JSX.Element;
-}
-export default TabFocusManager;