glints-aries 4.0.193 → 4.0.195

package/es/@next/CurrencyInput/CurrencyInput.d.ts

@@ -4,9 +4,13 @@ export declare type CurrencyInputProps = Omit<InputProps, 'type' | 'prefix' | 'o
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
+    currencyCode: string;
+    currencySymbol?: string;
 };
 export declare const CurrencyInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "prefix" | "onChange"> & {
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
+    currencyCode: string;
+    currencySymbol?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/es/@next/CurrencyInput/CurrencyInput.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["locale", "value", "onChange"];
+var _excluded = ["locale", "value", "onChange", "currencyCode", "currencySymbol"];
 import React, { useState } from 'react';
-import { StyledCurrency } from './CurrencyStyles';
+import { Input } from '../Input/Input';
 export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(_ref, ref) {
   var _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     onChange = _ref.onChange,
+    currencyCode = _ref.currencyCode,
+    currencySymbol = _ref.currencySymbol,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -28,6 +30,26 @@ export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(
     var cleanedValue = parseFloat(value.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
     return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
   };
+  var getCurrencySymbol = function getCurrencySymbol(locale, currencyCode, currencySymbol) {
+    if (currencySymbol) {
+      return currencySymbol;
+    }
+    try {
+      var _parts$find;
+      var _formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      });
+      var parts = _formatter.formatToParts(0);
+      var returnedCurrencySymbol = (_parts$find = parts.find(function (part) {
+        return part.type === 'currency';
+      })) == null ? void 0 : _parts$find.value;
+      return returnedCurrencySymbol;
+    } catch (e) {
+      console.warn("Currency code of " + currencyCode + " is unsupported, \"$\" will be used");
+    }
+    return '$';
+  };
   var _useState = useState(formatter.format(getRawNumber(value.toString()))),
     formattedValue = _useState[0],
     setFormattedValue = _useState[1];
@@ -36,10 +58,10 @@ export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(
     onChange(rawValue);
     setFormattedValue(formatter.format(rawValue));
   };
-  return /*#__PURE__*/React.createElement(StyledCurrency, _extends({
+  return /*#__PURE__*/React.createElement(Input, _extends({
     ref: ref,
     type: "text",
-    prefix: /*#__PURE__*/React.createElement("div", null, "$")
+    prefix: /*#__PURE__*/React.createElement("div", null, getCurrencySymbol(localeValue, currencyCode, currencySymbol))
   }, props, {
     value: formattedValue === '0' ? '' : formattedValue,
     onChange: handleChange

package/es/@next/Input/Input.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["error", "disabled", "prefix", "suffix"];
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
 export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
   var error = _ref.error,
@@ -11,17 +11,44 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
+  var prefixRef = useRef(null);
+  var suffixRef = useRef(null);
   var Prefix = function Prefix() {
-    return hasPrefix ? /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix) : null;
+    return hasPrefix ? /*#__PURE__*/React.createElement(StyledPrefixContainer, {
+      ref: prefixRef
+    }, prefix) : null;
   };
   var Suffix = function Suffix() {
-    return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, null, suffix) : null;
+    return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, {
+      ref: suffixRef
+    }, suffix) : null;
   };
+  var _React$useState = React.useState(0),
+    prefixWidth = _React$useState[0],
+    setPrefixWidth = _React$useState[1];
+  var _React$useState2 = React.useState(0),
+    suffixWidth = _React$useState2[0],
+    setSuffixWidth = _React$useState2[1];
+  useEffect(function () {
+    if (hasPrefix) {
+      var _prefixWidth = prefixRef.current.getBoundingClientRect().width;
+      setPrefixWidth(_prefixWidth);
+    }
+  }, [hasPrefix, prefix]);
+  useEffect(function () {
+    if (hasSuffix) {
+      var _suffixWidth = suffixRef.current.getBoundingClientRect().width;
+      setSuffixWidth(_suffixWidth);
+    }
+  }, [hasSuffix, suffix]);
   return /*#__PURE__*/React.createElement(StyledContainer, {
     ref: ref,
     "data-prefix": hasPrefix,
+    "data-suffix": hasSuffix,
     "data-error": error,
-    "data-disabled": disabled
+    "data-disabled": disabled,
+    prefixWidth: prefixWidth,
+    suffixWidth: suffixWidth
   }, /*#__PURE__*/React.createElement(Prefix, null), /*#__PURE__*/React.createElement(StyledInput, _extends({
     disabled: disabled
   }, props)), /*#__PURE__*/React.createElement(Suffix, null));

package/es/@next/Input/InputStyle.d.ts

@@ -1,5 +1,10 @@
 import { InputProps } from './Input';
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps, never>;
+interface PreffixSuffixWidthProps {
+    prefixWidth: number;
+    suffixWidth: number;
+}
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps & PreffixSuffixWidthProps, never>;
 export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export {};

package/es/@next/Input/InputStyle.js

@@ -1,18 +1,23 @@
 import styled from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { Neutral, Red } from '../utilities/colors';
+import { space12, space4, space8 } from '../utilities/spacing';
 export var StyledContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
-})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:40px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], Red.B93, Neutral.B85, Neutral.B95, Neutral.B85, Neutral.B85, Neutral.B85, Neutral.B85);
+})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
+  return props.prefixWidth;
+}, function (props) {
+  return props.suffixWidth;
+}, Red.B93, Neutral.B85, Neutral.B95, Neutral.B85, Neutral.B85, Neutral.B85, Neutral.B85);
 export var StyledPrefixContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledPrefixContainer",
   componentId: "sc-15z2mnd-1"
-})(["position:absolute;padding:0;left:0;line-height:0;color:", ";svg{height:17px;width:17px;margin:10px 14px;fill:", ";}div{color:", ";margin:18px 12px;}"], Neutral.B40, Neutral.B40, Neutral.B40);
+})(["position:absolute;left:0;color:", ";display:flex;align-items:center;height:36px;padding:0px ", " 0 ", ";svg{height:17px;width:17px;fill:", ";}"], Neutral.B40, space8, space12, Neutral.B40);
 export var StyledSuffixContainer = styled(StyledPrefixContainer).withConfig({
   displayName: "InputStyle__StyledSuffixContainer",
   componentId: "sc-15z2mnd-2"
-})(["left:auto;right:0;"]);
+})(["left:auto;right:0;padding:0px ", " 0 ", ";"], space12, space4);
 export var StyledInput = styled.input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-3"

package/es/@next/Popover/popoverStoryHelper/SalarySelector.js

@@ -15,8 +15,10 @@ export var SalarySelector = function SalarySelector(_ref) {
     as: "div",
     variant: "caption"
   }, "IDR"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    currencyCode: "USD",
     onChange: onFromChanged
   })), /*#__PURE__*/React.createElement("div", null, "-"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    currencyCode: "USD",
     onChange: onToChanged
   }))));
 };

package/es/@next/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const allPositions: readonly ["top-center", "top-left", "top-right", "bottom-center", "bottom-left", "bottom-right", "right-middle", "right-top", "right-bottom", "left-middle", "left-top", "left-bottom"];
+export declare type TooltipPosition = typeof allPositions[number];
+export declare type TooltipProps = {
+    preferredPosition?: TooltipPosition;
+    children: React.ReactNode;
+    content: React.ReactNode;
+};
+export declare const Tooltip: ({ children, content, preferredPosition, }: TooltipProps) => JSX.Element;
+export {};

package/es/@next/Tooltip/Tooltip.js

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Portal } from '../Portal/Portal';
+import { Typography } from '../Typography';
+import { bottomPositionResolver, leftPositionResolver, rightPositionResolver, topPositionResolver } from './positionResolver';
+import { canAlignBottom, canAlignCenter, canAlignLeft, canAlignMiddle, canAlignRight, canAlignTop, horizontalBuffer, verticalBuffer } from './positionResolverHelper';
+import { StyledTooltip, StyledTooltipArrow, StyledTooltipContainer } from './TooltipStyle';
+var topPositions = ['top-center', 'top-left', 'top-right'];
+var bottomPositions = ['bottom-center', 'bottom-left', 'bottom-right'];
+var rightPositions = ['right-middle', 'right-top', 'right-bottom'];
+var leftPositions = ['left-middle', 'left-top', 'left-bottom'];
+var allPositions = [].concat(topPositions, bottomPositions, rightPositions, leftPositions);
+var tooltipPositionResolvers = {
+  'top-center': function topCenter(tooltipRect, elementRect) {
+    return topPositionResolver(tooltipRect, elementRect, [canAlignCenter, canAlignLeft, canAlignRight]);
+  },
+  'top-left': function topLeft(tooltipRect, elementRect) {
+    return topPositionResolver(tooltipRect, elementRect, [canAlignLeft, canAlignCenter, canAlignRight]);
+  },
+  'top-right': function topRight(tooltipRect, elementRect) {
+    return topPositionResolver(tooltipRect, elementRect, [canAlignRight, canAlignCenter, canAlignLeft]);
+  },
+  'bottom-center': function bottomCenter(tooltipRect, elementRect) {
+    return bottomPositionResolver(tooltipRect, elementRect, [canAlignCenter, canAlignLeft, canAlignRight]);
+  },
+  'bottom-left': function bottomLeft(tooltipRect, elementRect) {
+    return bottomPositionResolver(tooltipRect, elementRect, [canAlignLeft, canAlignCenter, canAlignRight]);
+  },
+  'bottom-right': function bottomRight(tooltipRect, elementRect) {
+    return bottomPositionResolver(tooltipRect, elementRect, [canAlignRight, canAlignCenter, canAlignLeft]);
+  },
+  'right-middle': function rightMiddle(tooltipRect, elementRect) {
+    return rightPositionResolver(tooltipRect, elementRect, [canAlignMiddle, canAlignTop, canAlignBottom]);
+  },
+  'right-top': function rightTop(tooltipRect, elementRect) {
+    return rightPositionResolver(tooltipRect, elementRect, [canAlignTop, canAlignMiddle, canAlignBottom]);
+  },
+  'right-bottom': function rightBottom(tooltipRect, elementRect) {
+    return rightPositionResolver(tooltipRect, elementRect, [canAlignBottom, canAlignMiddle, canAlignTop]);
+  },
+  'left-middle': function leftMiddle(tooltipRect, elementRect) {
+    return leftPositionResolver(tooltipRect, elementRect, [canAlignMiddle, canAlignTop, canAlignBottom]);
+  },
+  'left-top': function leftTop(tooltipRect, elementRect) {
+    return leftPositionResolver(tooltipRect, elementRect, [canAlignTop, canAlignMiddle, canAlignBottom]);
+  },
+  'left-bottom': function leftBottom(tooltipRect, elementRect) {
+    return leftPositionResolver(tooltipRect, elementRect, [canAlignBottom, canAlignMiddle, canAlignTop]);
+  }
+};
+var defaultPosition = 'top-center';
+export var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+    content = _ref.content,
+    _ref$preferredPositio = _ref.preferredPosition,
+    preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio;
+  var tooltipRef = useRef(null);
+  var elRef = useRef(null);
+  var tooltipPositionsHandlerRef = useRef(null);
+  var _useState = useState(null),
+    toolTipCoord = _useState[0],
+    setToolTipCoord = _useState[1];
+  var _useState2 = useState(false),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useState3 = useState(null),
+    overridePosition = _useState3[0],
+    setOverridePosition = _useState3[1];
+  if (!allPositions.includes(preferredPosition)) {
+    preferredPosition = defaultPosition;
+    console.warn("\"" + preferredPosition + "\" is not a valid tooltip positon, \"" + defaultPosition + "\" will be used instead");
+  }
+  var position = overridePosition || preferredPosition;
+  var handleTooltipPositions = function handleTooltipPositions(tooltipRect, elRect, currentPosition) {
+    var resolver = tooltipPositionResolvers[position] || tooltipPositionResolvers[defaultPosition];
+    var newLeft = 0;
+    var newTop = 0;
+    if (position.startsWith('top')) {
+      newTop = elRect.top - tooltipRect.height - verticalBuffer;
+      newLeft = elRect.left + elRect.width / 2;
+    }
+    if (position.startsWith('bottom')) {
+      newTop = elRect.top + elRect.height + verticalBuffer;
+      newLeft = elRect.left + elRect.width / 2;
+    }
+    if (position.startsWith('left')) {
+      newTop = elRect.top + elRect.height / 2;
+      newLeft = elRect.left - tooltipRect.width - horizontalBuffer;
+    }
+    if (position.startsWith('right')) {
+      newTop = elRect.top + elRect.height / 2;
+      newLeft = elRect.left + elRect.width + horizontalBuffer;
+    }
+    setToolTipCoord({
+      top: newTop,
+      left: newLeft
+    });
+    var tooltipRectNew = new DOMRect(newLeft, newTop, tooltipRect.width, tooltipRect.height);
+    var resolvedPosition = resolver(tooltipRectNew, elRect);
+    if (!overridePosition && resolvedPosition !== currentPosition) {
+      setOverridePosition(resolvedPosition);
+    }
+  };
+  tooltipPositionsHandlerRef.current = handleTooltipPositions;
+  useEffect(function () {
+    if (isActive) {
+      var _tooltipRef$current, _elRef$current;
+      tooltipPositionsHandlerRef.current(tooltipRef == null ? void 0 : (_tooltipRef$current = tooltipRef.current) == null ? void 0 : _tooltipRef$current.getClientRects()[0], elRef == null ? void 0 : (_elRef$current = elRef.current) == null ? void 0 : _elRef$current.getClientRects()[0], position);
+    }
+  }, [isActive, position]);
+  var contentMarkup = typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, content) : content;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipContainer, {
+    ref: elRef,
+    onMouseEnter: function onMouseEnter() {
+      return setIsActive(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsActive(false);
+    }
+  }, children), isActive && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, {
+    "data-position": position,
+    ref: tooltipRef,
+    style: {
+      top: (toolTipCoord == null ? void 0 : toolTipCoord.top) + 'px',
+      left: (toolTipCoord == null ? void 0 : toolTipCoord.left) + 'px',
+      visibility: toolTipCoord ? 'visible' : 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(StyledTooltipArrow, {
+    className: "arrow"
+  }), contentMarkup)));
+};

package/es/@next/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Tooltip/TooltipAdaptiveBottom.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveBottomCenter: any;
+export declare const AdaptiveBottomLeft: any;
+export declare const AdaptiveBottomRight: any;

package/es/@next/Tooltip/TooltipAdaptiveLeft.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveLeftMiddle: any;
+export declare const AdaptiveLeftTop: any;
+export declare const AdaptiveLeftBottom: any;

package/es/@next/Tooltip/TooltipAdaptiveRight.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveRightMiddle: any;
+export declare const AdaptiveRightTop: any;
+export declare const AdaptiveRightBottom: any;

package/es/@next/Tooltip/TooltipAdaptiveTop.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveTopCenter: any;
+export declare const AdaptiveTopLeft: any;
+export declare const AdaptiveTopRight: any;

package/es/@next/Tooltip/TooltipStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTooltipArrow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Tooltip/TooltipStyle.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius2 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { space12, space8 } from '../utilities/spacing';
+import { nonCenterArrowSpace, verticalBuffer } from './positionResolverHelper';
+var verticalMargin = verticalBuffer + "px";
+var arrowSize = '6px';
+var nonCentralArrowMargin = nonCenterArrowSpace + "px";
+var background = Neutral.B18;
+export var StyledTooltipContainer = styled.div.withConfig({
+  displayName: "TooltipStyle__StyledTooltipContainer",
+  componentId: "sc-37e5z7-0"
+})(["display:inline-block;position:relative;*{display:block;}"]);
+export var StyledTooltip = styled.div.withConfig({
+  displayName: "TooltipStyle__StyledTooltip",
+  componentId: "sc-37e5z7-1"
+})(["position:absolute;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";z-index:100;overflow-wrap:break-word;line-height:1;&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}@media (max-width:", "){min-width:69px;}"], borderRadius2, space8, space12, Neutral.B100, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, verticalMargin, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, background, nonCentralArrowMargin, background, arrowSize, background, nonCentralArrowMargin, Breakpoints.large);
+export var StyledTooltipArrow = styled.div.withConfig({
+  displayName: "TooltipStyle__StyledTooltipArrow",
+  componentId: "sc-37e5z7-2"
+})(["content:' ';left:50%;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-width:", ";margin-left:calc(", " * -1);"], arrowSize, arrowSize);

package/es/@next/Tooltip/index.d.ts

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

package/es/@next/Tooltip/index.js

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

package/es/@next/Tooltip/positionResolver.d.ts

@@ -0,0 +1,6 @@
+import { PreferredHorizontalAligmentFuncsType, PreferredVerticalAligmentFuncsType } from './positionResolverHelper';
+import { TooltipPosition } from './Tooltip';
+export declare const topPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredHorizontalAligmentFuncsType[]) => TooltipPosition;
+export declare const bottomPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredHorizontalAligmentFuncsType[]) => TooltipPosition;
+export declare const leftPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredVerticalAligmentFuncsType[]) => TooltipPosition;
+export declare const rightPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredVerticalAligmentFuncsType[]) => TooltipPosition;

package/es/@next/Tooltip/positionResolver.js

@@ -0,0 +1,181 @@
+import { canAlignLeft, canAlignRight, canAlignCenter, canStayOnTop, canFitOnTheLeft, horizontalBuffer, canFitOnTheRight, canFitBelow, verticalBuffer, tryCalculateAligment, canAlignMiddle, canAlignTop, canAlignBottom, canStayOnBottom, canFitOnTheTop, canStayOnLeft, canStayOnRight } from './positionResolverHelper';
+export var topPositionResolver = function topPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = preferredAligmentFuncs;
+  var verticalPreferredAligmentFuncs = [canAlignMiddle, canAlignTop, canAlignBottom];
+  if (canStayOnTop(tooltipRect)) {
+    var alignResult = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "top-" + alignResult;
+    }
+  }
+  if (canFitOnTheLeft(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult) {
+      return "left-" + _alignResult;
+    }
+  }
+  if (canFitOnTheRight(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult2 = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult2) {
+      return "right-" + _alignResult2;
+    }
+  }
+  if (canFitBelow(tooltipRect, elRect, verticalBuffer)) {
+    var _alignResult3 = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult3) {
+      return "bottom-" + _alignResult3;
+    }
+  }
+  return 'top-center';
+};
+export var bottomPositionResolver = function bottomPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = preferredAligmentFuncs;
+  var verticalPreferredAligmentFuncs = [canAlignMiddle, canAlignTop, canAlignBottom];
+  if (canStayOnBottom(tooltipRect)) {
+    var alignResult = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "bottom-" + alignResult;
+    }
+  }
+  if (canFitOnTheLeft(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult4 = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult4) {
+      return "left-" + _alignResult4;
+    }
+  }
+  if (canFitOnTheRight(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult5 = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult5) {
+      return "right-" + _alignResult5;
+    }
+  }
+  if (canFitOnTheTop(tooltipRect, elRect, verticalBuffer)) {
+    var _alignResult6 = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult6) {
+      return "top-" + _alignResult6;
+    }
+  }
+  return 'bottom-center';
+};
+export var leftPositionResolver = function leftPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = [canAlignCenter, canAlignLeft, canAlignRight];
+  var verticalPreferredAligmentFuncs = preferredAligmentFuncs;
+  if (canStayOnLeft(tooltipRect)) {
+    var alignResult = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "left-" + alignResult;
+    }
+  }
+  if (canFitOnTheTop(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult7 = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult7) {
+      return "top-" + _alignResult7;
+    }
+  }
+  if (canFitOnTheRight(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult8 = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult8) {
+      return "right-" + _alignResult8;
+    }
+  }
+  if (canFitBelow(tooltipRect, elRect, verticalBuffer)) {
+    var _alignResult9 = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult9) {
+      return "bottom-" + _alignResult9;
+    }
+  }
+  return 'left-middle';
+};
+export var rightPositionResolver = function rightPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = [canAlignCenter, canAlignLeft, canAlignRight];
+  var verticalPreferredAligmentFuncs = preferredAligmentFuncs;
+  if (canStayOnRight(tooltipRect)) {
+    var alignResult = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "right-" + alignResult;
+    }
+  }
+  if (canFitOnTheTop(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult10 = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult10) {
+      return "top-" + _alignResult10;
+    }
+  }
+  if (canFitOnTheLeft(tooltipRect, elRect, horizontalBuffer)) {
+    var _alignResult11 = tryCalculateAligment({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult11) {
+      return "left-" + _alignResult11;
+    }
+  }
+  if (canFitBelow(tooltipRect, elRect, verticalBuffer)) {
+    var _alignResult12 = tryCalculateAligment({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult12) {
+      return "bottom-" + _alignResult12;
+    }
+  }
+  return 'right-middle';
+};

package/es/@next/Tooltip/positionResolverHelper.d.ts

@@ -0,0 +1,37 @@
+export declare const verticalBuffer = 8;
+export declare const horizontalBuffer = 8;
+export declare const nonCenterArrowSpace = 12;
+export declare type HorizontalAlignmentType = 'center' | 'left' | 'right';
+export declare type VerticalAlignmentType = 'middle' | 'top' | 'bottom';
+export declare type HorizontalAlignmentCalculatorResult = {
+    type: HorizontalAlignmentType;
+    result: boolean;
+};
+export declare type VerticalAlignmentCalculatorResult = {
+    type: VerticalAlignmentType;
+    result: boolean;
+};
+export declare type PreferredHorizontalAligmentFuncsType = (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare type PreferredVerticalAligmentFuncsType = (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare type TryCalculateAlignmentArgs<T extends HorizontalAlignmentType | VerticalAlignmentType> = {
+    preferredAlignmentFuncs: T extends HorizontalAlignmentType ? PreferredHorizontalAligmentFuncsType[] : PreferredVerticalAligmentFuncsType[];
+    tooltipRect: DOMRect;
+    elRect: DOMRect;
+};
+export declare const getElementCenterPosition: (elRect: DOMRect) => number;
+export declare const getElementMiddlePosition: (elRect: DOMRect) => number;
+export declare const canFitOnTheTop: (tooltipRect: DOMRect, elRect: DOMRect, verticalMargin: number) => boolean;
+export declare const canFitBelow: (tooltipRect: DOMRect, elRect: DOMRect, verticalMargin: number) => boolean;
+export declare const canFitOnTheLeft: (tooltipRect: DOMRect, elRect: DOMRect, horizontalMargin: number) => boolean;
+export declare const canFitOnTheRight: (tooltipRect: DOMRect, elRect: DOMRect, horizontalMargin: number) => boolean;
+export declare const canAlignLeft: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignRight: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignCenter: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignTop: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canAlignBottom: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canAlignMiddle: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canStayOnTop: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnBottom: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnLeft: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnRight: (tooltipRect: DOMRect) => boolean;
+export declare const tryCalculateAligment: <T extends HorizontalAlignmentType | VerticalAlignmentType>(args: TryCalculateAlignmentArgs<T>) => HorizontalAlignmentType | VerticalAlignmentType;