@nulogy/components 14.2.0 → 14.3.0

package/dist/main.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('stylis'), require('hoist-non-react-statics'), require('react-dom'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/createSuper'), require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('prop-types'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('@hypnosphi/create-react-context'), require('react-resize-detector'), require('classnames'), require('exenv'), require('react-hot-toast')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', 'stylis', 'hoist-non-react-statics', 'react-dom', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/createSuper', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/objectWithoutProperties', '@babel/runtime/helpers/taggedTemplateLiteral', 'prop-types', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', '@hypnosphi/create-react-context', 'react-resize-detector', 'classnames', 'exenv', 'react-hot-toast'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.assign, global.icons, global["extends"], global.assertThisInitialized, global.inheritsLoose, global.isEqual, global.warning, global.slicedToArray, global.defineProperty, global["typeof"], global.classCallCheck, global.createClass, global.stylis, null, global.reactDom, null, null, null, null, global.objectWithoutProperties, null, global.PropTypes, global.objectWithoutPropertiesLoose, global.deepEqual, global.createContext, global.ReactResizeDetector, global.t, global.exenv, global.reactHotToast));
-})(this, (function (exports, React, styled, assign$1, icons, _extends$c, _assertThisInitialized$3, _inheritsLoose$3, isEqual$3, warning$2, _slicedToArray$1, _defineProperty$3, _typeof$3, _classCallCheck$2, _createClass$2, stylis, hoistNonReactStatics$1, ReactDOM, objectSpread2, inherits, createSuper, toConsumableArray, _objectWithoutProperties$1, taggedTemplateLiteral, PropTypes, _objectWithoutPropertiesLoose$4, deepEqual$1, createContext, ReactResizeDetector, classnames$1, exenv, reactHotToast) { 'use strict';
+})(this, (function (exports, React, styled, assign$1, icons, _extends$d, _assertThisInitialized$3, _inheritsLoose$3, isEqual$3, warning$2, _slicedToArray$1, _defineProperty$3, _typeof$3, _classCallCheck$2, _createClass$2, stylis, hoistNonReactStatics$1, ReactDOM, objectSpread2, inherits, createSuper, toConsumableArray, _objectWithoutProperties$1, taggedTemplateLiteral, PropTypes, _objectWithoutPropertiesLoose$4, deepEqual$1, createContext, ReactResizeDetector, classnames$1, exenv, reactHotToast) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,7 +29,7 @@
     var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
     var assign__default = /*#__PURE__*/_interopDefaultLegacy(assign$1);
     var icons__default = /*#__PURE__*/_interopDefaultLegacy(icons);
-    var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends$c);
+    var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends$d);
     var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized$3);
     var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose$3);
     var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual$3);
@@ -9289,7 +9289,7 @@
       }
     });
 
-    function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+    function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 
     // based on https://github.com/developit/dlv
     var get$1 = function get(obj, key, def, p, undef) {
@@ -9420,7 +9420,7 @@
     var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
       var _extends2;
 
-      return _extends$b({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+      return _extends$c({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
     }, {});
     var responsive = function responsive(styles) {
       return function (theme) {
@@ -9462,7 +9462,7 @@
           props = {};
         }
 
-        var theme = _extends$b({}, defaultTheme$1, {}, props.theme || props);
+        var theme = _extends$c({}, defaultTheme$1, {}, props.theme || props);
 
         var result = {};
         var obj = typeof args === 'function' ? args(theme) : args;
@@ -9474,7 +9474,7 @@
 
           if (key === 'variant') {
             var variant = css(get$1(theme, val))(theme);
-            result = _extends$b({}, result, {}, variant);
+            result = _extends$c({}, result, {}, variant);
             continue;
           }
 
@@ -9662,7 +9662,7 @@
       size || (size = theme.sizes.x3);
       return /*#__PURE__*/React__default["default"].createElement("svg", Object.assign({
         ref: ref,
-        viewBox: "0 0 24px 24px",
+        viewBox: "0 0 24 24",
         width: size,
         height: size,
         fill: "none",
@@ -11037,8 +11037,8 @@
       }));
     });
 
-    function _extends$a() {
-      _extends$a = Object.assign ? Object.assign.bind() : function (target) {
+    function _extends$b() {
+      _extends$b = Object.assign ? Object.assign.bind() : function (target) {
         for (var i = 1; i < arguments.length; i++) {
           var source = arguments[i];
           for (var key in source) {
@@ -11049,7 +11049,7 @@
         }
         return target;
       };
-      return _extends$a.apply(this, arguments);
+      return _extends$b.apply(this, arguments);
     }
 
     function _assertThisInitialized$2(self) {
@@ -11979,7 +11979,7 @@
     function darken(amount, color) {
       if (color === 'transparent') return color;
       var hslColor = parseToHsl(color);
-      return toColorString(_extends$a({}, hslColor, {
+      return toColorString(_extends$b({}, hslColor, {
         lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
       }));
     } // prettier-ignore
@@ -12024,7 +12024,7 @@
       var parsedColor = parseToRgb(color);
       var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
 
-      var colorWithAlpha = _extends$a({}, parsedColor, {
+      var colorWithAlpha = _extends$b({}, parsedColor, {
         alpha: guard(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100)
       });
 
@@ -17745,7 +17745,7 @@
       var children = props.children,
         innerRef = props.innerRef,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'menu', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'menu', {
         menu: true
       }), {
         ref: innerRef
@@ -17776,7 +17776,7 @@
         innerProps = props.innerProps,
         innerRef = props.innerRef,
         isMulti = props.isMulti;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'menuList', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'menuList', {
         'menu-list': true,
         'menu-list--is-multi': isMulti
       }), {
@@ -17806,7 +17806,7 @@
         children = _ref6$children === void 0 ? 'No options' : _ref6$children,
         innerProps = _ref6.innerProps,
         restProps = _objectWithoutProperties(_ref6, _excluded$3$1);
-      return jsx("div", _extends$a({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+      return jsx("div", _extends$b({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
         children: children,
         innerProps: innerProps
       }), 'noOptionsMessage', {
@@ -17819,7 +17819,7 @@
         children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
         innerProps = _ref7.innerProps,
         restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-      return jsx("div", _extends$a({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+      return jsx("div", _extends$b({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
         children: children,
         innerProps: innerProps
       }), 'loadingMessage', {
@@ -17904,7 +17904,7 @@
       if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
 
       // same wrapper element whether fixed or portalled
-      var menuWrapper = jsx("div", _extends$a({
+      var menuWrapper = jsx("div", _extends$b({
         ref: setMenuPortalElement
       }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
         offset: computedPosition.offset,
@@ -17938,7 +17938,7 @@
         innerProps = props.innerProps,
         isDisabled = props.isDisabled,
         isRtl = props.isRtl;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'container', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'container', {
         '--is-disabled': isDisabled,
         '--is-rtl': isRtl
       }), innerProps), children);
@@ -17970,7 +17970,7 @@
         innerProps = props.innerProps,
         isMulti = props.isMulti,
         hasValue = props.hasValue;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'valueContainer', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'valueContainer', {
         'value-container': true,
         'value-container--is-multi': isMulti,
         'value-container--has-value': hasValue
@@ -17992,7 +17992,7 @@
     var IndicatorsContainer = function IndicatorsContainer(props) {
       var children = props.children,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'indicatorsContainer', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'indicatorsContainer', {
         indicators: true
       }), innerProps), children);
     };
@@ -18017,7 +18017,7 @@
     var Svg = function Svg(_ref) {
       var size = _ref.size,
         props = _objectWithoutProperties(_ref, _excluded$2$1);
-      return jsx("svg", _extends$a({
+      return jsx("svg", _extends$b({
         height: size,
         width: size,
         viewBox: "0 0 20 20",
@@ -18027,14 +18027,14 @@
       }, props));
     };
     var CrossIcon = function CrossIcon(props) {
-      return jsx(Svg, _extends$a({
+      return jsx(Svg, _extends$b({
         size: 20
       }, props), jsx("path", {
         d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
       }));
     };
     var DownChevron = function DownChevron(props) {
-      return jsx(Svg, _extends$a({
+      return jsx(Svg, _extends$b({
         size: 20
       }, props), jsx("path", {
         d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
@@ -18066,7 +18066,7 @@
     var DropdownIndicator = function DropdownIndicator(props) {
       var children = props.children,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'dropdownIndicator', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'dropdownIndicator', {
         indicator: true,
         'dropdown-indicator': true
       }), innerProps), children || jsx(DownChevron, null));
@@ -18075,7 +18075,7 @@
     var ClearIndicator = function ClearIndicator(props) {
       var children = props.children,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'clearIndicator', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'clearIndicator', {
         indicator: true,
         'clear-indicator': true
       }), innerProps), children || jsx(CrossIcon, null));
@@ -18102,7 +18102,7 @@
     };
     var IndicatorSeparator = function IndicatorSeparator(props) {
       var innerProps = props.innerProps;
-      return jsx("span", _extends$a({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
+      return jsx("span", _extends$b({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
         'indicator-separator': true
       })));
     };
@@ -18155,7 +18155,7 @@
         _ref7$size = _ref7.size,
         size = _ref7$size === void 0 ? 4 : _ref7$size,
         restProps = _objectWithoutProperties(_ref7, _excluded2$2);
-      return jsx("div", _extends$a({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+      return jsx("div", _extends$b({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
         innerProps: innerProps,
         isRtl: isRtl,
         size: size
@@ -18211,7 +18211,7 @@
         innerRef = props.innerRef,
         innerProps = props.innerProps,
         menuIsOpen = props.menuIsOpen;
-      return jsx("div", _extends$a({
+      return jsx("div", _extends$b({
         ref: innerRef
       }, getStyleProps(props, 'control', {
         control: true,
@@ -18243,9 +18243,9 @@
         label = props.label,
         theme = props.theme,
         selectProps = props.selectProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'group', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'group', {
         group: true
-      }), innerProps), jsx(Heading, _extends$a({}, headingProps, {
+      }), innerProps), jsx(Heading, _extends$b({}, headingProps, {
         selectProps: selectProps,
         theme: theme,
         getStyles: getStyles,
@@ -18275,7 +18275,7 @@
       var _cleanCommonProps = cleanCommonProps(props);
         _cleanCommonProps.data;
         var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
-      return jsx("div", _extends$a({}, getStyleProps(props, 'groupHeading', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'groupHeading', {
         'group-heading': true
       }), innerProps));
     };
@@ -18338,11 +18338,11 @@
         isHidden = _cleanCommonProps.isHidden,
         inputClassName = _cleanCommonProps.inputClassName,
         innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$6);
-      return jsx("div", _extends$a({}, getStyleProps(props, 'input', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'input', {
         'input-container': true
       }), {
         "data-value": value || ''
-      }), jsx("input", _extends$a({
+      }), jsx("input", _extends$b({
         className: cx({
           input: true
         }, inputClassName),
@@ -18415,7 +18415,7 @@
     function MultiValueRemove(_ref5) {
       var children = _ref5.children,
         innerProps = _ref5.innerProps;
-      return jsx("div", _extends$a({
+      return jsx("div", _extends$b({
         role: "button"
       }, innerProps), children || jsx(CrossIcon, {
         size: 14
@@ -18489,7 +18489,7 @@
         isSelected = props.isSelected,
         innerRef = props.innerRef,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'option', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'option', {
         option: true,
         'option--is-disabled': isDisabled,
         'option--is-focused': isFocused,
@@ -18517,7 +18517,7 @@
     var Placeholder = function Placeholder(props) {
       var children = props.children,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'placeholder', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'placeholder', {
         placeholder: true
       }), innerProps), children);
     };
@@ -18545,7 +18545,7 @@
       var children = props.children,
         isDisabled = props.isDisabled,
         innerProps = props.innerProps;
-      return jsx("div", _extends$a({}, getStyleProps(props, 'singleValue', {
+      return jsx("div", _extends$b({}, getStyleProps(props, 'singleValue', {
         'single-value': true,
         'single-value--is-disabled': isDisabled
       }), innerProps), children);
@@ -18646,7 +18646,7 @@
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
     };
     var A11yText = function A11yText(props) {
-      return jsx("span", _extends$a({
+      return jsx("span", _extends$b({
         css: _ref$1
       }, props));
     };
@@ -19163,7 +19163,7 @@
         props = _objectWithoutProperties(_ref, _excluded$5);
       // Remove animation props not meant for HTML elements
       var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
-      return jsx("input", _extends$a({
+      return jsx("input", _extends$b({
         ref: innerRef
       }, filteredProps, {
         css: /*#__PURE__*/css$2({
@@ -20739,7 +20739,7 @@
           });
           if (!isSearchable) {
             // use a dummy input to maintain focus/blur functionality
-            return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$a({
+            return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$b({
               id: id,
               innerRef: this.getInputRef,
               onBlur: this.onInputBlur,
@@ -20752,7 +20752,7 @@
               value: ""
             }, ariaAttributes));
           }
-          return /*#__PURE__*/React__namespace.createElement(Input, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(Input, _extends$b({}, commonProps, {
             autoCapitalize: "none",
             autoComplete: "off",
             autoCorrect: "off",
@@ -20793,7 +20793,7 @@
             focusedValue = _this$state5.focusedValue,
             isFocused = _this$state5.isFocused;
           if (!this.hasValue() || !controlShouldRenderValue) {
-            return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$a({}, commonProps, {
+            return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$b({}, commonProps, {
               key: "placeholder",
               isDisabled: isDisabled,
               isFocused: isFocused,
@@ -20806,7 +20806,7 @@
             return selectValue.map(function (opt, index) {
               var isOptionFocused = opt === focusedValue;
               var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-              return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$a({}, commonProps, {
+              return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$b({}, commonProps, {
                 components: {
                   Container: MultiValueContainer,
                   Label: MultiValueLabel,
@@ -20835,7 +20835,7 @@
             return null;
           }
           var singleValue = selectValue[0];
-          return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$b({}, commonProps, {
             data: singleValue,
             isDisabled: isDisabled
           }), this.formatOptionLabel(singleValue, 'value'));
@@ -20858,7 +20858,7 @@
             onTouchEnd: this.onClearIndicatorTouchEnd,
             'aria-hidden': 'true'
           };
-          return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$b({}, commonProps, {
             innerProps: innerProps,
             isFocused: isFocused
           }));
@@ -20877,7 +20877,7 @@
           var innerProps = {
             'aria-hidden': 'true'
           };
-          return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$b({}, commonProps, {
             innerProps: innerProps,
             isDisabled: isDisabled,
             isFocused: isFocused
@@ -20895,7 +20895,7 @@
           var commonProps = this.commonProps;
           var isDisabled = this.props.isDisabled;
           var isFocused = this.state.isFocused;
-          return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$b({}, commonProps, {
             isDisabled: isDisabled,
             isFocused: isFocused
           }));
@@ -20914,7 +20914,7 @@
             onTouchEnd: this.onDropdownIndicatorTouchEnd,
             'aria-hidden': 'true'
           };
-          return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$b({}, commonProps, {
             innerProps: innerProps,
             isDisabled: isDisabled,
             isFocused: isFocused
@@ -20979,7 +20979,7 @@
               'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
             };
 
-            return /*#__PURE__*/React__namespace.createElement(Option, _extends$a({}, commonProps, {
+            return /*#__PURE__*/React__namespace.createElement(Option, _extends$b({}, commonProps, {
               innerProps: innerProps,
               data: data,
               isDisabled: isDisabled,
@@ -21001,7 +21001,7 @@
                   groupIndex = item.index;
                 var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
                 var headingId = "".concat(groupId, "-heading");
-                return /*#__PURE__*/React__namespace.createElement(Group, _extends$a({}, commonProps, {
+                return /*#__PURE__*/React__namespace.createElement(Group, _extends$b({}, commonProps, {
                   key: groupId,
                   data: _data,
                   options: options,
@@ -21038,12 +21038,12 @@
             menuPosition: menuPosition,
             menuShouldScrollIntoView: menuShouldScrollIntoView
           };
-          var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$a({}, commonProps, menuPlacementProps), function (_ref4) {
+          var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$b({}, commonProps, menuPlacementProps), function (_ref4) {
             var ref = _ref4.ref,
               _ref4$placerProps = _ref4.placerProps,
               placement = _ref4$placerProps.placement,
               maxHeight = _ref4$placerProps.maxHeight;
-            return /*#__PURE__*/React__namespace.createElement(Menu, _extends$a({}, commonProps, menuPlacementProps, {
+            return /*#__PURE__*/React__namespace.createElement(Menu, _extends$b({}, commonProps, menuPlacementProps, {
               innerRef: ref,
               innerProps: {
                 onMouseDown: _this4.onMenuMouseDown,
@@ -21057,7 +21057,7 @@
               onBottomArrive: onMenuScrollToBottom,
               lockEnabled: menuShouldBlockScroll
             }, function (scrollTargetRef) {
-              return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$a({}, commonProps, {
+              return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$b({}, commonProps, {
                 innerRef: function innerRef(instance) {
                   _this4.getMenuListRef(instance);
                   scrollTargetRef(instance);
@@ -21077,7 +21077,7 @@
           // positioning behaviour is almost identical for portalled and fixed,
           // so we use the same component. the actual portalling logic is forked
           // within the component based on `menuPosition`
-          return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$a({}, commonProps, {
+          return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$b({}, commonProps, {
             appendTo: menuPortalTarget,
             controlElement: this.controlRef,
             menuPlacement: menuPlacement,
@@ -21147,7 +21147,7 @@
             isFocused = _this$state6.isFocused,
             selectValue = _this$state6.selectValue;
           var focusableOptions = this.getFocusableOptions();
-          return /*#__PURE__*/React__namespace.createElement(LiveRegion$1, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(LiveRegion$1, _extends$b({}, commonProps, {
             id: this.getElementId('live-region'),
             ariaSelection: ariaSelection,
             focusedOption: focusedOption,
@@ -21173,7 +21173,7 @@
             menuIsOpen = _this$props14.menuIsOpen;
           var isFocused = this.state.isFocused;
           var commonProps = this.commonProps = this.getCommonProps();
-          return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$b({}, commonProps, {
             className: className,
             innerProps: {
               id: id,
@@ -21181,7 +21181,7 @@
             },
             isDisabled: isDisabled,
             isFocused: isFocused
-          }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$a({}, commonProps, {
+          }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$b({}, commonProps, {
             innerRef: this.getControlRef,
             innerProps: {
               onMouseDown: this.onControlMouseDown,
@@ -21190,9 +21190,9 @@
             isDisabled: isDisabled,
             isFocused: isFocused,
             menuIsOpen: menuIsOpen
-          }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$a({}, commonProps, {
+          }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$b({}, commonProps, {
             isDisabled: isDisabled
-          }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$a({}, commonProps, {
+          }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$b({}, commonProps, {
             isDisabled: isDisabled
           }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
         }
@@ -21463,19 +21463,19 @@
     var AsyncSelect$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var stateManagedProps = useAsync(props);
       var selectProps = useStateManager(stateManagedProps);
-      return /*#__PURE__*/React__namespace.createElement(Select, _extends$a({
+      return /*#__PURE__*/React__namespace.createElement(Select, _extends$b({
         ref: ref
       }, selectProps));
     });
     var AsyncSelect$1$1 = AsyncSelect$1;
 
-    function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+    function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
     var propType = PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].array, PropTypes__default["default"].object]);
     var createPropTypes = function createPropTypes(props) {
       return props.reduce(function (acc, name) {
         var _extends2;
 
-        return _extends$9({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
+        return _extends$a({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
       }, {});
     };
     var propTypes$1 = {
@@ -21637,7 +21637,7 @@
         background: color,
         display: "inline-block",
         padding: theme.space.half,
-        borderRadius: theme.radii.rounded,
+        borderRadius: theme.radii.circle,
         lineHeight: 0
       };
     });
@@ -21661,14 +21661,14 @@
       }));
     }
 
-    function _extends$8() {
-      return _extends$8 = Object.assign ? Object.assign.bind() : function (n) {
+    function _extends$9() {
+      return _extends$9 = Object.assign ? Object.assign.bind() : function (n) {
         for (var e = 1; e < arguments.length; e++) {
           var t = arguments[e];
           for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-      }, _extends$8.apply(null, arguments);
+      }, _extends$9.apply(null, arguments);
     }
 
     function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
@@ -21798,34 +21798,34 @@
         return createScope1;
     }
 
-    function _extends$7() {
-      return _extends$7 = Object.assign ? Object.assign.bind() : function (n) {
+    function _extends$8() {
+      return _extends$8 = Object.assign ? Object.assign.bind() : function (n) {
         for (var e = 1; e < arguments.length; e++) {
           var t = arguments[e];
           for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-      }, _extends$7.apply(null, arguments);
+      }, _extends$8.apply(null, arguments);
     }
 
-    function _extends$6() {
-      return _extends$6 = Object.assign ? Object.assign.bind() : function (n) {
+    function _extends$7() {
+      return _extends$7 = Object.assign ? Object.assign.bind() : function (n) {
         for (var e = 1; e < arguments.length; e++) {
           var t = arguments[e];
           for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-      }, _extends$6.apply(null, arguments);
+      }, _extends$7.apply(null, arguments);
     }
 
-    function _extends$5() {
-      return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
+    function _extends$6() {
+      return _extends$6 = Object.assign ? Object.assign.bind() : function (n) {
         for (var e = 1; e < arguments.length; e++) {
           var t = arguments[e];
           for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-      }, _extends$5.apply(null, arguments);
+      }, _extends$6.apply(null, arguments);
     }
 
     /* -------------------------------------------------------------------------------------------------
@@ -21845,11 +21845,11 @@
                     return /*#__PURE__*/ React.isValidElement(newElement) ? newElement.props.children : null;
                 } else return child;
             });
-            return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends$5({}, slotProps, {
+            return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends$6({}, slotProps, {
                 ref: forwardedRef
             }), /*#__PURE__*/ React.isValidElement(newElement) ? /*#__PURE__*/ React.cloneElement(newElement, undefined, newChildren) : null);
         }
-        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends$5({}, slotProps, {
+        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends$6({}, slotProps, {
             ref: forwardedRef
         }), children);
     });
@@ -21933,7 +21933,7 @@
             React.useEffect(()=>{
                 window[Symbol.for('radix-ui')] = true;
             }, []);
-            return /*#__PURE__*/ React.createElement(Comp, _extends$6({}, primitiveProps, {
+            return /*#__PURE__*/ React.createElement(Comp, _extends$7({}, primitiveProps, {
                 ref: forwardedRef
             }));
         });
@@ -22117,7 +22117,7 @@
             return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
             ;
         }, []);
-        return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$7({}, layerProps, {
+        return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$8({}, layerProps, {
             ref: composedRefs,
             style: {
                 pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
@@ -22269,14 +22269,14 @@
         return deterministicId || (id ? `radix-${id}` : '');
     }
 
-    function _extends$4() {
-      return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+    function _extends$5() {
+      return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
         for (var e = 1; e < arguments.length; e++) {
           var t = arguments[e];
           for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-      }, _extends$4.apply(null, arguments);
+      }, _extends$5.apply(null, arguments);
     }
 
     /**
@@ -24682,6 +24682,30 @@
       options: [options, deps]
     });
 
+    function _extends$4() {
+      return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+        for (var e = 1; e < arguments.length; e++) {
+          var t = arguments[e];
+          for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+        }
+        return n;
+      }, _extends$4.apply(null, arguments);
+    }
+
+    const $7e8f5cd07187803e$export$21b07c8f274aebd5 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+        const { children: children , width: width = 10 , height: height = 5 , ...arrowProps } = props;
+        return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.svg, _extends$4({}, arrowProps, {
+            ref: forwardedRef,
+            width: width,
+            height: height,
+            viewBox: "0 0 30 10",
+            preserveAspectRatio: "none"
+        }), props.asChild ? children : /*#__PURE__*/ React.createElement("polygon", {
+            points: "0,0 30,0 15,10"
+        }));
+    });
+    /* -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$export$be92b6f5f03c0fe9 = $7e8f5cd07187803e$export$21b07c8f274aebd5;
+
     function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
         const [size, setSize] = React.useState(undefined);
         $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
@@ -24757,7 +24781,7 @@
             // `anchorRef` with their virtual ref in this case.
             context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
         });
-        return virtualRef ? null : /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$4({}, anchorProps, {
+        return virtualRef ? null : /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$5({}, anchorProps, {
             ref: composedRefs
         }));
     });
@@ -24886,7 +24910,7 @@
             arrowX: arrowX,
             arrowY: arrowY,
             shouldHideArrow: cannotCenterArrow
-        }, /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$4({
+        }, /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$5({
             "data-side": placedSide,
             "data-align": placedAlign
         }, contentProps, {
@@ -24901,6 +24925,52 @@
             }
         }))));
     });
+    /* -------------------------------------------------------------------------------------------------
+     * PopperArrow
+     * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ARROW_NAME = 'PopperArrow';
+    const $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+    };
+    const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ React.forwardRef(function $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0(props, forwardedRef) {
+        const { __scopePopper: __scopePopper , ...arrowProps } = props;
+        const contentContext = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper);
+        const baseSide = $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE[contentContext.placedSide];
+        return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
+        // doesn't report size as we'd expect on SVG elements.
+        // it reports their bounding box which is effectively the largest path inside the SVG.
+        React.createElement("span", {
+            ref: contentContext.onArrowChange,
+            style: {
+                position: 'absolute',
+                left: contentContext.arrowX,
+                top: contentContext.arrowY,
+                [baseSide]: 0,
+                transformOrigin: {
+                    top: '',
+                    right: '0 0',
+                    bottom: 'center 0',
+                    left: '100% 0'
+                }[contentContext.placedSide],
+                transform: {
+                    top: 'translateY(100%)',
+                    right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+                    bottom: `rotate(180deg)`,
+                    left: 'translateY(50%) rotate(-90deg) translateX(50%)'
+                }[contentContext.placedSide],
+                visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
+            }
+        }, /*#__PURE__*/ React.createElement($7e8f5cd07187803e$export$be92b6f5f03c0fe9, _extends$5({}, arrowProps, {
+            ref: forwardedRef,
+            style: {
+                ...arrowProps.style,
+                // ensures the element can be measured correctly (mostly for if SVG)
+                display: 'block'
+            }
+        }))));
+    });
     /* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isNotNull(value) {
         return value !== null;
     }
@@ -24956,6 +25026,7 @@
     const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9;
     const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d;
     const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
+    const $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 = $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0;
 
     function _extends$3() {
       return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
@@ -25321,9 +25392,9 @@
         }, [
             handlePointerUp
         ]);
-        return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends$8({
+        return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends$9({
             asChild: true
-        }, popperScope), /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends$8({
+        }, popperScope), /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends$9({
             // We purposefully avoid adding `type=button` here because tooltip triggers are also
             // commonly anchors and the anchor `type` attribute signifies MIME type.
             "aria-describedby": context.open ? context.contentId : undefined,
@@ -25382,11 +25453,11 @@
         const context = $a093c7e1ec25a057$var$useTooltipContext($a093c7e1ec25a057$var$CONTENT_NAME, props.__scopeTooltip);
         return /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
             present: forceMount || context.open
-        }, context.disableHoverableContent ? /*#__PURE__*/ React.createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$8({
+        }, context.disableHoverableContent ? /*#__PURE__*/ React.createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$9({
             side: side
         }, contentProps, {
             ref: forwardedRef
-        })) : /*#__PURE__*/ React.createElement($a093c7e1ec25a057$var$TooltipContentHoverable, _extends$8({
+        })) : /*#__PURE__*/ React.createElement($a093c7e1ec25a057$var$TooltipContentHoverable, _extends$9({
             side: side
         }, contentProps, {
             ref: forwardedRef
@@ -25477,7 +25548,7 @@
             onClose,
             handleRemoveGraceArea
         ]);
-        return /*#__PURE__*/ React.createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$8({}, props, {
+        return /*#__PURE__*/ React.createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$9({}, props, {
             ref: composedRefs
         }));
     });
@@ -25522,7 +25593,7 @@
             onFocusOutside: (event)=>event.preventDefault()
             ,
             onDismiss: onClose
-        }, /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends$8({
+        }, /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends$9({
             "data-state": context.stateAttribute
         }, popperScope, contentProps, {
             ref: forwardedRef,
@@ -25542,6 +25613,18 @@
             role: "tooltip"
         }, ariaLabel || children))));
     });
+    /* -------------------------------------------------------------------------------------------------
+     * TooltipArrow
+     * -----------------------------------------------------------------------------------------------*/ const $a093c7e1ec25a057$var$ARROW_NAME = 'TooltipArrow';
+    const $a093c7e1ec25a057$export$c27ee0ad710f7559 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+        const { __scopeTooltip: __scopeTooltip , ...arrowProps } = props;
+        const popperScope = $a093c7e1ec25a057$var$usePopperScope(__scopeTooltip);
+        const visuallyHiddenContentContext = $a093c7e1ec25a057$var$useVisuallyHiddenContentContext($a093c7e1ec25a057$var$ARROW_NAME, __scopeTooltip); // if the arrow is inside the `VisuallyHidden`, we don't want to render it all to
+        // prevent issues in positioning the arrow due to the duplicate
+        return visuallyHiddenContentContext.isInside ? null : /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends$9({}, popperScope, arrowProps, {
+            ref: forwardedRef
+        }));
+    });
     /* -----------------------------------------------------------------------------------------------*/ function $a093c7e1ec25a057$var$getExitSideFromRect(point, rect) {
         const top = Math.abs(rect.top - point.y);
         const bottom = Math.abs(rect.bottom - point.y);
@@ -25683,8 +25766,9 @@
     const $a093c7e1ec25a057$export$41fb9f06171c75f4 = $a093c7e1ec25a057$export$8c610744efcf8a1d;
     const $a093c7e1ec25a057$export$602eac185826482c = $a093c7e1ec25a057$export$7b36b8f925ab7497;
     const $a093c7e1ec25a057$export$7c6e2c02157bb7d2 = $a093c7e1ec25a057$export$e9003e2be37ec060;
+    const $a093c7e1ec25a057$export$21b07c8f274aebd5 = $a093c7e1ec25a057$export$c27ee0ad710f7559;
 
-    function Tooltip$1(_ref) {
+    function Tooltip$2(_ref) {
       var children = _ref.children,
           content = _ref.content,
           _ref$hideTooltip = _ref.hideTooltip,
@@ -25696,15 +25780,15 @@
 
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement($a093c7e1ec25a057$export$2881499e37b75b9a, null, /*#__PURE__*/React__default["default"].createElement($a093c7e1ec25a057$export$be92b6f5f03c0fe9, null, /*#__PURE__*/React__default["default"].createElement($a093c7e1ec25a057$export$41fb9f06171c75f4, {
         asChild: true
-      }, children), /*#__PURE__*/React__default["default"].createElement($a093c7e1ec25a057$export$602eac185826482c, null, /*#__PURE__*/React__default["default"].createElement(TooltipContent, {
+      }, children), /*#__PURE__*/React__default["default"].createElement($a093c7e1ec25a057$export$602eac185826482c, null, /*#__PURE__*/React__default["default"].createElement(TooltipContent$1, {
         sideOffset: 4
       }, content)))));
     }
-    var slideUpAndFade = styled.keyframes(["from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}"]);
-    var slideRightAndFade = styled.keyframes(["from{opacity:0;transform:translateX(-2px);}to{opacity:1;transform:translateX(0);}"]);
-    var slideDownAndFade = styled.keyframes(["from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:translateY(0);}"]);
-    var slideLeftAndFade = styled.keyframes(["from{opacity:0;transform:translateX(2px);}to{opacity:1;transform:translateX(0);}"]);
-    var TooltipContent = styled__default["default"]($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
+    var slideUpAndFade$1 = styled.keyframes(["from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}"]);
+    var slideRightAndFade$1 = styled.keyframes(["from{opacity:0;transform:translateX(-2px);}to{opacity:1;transform:translateX(0);}"]);
+    var slideDownAndFade$1 = styled.keyframes(["from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:translateY(0);}"]);
+    var slideLeftAndFade$1 = styled.keyframes(["from{opacity:0;transform:translateX(2px);}to{opacity:1;transform:translateX(0);}"]);
+    var TooltipContent$1 = styled__default["default"]($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
       displayName: "Tooltip__TooltipContent",
       componentId: "sc-1f1p4mx-0"
     })(["font-family:", ";white-space:nowrap;font-size:", ";line-height:", ";color:", ";background-color:", ";border-radius:", ";margin-top:", ";padding:", ";pointer-events:none;z-index:1000;animation-duration:400ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;&[data-state=\"delayed-open\"][data-side=\"top\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"right\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"bottom\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"left\"]{animation-name:", ";}"], function (_ref2) {
@@ -25731,7 +25815,7 @@
     }, function (_ref9) {
       var theme = _ref9.theme;
       return theme.space.x0_25 + " " + theme.space.x0_75;
-    }, slideUpAndFade, slideRightAndFade, slideDownAndFade, slideLeftAndFade);
+    }, slideUpAndFade$1, slideRightAndFade$1, slideDownAndFade$1, slideLeftAndFade$1);
 
     function AppTag(_ref) {
       var app = _ref.app,
@@ -25742,7 +25826,7 @@
       var theme = styled.useTheme();
       var abbreviation = APP_ABBREVIATIONS[app];
       var displayName = APP_DISPLAY_NAMES[app];
-      return /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
         content: displayName,
         hideTooltip: hideTooltip
       }, /*#__PURE__*/React__default["default"].createElement(Wrapper$1, {
@@ -25750,8 +25834,8 @@
       }, /*#__PURE__*/React__default["default"].createElement(LogoWrapper, {
         "$type": type
       }, /*#__PURE__*/React__default["default"].createElement(NulogyLogo$1, {
-        width: 8,
-        height: 8
+        width: theme.space.x1,
+        height: theme.space.x1
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
         fontSize: "smaller",
         fontWeight: "bold",
@@ -29133,7 +29217,7 @@
       });
     });
 
-    var Tooltip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+    var Tooltip$1 = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
       var _ref$showDelay = _ref.showDelay,
           showDelay = _ref$showDelay === void 0 ? "100" : _ref$showDelay,
           _ref$hideDelay = _ref.hideDelay,
@@ -29176,7 +29260,7 @@
         justifyContent: "center",
         flexShrink: 0,
         borderRadius: "medium"
-      }, tooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+      }, tooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
         tooltip: tooltip,
         defaultOpen: isTooltipOpenByDefault,
         maxWidth: maxWidth
@@ -29685,7 +29769,7 @@
 
     var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var baseSelectProps = useStateManager(props);
-      return /*#__PURE__*/React__namespace.createElement(Select, _extends$a({
+      return /*#__PURE__*/React__namespace.createElement(Select, _extends$b({
         ref: ref
       }, baseSelectProps));
     });
@@ -30621,7 +30705,7 @@
           }
         }, []);
       }
-      var lockProps = _extends$a((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && 'disabled', _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
+      var lockProps = _extends$b((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && 'disabled', _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
       var hasLeadingGuards = noFocusGuards !== true;
       var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
       var mergedRef = useMergeRefs([parentRef, setObserveNode]);
@@ -30660,7 +30744,7 @@
         returnFocus: returnFocus,
         focusOptions: focusOptions,
         noFocusGuards: noFocusGuards
-      }), /*#__PURE__*/React__namespace.createElement(Container, _extends$a({
+      }), /*#__PURE__*/React__namespace.createElement(Container, _extends$b({
         ref: mergedRef
       }, lockProps, {
         className: className,
@@ -31990,7 +32074,7 @@
     var FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
 
     var FocusLockCombination = /*#__PURE__*/React__namespace.forwardRef(function FocusLockUICombination(props, ref) {
-      return /*#__PURE__*/React__namespace.createElement(FocusLockUI, _extends$a({
+      return /*#__PURE__*/React__namespace.createElement(FocusLockUI, _extends$b({
         sideCar: FocusTrap,
         ref: ref
       }, props));
@@ -34602,7 +34686,7 @@
         textAlign: prefixAlignment
       }), /*#__PURE__*/React__default["default"].createElement(InputWrapper, {
         maxWidth: inputWidth
-      }, iconLeft && (iconLeftTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({
+      }, iconLeft && (iconLeftTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip$1, Object.assign({
         tooltip: iconLeftTooltip
       }, iconLeftTooltipProps), /*#__PURE__*/React__default["default"].createElement(InputIcon, {
         left: "x1",
@@ -34623,7 +34707,7 @@
         size: htmlSize,
         variant: componentVariant,
         inputWidth: inputWidth
-      }, props)), iconRight && (iconRightTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({
+      }, props)), iconRight && (iconRightTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip$1, Object.assign({
         tooltip: iconRightTooltip
       }, iconRightTooltipProps), /*#__PURE__*/React__default["default"].createElement(InputIcon, {
         right: "x1",
@@ -61278,7 +61362,7 @@
             className: className,
             onScroll: onScroll,
             ref: this._outerRefSetter,
-            style: _extends$a({
+            style: _extends$b({
               position: 'relative',
               height: height,
               width: width,
@@ -65111,14 +65195,170 @@
       MenuItemLink: MenuItemLink
     };
 
-    var MaybeTooltip = function MaybeTooltip(_a) {
-      var _a$children = _a.children,
-          children = _a$children === void 0 ? "" : _a$children,
-          _a$showTooltip = _a.showTooltip,
-          showTooltip = _a$showTooltip === void 0 ? true : _a$showTooltip,
-          props = __rest$3(_a, ["children", "showTooltip"]);
+    function useHasHover() {
+      try {
+        return matchMedia("(hover: hover)").matches;
+      } catch (_a) {
+        // Assume that if the browser is too old to support matchMedia, it's likely not a touch device
+        return true;
+      }
+    }
+
+    var TooltipTriggerContext = /*#__PURE__*/React__namespace.createContext({
+      supportMobileTap: false,
+      open: false,
+      setOpen: function setOpen() {}
+    });
+    var TooltipProvider = $a093c7e1ec25a057$export$2881499e37b75b9a;
+
+    var Tooltip = function Tooltip(_a) {
+      var _b, _c;
 
-      return showTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({}, props), children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
+      var children = _a.children,
+          props = __rest$3(_a, ["children"]);
+
+      var _React$useState = React__namespace.useState((_b = props.defaultOpen) !== null && _b !== void 0 ? _b : false),
+          open = _React$useState[0],
+          setOpen = _React$useState[1];
+
+      var hasHover = useHasHover();
+      return /*#__PURE__*/React__namespace.createElement($a093c7e1ec25a057$export$be92b6f5f03c0fe9, {
+        delayDuration: !hasHover && props.supportMobileTap ? 0 : props.delayDuration,
+        onOpenChange: setOpen,
+        open: open
+      }, /*#__PURE__*/React__namespace.createElement(TooltipTriggerContext.Provider, {
+        value: {
+          open: open,
+          setOpen: setOpen,
+          supportMobileTap: (_c = props.supportMobileTap) !== null && _c !== void 0 ? _c : false
+        }
+      }, children));
+    };
+
+    Tooltip.displayName = $a093c7e1ec25a057$export$be92b6f5f03c0fe9.displayName;
+    var TooltipTrigger = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
+      var children = _a.children,
+          props = __rest$3(_a, ["children"]);
+
+      var hasHover = useHasHover();
+
+      var _React$useContext = React__namespace.useContext(TooltipTriggerContext),
+          setOpen = _React$useContext.setOpen,
+          supportMobileTap = _React$useContext.supportMobileTap;
+
+      var onClickProp = props.onClick;
+      var onClick = React__namespace.useCallback(function (e) {
+        if (!hasHover && supportMobileTap) {
+          e.preventDefault();
+          setOpen(true);
+        } else {
+          onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+        }
+      }, [setOpen, hasHover, supportMobileTap, onClickProp]);
+      return /*#__PURE__*/React__namespace.createElement($a093c7e1ec25a057$export$41fb9f06171c75f4, Object.assign({
+        ref: ref
+      }, props, {
+        onClick: onClick
+      }), children);
+    });
+    TooltipTrigger.displayName = $a093c7e1ec25a057$export$41fb9f06171c75f4.displayName;
+    var slideUpAndFade = styled.keyframes(["from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}"]);
+    var slideRightAndFade = styled.keyframes(["from{opacity:0;transform:translateX(-2px);}to{opacity:1;transform:translateX(0);}"]);
+    var slideDownAndFade = styled.keyframes(["from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:translateY(0);}"]);
+    var slideLeftAndFade = styled.keyframes(["from{opacity:0;transform:translateX(2px);}to{opacity:1;transform:translateX(0);}"]);
+    var StyledContent = styled__default["default"]($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
+      displayName: "TooltipComponents__StyledContent",
+      componentId: "sc-1fm7xjh-0"
+    })(["font-family:", ";font-size:", ";line-height:", ";border-radius:", ";padding:", ";color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";z-index:", ";animation-duration:400ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;&[data-state=\"delayed-open\"][data-side=\"top\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"right\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"bottom\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"left\"]{animation-name:", ";}", ""], function (_ref) {
+      var theme = _ref.theme;
+      return theme.fonts.base;
+    }, function (_ref2) {
+      var theme = _ref2.theme;
+      return theme.fontSizes.small;
+    }, function (_ref3) {
+      var theme = _ref3.theme;
+      return theme.lineHeights.smallTextBase;
+    }, function (_ref4) {
+      var theme = _ref4.theme;
+      return theme.radii.medium;
+    }, function (_ref5) {
+      var theme = _ref5.theme;
+      return theme.space.x1;
+    }, function (_ref6) {
+      var theme = _ref6.theme;
+      return theme.colors.black;
+    }, function (_ref7) {
+      var theme = _ref7.theme;
+      return theme.colors.white;
+    }, function (_ref8) {
+      var theme = _ref8.theme;
+      return theme.colors.grey;
+    }, function (_ref9) {
+      var theme = _ref9.theme;
+      return theme.shadows.medium;
+    }, function (_ref10) {
+      var theme = _ref10.theme;
+      return theme.zIndices.content;
+    }, slideDownAndFade, slideLeftAndFade, slideUpAndFade, slideRightAndFade, maxWidth);
+    var StyledArrow = styled__default["default"]($a093c7e1ec25a057$export$21b07c8f274aebd5).withConfig({
+      displayName: "TooltipComponents__StyledArrow",
+      componentId: "sc-1fm7xjh-1"
+    })(function (_ref11) {
+      var theme = _ref11.theme;
+      return {
+        fill: theme.colors.white,
+        filter: "drop-shadow(0px 1px 0px " + theme.colors.grey + ")"
+      };
+    });
+    var TooltipContent = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
+      var _a$sideOffset = _a.sideOffset,
+          sideOffset = _a$sideOffset === void 0 ? 4 : _a$sideOffset,
+          children = _a.children,
+          props = __rest$3(_a, ["sideOffset", "children"]);
+
+      var theme = styled.useTheme();
+      return /*#__PURE__*/React__namespace.createElement(StyledContent, Object.assign({
+        ref: ref,
+        sideOffset: sideOffset
+      }, props), children, /*#__PURE__*/React__namespace.createElement(StyledArrow, {
+        width: theme.space.x1_5,
+        height: theme.space.x0_75
+      }));
+    });
+    TooltipContent.displayName = $a093c7e1ec25a057$export$7c6e2c02157bb7d2.displayName;
+
+    var MaybeTooltip = function MaybeTooltip(_ref) {
+      var tooltip = _ref.tooltip,
+          children = _ref.children,
+          _ref$placement = _ref.placement,
+          placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
+          _ref$defaultOpen = _ref.defaultOpen,
+          defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+          _ref$showDelay = _ref.showDelay,
+          showDelay = _ref$showDelay === void 0 ? 100 : _ref$showDelay,
+          _ref$maxWidth = _ref.maxWidth,
+          maxWidth = _ref$maxWidth === void 0 ? "24em" : _ref$maxWidth,
+          _ref$showTooltip = _ref.showTooltip,
+          showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+          _ref$supportMobileTap = _ref.supportMobileTap,
+          supportMobileTap = _ref$supportMobileTap === void 0 ? true : _ref$supportMobileTap,
+          className = _ref.className;
+
+      if (!showTooltip) {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(TooltipProvider, null, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+        defaultOpen: defaultOpen,
+        delayDuration: showDelay,
+        supportMobileTap: supportMobileTap
+      }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger, {
+        asChild: true
+      }, children), /*#__PURE__*/React__default["default"].createElement($a093c7e1ec25a057$export$602eac185826482c, null, /*#__PURE__*/React__default["default"].createElement(TooltipContent, {
+        side: placement,
+        className: className,
+        maxWidth: maxWidth
+      }, tooltip))));
     };
 
     var TruncatedTextFillWidth = function TruncatedTextFillWidth(_a) {
@@ -65341,7 +65581,7 @@
     exports.Toast = Toast;
     exports.ToastContainer = ToastContainer;
     exports.Toggle = ToggleComponent;
-    exports.Tooltip = Tooltip;
+    exports.Tooltip = Tooltip$1;
     exports.TopBar = TopBar;
     exports.TruncatedText = TruncatedText;
     exports.VerticalDivider = VerticalDivider;