@skbkontur/react-ui 6.0.8 → 6.1.0

package/internal/Popup/PopupPin.js

@@ -21,7 +21,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import warning from 'warning';
+import { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';
+import { getDOMRect } from '../../lib/dom/getDOMRect.js';
+import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { PopupDataTids } from './Popup.js';
 import { PopupHelper } from './PopupHelper.js';
 import { getStyles } from './PopupPin.styles.js';
@@ -29,6 +33,12 @@ var PopupPin = /** @class */ (function (_super) {
     __extends(PopupPin, _super);
     function PopupPin() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.layoutEventsToken = null;
+        _this.layoutUpdateId = null;
+        _this.cachedPopupElement = null;
+        _this.handleLayoutEvent = function () {
+            _this.scheduleRemeasure();
+        };
         _this.getPinInlineStyle = function (left, top) {
             var _a, _b;
             var direction = _this.getPopupOppositeDirection();
@@ -65,7 +75,7 @@ var PopupPin = /** @class */ (function (_super) {
             }
         };
         _this.getPinCoordinates = function (popupElement) {
-            var popupRect = PopupHelper.getElementAbsoluteRect(popupElement);
+            var popupRect = _this.getPopupElementRect(popupElement);
             var _a = _this.positionObject, direction = _a.direction, align = _a.align;
             var defaultPinCoordinates = {
                 top: popupRect.height,
@@ -114,7 +124,7 @@ var PopupPin = /** @class */ (function (_super) {
                 case 'left':
                     return _this.props.offset;
                 case 'center':
-                    return defaultLetfCoordinate;
+                    return defaultLetfCoordinate + _this.props.offset;
                 case 'right':
                     return popupRect.width - _this.props.offset - 2 * _this.props.size;
                 default:
@@ -139,22 +149,72 @@ var PopupPin = /** @class */ (function (_super) {
         };
         return _this;
     }
+    PopupPin.prototype.componentDidMount = function () {
+        this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent, this.globalObject);
+        this.scheduleRemeasure();
+    };
+    PopupPin.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.popupPosition !== this.props.popupPosition ||
+            prevProps.offset !== this.props.offset ||
+            prevProps.popupElement !== this.props.popupElement) {
+            this.scheduleRemeasure();
+        }
+    };
+    PopupPin.prototype.componentWillUnmount = function () {
+        var _a;
+        this.cancelScheduledRemeasure();
+        (_a = this.layoutEventsToken) === null || _a === void 0 ? void 0 : _a.remove();
+        this.layoutEventsToken = null;
+    };
     PopupPin.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderPinContent();
+        }));
+    };
+    PopupPin.prototype.renderPinContent = function () {
         this.styles = getStyles(this.emotion);
-        if (!this.props.popupElement) {
+        if (this.props.popupElement) {
+            this.cachedPopupElement = this.props.popupElement;
+        }
+        var popupElement = this.props.popupElement || this.cachedPopupElement;
+        if (!popupElement) {
             return null;
         }
         this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);
-        var coords = this.getPinCoordinates(this.props.popupElement);
-        if (!coords || !coords.left || !coords.top) {
+        var coords = this.getPinCoordinates(popupElement);
+        if (!coords || typeof coords.left !== 'number' || typeof coords.top !== 'number') {
             return null;
         }
-        var inlineStyle = this.getPinInlineStyle(coords.left, coords.top);
+        var popupRect = this.getPopupElementRect(popupElement);
+        var clampedPosition = this.applyEdgeClamp(coords, popupRect);
+        var inlineStyle = this.getPinInlineStyle(clampedPosition.left, clampedPosition.top);
         var directionalStyle = this.getPinDirectionalStyle();
         if (!inlineStyle || !directionalStyle) {
             return null;
         }
-        return (React.createElement("div", { "data-tid": PopupDataTids.popupPin, className: this.cx(this.styles.pin(), directionalStyle), style: inlineStyle }));
+        var pinEdgePadding = this.getPinEdgePadding();
+        return (React.createElement("div", { "data-tid": PopupDataTids.popupPin, className: this.cx(this.styles.pin(), pinEdgePadding > 0 && this.styles.pinAnimated(), clampedPosition.hidden && this.styles.pinHidden(), directionalStyle), style: inlineStyle }));
+    };
+    PopupPin.prototype.getPinEdgePadding = function () {
+        return PopupHelper.getPopupViewportSidePadding(this.theme, this.isMobileLayout);
+    };
+    PopupPin.prototype.scheduleRemeasure = function () {
+        var _this = this;
+        var _a, _b;
+        this.cancelScheduledRemeasure();
+        this.layoutUpdateId = (_b = (_a = this.globalObject).requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, function () {
+            _this.layoutUpdateId = null;
+            _this.forceUpdate();
+        });
+    };
+    PopupPin.prototype.cancelScheduledRemeasure = function () {
+        var _a, _b;
+        if (this.layoutUpdateId && this.layoutUpdateId !== null) {
+            (_b = (_a = this.globalObject).cancelAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, this.layoutUpdateId);
+            this.layoutUpdateId = null;
+        }
     };
     PopupPin.prototype.getPopupOppositeDirection = function () {
         var popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;
@@ -172,10 +232,51 @@ var PopupPin = /** @class */ (function (_super) {
                 return 'bottom';
         }
     };
+    PopupPin.prototype.clampValue = function (value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    };
+    PopupPin.prototype.applyEdgeClamp = function (coords, popupRect) {
+        var pinEdgePadding = this.getPinEdgePadding();
+        if (pinEdgePadding <= 0) {
+            return { left: coords.left, top: coords.top, hidden: false };
+        }
+        var direction = this.positionObject.direction;
+        var pinSpan = 2 * this.props.size;
+        if (direction === 'top' || direction === 'bottom') {
+            var minLeft = pinEdgePadding;
+            var maxLeft = popupRect.width - pinSpan - pinEdgePadding;
+            var clampedLeft = this.clampValue(coords.left, minLeft, maxLeft);
+            var centerOffset_1 = coords.left - clampedLeft;
+            return {
+                left: clampedLeft,
+                top: coords.top,
+                hidden: centerOffset_1 !== 0,
+            };
+        }
+        var minTop = pinEdgePadding;
+        var maxTop = popupRect.height - pinSpan - pinEdgePadding;
+        var clampedTop = this.clampValue(coords.top, minTop, maxTop);
+        var centerOffset = coords.top - clampedTop;
+        return {
+            left: coords.left,
+            top: clampedTop,
+            hidden: centerOffset !== 0,
+        };
+    };
+    PopupPin.prototype.getPopupElementRect = function (popupElement) {
+        var rect = getDOMRect(popupElement);
+        return {
+            top: 0,
+            left: 0,
+            width: rect.width,
+            height: rect.height,
+        };
+    };
     PopupPin.__KONTUR_REACT_UI__ = 'PopupPin';
     PopupPin.displayName = 'PopupPin';
     PopupPin = __decorate([
-        withRenderEnvironment
+        withRenderEnvironment,
+        responsiveLayout
     ], PopupPin);
     return PopupPin;
 }(React.Component));

package/internal/Popup/PopupPin.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPin.js","sourceRoot":"","sources":["../../../internal/Popup/PopupPin.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { PopupDataTids } from './Popup.js';\nimport type { PositionObject, Rect } from './PopupHelper.js';\nimport { PopupHelper } from './PopupHelper.js';\nimport { getStyles } from './PopupPin.styles.js';\n\ninterface PopupPinProps {\n  /** Цвет фона пина */\n  backgroundColor: string;\n\n  /** Смещение пина от края попапа. Край задаётся в пропе position вторым словом */\n  offset: number;\n\n  /** Ссылка на попап */\n  popupElement?: Nullable<Element>;\n\n  /** Позиция попапа, по которой будет вычислено положение пина */\n  popupPosition: string;\n\n  /**\n   * Сторона пина без учёта границы.\n   * Пин представляет собой равносторонний треугольник, высота от попапа\n   * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n   */\n  size: number;\n}\n\n@withRenderEnvironment\nexport class PopupPin extends React.Component<PopupPinProps> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n  public static displayName = 'PopupPin';\n\n  private positionObject!: PositionObject;\n\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n\n  public render() {\n    this.styles = getStyles(this.emotion);\n\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);\n\n    const coords = this.getPinCoordinates(this.props.popupElement);\n    if (!coords || !coords.left || !coords.top) {\n      return null;\n    }\n\n    const inlineStyle = this.getPinInlineStyle(coords.left, coords.top);\n    const directionalStyle = this.getPinDirectionalStyle();\n    if (!inlineStyle || !directionalStyle) {\n      return null;\n    }\n\n    return (\n      <div\n        data-tid={PopupDataTids.popupPin}\n        className={this.cx(this.styles.pin(), directionalStyle)}\n        style={inlineStyle}\n      ></div>\n    );\n  }\n\n  private getPopupOppositeDirection() {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        warning(\n          false,\n          `Can't get opposite direction: invalid direction ${popupDirection}. Must be one of - 'top', 'bottom', 'left', 'right'.`,\n        );\n        return 'bottom';\n    }\n  }\n\n  private getPinInlineStyle = (left: number, top: number) => {\n    const direction = this.getPopupOppositeDirection();\n    if (!direction) {\n      return;\n    }\n\n    // Добавляем запас в 1px, чтобы пофиксить случайные отделения пинов\n    const correctedLeft = left - 1;\n    const correctedTop = top - 1;\n    const correctedSize = this.props.size + 1;\n\n    const defaultPinInlineStyle = {\n      [direction]: -this.props.size + 'px',\n      left: correctedLeft + 'px',\n      width: correctedSize * 2 + 'px',\n      height: correctedSize + 'px',\n      backgroundColor: this.props.backgroundColor,\n    };\n\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return defaultPinInlineStyle;\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -this.props.size + 'px',\n          top: correctedTop + 'px',\n          height: correctedSize * 2 + 'px',\n          width: correctedSize + 'px',\n          backgroundColor: this.props.backgroundColor,\n        };\n      default:\n        warning(\n          false,\n          `Can't get inline style: invalid direction '${direction}'. Must be one of - 'top', 'right', 'bottom', 'left'.`,\n        );\n        return defaultPinInlineStyle;\n    }\n  };\n\n  private getPinCoordinates = (popupElement: Element) => {\n    const popupRect = PopupHelper.getElementAbsoluteRect(popupElement);\n    const { direction, align } = this.positionObject;\n\n    const defaultPinCoordinates = {\n      top: popupRect.height,\n      left: this.getPinLeftCoordinate(popupRect, align),\n    };\n\n    switch (direction) {\n      case 'top':\n        return defaultPinCoordinates;\n      case 'bottom':\n        return {\n          top: -2 * this.props.size,\n          left: this.getPinLeftCoordinate(popupRect, align),\n        };\n      case 'left':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: popupRect.width,\n        };\n      case 'right':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: -2 * this.props.size,\n        };\n      default:\n        warning(\n          false,\n          `Can't get coordinates: invalid direction '${direction}'. Must be one of - 'top', 'right', 'bottom', 'left'.`,\n        );\n        return defaultPinCoordinates;\n    }\n  };\n\n  private getPinTopCoordinate = (popupRect: Rect, align: string) => {\n    const defaultTopCoordinate = this.props.offset;\n    switch (align) {\n      case 'top':\n        return defaultTopCoordinate;\n      case 'middle':\n        return popupRect.height / 2 - this.props.size;\n      case 'bottom':\n        return popupRect.height - this.props.offset - 2 * this.props.size;\n      default:\n        warning(\n          false,\n          `Can't get top coordinate: invalid align '${align}'. Must be one of - 'top', 'middle', 'bottom'.`,\n        );\n        return defaultTopCoordinate;\n    }\n  };\n\n  private getPinLeftCoordinate = (popupRect: Rect, align: string) => {\n    const defaultLetfCoordinate = popupRect.width / 2 - this.props.size;\n    switch (align) {\n      case 'left':\n        return this.props.offset;\n      case 'center':\n        return defaultLetfCoordinate;\n      case 'right':\n        return popupRect.width - this.props.offset - 2 * this.props.size;\n      default:\n        warning(\n          false,\n          `Can't get left coordinate: invalid align '${align}'. Must be one of - 'left', 'center', 'right'.`,\n        );\n        return defaultLetfCoordinate;\n    }\n  };\n\n  private getPinDirectionalStyle = () => {\n    switch (this.positionObject.direction) {\n      case 'top':\n        return this.styles.pinTop();\n      case 'bottom':\n        return this.styles.pinBottom();\n      case 'left':\n        return this.styles.pinLeft();\n      case 'right':\n        return this.styles.pinRight();\n      default:\n        warning(\n          false,\n          `Can't get directional style: invalid direction '${this.positionObject.direction}'. Must be one of - 'top', 'right', 'bottom', 'left'.`,\n        );\n        return this.styles.pinTop();\n    }\n  };\n}\n"]}
+{"version":3,"file":"PopupPin.js","sourceRoot":"","sources":["../../../internal/Popup/PopupPin.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { PopupDataTids } from './Popup.js';\nimport type { PositionObject, Rect } from './PopupHelper.js';\nimport { PopupHelper } from './PopupHelper.js';\nimport { getStyles } from './PopupPin.styles.js';\n\ninterface PopupPinProps {\n  /** Цвет фона пина */\n  backgroundColor: string;\n\n  /** Смещение пина от края попапа. Край задаётся в пропе position вторым словом */\n  offset: number;\n\n  /** Ссылка на попап */\n  popupElement?: Nullable<Element>;\n\n  /** Позиция попапа, по которой будет вычислено положение пина */\n  popupPosition: string;\n\n  /**\n   * Высота пина в px. Ширина основания = 2 × size для top/bottom, для left/right наоборот.\n   */\n  size: number;\n}\n\ninterface ClampedPinPosition {\n  left: number;\n  top: number;\n  hidden: boolean;\n}\n\n@withRenderEnvironment\n@responsiveLayout\nexport class PopupPin extends React.Component<PopupPinProps> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n  public static displayName = 'PopupPin';\n\n  private positionObject!: PositionObject;\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private globalObject!: GlobalObject;\n  private layoutEventsToken: Nullable<ReturnType<typeof LayoutEvents.addListener>> = null;\n  private layoutUpdateId: Nullable<number> = null;\n  private cachedPopupElement: Nullable<Element> = null;\n\n  public componentDidMount() {\n    this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent, this.globalObject);\n    this.scheduleRemeasure();\n  }\n\n  public componentDidUpdate(prevProps: PopupPinProps) {\n    if (\n      prevProps.popupPosition !== this.props.popupPosition ||\n      prevProps.offset !== this.props.offset ||\n      prevProps.popupElement !== this.props.popupElement\n    ) {\n      this.scheduleRemeasure();\n    }\n  }\n\n  public componentWillUnmount() {\n    this.cancelScheduledRemeasure();\n    this.layoutEventsToken?.remove();\n    this.layoutEventsToken = null;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderPinContent();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderPinContent() {\n    this.styles = getStyles(this.emotion);\n\n    if (this.props.popupElement) {\n      this.cachedPopupElement = this.props.popupElement;\n    }\n\n    const popupElement = this.props.popupElement || this.cachedPopupElement;\n\n    if (!popupElement) {\n      return null;\n    }\n\n    this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);\n\n    const coords = this.getPinCoordinates(popupElement);\n    if (!coords || typeof coords.left !== 'number' || typeof coords.top !== 'number') {\n      return null;\n    }\n\n    const popupRect = this.getPopupElementRect(popupElement);\n    const clampedPosition = this.applyEdgeClamp(coords, popupRect);\n    const inlineStyle = this.getPinInlineStyle(clampedPosition.left, clampedPosition.top);\n    const directionalStyle = this.getPinDirectionalStyle();\n    if (!inlineStyle || !directionalStyle) {\n      return null;\n    }\n\n    const pinEdgePadding = this.getPinEdgePadding();\n\n    return (\n      <div\n        data-tid={PopupDataTids.popupPin}\n        className={this.cx(\n          this.styles.pin(),\n          pinEdgePadding > 0 && this.styles.pinAnimated(),\n          clampedPosition.hidden && this.styles.pinHidden(),\n          directionalStyle,\n        )}\n        style={inlineStyle}\n      ></div>\n    );\n  }\n\n  private getPinEdgePadding(): number {\n    return PopupHelper.getPopupViewportSidePadding(this.theme, this.isMobileLayout);\n  }\n\n  private handleLayoutEvent = () => {\n    this.scheduleRemeasure();\n  };\n\n  private scheduleRemeasure() {\n    this.cancelScheduledRemeasure();\n    this.layoutUpdateId = this.globalObject.requestAnimationFrame?.(() => {\n      this.layoutUpdateId = null;\n      this.forceUpdate();\n    });\n  }\n\n  private cancelScheduledRemeasure() {\n    if (this.layoutUpdateId && this.layoutUpdateId !== null) {\n      this.globalObject.cancelAnimationFrame?.(this.layoutUpdateId);\n      this.layoutUpdateId = null;\n    }\n  }\n\n  private getPopupOppositeDirection() {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        warning(\n          false,\n          `Can't get opposite direction: invalid direction ${popupDirection}. Must be one of - 'top', 'bottom', 'left', 'right'.`,\n        );\n        return 'bottom';\n    }\n  }\n\n  private getPinInlineStyle = (left: number, top: number) => {\n    const direction = this.getPopupOppositeDirection();\n    if (!direction) {\n      return;\n    }\n\n    // Добавляем запас в 1px, чтобы пофиксить случайные отделения пинов\n    const correctedLeft = left - 1;\n    const correctedTop = top - 1;\n    const correctedSize = this.props.size + 1;\n\n    const defaultPinInlineStyle = {\n      [direction]: -this.props.size + 'px',\n      left: correctedLeft + 'px',\n      width: correctedSize * 2 + 'px',\n      height: correctedSize + 'px',\n      backgroundColor: this.props.backgroundColor,\n    };\n\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return defaultPinInlineStyle;\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -this.props.size + 'px',\n          top: correctedTop + 'px',\n          height: correctedSize * 2 + 'px',\n          width: correctedSize + 'px',\n          backgroundColor: this.props.backgroundColor,\n        };\n      default:\n        warning(\n          false,\n          `Can't get inline style: invalid direction '${direction}'. Must be one of - 'top', 'right', 'bottom', 'left'.`,\n        );\n        return defaultPinInlineStyle;\n    }\n  };\n\n  private clampValue(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max);\n  }\n\n  private applyEdgeClamp(coords: { left: number; top: number }, popupRect: Rect): ClampedPinPosition {\n    const pinEdgePadding = this.getPinEdgePadding();\n\n    if (pinEdgePadding <= 0) {\n      return { left: coords.left, top: coords.top, hidden: false };\n    }\n\n    const { direction } = this.positionObject;\n    const pinSpan = 2 * this.props.size;\n\n    if (direction === 'top' || direction === 'bottom') {\n      const minLeft = pinEdgePadding;\n      const maxLeft = popupRect.width - pinSpan - pinEdgePadding;\n      const clampedLeft = this.clampValue(coords.left, minLeft, maxLeft);\n      const centerOffset = coords.left - clampedLeft;\n\n      return {\n        left: clampedLeft,\n        top: coords.top,\n        hidden: centerOffset !== 0,\n      };\n    }\n\n    const minTop = pinEdgePadding;\n    const maxTop = popupRect.height - pinSpan - pinEdgePadding;\n    const clampedTop = this.clampValue(coords.top, minTop, maxTop);\n    const centerOffset = coords.top - clampedTop;\n\n    return {\n      left: coords.left,\n      top: clampedTop,\n      hidden: centerOffset !== 0,\n    };\n  }\n\n  private getPopupElementRect(popupElement: Element): Rect {\n    const rect = getDOMRect(popupElement);\n\n    return {\n      top: 0,\n      left: 0,\n      width: rect.width,\n      height: rect.height,\n    };\n  }\n\n  private getPinCoordinates = (popupElement: Element) => {\n    const popupRect = this.getPopupElementRect(popupElement);\n    const { direction, align } = this.positionObject;\n\n    const defaultPinCoordinates = {\n      top: popupRect.height,\n      left: this.getPinLeftCoordinate(popupRect, align),\n    };\n\n    switch (direction) {\n      case 'top':\n        return defaultPinCoordinates;\n      case 'bottom':\n        return {\n          top: -2 * this.props.size,\n          left: this.getPinLeftCoordinate(popupRect, align),\n        };\n      case 'left':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: popupRect.width,\n        };\n      case 'right':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: -2 * this.props.size,\n        };\n      default:\n        warning(\n          false,\n          `Can't get coordinates: invalid direction '${direction}'. Must be one of - 'top', 'right', 'bottom', 'left'.`,\n        );\n        return defaultPinCoordinates;\n    }\n  };\n\n  private getPinTopCoordinate = (popupRect: Rect, align: string) => {\n    const defaultTopCoordinate = this.props.offset;\n    switch (align) {\n      case 'top':\n        return defaultTopCoordinate;\n      case 'middle':\n        return popupRect.height / 2 - this.props.size;\n      case 'bottom':\n        return popupRect.height - this.props.offset - 2 * this.props.size;\n      default:\n        warning(\n          false,\n          `Can't get top coordinate: invalid align '${align}'. Must be one of - 'top', 'middle', 'bottom'.`,\n        );\n        return defaultTopCoordinate;\n    }\n  };\n\n  private getPinLeftCoordinate = (popupRect: Rect, align: string) => {\n    const defaultLetfCoordinate = popupRect.width / 2 - this.props.size;\n    switch (align) {\n      case 'left':\n        return this.props.offset;\n      case 'center':\n        return defaultLetfCoordinate + this.props.offset;\n      case 'right':\n        return popupRect.width - this.props.offset - 2 * this.props.size;\n      default:\n        warning(\n          false,\n          `Can't get left coordinate: invalid align '${align}'. Must be one of - 'left', 'center', 'right'.`,\n        );\n        return defaultLetfCoordinate;\n    }\n  };\n\n  private getPinDirectionalStyle = () => {\n    switch (this.positionObject.direction) {\n      case 'top':\n        return this.styles.pinTop();\n      case 'bottom':\n        return this.styles.pinBottom();\n      case 'left':\n        return this.styles.pinLeft();\n      case 'right':\n        return this.styles.pinRight();\n      default:\n        warning(\n          false,\n          `Can't get directional style: invalid direction '${this.positionObject.direction}'. Must be one of - 'top', 'right', 'bottom', 'left'.`,\n        );\n        return this.styles.pinTop();\n    }\n  };\n}\n"]}

package/internal/Popup/PopupPin.styles.d.ts

@@ -1,5 +1,7 @@
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     pin(): string;
+    pinAnimated(): string;
+    pinHidden(): string;
     pinTop(): string;
     pinBottom(): string;
     pinLeft(): string;

package/internal/Popup/PopupPin.styles.js

@@ -9,19 +9,25 @@ export var getStyles = memoizeGetStyles(function (_a) {
         pin: function () {
             return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
         },
+        pinAnimated: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n      transition:\n        left 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        top 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.15s ease-out,\n        visibility 0.15s ease-out;\n    "], ["\n      opacity: 1;\n      transition:\n        left 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        top 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.15s ease-out,\n        visibility 0.15s ease-out;\n    "])));
+        },
+        pinHidden: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      visibility: hidden;\n      opacity: 0;\n    "], ["\n      visibility: hidden;\n      opacity: 0;\n    "])));
+        },
         pinTop: function () {
-            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    "], ["\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    "])));
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    "], ["\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    "])));
         },
         pinBottom: function () {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    "], ["\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    "])));
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    "], ["\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    "])));
         },
         pinLeft: function () {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    "], ["\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    "])));
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    "], ["\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    "])));
         },
         pinRight: function () {
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    "], ["\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    "])));
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    "], ["\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    "])));
         },
     });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 //# sourceMappingURL=PopupPin.styles.js.map

package/internal/Popup/PopupPin.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPin.styles.js","sourceRoot":"","sources":["../../../internal/Popup/PopupPin.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,GAAG;YACD,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,6HAAA,0DAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,gIAAA,6DAET,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,6HAAA,0DAET,KAAC;QACJ,CAAC;QAED,QAAQ;YACN,OAAO,GAAG,gIAAA,6DAET,KAAC;QACJ,CAAC;KACF,CAAC;AA9B8D,CA8B9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  pin() {\n    return css`\n      position: absolute;\n    `;\n  },\n\n  pinTop() {\n    return css`\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    `;\n  },\n\n  pinBottom() {\n    return css`\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    `;\n  },\n\n  pinLeft() {\n    return css`\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    `;\n  },\n\n  pinRight() {\n    return css`\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"PopupPin.styles.js","sourceRoot":"","sources":["../../../internal/Popup/PopupPin.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,GAAG;YACD,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,WAAW;YACT,OAAO,GAAG,mSAAA,gOAOT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,yHAAA,sDAGT,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,6HAAA,0DAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,gIAAA,6DAET,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,6HAAA,0DAET,KAAC;QACJ,CAAC;QAED,QAAQ;YACN,OAAO,GAAG,gIAAA,6DAET,KAAC;QACJ,CAAC;KACF,CAAC;AAhD8D,CAgD9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  pin() {\n    return css`\n      position: absolute;\n    `;\n  },\n\n  pinAnimated() {\n    return css`\n      opacity: 1;\n      transition:\n        left 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        top 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.15s ease-out,\n        visibility 0.15s ease-out;\n    `;\n  },\n\n  pinHidden() {\n    return css`\n      visibility: hidden;\n      opacity: 0;\n    `;\n  },\n\n  pinTop() {\n    return css`\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    `;\n  },\n\n  pinBottom() {\n    return css`\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    `;\n  },\n\n  pinLeft() {\n    return css`\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    `;\n  },\n\n  pinRight() {\n    return css`\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    `;\n  },\n}));\n"]}

package/internal/SpinnerIcon/SpinnerIcon.d.ts

@@ -12,17 +12,17 @@ export interface SpinnerIconProps {
     color?: React.CSSProperties['color'];
 }
 export declare const sizes: {
-    readonly big: {
+    readonly large: {
         readonly size: 96;
         readonly width: 4;
         readonly radius: 32;
     };
-    readonly normal: {
+    readonly medium: {
         readonly size: 48;
         readonly width: 2;
         readonly radius: 16;
     };
-    readonly mini: {
+    readonly small: {
         readonly size: 16;
         readonly width: 1.5;
         readonly radius: 6;

package/internal/SpinnerIcon/SpinnerIcon.js

@@ -2,17 +2,17 @@ import React from 'react';
 import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { getStyles } from './SpinnerIcon.styles.js';
 export var sizes = {
-    big: {
+    large: {
         size: 96,
         width: 4,
         radius: 32,
     },
-    normal: {
+    medium: {
         size: 48,
         width: 2,
         radius: 16,
     },
-    mini: {
+    small: {
         size: 16,
         width: 1.5,
         radius: 6,
@@ -25,7 +25,7 @@ export var SpinnerIcon = function (_a) {
     var _b, _c;
     var size = _a.size, className = _a.className, inline = _a.inline, width = _a.width, color = _a.color;
     var _size = isSizeAlias(size) ? sizes[size] : size;
-    var currentSize = inline ? sizes.mini : _size;
+    var currentSize = inline ? sizes.small : _size;
     var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     return (React.createElement("span", { className: cx(styles.root(), (_b = {}, _b[styles.rootInline()] = inline, _b)) },

package/internal/SpinnerIcon/SpinnerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["../../../internal/SpinnerIcon/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAgBpD,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,GAAG,EAAE;QACH,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC;KACV;CACO,CAAC;AAEX,IAAM,WAAW,GAAG,UAAC,IAAa;IAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;;QAAzD,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACjE,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAExC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM,MAAG;QACnE,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,SAAS;gBACpC,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM;oBAC7B,EACF,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,MAAM,EAAE,WAAW,CAAC,IAAI,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,UAAG,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,eAAK,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,EACrF,gBAAgB,EAAC,GAAG,EACpB,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,KAAK,EACvC,SAAS,EAAC,OAAO,iBACL,MAAM;YAElB,gCAAQ,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAI,CACjF,CACD,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { getStyles } from './SpinnerIcon.styles.js';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  big: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  normal: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  mini: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.mini : _size;\n\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["../../../internal/SpinnerIcon/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAgBpD,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC;KACV;CACO,CAAC;AAEX,IAAM,WAAW,GAAG,UAAC,IAAa;IAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;;QAAzD,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACjE,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM,MAAG;QACnE,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,SAAS;gBACpC,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM;oBAC7B,EACF,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,MAAM,EAAE,WAAW,CAAC,IAAI,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,UAAG,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,eAAK,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,EACrF,gBAAgB,EAAC,GAAG,EACpB,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,KAAK,EACvC,SAAS,EAAC,OAAO,iBACL,MAAM;YAElB,gCAAQ,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAI,CACjF,CACD,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { getStyles } from './SpinnerIcon.styles.js';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  large: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  medium: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  small: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.small : _size;\n\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"]}

package/internal/icons2022/LoadingIcon.js

@@ -22,7 +22,7 @@ var Icon = function (props) {
     return (React.createElement(SpinnerIcon, __assign({ className: cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation()) }, props)));
 };
 export var LoadingIcon = iconSizer({
-    small: function () { return React.createElement(Icon, { size: "mini" }); },
+    small: function () { return React.createElement(Icon, { size: "small" }); },
     medium: function () { return (React.createElement(Icon, { size: {
             size: 20,
             width: 1,

package/internal/icons2022/LoadingIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIcon.js","sourceRoot":"","sources":["../../../internal/icons2022/LoadingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,KAAuB;IAC3B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,WAAW,aACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,2BAA2B,EAAE,CAAC,IACtG,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,SAAS,CAClC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EAApB,CAAoB;IACjC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARa,CAQb;IACD,KAAK,EAAE,cAAM,OAAA,CACX,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARY,CAQZ;CACF,EACD,aAAa,CACd,CAAC","sourcesContent":["import React from 'react';\n\nimport { getStyles } from '../../components/Spinner/Spinner.styles.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { SpinnerIcon } from '../SpinnerIcon/SpinnerIcon.js';\nimport type { SpinnerIconProps } from '../SpinnerIcon/SpinnerIcon.js';\nimport { iconSizer } from './iconSizer.js';\n\nconst Icon = (props: SpinnerIconProps) => {\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = React.useContext(ThemeContext);\n  return (\n    <SpinnerIcon\n      className={cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation())}\n      {...props}\n    />\n  );\n};\n\nexport const LoadingIcon = iconSizer<Omit<SpinnerIconProps, 'size'>>(\n  {\n    small: () => <Icon size=\"mini\" />,\n    medium: () => (\n      <Icon\n        size={{\n          size: 20,\n          width: 1,\n          radius: 6,\n        }}\n      />\n    ),\n    large: () => (\n      <Icon\n        size={{\n          size: 24,\n          width: 1.5,\n          radius: 8,\n        }}\n      />\n    ),\n  },\n  'LoadingIcon',\n);\n"]}
+{"version":3,"file":"LoadingIcon.js","sourceRoot":"","sources":["../../../internal/icons2022/LoadingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,KAAuB;IAC3B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,WAAW,aACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,2BAA2B,EAAE,CAAC,IACtG,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,SAAS,CAClC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EAArB,CAAqB;IAClC,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARa,CAQb;IACD,KAAK,EAAE,cAAM,OAAA,CACX,oBAAC,IAAI,IACH,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;SACV,GACD,CACH,EARY,CAQZ;CACF,EACD,aAAa,CACd,CAAC","sourcesContent":["import React from 'react';\n\nimport { getStyles } from '../../components/Spinner/Spinner.styles.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { SpinnerIcon } from '../SpinnerIcon/SpinnerIcon.js';\nimport type { SpinnerIconProps } from '../SpinnerIcon/SpinnerIcon.js';\nimport { iconSizer } from './iconSizer.js';\n\nconst Icon = (props: SpinnerIconProps) => {\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = React.useContext(ThemeContext);\n  return (\n    <SpinnerIcon\n      className={cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation())}\n      {...props}\n    />\n  );\n};\n\nexport const LoadingIcon = iconSizer<Omit<SpinnerIconProps, 'size'>>(\n  {\n    small: () => <Icon size=\"small\" />,\n    medium: () => (\n      <Icon\n        size={{\n          size: 20,\n          width: 1,\n          radius: 6,\n        }}\n      />\n    ),\n    large: () => (\n      <Icon\n        size={{\n          size: 24,\n          width: 1.5,\n          radius: 8,\n        }}\n      />\n    ),\n  },\n  'LoadingIcon',\n);\n"]}

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../BaseIcon.js';
+export declare const QuestionCircleIcon16Light: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<SVGSVGElement, IconProps> & Record<never, never>;

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { BaseIcon } from '../BaseIcon.js';
+export var QuestionCircleIcon16Light = forwardRefAndName('QuestionCircleIcon16Light', function (props, ref) {
+    return (React.createElement(BaseIcon, __assign({ ref: ref }, props),
+        React.createElement("path", { d: "M8.25 10.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }),
+        React.createElement("path", { d: "M6.012 5.838c0-.646.61-1.267 1.49-1.267s1.49.621 1.49 1.267c0 .477-.32.93-.851 1.145C7.53 7.231 7 7.718 7 8.489a.5.5 0 0 0 1 0c0-.215.123-.42.516-.58.842-.342 1.475-1.12 1.475-2.07 0-1.307-1.172-2.268-2.49-2.268-1.318 0-2.49.96-2.49 2.267a.5.5 0 0 0 1 0z" }),
+        React.createElement("path", { d: "M1 7.5a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" })));
+});
+//# sourceMappingURL=QuestionCircleIcon16Light.js.map

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCircleIcon16Light.js","sourceRoot":"","sources":["../../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,MAAM,CAAC,IAAM,yBAAyB,GAAG,iBAAiB,CACxD,2BAA2B,EAC3B,UAAC,KAAK,EAAE,GAAG;IACT,OAAO,CACL,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK;QAC3B,8BAAM,CAAC,EAAC,mDAAmD,GAAG;QAC9D,8BAAM,CAAC,EAAC,gQAAgQ,GAAG;QAC3Q,8BAAM,CAAC,EAAC,4FAA4F,GAAG,CAC9F,CACZ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { BaseIcon } from '../BaseIcon.js';\nimport type { IconProps } from '../BaseIcon.js';\n\nexport const QuestionCircleIcon16Light = forwardRefAndName<SVGSVGElement, IconProps>(\n  'QuestionCircleIcon16Light',\n  (props, ref) => {\n    return (\n      <BaseIcon ref={ref} {...props}>\n        <path d=\"M8.25 10.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z\" />\n        <path d=\"M6.012 5.838c0-.646.61-1.267 1.49-1.267s1.49.621 1.49 1.267c0 .477-.32.93-.851 1.145C7.53 7.231 7 7.718 7 8.489a.5.5 0 0 0 1 0c0-.215.123-.42.516-.58.842-.342 1.475-1.12 1.475-2.07 0-1.307-1.172-2.268-2.49-2.268-1.318 0-2.49.96-2.49 2.267a.5.5 0 0 0 1 0z\" />\n        <path d=\"M1 7.5a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z\" />\n      </BaseIcon>\n    );\n  },\n);\n"]}

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../BaseIcon.js';
+export declare const QuestionCircleIcon20Regular: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<SVGSVGElement, IconProps> & Record<never, never>;

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { BaseIcon } from '../BaseIcon.js';
+export var QuestionCircleIcon20Regular = forwardRefAndName('QuestionCircleIcon20Regular', function (props, ref) {
+    return (React.createElement(BaseIcon, __assign({ ref: ref, viewBoxSize: 20 }, props),
+        React.createElement("path", { d: "M11 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" }),
+        React.createElement("path", { d: "M8.375 8.078c0-.642.63-1.328 1.625-1.328s1.625.686 1.625 1.328c0 .324-.09.504-.2.637-.13.16-.325.293-.617.466l-.113.065c-.247.142-.576.332-.834.571-.346.321-.61.765-.61 1.378a.75.75 0 1 0 1.5 0c0-.12.03-.186.13-.278.124-.115.284-.208.539-.357l.148-.086c.3-.177.7-.424 1.015-.805.336-.407.542-.927.542-1.59 0-1.654-1.496-2.829-3.125-2.829S6.875 6.425 6.875 8.078a.75.75 0 1 0 1.5 0z" }),
+        React.createElement("path", { d: "M2.001 10A7.999 7.999 0 1 1 18 10 7.999 7.999 0 0 1 2 10zm8-6.499A6.499 6.499 0 1 0 10 16.5 6.499 6.499 0 0 0 10 3.5z" })));
+});
+//# sourceMappingURL=QuestionCircleIcon20Regular.js.map

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCircleIcon20Regular.js","sourceRoot":"","sources":["../../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,MAAM,CAAC,IAAM,2BAA2B,GAAG,iBAAiB,CAC1D,6BAA6B,EAC7B,UAAC,KAAK,EAAE,GAAG;IACT,OAAO,CACL,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,IAAM,KAAK;QAC5C,8BAAM,CAAC,EAAC,qCAAqC,GAAG;QAChD,8BAAM,CAAC,EAAC,+XAA+X,GAAG;QAC1Y,8BAAM,CAAC,EAAC,uHAAuH,GAAG,CACzH,CACZ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { BaseIcon } from '../BaseIcon.js';\nimport type { IconProps } from '../BaseIcon.js';\n\nexport const QuestionCircleIcon20Regular = forwardRefAndName<SVGSVGElement, IconProps>(\n  'QuestionCircleIcon20Regular',\n  (props, ref) => {\n    return (\n      <BaseIcon ref={ref} viewBoxSize={20} {...props}>\n        <path d=\"M11 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n        <path d=\"M8.375 8.078c0-.642.63-1.328 1.625-1.328s1.625.686 1.625 1.328c0 .324-.09.504-.2.637-.13.16-.325.293-.617.466l-.113.065c-.247.142-.576.332-.834.571-.346.321-.61.765-.61 1.378a.75.75 0 1 0 1.5 0c0-.12.03-.186.13-.278.124-.115.284-.208.539-.357l.148-.086c.3-.177.7-.424 1.015-.805.336-.407.542-.927.542-1.59 0-1.654-1.496-2.829-3.125-2.829S6.875 6.425 6.875 8.078a.75.75 0 1 0 1.5 0z\" />\n        <path d=\"M2.001 10A7.999 7.999 0 1 1 18 10 7.999 7.999 0 0 1 2 10zm8-6.499A6.499 6.499 0 1 0 10 16.5 6.499 6.499 0 0 0 10 3.5z\" />\n      </BaseIcon>\n    );\n  },\n);\n"]}

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../BaseIcon.js';
+export declare const QuestionCircleIcon24Regular: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<SVGSVGElement, IconProps> & Record<never, never>;

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { BaseIcon } from '../BaseIcon.js';
+export var QuestionCircleIcon24Regular = forwardRefAndName('QuestionCircleIcon24Regular', function (props, ref) {
+    return (React.createElement(BaseIcon, __assign({ ref: ref, viewBoxSize: 24 }, props),
+        React.createElement("path", { d: "M13 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" }),
+        React.createElement("path", { d: "M9.75 9.887c0-.945.91-1.875 2.25-1.875 1.34 0 2.25.93 2.25 1.875 0 .453-.129.726-.297.93-.19.23-.462.414-.833.632-.046.028-.096.056-.148.086-.312.18-.706.408-1.013.693-.405.375-.709.886-.709 1.596a.75.75 0 0 0 1.5 0c0-.217.07-.35.23-.497.172-.16.396-.29.717-.477l.183-.107c.38-.223.858-.52 1.23-.972.395-.479.64-1.09.64-1.884 0-1.955-1.776-3.375-3.75-3.375s-3.75 1.42-3.75 3.375a.75.75 0 1 0 1.5 0z" }),
+        React.createElement("path", { d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5z" })));
+});
+//# sourceMappingURL=QuestionCircleIcon24Regular.js.map

package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCircleIcon24Regular.js","sourceRoot":"","sources":["../../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,MAAM,CAAC,IAAM,2BAA2B,GAAG,iBAAiB,CAC1D,6BAA6B,EAC7B,UAAC,KAAK,EAAE,GAAG;IACT,OAAO,CACL,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,IAAM,KAAK;QAC5C,8BAAM,CAAC,EAAC,qCAAqC,GAAG;QAChD,8BAAM,CAAC,EAAC,gZAAgZ,GAAG;QAC3Z,8BAAM,CAAC,EAAC,6JAA6J,GAAG,CAC/J,CACZ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { BaseIcon } from '../BaseIcon.js';\nimport type { IconProps } from '../BaseIcon.js';\n\nexport const QuestionCircleIcon24Regular = forwardRefAndName<SVGSVGElement, IconProps>(\n  'QuestionCircleIcon24Regular',\n  (props, ref) => {\n    return (\n      <BaseIcon ref={ref} viewBoxSize={24} {...props}>\n        <path d=\"M13 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n        <path d=\"M9.75 9.887c0-.945.91-1.875 2.25-1.875 1.34 0 2.25.93 2.25 1.875 0 .453-.129.726-.297.93-.19.23-.462.414-.833.632-.046.028-.096.056-.148.086-.312.18-.706.408-1.013.693-.405.375-.709.886-.709 1.596a.75.75 0 0 0 1.5 0c0-.217.07-.35.23-.497.172-.16.396-.29.717-.477l.183-.107c.38-.223.858-.52 1.23-.972.395-.479.64-1.09.64-1.884 0-1.955-1.776-3.375-3.75-3.375s-3.75 1.42-3.75 3.375a.75.75 0 1 0 1.5 0z\" />\n        <path d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5z\" />\n      </BaseIcon>\n    );\n  },\n);\n"]}