@kaizen/components 1.4.25 → 1.5.0

package/dist/chunk-GTXIOS6D.js

@@ -0,0 +1,51 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkSBUK4XZMjs = require('./chunk-SBUK4XZM.js');
+
+// src/ButtonGroup/ButtonGroup.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _drafttooltip = require('@kaizen/draft-tooltip');
+var _ButtonGroupmoduleNQDV3763scss = require('./ButtonGroup.module-NQDV3763.scss'); var _ButtonGroupmoduleNQDV3763scss2 = _interopRequireDefault(_ButtonGroupmoduleNQDV3763scss);
+var isFilterButton = (node) => _react2.default.isValidElement(node) && node.type === _chunkSBUK4XZMjs.FilterButtonBase;
+var ButtonGroup = ({
+  children,
+  classNameOverride,
+  ...restProps
+}) => {
+  const childCount = _react2.default.Children.count(children);
+  const containerProps = {
+    role: "group",
+    className: _classnames2.default.call(void 0, _ButtonGroupmoduleNQDV3763scss2.default.buttonGroup, classNameOverride),
+    ...restProps
+  };
+  if (childCount === 1)
+    return /* @__PURE__ */ _react2.default.createElement("div", { ...containerProps }, children);
+  return /* @__PURE__ */ _react2.default.createElement("div", { ...containerProps }, _react2.default.Children.map(children, (child, index) => {
+    const buttonClassNames = _classnames2.default.call(void 0, 
+      _ButtonGroupmoduleNQDV3763scss2.default.child,
+      index === 0 && _ButtonGroupmoduleNQDV3763scss2.default.firstChild,
+      index === childCount - 1 && _ButtonGroupmoduleNQDV3763scss2.default.lastChild,
+      child.props.classNameOverride
+    );
+    if (child.type === _drafttooltip.Tooltip) {
+      const button = child.props.children;
+      if (isFilterButton(button)) {
+        return _react2.default.cloneElement(child, {
+          children: _react2.default.cloneElement(button, {
+            classNameOverride: buttonClassNames
+          })
+        });
+      }
+      return child;
+    }
+    return _react2.default.cloneElement(child, {
+      classNameOverride: buttonClassNames
+    });
+  }));
+};
+ButtonGroup.displayName = "ButtonGroup";
+
+
+
+exports.ButtonGroup = ButtonGroup;

package/dist/chunk-J5NCLDC5.js

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkTGN3Y4NFjs = require('./chunk-TGN3Y4NF.js');
+
+// src/Filter/Filter.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactfocuson = require('react-focus-on');
+var Filter = ({
+  children,
+  isOpen,
+  setIsOpen,
+  renderTrigger,
+  classNameOverride,
+  ...restProps
+}) => {
+  var _a, _b, _c, _d;
+  const [isRefLoaded, setIsRefLoaded] = _react.useState.call(void 0, false);
+  const trigger = renderTrigger({
+    onClick: () => setIsOpen(!isOpen),
+    isOpen
+  });
+  const inbuiltButtonRef = _react.useRef.call(void 0, null);
+  const inbuiltRef = _react.useRef.call(void 0, {
+    triggerRef: inbuiltButtonRef
+  });
+  const filterButtonRef = _nullishCoalesce(trigger.ref, () => ( inbuiltRef));
+  _react.useEffect.call(void 0, () => {
+    var _a2, _b2;
+    if ((_b2 = (_a2 = filterButtonRef.current) == null ? void 0 : _a2.triggerRef) == null ? void 0 : _b2.current) {
+      setIsRefLoaded(true);
+    }
+  }, [(_b = (_a = filterButtonRef.current) == null ? void 0 : _a.triggerRef) == null ? void 0 : _b.current]);
+  return /* @__PURE__ */ _react2.default.createElement("div", { className: classNameOverride, ...restProps }, _react2.default.cloneElement(trigger, {
+    ref: filterButtonRef
+  }), isRefLoaded && isOpen && /* @__PURE__ */ _react2.default.createElement(
+    _reactfocuson.FocusOn,
+    {
+      scrollLock: false,
+      onClickOutside: () => setIsOpen(false),
+      onEscapeKey: () => setIsOpen(false)
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _chunkTGN3Y4NFjs.FilterPopover,
+      {
+        referenceElement: ((_d = (_c = filterButtonRef.current) == null ? void 0 : _c.triggerRef) == null ? void 0 : _d.current) || null
+      },
+      children
+    )
+  ));
+};
+Filter.displayName = "Filter";
+
+
+
+exports.Filter = Filter;

package/dist/chunk-SBUK4XZM.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/FilterButton/components/FilterButtonBase/FilterButtonBase.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _FilterButtonBasemoduleKNRAMYSJscss = require('./FilterButtonBase.module-KNRAMYSJ.scss'); var _FilterButtonBasemoduleKNRAMYSJscss2 = _interopRequireDefault(_FilterButtonBasemoduleKNRAMYSJscss);
+var FilterButtonBase = _react.forwardRef.call(void 0, ({ children, classNameOverride, ...restProps }, ref) => /* @__PURE__ */ _react2.default.createElement(
+  "button",
+  {
+    ref,
+    className: _classnames2.default.call(void 0, _FilterButtonBasemoduleKNRAMYSJscss2.default.filterButtonBase, classNameOverride),
+    ...restProps
+  },
+  children
+));
+FilterButtonBase.displayName = "FilterButtonBase";
+
+
+
+exports.FilterButtonBase = FilterButtonBase;

package/dist/chunk-TGN3Y4NF.js

@@ -0,0 +1,51 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/Filter/components/FilterPopover/FilterPopover.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _reactpopper = require('react-popper');
+var _FilterPopovermodule2NVOPVITscss = require('./FilterPopover.module-2NVOPVIT.scss'); var _FilterPopovermodule2NVOPVITscss2 = _interopRequireDefault(_FilterPopovermodule2NVOPVITscss);
+var FilterPopover = ({
+  children,
+  referenceElement,
+  popperOptions,
+  classNameOverride,
+  ...restProps
+}) => {
+  const [popperElement, setPopperElement] = _react.useState.call(void 0, 
+    null
+  );
+  const { styles: popperStyles, attributes: popperAttributes } = _reactpopper.usePopper.call(void 0, 
+    referenceElement,
+    popperElement,
+    {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 15]
+          }
+        }
+      ],
+      placement: "bottom-start",
+      strategy: "fixed",
+      ...popperOptions
+    }
+  );
+  return /* @__PURE__ */ _react2.default.createElement(
+    "div",
+    {
+      ref: setPopperElement,
+      style: popperStyles == null ? void 0 : popperStyles.popper,
+      ...popperAttributes == null ? void 0 : popperAttributes.popper,
+      className: _classnames2.default.call(void 0, _FilterPopovermodule2NVOPVITscss2.default.filterPopover, classNameOverride),
+      role: "dialog",
+      "aria-modal": "true",
+      ...restProps
+    },
+    children
+  );
+};
+FilterPopover.displayName = "FilterPopover";
+
+
+
+exports.FilterPopover = FilterPopover;

package/dist/chunk-Y6BQRSGB.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/Filter/components/FilterContents/FilterContents.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _FilterContentsmoduleVKPAJKDGscss = require('./FilterContents.module-VKPAJKDG.scss'); var _FilterContentsmoduleVKPAJKDGscss2 = _interopRequireDefault(_FilterContentsmoduleVKPAJKDGscss);
+var FilterContents = ({
+  children,
+  classNameOverride,
+  ...restProps
+}) => /* @__PURE__ */ _react2.default.createElement(
+  "div",
+  {
+    className: _classnames2.default.call(void 0, _FilterContentsmoduleVKPAJKDGscss2.default.filterContents, classNameOverride),
+    ...restProps
+  },
+  children
+);
+FilterContents.displayName = "FilterContents";
+
+
+
+exports.FilterContents = FilterContents;

package/dist/esm/ButtonGroup/index.js

@@ -0,0 +1,7 @@
+import {
+  ButtonGroup
+} from "../chunk-GTXIOS6D.js";
+import "../chunk-SBUK4XZM.js";
+export {
+  ButtonGroup
+};

package/dist/esm/ButtonGroup.module-NQDV3763.scss

@@ -0,0 +1,73 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+$focus-ring-offset: 1px;
+$focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
+
+// Polyfill
+$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
+
+// Classnames to simulate pseudo states in storybook
+$story-className--button-group--focus: ":global(.story__button-group--focus)";
+
+// Combined pseudo state classes
+$selectors--button-group--focus: "&:focus-visible, #{$polyfill--focus-visible}, &#{$story-className--button-group--focus}";
+
+%firstChildBorders {
+  border-start-start-radius: $border-focus-ring-border-radius;
+  border-end-start-radius: $border-focus-ring-border-radius;
+}
+
+%lastChildBorders {
+  border-start-end-radius: $border-focus-ring-border-radius;
+  border-end-end-radius: $border-focus-ring-border-radius;
+}
+
+.buttonGroup {
+  display: inline-flex;
+
+  .child {
+    border-radius: 0;
+
+    #{$selectors--button-group--focus} {
+      &::after {
+        border-radius: 0;
+      }
+    }
+
+    &.firstChild {
+      @extend %firstChildBorders;
+
+      #{$selectors--button-group--focus} {
+        &::after {
+          @extend %firstChildBorders;
+          inset-inline-end: $focus-ring-offset-inner;
+        }
+      }
+    }
+
+    &:not(.firstChild) {
+      border-inline-start: 1px solid $color-blue-300;
+    }
+
+    &:not(.firstChild):not(.lastChild) {
+      #{$selectors--button-group--focus} {
+        &::after {
+          inset-inline-start: $focus-ring-offset-inner;
+          inset-inline-end: $focus-ring-offset-inner;
+        }
+      }
+    }
+
+    &.lastChild {
+      @extend %lastChildBorders;
+
+      #{$selectors--button-group--focus} {
+        &::after {
+          @extend %lastChildBorders;
+          inset-inline-start: $focus-ring-offset-inner;
+        }
+      }
+    }
+  }
+}

package/dist/esm/Filter/components/FilterContents/index.js

@@ -0,0 +1,6 @@
+import {
+  FilterContents
+} from "../../../chunk-Y6BQRSGB.js";
+export {
+  FilterContents
+};

package/dist/esm/Filter/components/FilterPopover/index.js

@@ -0,0 +1,6 @@
+import {
+  FilterPopover
+} from "../../../chunk-TGN3Y4NF.js";
+export {
+  FilterPopover
+};

package/dist/esm/Filter/index.js

@@ -0,0 +1,12 @@
+import {
+  Filter
+} from "../chunk-J5NCLDC5.js";
+import "../chunk-TGN3Y4NF.js";
+import {
+  FilterContents
+} from "../chunk-Y6BQRSGB.js";
+import "../chunk-FMXGTI6W.js";
+export {
+  Filter,
+  FilterContents
+};

package/dist/esm/Filter/types.js

@@ -0,0 +1 @@
+import "../chunk-FMXGTI6W.js";

package/dist/esm/FilterButton/FilterButton/index.js

@@ -0,0 +1,8 @@
+import {
+  FilterButton
+} from "../../chunk-DR7ZJ6Z3.js";
+import "../../chunk-3VEH3HNR.js";
+import "../../chunk-SBUK4XZM.js";
+export {
+  FilterButton
+};

package/dist/esm/FilterButton/FilterButtonRemovable/index.js

@@ -0,0 +1,10 @@
+import {
+  FilterButtonRemovable
+} from "../../chunk-24HHXM6U.js";
+import "../../chunk-DR7ZJ6Z3.js";
+import "../../chunk-3VEH3HNR.js";
+import "../../chunk-GTXIOS6D.js";
+import "../../chunk-SBUK4XZM.js";
+export {
+  FilterButtonRemovable
+};

package/dist/esm/FilterButton/components/FilterButtonBase/index.js

@@ -0,0 +1,6 @@
+import {
+  FilterButtonBase
+} from "../../../chunk-SBUK4XZM.js";
+export {
+  FilterButtonBase
+};

package/dist/esm/FilterButton/index.js

@@ -0,0 +1,13 @@
+import {
+  FilterButtonRemovable
+} from "../chunk-24HHXM6U.js";
+import {
+  FilterButton
+} from "../chunk-DR7ZJ6Z3.js";
+import "../chunk-3VEH3HNR.js";
+import "../chunk-GTXIOS6D.js";
+import "../chunk-SBUK4XZM.js";
+export {
+  FilterButton,
+  FilterButtonRemovable
+};

package/dist/esm/FilterButton.module-HA7A5HIZ.scss

@@ -0,0 +1,22 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.filterButton {
+  gap: $spacing-xs;
+}
+
+.labelContainer {
+  display: inline-flex;
+}
+
+.hasSelectedValues {
+  font-weight: $typography-button-primary-font-weight;
+}
+
+.labelSeparator {
+  margin-inline-end: $spacing-xs;
+
+  [dir="ltr"] [dir="rtl"] & {
+    margin-right: 0;
+  }
+}

package/dist/esm/FilterButtonBase.module-KNRAMYSJ.scss

@@ -0,0 +1,65 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "../../../_mixins/button-reset";
+@import "./variables";
+
+.filterButtonBase {
+  @include button-reset;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  height: 3rem; // 48px
+  padding: $spacing-sm;
+
+  border-width: 0;
+  border-radius: $border-solid-border-radius;
+
+  background-color: $color-blue-100;
+
+  font-family: $typography-button-secondary-font-family;
+  font-weight: $typography-button-secondary-font-weight;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
+  white-space: nowrap;
+
+  #{$selectors--filter-button-base--hover},
+  #{$selectors--filter-button-base--active} {
+    z-index: 2;
+  }
+
+  #{$selectors--filter-button-base--hover},
+  #{$selectors--filter-button-base--active},
+  #{$selectors--filter-button-base--focus} {
+    background-color: $color-blue-200;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  #{$selectors--filter-button-base--focus} {
+    outline: none;
+
+    &::after {
+      content: "";
+      z-index: 3;
+      position: absolute;
+      top: $focus-ring-offset-outer;
+      bottom: $focus-ring-offset-outer;
+      left: $focus-ring-offset-outer;
+      right: $focus-ring-offset-outer;
+      border-radius: $border-focus-ring-border-radius;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style
+        $color-blue-500;
+    }
+  }
+}

package/dist/esm/FilterContents.module-VKPAJKDG.scss

@@ -0,0 +1,5 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.filterContents {
+  padding: $spacing-md;
+}

package/dist/esm/FilterPopover.module-2NVOPVIT.scss

@@ -0,0 +1,11 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/shadow";
+
+.filterPopover {
+  background-color: $color-white;
+  z-index: 1010;
+  box-shadow: $shadow-large-box-shadow;
+  border-radius: $border-borderless-border-radius;
+  display: inline-flex;
+}

package/dist/esm/KaizenProvider/ThemeProvider/index.js

@@ -6,13 +6,13 @@ import {
 import {
   defaultTheme
 } from "../../chunk-WDAFEOSV.js";
+import {
+  heartTheme
+} from "../../chunk-7T4E5A7M.js";
 import "../../chunk-FBL47PXS.js";
 import {
   ThemeManager
 } from "../../chunk-J42JQYBY.js";
-import {
-  heartTheme
-} from "../../chunk-7T4E5A7M.js";
 export {
   ThemeContext,
   ThemeManager,

package/dist/esm/KaizenProvider/ThemeProvider/themes/index.js

@@ -1,10 +1,10 @@
 import {
   defaultTheme
 } from "../../../chunk-WDAFEOSV.js";
-import "../../../chunk-FBL47PXS.js";
 import {
   heartTheme
 } from "../../../chunk-7T4E5A7M.js";
+import "../../../chunk-FBL47PXS.js";
 export {
   defaultTheme,
   heartTheme

package/dist/esm/KaizenProvider/index.js

@@ -9,13 +9,13 @@ import {
 import {
   defaultTheme
 } from "../chunk-WDAFEOSV.js";
+import {
+  heartTheme
+} from "../chunk-7T4E5A7M.js";
 import "../chunk-FBL47PXS.js";
 import {
   ThemeManager
 } from "../chunk-J42JQYBY.js";
-import {
-  heartTheme
-} from "../chunk-7T4E5A7M.js";
 export {
   KaizenProvider,
   ThemeContext,

package/dist/esm/chunk-24HHXM6U.js

@@ -0,0 +1,29 @@
+import {
+  FilterButton
+} from "./chunk-DR7ZJ6Z3.js";
+import {
+  isRefObject
+} from "./chunk-3VEH3HNR.js";
+import {
+  ButtonGroup
+} from "./chunk-GTXIOS6D.js";
+import {
+  FilterButtonBase
+} from "./chunk-SBUK4XZM.js";
+
+// src/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx
+import React, { forwardRef } from "react";
+import { Icon } from "@kaizen/component-library";
+import iconClear from "@kaizen/component-library/icons/clear.icon.svg";
+import { Tooltip } from "@kaizen/draft-tooltip";
+var FilterButtonRemovable = forwardRef(({ triggerButtonProps, removeButtonProps, ...restProps }, ref) => {
+  const customRefObject = isRefObject(ref) ? ref.current : null;
+  const removeButtonRef = customRefObject == null ? void 0 : customRefObject.removeButtonRef;
+  const removeButtonLabel = (removeButtonProps == null ? void 0 : removeButtonProps.tooltipText) ?? `Remove filter - ${triggerButtonProps == null ? void 0 : triggerButtonProps.label}`;
+  return /* @__PURE__ */ React.createElement(ButtonGroup, { ...restProps }, /* @__PURE__ */ React.createElement(FilterButton, { ref, ...triggerButtonProps }), /* @__PURE__ */ React.createElement(Tooltip, { text: removeButtonLabel, display: "inline-block", position: "below" }, /* @__PURE__ */ React.createElement(FilterButtonBase, { ref: removeButtonRef, ...removeButtonProps }, /* @__PURE__ */ React.createElement(Icon, { icon: iconClear, title: removeButtonLabel }))));
+});
+FilterButtonRemovable.displayName = "FilterButtonRemovable";
+
+export {
+  FilterButtonRemovable
+};

package/dist/esm/chunk-3VEH3HNR.js

@@ -0,0 +1,6 @@
+// src/utils/isRefObject.ts
+var isRefObject = (ref) => ref !== null && "current" in ref;
+
+export {
+  isRefObject
+};

package/dist/esm/chunk-DR7ZJ6Z3.js

@@ -0,0 +1,38 @@
+import {
+  isRefObject
+} from "./chunk-3VEH3HNR.js";
+import {
+  FilterButtonBase
+} from "./chunk-SBUK4XZM.js";
+
+// src/FilterButton/FilterButton/FilterButton.tsx
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { Icon } from "@kaizen/component-library";
+import chevronDown from "@kaizen/component-library/icons/chevron-down.icon.svg";
+import chevronUp from "@kaizen/component-library/icons/chevron-up.icon.svg";
+import styles from "./FilterButton.module-HA7A5HIZ.scss";
+var FilterButton = forwardRef(
+  ({ label, selectedValue, isOpen = false, classNameOverride, ...restProps }, ref) => {
+    const customRefObject = isRefObject(ref) ? ref.current : null;
+    const triggerRef = customRefObject == null ? void 0 : customRefObject.triggerRef;
+    const selectedValuesLabel = selectedValue;
+    return /* @__PURE__ */ React.createElement(
+      FilterButtonBase,
+      {
+        ref: triggerRef,
+        classNameOverride: classnames(styles.filterButton, classNameOverride),
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        ...restProps
+      },
+      /* @__PURE__ */ React.createElement("span", { className: styles.labelContainer }, selectedValuesLabel ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: styles.hasSelectedValues }, /* @__PURE__ */ React.createElement("span", null, label), /* @__PURE__ */ React.createElement("span", { className: styles.labelSeparator }, ":")), /* @__PURE__ */ React.createElement("span", null, selectedValuesLabel)) : label),
+      /* @__PURE__ */ React.createElement(Icon, { icon: isOpen ? chevronUp : chevronDown, role: "presentation" })
+    );
+  }
+);
+FilterButton.displayName = "FilterButton";
+
+export {
+  FilterButton
+};

package/dist/esm/chunk-GTXIOS6D.js

@@ -0,0 +1,51 @@
+import {
+  FilterButtonBase
+} from "./chunk-SBUK4XZM.js";
+
+// src/ButtonGroup/ButtonGroup.tsx
+import React from "react";
+import classnames from "classnames";
+import { Tooltip } from "@kaizen/draft-tooltip";
+import styles from "./ButtonGroup.module-NQDV3763.scss";
+var isFilterButton = (node) => React.isValidElement(node) && node.type === FilterButtonBase;
+var ButtonGroup = ({
+  children,
+  classNameOverride,
+  ...restProps
+}) => {
+  const childCount = React.Children.count(children);
+  const containerProps = {
+    role: "group",
+    className: classnames(styles.buttonGroup, classNameOverride),
+    ...restProps
+  };
+  if (childCount === 1)
+    return /* @__PURE__ */ React.createElement("div", { ...containerProps }, children);
+  return /* @__PURE__ */ React.createElement("div", { ...containerProps }, React.Children.map(children, (child, index) => {
+    const buttonClassNames = classnames(
+      styles.child,
+      index === 0 && styles.firstChild,
+      index === childCount - 1 && styles.lastChild,
+      child.props.classNameOverride
+    );
+    if (child.type === Tooltip) {
+      const button = child.props.children;
+      if (isFilterButton(button)) {
+        return React.cloneElement(child, {
+          children: React.cloneElement(button, {
+            classNameOverride: buttonClassNames
+          })
+        });
+      }
+      return child;
+    }
+    return React.cloneElement(child, {
+      classNameOverride: buttonClassNames
+    });
+  }));
+};
+ButtonGroup.displayName = "ButtonGroup";
+
+export {
+  ButtonGroup
+};