@sebgroup/green-react 3.17.0 → 3.18.0

package/src/lib/accordion/accordion-item.js

@@ -0,0 +1,75 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+
+var AccordionItem = function AccordionItem(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    uuid = _ref.uuid;
+  var labelElementLevel = item.labelElementLevel,
+    label = item.label,
+    subLabel = item.subLabel,
+    content = item.content,
+    customLabel = item.customLabel;
+  var contentRef = useRef(null);
+  var _useState = useState(item.defaultOpen || false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleOnClick = function handleOnClick(event) {
+    item.onClick && item.onClick(event);
+    setIsOpen(function (state) {
+      if (!state) {
+        item.onOpen && item.onOpen(event);
+        window.requestAnimationFrame(function () {
+          var _a;
+          (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        });
+      } else {
+        item.onClose && item.onClose(event);
+      }
+      return !state;
+    });
+  };
+  return jsxs("div", {
+    children: [jsx("div", {
+      role: "heading",
+      "aria-level": labelElementLevel,
+      children: jsxs("button", {
+        id: "accordion-item-button-".concat(index, "-").concat(uuid),
+        "aria-expanded": isOpen,
+        "aria-controls": "accordion-item-region-".concat(index, "-").concat(uuid),
+        onClick: function onClick(event) {
+          handleOnClick(event);
+        },
+        children: [customLabel ? customLabel : jsx("span", {
+          children: label
+        }), subLabel && jsx("span", {
+          children: subLabel
+        }), jsx("svg", {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: jsx("path", {
+            d: "M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z",
+            fill: "#333333"
+          })
+        })]
+      })
+    }), jsx("div", {
+      role: "region",
+      id: "accordion-item-region-".concat(index, "-").concat(uuid),
+      "aria-labelledby": "accordion-item-button-".concat(index, "-").concat(uuid),
+      hidden: !isOpen,
+      children: jsx("div", {
+        ref: contentRef,
+        children: content
+      })
+    })]
+  });
+};
+
+export { AccordionItem as default };

package/src/lib/accordion/accordion.js

@@ -0,0 +1,25 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import AccordionItem from './accordion-item.js';
+import { randomId } from '@sebgroup/extract';
+
+var Accordion = function Accordion(_ref) {
+  var items = _ref.items;
+  var _React$useState = React.useState(randomId()),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    uuid = _React$useState2[0];
+    _React$useState2[1];
+  return jsx("div", {
+    className: "accordion",
+    children: items && items.map(function (item, index) {
+      return jsx(AccordionItem, {
+        item: item,
+        index: index,
+        uuid: uuid
+      }, "accordion-".concat(uuid, "-").concat(index));
+    })
+  });
+};
+
+export { Accordion, Accordion as default };

package/src/lib/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './accordion';
+export * from './accordion-item';

package/src/lib/accordion/index.js

@@ -0,0 +1,6 @@
+export { Accordion } from './accordion.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../../_rollupPluginBabelHelpers.js';
+import './accordion-item.js';
+import '@sebgroup/extract';

package/src/lib/alert-ribbon/alert-ribbon.js

@@ -0,0 +1,98 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import '../../../_tslib.js';
+import '@sebgroup/extract';
+import { Check } from '../icons/check.js';
+import { SquareExclamation } from '../icons/square-exclamation.js';
+import { SquareInfo } from '../icons/square-info.js';
+
+function AlertRibbon(_ref) {
+  var type = _ref.type,
+    header = _ref.header,
+    footer = _ref.footer,
+    children = _ref.children,
+    closeText = _ref.closeText,
+    _ref$isCloseable = _ref.isCloseable,
+    isCloseable = _ref$isCloseable === void 0 ? true : _ref$isCloseable,
+    onClose = _ref.onClose,
+    role = _ref.role,
+    ariaLive = _ref['aria-live'],
+    closeAriaLabel = _ref.closeAriaLabel;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    closeButton = _useState2[0],
+    setCloseButton = _useState2[1];
+  useEffect(function () {
+    if (!isCloseable) {
+      setCloseButton(null);
+    } else {
+      if (closeText) setCloseButton(jsxs("button", {
+        className: "close",
+        children: [jsx("span", {
+          className: "sr-only",
+          children: closeText
+        }), jsx("i", {})]
+      }));else setCloseButton(jsxs("button", {
+        className: "close",
+        children: [jsx("span", {
+          className: "sr-only",
+          children: "Close"
+        }), jsx("i", {})]
+      }));
+    }
+  }, [isCloseable, closeText]);
+  var renderIcon = function renderIcon() {
+    switch (type) {
+      case 'danger':
+      case 'warning':
+        return jsx(SquareExclamation, {
+          "aria-hidden": true
+        });
+      case 'success':
+        return jsx(Check, {
+          "aria-hidden": true
+        });
+      default:
+        return jsx(SquareInfo, {
+          "aria-hidden": true
+        });
+    }
+  };
+  var renderHeader = function renderHeader() {
+    if (!header) {
+      return null;
+    }
+    return /*#__PURE__*/React.isValidElement(header) ? header : jsx("span", {
+      className: "header",
+      children: header
+    });
+  };
+  return jsxs("div", {
+    className: "alert-ribbon ".concat(type),
+    role: role,
+    "aria-live": ariaLive,
+    children: [jsx("i", {
+      "aria-hidden": "true",
+      children: renderIcon()
+    }), jsxs("div", {
+      className: "alert-ribbon__content",
+      children: [renderHeader(), jsx("p", {
+        children: children
+      })]
+    }), closeButton && jsx("button", {
+      className: "close",
+      type: "button",
+      "aria-label": closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : 'Close alert',
+      onClick: function onClick(event) {
+        onClose && onClose(event);
+      },
+      children: jsx("i", {})
+    }), footer && jsxs("div", {
+      className: "alert-ribbon__footer",
+      children: [" ", footer, " "]
+    })]
+  });
+}
+
+export { AlertRibbon, AlertRibbon as default };

package/src/lib/alert-ribbon/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-ribbon';

package/src/lib/alert-ribbon/index.js

@@ -0,0 +1,9 @@
+export { AlertRibbon } from './alert-ribbon.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../../_tslib.js';
+import '@sebgroup/extract';
+import '../icons/check.js';
+import '../icons/square-exclamation.js';
+import '../icons/square-info.js';

package/src/lib/badge/badge.js

@@ -0,0 +1,60 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * Renders a badge component.
+ *
+ * @param {React.ReactNode} props.children - The content of the badge.
+ * @param {string} props.badgeType - The type of the badge.
+ * @param {boolean} props.isCloseable - Indicates if the badge is closeable.
+ * @param {string} props.closeText - The text for the close button.
+ * @param {string} props.customColor - The custom color for the badge.
+ * @param {string} props.customBackgroundColor - The custom background color for the badge.
+ * @returns {React.ReactNode} The rendered badge component.
+ */
+function Badge(_a) {
+  var children = _a.children,
+    badgeType = _a.badgeType,
+    isCloseable = _a.isCloseable,
+    closeText = _a.closeText,
+    customColor = _a.customColor,
+    customBackgroundColor = _a.customBackgroundColor,
+    props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText", "customColor", "customBackgroundColor"]);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isClosed = _React$useState2[0],
+    setIsClosed = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    type = _React$useState4[0],
+    setType = _React$useState4[1];
+  React.useEffect(function () {
+    if (badgeType) {
+      setType(badgeType);
+    }
+    if (!!customColor || !!customBackgroundColor) {
+      setType('');
+    }
+  }, [badgeType, customColor, customBackgroundColor]);
+  return !isClosed ? jsxs("span", Object.assign({}, props, {
+    className: "badge ".concat(type),
+    style: {
+      color: customColor,
+      backgroundColor: customBackgroundColor
+    },
+    children: [jsx("strong", {
+      children: children
+    }), isCloseable && jsxs("button", {
+      type: "button",
+      className: "close",
+      onClick: function onClick() {
+        return setIsClosed(true);
+      },
+      children: [closeText, jsx("i", {})]
+    })]
+  })) : null;
+}
+
+export { Badge, Badge as default };

package/src/lib/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './badge';

package/src/lib/badge/index.js

@@ -0,0 +1,5 @@
+export { Badge } from './badge.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';

package/src/lib/breadcrumb/breadcrumb.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames';
+
+var Breadcrumb = function Breadcrumb(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return jsx("ul", {
+    className: classNames('breadcrumb', className),
+    children: React.Children.map(children, function (Child, childIndex) {
+      return jsxs(React.Fragment, {
+        children: [Child, childIndex !== React.Children.count(children) - 1 && jsx(BreadcrumbItem, {
+          className: "icon",
+          children: jsx("svg", {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: jsx("path", {
+              d: "M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z",
+              fill: "#333333"
+            })
+          })
+        })]
+      }, childIndex);
+    })
+  });
+};
+var BreadcrumbItem = function BreadcrumbItem(props) {
+  return jsx("li", Object.assign({}, props));
+};
+
+export { Breadcrumb, BreadcrumbItem };

package/src/lib/breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumb';

package/src/lib/breadcrumb/index.js

@@ -0,0 +1,4 @@
+export { Breadcrumb, BreadcrumbItem } from './breadcrumb.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';

package/src/lib/card/card.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Card(_ref) {
+  var children = _ref.children,
+    header = _ref.header,
+    footer = _ref.footer;
+  return jsxs("section", {
+    className: "card",
+    children: [header && jsx("header", {
+      children: header
+    }), children, footer && jsx("footer", {
+      children: footer
+    })]
+  });
+}
+
+export { Card, Card as default };

package/src/lib/card/index.d.ts

@@ -0,0 +1 @@
+export * from './card';

package/src/lib/card/index.js

@@ -0,0 +1,2 @@
+export { Card } from './card.js';
+import 'react/jsx-runtime';

package/src/lib/context-menu/context-menu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { GdsContextMenu, GdsMenuItem, GdsMenuHeading } from '@sebgroup/green-core/components/context-menu/index.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+
+registerTransitionalStyles();
+var ContextMenu = createComponent({
+  tagName: getScopedTagName('gds-context-menu'),
+  elementClass: GdsContextMenu,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click',
+    onUiStateChange: 'gds-ui-state'
+  },
+  react: React
+});
+var MenuItem = createComponent({
+  tagName: getScopedTagName('gds-menu-item'),
+  elementClass: GdsMenuItem,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click'
+  },
+  react: React
+});
+var CoreMenuHeading = createComponent({
+  tagName: getScopedTagName('gds-menu-heading'),
+  elementClass: GdsMenuHeading,
+  react: React
+});
+
+export { ContextMenu, CoreMenuHeading, MenuItem };

package/src/lib/context-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './context-menu';

package/src/lib/context-menu/index.js

@@ -0,0 +1,6 @@
+export { ContextMenu, CoreMenuHeading, MenuItem } from './context-menu.js';
+import 'react';
+import '@lit/react';
+import '@sebgroup/green-core/components/context-menu/index.js';
+import '@sebgroup/green-core/scoping';
+import '@sebgroup/green-core/transitional-styles';

package/src/lib/datepicker/datepicker.js

@@ -0,0 +1,61 @@
+import { _ as __rest } from '../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import { createComponent } from '@lit/react';
+import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+
+registerTransitionalStyles();
+var CoreDatepicker = createComponent({
+  tagName: getScopedTagName('gds-datepicker'),
+  elementClass: GdsDatepicker,
+  events: {
+    onchange: 'change'
+  },
+  react: React
+});
+var Datepicker = function Datepicker(_a) {
+  var _a$label = _a.label,
+    label = _a$label === void 0 ? 'Date' : _a$label,
+    onChange = _a.onChange,
+    minDate = _a.minDate,
+    maxDate = _a.maxDate,
+    value = _a.value,
+    showWeeks = _a.showWeeks,
+    testId = _a.testId,
+    validator = _a.validator,
+    selectedDate = _a.selectedDate,
+    currentDate = _a.currentDate,
+    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "validator", "selectedDate", "currentDate"]);
+  if (currentDate && !value) value = currentDate;
+  if (selectedDate && !value) value = selectedDate;
+  var min = minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
+  var max = maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
+  var onChangeHandler = function onChangeHandler(e) {
+    if (onChange) {
+      onChange(e.detail.value);
+    }
+  };
+  var ref = React.useRef(null);
+  useEffect(function () {
+    if (ref.current) {
+      ref.current.validator = validator;
+    }
+  }, [validator]);
+  return jsx("div", {
+    className: "form-group",
+    children: jsx(CoreDatepicker, Object.assign({
+      "data-testid": testId,
+      label: label,
+      min: min,
+      max: max,
+      showWeekNumbers: showWeeks,
+      onchange: onChangeHandler,
+      value: value,
+      ref: ref
+    }, props))
+  });
+};
+
+export { CoreDatepicker, Datepicker, Datepicker as default };

package/src/lib/datepicker/index.d.ts

@@ -0,0 +1 @@
+export * from './datepicker';

package/src/lib/datepicker/index.js

@@ -0,0 +1,8 @@
+export { CoreDatepicker, Datepicker } from './datepicker.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@lit/react';
+import '@sebgroup/green-core/components/datepicker/index.js';
+import '@sebgroup/green-core/scoping';
+import '@sebgroup/green-core/transitional-styles';

package/src/lib/dropdown/dropdown.js

@@ -0,0 +1,104 @@
+import { _ as __rest } from '../../../_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createComponent } from '@lit/react';
+import { GdsDropdown, GdsOption } from '@sebgroup/green-core/components/dropdown/index.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+import React from 'react';
+import { CoreMenuHeading } from '../context-menu/context-menu.js';
+import '@sebgroup/green-core/components/context-menu/index.js';
+
+registerTransitionalStyles();
+var CoreDropdown = createComponent({
+  tagName: getScopedTagName('gds-dropdown'),
+  elementClass: GdsDropdown,
+  events: {
+    onchange: 'change'
+  },
+  react: React
+});
+var CoreOption = createComponent({
+  tagName: getScopedTagName('gds-option'),
+  elementClass: GdsOption,
+  react: React
+});
+var Dropdown = function Dropdown(_a) {
+  var compareWith = _a.compareWith,
+    _a$display = _a.display,
+    display = _a$display === void 0 ? 'label' : _a$display,
+    id = _a.id,
+    informationLabel = _a.informationLabel,
+    label = _a.label,
+    multiSelect = _a.multiSelect,
+    onChange = _a.onChange,
+    options = _a.options,
+    searchFilter = _a.searchFilter,
+    searchable = _a.searchable,
+    texts = _a.texts,
+    _a$useValue = _a.useValue,
+    useValue = _a$useValue === void 0 ? 'value' : _a$useValue,
+    validator = _a.validator,
+    value = _a.value,
+    syncPopoverWidth = _a.syncPopoverWidth,
+    disableMobileStyles = _a.disableMobileStyles,
+    props = __rest(_a, ["compareWith", "display", "id", "informationLabel", "label", "multiSelect", "onChange", "options", "searchFilter", "searchable", "texts", "useValue", "validator", "value", "syncPopoverWidth", "disableMobileStyles"]);
+  var handleOnChange = function handleOnChange(e) {
+    if ('value' in e.detail) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
+    }
+  };
+  // These adapter functions are used to maintain backwards compatibility with the old interface
+  var compareWithAdapter = function compareWithAdapter(o1, o2) {
+    var compareFn = compareWith || function (a, b) {
+      return a === b;
+    };
+    return compareFn(o1, o2);
+  };
+  var searchFilterAdapter = function searchFilterAdapter(q, o) {
+    if (searchFilter) return searchFilter(q, o.value[useValue]);else return function (q, o) {
+      return o.innerHTML.toLowerCase().includes(q.toLowerCase());
+    }(q, o);
+  };
+  return jsx("div", {
+    className: "form-group",
+    children: jsxs(CoreDropdown, {
+      id: id,
+      label: label,
+      searchable: searchable,
+      multiple: multiSelect,
+      onchange: handleOnChange,
+      invalid: (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+      compareWith: compareWithAdapter,
+      value: value,
+      searchFilter: searchFilterAdapter,
+      syncPopoverWidth: syncPopoverWidth,
+      size: props.size,
+      hideLabel: props.hideLabel,
+      maxHeight: props.maxHeight,
+      disableMobileStyles: disableMobileStyles,
+      children: [informationLabel && jsx("span", {
+        slot: "sub-label",
+        children: informationLabel
+      }), validator && jsx("span", {
+        slot: "message",
+        children: validator.message
+      }), jsx(CoreOption, {
+        isPlaceholder: true,
+        "aria-hidden": true,
+        children: (texts === null || texts === void 0 ? void 0 : texts.placeholder) || 'Select'
+      }), options.map(function (option) {
+        if (option.heading) {
+          return jsx(CoreMenuHeading, {
+            children: option[display]
+          }, option.label);
+        }
+        return jsx(CoreOption, {
+          value: option[useValue],
+          children: option[display]
+        }, option[useValue]);
+      })]
+    })
+  });
+};
+
+export { CoreDropdown, CoreOption, Dropdown, Dropdown as default };

package/src/lib/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './dropdown';

package/src/lib/dropdown/index.js

@@ -0,0 +1,10 @@
+export { CoreDropdown, CoreOption, Dropdown } from './dropdown.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import '@lit/react';
+import '@sebgroup/green-core/components/dropdown/index.js';
+import '@sebgroup/green-core/scoping';
+import '@sebgroup/green-core/transitional-styles';
+import 'react';
+import '../context-menu/context-menu.js';
+import '@sebgroup/green-core/components/context-menu/index.js';

package/src/lib/filter-chips/filter-chips.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { GdsFilterChips, GdsFilterChip } from '@sebgroup/green-core/components/filter-chips/index.js';
+import { register } from '@sebgroup/green-core/components/filter-chips/filter-chips.trans.styles.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+
+register();
+var FilterChips = createComponent({
+  tagName: getScopedTagName('gds-filter-chips'),
+  elementClass: GdsFilterChips,
+  react: React
+});
+var FilterChip = createComponent({
+  tagName: getScopedTagName('gds-filter-chip'),
+  elementClass: GdsFilterChip,
+  react: React
+});
+
+export { FilterChip, FilterChips };

package/src/lib/filter-chips/index.d.ts

@@ -0,0 +1 @@
+export * from './filter-chips';

package/src/lib/filter-chips/index.js

@@ -0,0 +1,6 @@
+export { FilterChip, FilterChips } from './filter-chips.js';
+import 'react';
+import '@lit/react';
+import '@sebgroup/green-core/components/filter-chips/index.js';
+import '@sebgroup/green-core/components/filter-chips/filter-chips.trans.styles.js';
+import '@sebgroup/green-core/scoping';

package/src/lib/form/button/button.js

@@ -0,0 +1,32 @@
+import { _ as __rest } from '../../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+function Button(_a) {
+  var _b;
+  var className = _a.className,
+    variant = _a.variant,
+    _a$active = _a.active,
+    active = _a$active === void 0 ? false : _a$active,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? 'button' : _a$type,
+    size = _a.size,
+    testId = _a.testId,
+    otherProps = __rest(_a, ["className", "variant", "active", "type", "size", "testId"]);
+  var buttonClassName = classNames(className, variant, size, {
+    active: active
+  }) || undefined;
+  return variant == 'close' ? jsx("button", Object.assign({
+    className: buttonClassName,
+    "aria-label": (_b = otherProps['aria-label']) !== null && _b !== void 0 ? _b : 'Close',
+    "data-testid": testId
+  }, otherProps, {
+    children: jsx("i", {})
+  })) : jsx("button", Object.assign({
+    className: buttonClassName,
+    type: type,
+    "data-testid": testId
+  }, otherProps));
+}
+
+export { Button, Button as default };