@vchasno/ui-kit 0.3.14 → 0.3.16

package/dist/SelectCreatable/index.js

@@ -4984,14 +4984,14 @@ var defaultAriaLiveMessages = {
   guidance: function guidance(props) {
     var isSearchable = props.isSearchable,
       isMulti = props.isMulti,
+      isDisabled = props.isDisabled,
       tabSelectsValue = props.tabSelectsValue,
-      context = props.context,
-      isInitialFocus = props.isInitialFocus;
+      context = props.context;
     switch (context) {
       case 'menu':
-        return "Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu".concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
+        return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu").concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
       case 'input':
-        return isInitialFocus ? "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '') : '';
+        return "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '');
       case 'value':
         return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
       default:
@@ -5027,18 +5027,17 @@ var defaultAriaLiveMessages = {
       label = _props$label2 === void 0 ? '' : _props$label2,
       selectValue = props.selectValue,
       isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      isAppleDevice = props.isAppleDevice;
+      isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
       return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
     };
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       var disabled = isDisabled ? ' disabled' : '';
-      var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
-      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
+      var status = "".concat(isSelected ? 'selected' : 'focused').concat(disabled);
+      return "option ".concat(label, " ").concat(status, ", ").concat(getArrayIndex(options, focused), ".");
     }
     return '';
   },
@@ -5057,8 +5056,7 @@ var LiveRegion = function LiveRegion(props) {
     isFocused = props.isFocused,
     selectValue = props.selectValue,
     selectProps = props.selectProps,
-    id = props.id,
-    isAppleDevice = props.isAppleDevice;
+    id = props.id;
   var ariaLiveMessages = selectProps.ariaLiveMessages,
     getOptionLabel = selectProps.getOptionLabel,
     inputValue = selectProps.inputValue,
@@ -5068,8 +5066,7 @@ var LiveRegion = function LiveRegion(props) {
     menuIsOpen = selectProps.menuIsOpen,
     options = selectProps.options,
     screenReaderStatus = selectProps.screenReaderStatus,
-    tabSelectsValue = selectProps.tabSelectsValue,
-    isLoading = selectProps.isLoading;
+    tabSelectsValue = selectProps.tabSelectsValue;
   var ariaLabel = selectProps['aria-label'];
   var ariaLive = selectProps['aria-live'];
 
@@ -5122,16 +5119,15 @@ var LiveRegion = function LiveRegion(props) {
         isSelected: isSelected,
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
-        selectValue: selectValue,
-        isAppleDevice: isAppleDevice
+        selectValue: selectValue
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
     return focusMsg;
-  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
+  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue]);
   var ariaResults = useMemo(function () {
     var resultsMsg = '';
-    if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
+    if (menuIsOpen && options.length && messages.onFilter) {
       var resultsMessage = screenReaderStatus({
         count: focusableOptions.length
       });
@@ -5141,8 +5137,7 @@ var LiveRegion = function LiveRegion(props) {
       });
     }
     return resultsMsg;
-  }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
-  var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
+  }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus]);
   var ariaGuidance = useMemo(function () {
     var guidanceMsg = '';
     if (messages.guidance) {
@@ -5153,28 +5148,24 @@ var LiveRegion = function LiveRegion(props) {
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti: isMulti,
         isSearchable: isSearchable,
-        tabSelectsValue: tabSelectsValue,
-        isInitialFocus: isInitialFocus
+        tabSelectsValue: tabSelectsValue
       });
     }
     return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue]);
+  var ariaContext = "".concat(ariaFocused, " ").concat(ariaResults, " ").concat(ariaGuidance);
   var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
-    id: "aria-focused"
-  }, ariaFocused), jsx("span", {
-    id: "aria-results"
-  }, ariaResults), jsx("span", {
-    id: "aria-guidance"
-  }, ariaGuidance));
+    id: "aria-context"
+  }, ariaContext));
+  var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
   return jsx(Fragment, null, jsx(A11yText$1, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
-    "aria-relevant": "additions text",
-    role: "log"
+    "aria-relevant": "additions text"
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 var LiveRegion$1 = LiveRegion;
@@ -5814,30 +5805,6 @@ var RequiredInput = function RequiredInput(_ref) {
 };
 var RequiredInput$1 = RequiredInput;
 
-/// <reference types="user-agent-data-types" />
-
-function testPlatform(re) {
-  var _window$navigator$use;
-  return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
-}
-function isIPhone() {
-  return testPlatform(/^iPhone/i);
-}
-function isMac() {
-  return testPlatform(/^Mac/i);
-}
-function isIPad() {
-  return testPlatform(/^iPad/i) ||
-  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-  isMac() && navigator.maxTouchPoints > 1;
-}
-function isIOS() {
-  return isIPhone() || isIPad();
-}
-function isAppleDevice() {
-  return isMac() || isIOS();
-}
-
 var formatGroupLabel = function formatGroupLabel(group) {
   return group.label;
 };
@@ -6007,24 +5974,6 @@ function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
     return optionsAccumulator;
   }, []);
 }
-function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
-  return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
-    if (categorizedOption.type === 'group') {
-      optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
-        return {
-          data: option.data,
-          id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
-        };
-      })));
-    } else {
-      optionsAccumulator.push({
-        data: categorizedOption.data,
-        id: "".concat(optionId, "-").concat(categorizedOption.index)
-      });
-    }
-    return optionsAccumulator;
-  }, []);
-}
 function buildFocusableOptions(props, selectValue) {
   return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
 }
@@ -6062,13 +6011,6 @@ function getNextFocusedOption(state, options) {
   var lastFocusedOption = state.focusedOption;
   return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
 }
-var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
-  var _focusableOptionsWith;
-  var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
-    return option.data === focusedOption;
-  })) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
-  return focusedOptionId || null;
-};
 var getOptionLabel = function getOptionLabel(props, data) {
   return props.getOptionLabel(data);
 };
@@ -6119,8 +6061,6 @@ var Select = /*#__PURE__*/function (_Component) {
     _this.state = {
       ariaSelection: null,
       focusedOption: null,
-      focusedOptionId: null,
-      focusableOptionsWithIds: [],
       focusedValue: null,
       inputIsHidden: false,
       isFocused: false,
@@ -6128,18 +6068,17 @@ var Select = /*#__PURE__*/function (_Component) {
       clearFocusValueOnUpdate: false,
       prevWasFocused: false,
       inputIsHiddenAfterUpdate: undefined,
-      prevProps: undefined,
-      instancePrefix: ''
+      prevProps: undefined
     };
     _this.blockOptionHover = false;
     _this.isComposing = false;
     _this.commonProps = void 0;
     _this.initialTouchX = 0;
     _this.initialTouchY = 0;
+    _this.instancePrefix = '';
     _this.openAfterFocus = false;
     _this.scrollToFocusedOptionOnUpdate = false;
     _this.userIsDragging = void 0;
-    _this.isAppleDevice = isAppleDevice();
     _this.controlRef = null;
     _this.getControlRef = function (ref) {
       _this.controlRef = ref;
@@ -6254,12 +6193,6 @@ var Select = /*#__PURE__*/function (_Component) {
         removedValue: lastSelectedValue
       });
     };
-    _this.getFocusedOptionId = function (focusedOption) {
-      return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
-    };
-    _this.getFocusableOptionsWithIds = function () {
-      return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
-    };
     _this.getValue = function () {
       return _this.state.selectValue;
     };
@@ -6287,7 +6220,7 @@ var Select = /*#__PURE__*/function (_Component) {
       return (_this$props$className = (_this$props$className2 = _this.props.classNames)[key]) === null || _this$props$className === void 0 ? void 0 : _this$props$className.call(_this$props$className2, props);
     };
     _this.getElementId = function (element) {
-      return "".concat(_this.state.instancePrefix, "-").concat(element);
+      return "".concat(_this.instancePrefix, "-").concat(element);
     };
     _this.getComponents = function () {
       return defaultComponents(_this.props);
@@ -6496,11 +6429,8 @@ var Select = /*#__PURE__*/function (_Component) {
       if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
         return;
       }
-      var options = _this.getFocusableOptions();
-      var focusedOptionIndex = options.indexOf(focusedOption);
       _this.setState({
-        focusedOption: focusedOption,
-        focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
+        focusedOption: focusedOption
       });
     };
     _this.shouldHideSelectedOptions = function () {
@@ -6644,16 +6574,14 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       event.preventDefault();
     };
-    _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
+    _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = cleanValue(_props.value);
+
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
     if (_props.menuIsOpen && _this.state.selectValue.length) {
-      var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
-      _this.state.focusableOptionsWithIds = focusableOptionsWithIds;
       _this.state.focusedOption = focusableOptions[optionIndex];
-      _this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
     }
     return _this;
   }
@@ -6778,8 +6706,7 @@ var Select = /*#__PURE__*/function (_Component) {
       this.setState({
         inputIsHiddenAfterUpdate: false,
         focusedValue: null,
-        focusedOption: focusableOptions[openAtIndex],
-        focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
+        focusedOption: focusableOptions[openAtIndex]
       }, function () {
         return _this2.onMenuOpen();
       });
@@ -6855,8 +6782,7 @@ var Select = /*#__PURE__*/function (_Component) {
       this.scrollToFocusedOptionOnUpdate = true;
       this.setState({
         focusedOption: options[nextFocus],
-        focusedValue: null,
-        focusedOptionId: this.getFocusedOptionId(options[nextFocus])
+        focusedValue: null
       });
     }
   }, {
@@ -7052,10 +6978,10 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-label': this.props['aria-label'],
         'aria-labelledby': this.props['aria-labelledby'],
         'aria-required': required,
-        role: 'combobox',
-        'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
+        role: 'combobox'
       }, menuIsOpen && {
-        'aria-controls': this.getElementId('listbox')
+        'aria-controls': this.getElementId('listbox'),
+        'aria-owns': this.getElementId('listbox')
       }), !isSearchable && {
         'aria-readonly': true
       }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
@@ -7300,11 +7226,8 @@ var Select = /*#__PURE__*/function (_Component) {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          tabIndex: -1,
-          role: 'option',
-          'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+          tabIndex: -1
         };
-
         return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
           innerProps: innerProps,
           data: data,
@@ -7373,7 +7296,8 @@ var Select = /*#__PURE__*/function (_Component) {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
-            onMouseMove: _this4.onMenuMouseMove
+            onMouseMove: _this4.onMenuMouseMove,
+            id: _this4.getElementId('listbox')
           },
           isLoading: isLoading,
           placement: placement
@@ -7388,11 +7312,6 @@ var Select = /*#__PURE__*/function (_Component) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
-            innerProps: {
-              role: 'listbox',
-              'aria-multiselectable': commonProps.isMulti,
-              id: _this4.getElementId('listbox')
-            },
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
@@ -7480,8 +7399,7 @@ var Select = /*#__PURE__*/function (_Component) {
         focusedValue: focusedValue,
         isFocused: isFocused,
         selectValue: selectValue,
-        focusableOptions: focusableOptions,
-        isAppleDevice: this.isAppleDevice
+        focusableOptions: focusableOptions
       }));
     }
   }, {
@@ -7530,8 +7448,7 @@ var Select = /*#__PURE__*/function (_Component) {
         inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
         ariaSelection = state.ariaSelection,
         isFocused = state.isFocused,
-        prevWasFocused = state.prevWasFocused,
-        instancePrefix = state.instancePrefix;
+        prevWasFocused = state.prevWasFocused;
       var options = props.options,
         value = props.value,
         menuIsOpen = props.menuIsOpen,
@@ -7541,15 +7458,11 @@ var Select = /*#__PURE__*/function (_Component) {
       var newMenuOptionsState = {};
       if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
         var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
-        var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
         var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
         var focusedOption = getNextFocusedOption(state, focusableOptions);
-        var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
         newMenuOptionsState = {
           selectValue: selectValue,
           focusedOption: focusedOption,
-          focusedOptionId: focusedOptionId,
-          focusableOptionsWithIds: focusableOptionsWithIds,
           focusedValue: focusedValue,
           clearFocusValueOnUpdate: false
         };
@@ -7879,11 +7792,14 @@ var Spinner = function (_a) {
             React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
 
-var css_248z$1 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        top 0.3s,\n        font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
+var css_248z$1 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 0 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        top 0.3s,\n        font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
 styleInject(css_248z$1);
 
 var LabelText = function (_a) {
     var className = _a.className, children = _a.children;
+    if (!children) {
+        return null;
+    }
     return (React__default.createElement("span", { className: cn('vchasno-ui-label-text', className) },
         React__default.createElement("svg", { className: "vchasno-ui-label-text__title-icon", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99299 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00404 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64499 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" })),