@cleartrip/ct-design-tooltip 1.1.0

package/dist/ct-design-tooltip.browser.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("tslib"),e=require("react/jsx-runtime"),t=require("react"),n=require("@cleartrip/ct-design-use-theme"),i=require("@cleartrip/ct-design-container"),o=require("styled-components"),a=require("@cleartrip/ct-design-icons"),s=require("@cleartrip/ct-design-portal"),d=require("@cleartrip/ct-design-conditional-wrap"),c=require("@cleartrip/ct-design-use-merge-refs"),l=require("@cleartrip/ct-design-use-isomorphic-effect"),u=require("@cleartrip/ct-design-transition");function g(r){return r&&r.__esModule?r:{default:r}}var f,p=g(t),h=g(n),m=g(o),w=g(d),x=g(c),_=g(l);exports.ArrowDirection=void 0,(f=exports.ArrowDirection||(exports.ArrowDirection={})).LEFT="left",f.RIGHT="right",f.UP="up",f.DOWN="down";var v,b=m.default.div((function(e){var t=e.theme;return function(e){var t=e.backgroundColor,n=e.width,i=e.theme,a=e.borderRadius;return o.css(v||(v=r.__makeTemplateObject(["\n    background-color: ",";\n    border-radius: ",";\n    display: flex;\n    width: ",";\n    align-items: center;\n    justify-content: center;\n    padding-top: ",";\n    padding-bottom: ",";\n    padding-left: ",";\n    padding-right: ",";\n  "],["\n    background-color: ",";\n    border-radius: ",";\n    display: flex;\n    width: ",";\n    align-items: center;\n    justify-content: center;\n    padding-top: ",";\n    padding-bottom: ",";\n    padding-left: ",";\n    padding-right: ",";\n  "])),t,a,n,i.spacing[1],i.spacing[1],i.spacing[2],i.spacing[2])}({backgroundColor:e.backgroundColor,width:e.width,theme:t,borderRadius:e.borderRadius})})),D=function(e){var t=e.arrowPosition;return r.__assign({},function(r){switch(r){case exports.ArrowDirection.DOWN:return{transform:"rotate(0deg)"};case exports.ArrowDirection.UP:return{transform:"rotate(180deg)"};case exports.ArrowDirection.LEFT:return{marginRight:"-6px",transform:"rotate(90deg)"};case exports.ArrowDirection.RIGHT:return{marginLeft:"-6px",transform:"rotate(-90deg)"};default:return{transform:"rotate(0deg)"}}}(t))},R=m.default.div((function(r){return function(r){return r.theme,{display:"flex",alignItems:"center",transform:r.transform,marginLeft:r.marginLeft,marginRight:r.marginRight}}({theme:r.theme,transform:r.transform,marginLeft:r.marginLeft,marginRight:r.marginRight})})),j=function(t){h.default();var n=D(t);return e.jsx(R,r.__assign({},n,{children:e.jsx(a.TooltipChevronDown,{})}))},A=t.forwardRef((function(n,o){var a=n.width,d=void 0===a?"":a,c=n.arrowPosition,l=void 0===c?exports.ArrowDirection.UP:c,g=n.children,f=void 0===g?null:g,m=n.container,v=n.open,D=void 0!==v&&v,R=n.showInPortal,A=void 0===R||R,q=n.as,y=void 0===q?"div":q,P=n.layoutDiff,C=void 0===P?{left:0,top:0}:P,T=h.default(),I=t.useRef(null),L=t.useRef(null),k=t.useState({left:0,top:0}),E=k[0],M=k[1],O=x.default(o,L);_.default((function(){if(I.current&&L.current){var r=I.current.getBoundingClientRect(),e=L.current.getBoundingClientRect(),t=0,n=0;"left"!==l&&"right"!==l||(t="right"===l?-e.width:C.left+r.width,n=-4),"up"!==l&&"down"!==l||(n="down"===l?-e.height:e.height,t=8);var i=Math.abs(r.left+t),o=Math.abs(r.top+C.top+n);(Math.abs(E.left-i)>1||Math.abs(E.top-o)>1)&&M({left:i,top:o})}}),[l,M,E,D]);var U=function(e){var t=e.theme,n=e.width;return r.__assign(r.__assign({},function(r){return{backgroundColor:r.color.tooltip.primaryBg,borderRadius:r.border.radius[4]}}(t)),{width:n})}({theme:T,width:d}),F=e.jsx(b,r.__assign({},U,{children:f})),N=l===exports.ArrowDirection.DOWN?"column":"row",W=l===exports.ArrowDirection.UP?"column":"row",B=r.__assign({ref:I},m.props);return e.jsxs(e.Fragment,{children:[D?e.jsx(w.default,r.__assign({condition:A,wrap:function(r){return e.jsx(s.Portal,{children:r})}},{children:e.jsx(u.Transition,r.__assign({type:"fade",in:D},{children:e.jsxs(i.Container,r.__assign({as:y,position:"absolute",ref:O,left:E.left,top:E.top,zIndex:T.zIndex.tooltip},{children:[(l===exports.ArrowDirection.DOWN||l===exports.ArrowDirection.RIGHT)&&e.jsxs(i.Container,r.__assign({display:"flex",alignItems:"center",flexDirection:N},{children:[F,e.jsx(j,{arrowPosition:l})]})),(l===exports.ArrowDirection.UP||l===exports.ArrowDirection.LEFT)&&e.jsxs(i.Container,r.__assign({display:"flex",alignItems:"center",flexDirection:W},{children:[e.jsx(j,{arrowPosition:l}),F]}))]}))}))})):null,p.default.isValidElement(m)?p.default.cloneElement(m,B):m]})}));exports.Tooltip=A;
+//# sourceMappingURL=ct-design-tooltip.browser.cjs.js.map

package/dist/ct-design-tooltip.browser.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-tooltip.browser.cjs.js","sources":["../../packages/components/Tooltip/src/type.ts","../../packages/components/Tooltip/src/style.ts","../../packages/components/Tooltip/src/StyledTooltip/StyledTooltip.tsx","../../packages/components/Tooltip/src/StyledTooltip/style.ts","../../packages/components/Tooltip/src/TooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.tsx","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/TooltipArrow.tsx","../../packages/components/Tooltip/src/Tooltip.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":["ArrowDirection","StyledTooltip","styled","default","div","_a","theme","backgroundColor","width","borderRadius","css","spacing","getStyledTooltipStyles","getTooltipArrowStyles","arrowPosition","__assign","DOWN","transform","UP","LEFT","marginRight","RIGHT","marginLeft","arrowStyle","StyledTooltipArrow","display","alignItems","getStyledTooltipArrowStyles","TooltipArrow","useTheme","tooltipArrow","_jsx","children","jsx","TooltipChevronDown","Tooltip","forwardRef","forwardedRef","_b","_c","_d","container","_e","open","_f","showInPortal","_g","as","_h","layoutDiff","left","top","ref","useRef","containerRef","_j","useState","childStyle","setChildStyle","mergedRef","useMergeRefs","useIsomorphicEffect","current","childMeta","getBoundingClientRect","containerMeta","leftDiff","topDiff","height","dLeft","Math","abs","dTop","tooltipStyles","color","tooltip","primaryBg","border","radius","getDefaultTooltipStyles","getTooltipStyles","tooltipBody","downRightFlex","topLeftFlex","containerProps","props","_jsxs","ConditionalWrap","condition","wrap","Portal","Transition","type","in","jsxs","Container","position","zIndex","flexDirection","React","isValidElement","cloneElement"],"mappings":"8hBAGYA,4CAAAA,QAKXA,oBAAA,GALWA,EAAAA,QAAcA,iBAAdA,uBAKX,CAAA,IAJC,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,GAAA,KACAA,EAAA,KAAA,OCJK,MCCDC,EAAgBC,EAAMC,QAACC,KAAwB,SAACC,OAAEC,EAAKD,EAAAC,MAC3D,OCDoC,SAACD,OACrCE,EAAeF,EAAAE,gBACfC,EAAKH,EAAAG,MACLF,EAAKD,EAAAC,MACLG,EAAYJ,EAAAI,aAEZ,OAAOC,EAAGA,+RAAA,2BAC2B,yBACN,qCAEf,+EAGiB,0BACG,wBACF,yBACC,WATbH,EACHE,EAERD,EAGMF,EAAMK,QAAQ,GACXL,EAAMK,QAAQ,GAChBL,EAAMK,QAAQ,GACbL,EAAMK,QAAQ,GAEnC,CDjBEC,CAAuB,CACrBL,gBAF0EF,EAAAE,gBAG1EC,MAHiFH,EAAAG,MAIjFF,MAAKA,EACLG,aAL+FJ,EAAAI,cACjG,IE6BWI,EAAwB,SAACR,GAAE,IAAAS,EAAaT,EAAAS,cACnD,OAAAC,EAAAA,SAAA,CAAA,EAjCwB,SAACD,GACzB,OAAQA,GACN,KAAKd,QAAAA,eAAegB,KAClB,MAAO,CACLC,UAAW,gBAGf,KAAKjB,QAAAA,eAAekB,GAClB,MAAO,CACLD,UAAW,kBAGf,KAAKjB,QAAAA,eAAemB,KAClB,MAAO,CACLC,YAAa,OACbH,UAAW,iBAGf,KAAKjB,QAAAA,eAAeqB,MAClB,MAAO,CACLC,WAAY,OACZL,UAAW,kBAGf,QACE,MAAO,CACLA,UAAW,gBAInB,CAIOM,CAAWT,GAElB,EClCMU,EAAqBtB,EAAMC,QAACC,KAA6B,SAACC,GAC9D,OCDyC,SAACA,GAM1C,OALKA,EAAAC,MAKE,CACLmB,QAAS,OACTC,WAAY,SACZT,UAPOZ,EAAAY,UAQPK,WAPQjB,EAAAiB,WAQRF,YAPSf,EAAAe,YASb,CDZEO,CAA4B,CAC1BrB,MAFmED,EAAAC,MAGnEW,UAH8EZ,EAAAY,UAI9EK,WAJ0FjB,EAAAiB,WAK1FF,YALuGf,EAAAe,aACzG,IEEIQ,EAA4C,SAACd,GACnCe,YACd,IAAMC,EAAejB,EAAsBC,GAC3C,OACEiB,MAACP,EAAuBT,EAAAA,SAAA,CAAA,EAAAe,EACtB,CAAAE,SAAAD,EAAAE,IAACC,EAAkBA,mBAAA,MAGzB,ECCMC,EAAUC,EAAUA,YACxB,SACE/B,EAUAgC,OATEC,EAAUjC,EAAAG,MAAVA,OAAK,IAAA8B,EAAG,GAAEA,EACVC,EAAAlC,EAAAS,cAAAA,OAAgB,IAAAyB,EAAAvC,QAAAA,eAAekB,GAAEqB,EACjCC,EAAenC,EAAA2B,SAAfA,OAAQ,IAAAQ,EAAG,KAAIA,EACfC,EAASpC,EAAAoC,UACTC,EAAYrC,EAAAsC,KAAZA,OAAI,IAAAD,GAAQA,EACZE,EAAAvC,EAAAwC,aAAAA,OAAe,IAAAD,GAAIA,EACnBE,EAAUzC,EAAA0C,GAAVA,OAAE,IAAAD,EAAG,MAAKA,EACVE,EAAA3C,EAAA4C,WAAAA,OAAa,IAAAD,EAAA,CAAEE,KAAM,EAAGC,IAAK,GAAGH,EAI5B1C,EAAQuB,EAAAA,UACRuB,EAAMC,SAAgB,MACtBC,EAAeD,SAAgB,MAC/BE,EAA8BC,EAAAA,SAAsB,CAAEN,KAAM,EAAGC,IAAK,IAAnEM,OAAYC,OAEbC,EAAYC,EAAAA,QAAavB,EAAciB,GAC7CO,EAAAA,SAAoB,WAClB,GAAIT,EAAIU,SAAWR,EAAaQ,QAAS,CACvC,IAAMC,EAAYX,EAAIU,QAAQE,wBACxBC,EAAgBX,EAAaQ,QAAQE,wBAEvCE,EAAW,EACXC,EAAU,EACQ,SAAlBrD,GAA8C,UAAlBA,IAC9BoD,EAA6B,UAAlBpD,GAA6BmD,EAAczD,MAAQyC,EAAWC,KAAOa,EAAUvD,MAC1F2D,GAAW,GAGS,OAAlBrD,GAA4C,SAAlBA,IAC5BqD,EAA4B,SAAlBrD,GAA4BmD,EAAcG,OAASH,EAAcG,OAC3EF,EAAW,GAEb,IAAMG,EAAQC,KAAKC,IAAIR,EAAUb,KAAOgB,GAClCM,EAAOF,KAAKC,IAAIR,EAAUZ,IAAMF,EAAWE,IAAMgB,IACnDG,KAAKC,IAAId,EAAWP,KAAOmB,GAAS,GAAKC,KAAKC,IAAId,EAAWN,IAAMqB,GAAQ,IAC7Ed,EAAc,CAAER,KAAMmB,EAAOlB,IAAKqB,GAErC,CACF,GAAE,CAAC1D,EAAe4C,EAAeD,EAAYd,IAE9C,IAAM8B,EPlDsB,SAACpE,OAAEC,EAAKD,EAAAC,MAAEE,EAAKH,EAAAG,MAC7C,OAAAO,EAAAA,SAAAA,WAAA,CAAA,EARqC,SAACT,GACtC,MAAO,CACLC,gBAAiBD,EAAMoE,MAAMC,QAAQC,UACrCnE,aAAcH,EAAMuE,OAAOC,OAAO,GAEtC,CAIOC,CAAwBzE,IAC3B,CAAAE,SAEJ,CO6C0BwE,CAAiB,CAAE1E,MAAKA,EAAEE,MAAKA,IAC/CyE,EAAclD,EAAAA,IAAC9B,gBAAkBwE,EAAa,CAAAzC,SAAGA,KACjDkD,EAAgBpE,IAAkBd,QAAAA,eAAegB,KAAO,SAAW,MACnEmE,EAAcrE,IAAkBd,QAAAA,eAAekB,GAAK,SAAW,MAE/DkE,cACJhC,IAAGA,GACAX,EAAU4C,OAGf,OACEC,6BACG3C,EACCZ,MAACwD,EAAepF,QAAAY,EAAAA,SAAA,CAACyE,UAAW3C,EAAc4C,KAAM,SAACzD,GAAa,OAAAD,EAACE,IAAAyD,EAAMA,iBAAE1D,MAAkB,CAAAA,SACvFD,EAAAA,IAAC4D,EAAAA,WAAU5E,EAAAA,SAAA,CAAC6E,KAAK,OAAOC,GAAIlD,GAC1B,CAAAX,SAAAsD,EAAAQ,KAACC,EAASA,UACRhF,EAAAA,SAAA,CAAAgC,GAAIA,EACJiD,SAAS,WACT5C,IAAKO,EACLT,KAAMO,EAAWP,KACjBC,IAAKM,EAAWN,IAChB8C,OAAQ3F,EAAM2F,OAAOtB,qBAEnB7D,IAAkBd,QAAAA,eAAegB,MAAQF,IAAkBd,QAAAA,eAAeqB,QAC1EiE,EAAAA,KAACS,EAAAA,sBAAUtE,QAAQ,OAAOC,WAAW,SAASwE,cAAehB,cAC1DD,EACDlD,EAAAA,IAACH,EAAY,CAACd,cAAeA,SAI/BA,IAAkBd,QAAcA,eAACkB,IAAMJ,IAAkBd,QAAcA,eAACmB,OACxEmE,EAACQ,KAAAC,EAASA,sBAACtE,QAAQ,OAAOC,WAAW,SAASwE,cAAef,cAC3DpD,EAACE,IAAAL,GAAad,cAAeA,IAC5BmE,gBAMT,KACHkB,EAAKhG,QAACiG,eAAe3D,GAAa0D,EAAAA,QAAME,aAAa5D,EAAW2C,GAAkB3C,IAGzF"}

package/dist/ct-design-tooltip.browser.esm.js

@@ -0,0 +1,2 @@
+import{__assign as r,__makeTemplateObject as t}from"tslib";import{jsx as n,jsxs as e,Fragment as i}from"react/jsx-runtime";import o,{forwardRef as a,useRef as d,useState as c}from"react";import l from"@cleartrip/ct-design-use-theme";import{Container as s}from"@cleartrip/ct-design-container";import f,{css as m}from"styled-components";import{TooltipChevronDown as p}from"@cleartrip/ct-design-icons";import{Portal as g}from"@cleartrip/ct-design-portal";import u from"@cleartrip/ct-design-conditional-wrap";import h from"@cleartrip/ct-design-use-merge-refs";import w from"@cleartrip/ct-design-use-isomorphic-effect";import{Transition as b}from"@cleartrip/ct-design-transition";var v;!function(r){r.LEFT="left",r.RIGHT="right",r.UP="up",r.DOWN="down"}(v||(v={}));var R,x=f.div((function(r){var n=r.theme;return function(r){var n=r.backgroundColor,e=r.width,i=r.theme,o=r.borderRadius;return m(R||(R=t(["\n    background-color: ",";\n    border-radius: ",";\n    display: flex;\n    width: ",";\n    align-items: center;\n    justify-content: center;\n    padding-top: ",";\n    padding-bottom: ",";\n    padding-left: ",";\n    padding-right: ",";\n  "],["\n    background-color: ",";\n    border-radius: ",";\n    display: flex;\n    width: ",";\n    align-items: center;\n    justify-content: center;\n    padding-top: ",";\n    padding-bottom: ",";\n    padding-left: ",";\n    padding-right: ",";\n  "])),n,o,e,i.spacing[1],i.spacing[1],i.spacing[2],i.spacing[2])}({backgroundColor:r.backgroundColor,width:r.width,theme:n,borderRadius:r.borderRadius})})),y=function(t){var n=t.arrowPosition;return r({},function(r){switch(r){case v.DOWN:return{transform:"rotate(0deg)"};case v.UP:return{transform:"rotate(180deg)"};case v.LEFT:return{marginRight:"-6px",transform:"rotate(90deg)"};case v.RIGHT:return{marginLeft:"-6px",transform:"rotate(-90deg)"};default:return{transform:"rotate(0deg)"}}}(n))},P=f.div((function(r){return function(r){return r.theme,{display:"flex",alignItems:"center",transform:r.transform,marginLeft:r.marginLeft,marginRight:r.marginRight}}({theme:r.theme,transform:r.transform,marginLeft:r.marginLeft,marginRight:r.marginRight})})),I=function(t){l();var e=y(t);return n(P,r({},e,{children:n(p,{})}))},L=a((function(t,a){var f=t.width,m=void 0===f?"":f,p=t.arrowPosition,R=void 0===p?v.UP:p,y=t.children,P=void 0===y?null:y,L=t.container,D=t.open,k=void 0!==D&&D,C=t.showInPortal,T=void 0===C||C,E=t.as,U=void 0===E?"div":E,M=t.layoutDiff,N=void 0===M?{left:0,top:0}:M,O=l(),W=d(null),j=d(null),B=c({left:0,top:0}),F=B[0],G=B[1],H=h(a,j);w((function(){if(W.current&&j.current){var r=W.current.getBoundingClientRect(),t=j.current.getBoundingClientRect(),n=0,e=0;"left"!==R&&"right"!==R||(n="right"===R?-t.width:N.left+r.width,e=-4),"up"!==R&&"down"!==R||(e="down"===R?-t.height:t.height,n=8);var i=Math.abs(r.left+n),o=Math.abs(r.top+N.top+e);(Math.abs(F.left-i)>1||Math.abs(F.top-o)>1)&&G({left:i,top:o})}}),[R,G,F,k]);var z=function(t){var n=t.theme,e=t.width;return r(r({},function(r){return{backgroundColor:r.color.tooltip.primaryBg,borderRadius:r.border.radius[4]}}(n)),{width:e})}({theme:O,width:m}),V=n(x,r({},z,{children:P})),q=R===v.DOWN?"column":"row",A=R===v.UP?"column":"row",J=r({ref:W},L.props);return e(i,{children:[k?n(u,r({condition:T,wrap:function(r){return n(g,{children:r})}},{children:n(b,r({type:"fade",in:k},{children:e(s,r({as:U,position:"absolute",ref:H,left:F.left,top:F.top,zIndex:O.zIndex.tooltip},{children:[(R===v.DOWN||R===v.RIGHT)&&e(s,r({display:"flex",alignItems:"center",flexDirection:q},{children:[V,n(I,{arrowPosition:R})]})),(R===v.UP||R===v.LEFT)&&e(s,r({display:"flex",alignItems:"center",flexDirection:A},{children:[n(I,{arrowPosition:R}),V]}))]}))}))})):null,o.isValidElement(L)?o.cloneElement(L,J):L]})}));export{v as ArrowDirection,L as Tooltip};
+//# sourceMappingURL=ct-design-tooltip.browser.esm.js.map

package/dist/ct-design-tooltip.browser.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-tooltip.browser.esm.js","sources":["../../packages/components/Tooltip/src/type.ts","../../packages/components/Tooltip/src/style.ts","../../packages/components/Tooltip/src/StyledTooltip/StyledTooltip.tsx","../../packages/components/Tooltip/src/StyledTooltip/style.ts","../../packages/components/Tooltip/src/TooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.tsx","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/TooltipArrow.tsx","../../packages/components/Tooltip/src/Tooltip.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":["ArrowDirection","StyledTooltip","styled","div","_a","theme","backgroundColor","width","borderRadius","css","spacing","getStyledTooltipStyles","getTooltipArrowStyles","arrowPosition","__assign","DOWN","transform","UP","LEFT","marginRight","RIGHT","marginLeft","arrowStyle","StyledTooltipArrow","display","alignItems","getStyledTooltipArrowStyles","TooltipArrow","useTheme","tooltipArrow","_jsx","children","TooltipChevronDown","Tooltip","forwardRef","forwardedRef","_b","_c","_d","container","_e","open","_f","showInPortal","_g","as","_h","layoutDiff","left","top","ref","useRef","containerRef","_j","useState","childStyle","setChildStyle","mergedRef","useMergeRefs","useIsomorphicEffect","current","childMeta","getBoundingClientRect","containerMeta","leftDiff","topDiff","height","dLeft","Math","abs","dTop","tooltipStyles","color","tooltip","primaryBg","border","radius","getDefaultTooltipStyles","getTooltipStyles","tooltipBody","downRightFlex","topLeftFlex","containerProps","props","_jsxs","ConditionalWrap","condition","wrap","Portal","Transition","type","in","Container","position","zIndex","flexDirection","React","isValidElement","cloneElement"],"mappings":"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"}

package/dist/ct-design-tooltip.cjs.js

@@ -0,0 +1,160 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useTheme = require('@cleartrip/ct-design-use-theme');
+var ctDesignContainer = require('@cleartrip/ct-design-container');
+var styled = require('styled-components');
+var ctDesignIcons = require('@cleartrip/ct-design-icons');
+var ctDesignPortal = require('@cleartrip/ct-design-portal');
+var ConditionalWrap = require('@cleartrip/ct-design-conditional-wrap');
+var useMergeRefs = require('@cleartrip/ct-design-use-merge-refs');
+var useIsomorphicEffect = require('@cleartrip/ct-design-use-isomorphic-effect');
+var ctDesignTransition = require('@cleartrip/ct-design-transition');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var useTheme__default = /*#__PURE__*/_interopDefault(useTheme);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var ConditionalWrap__default = /*#__PURE__*/_interopDefault(ConditionalWrap);
+var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
+var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
+
+exports.ArrowDirection = void 0;
+(function (ArrowDirection) {
+    ArrowDirection["LEFT"] = "left";
+    ArrowDirection["RIGHT"] = "right";
+    ArrowDirection["UP"] = "up";
+    ArrowDirection["DOWN"] = "down";
+})(exports.ArrowDirection || (exports.ArrowDirection = {}));
+
+var getDefaultTooltipStyles = function (theme) {
+    return {
+        backgroundColor: theme.color.tooltip.primaryBg,
+        borderRadius: theme.border.radius[4],
+    };
+};
+var getTooltipStyles = function (_a) {
+    var theme = _a.theme, width = _a.width;
+    return tslib.__assign(tslib.__assign({}, getDefaultTooltipStyles(theme)), { width: width });
+};
+
+var getStyledTooltipStyles = function (_a) {
+    var backgroundColor = _a.backgroundColor, width = _a.width, theme = _a.theme, borderRadius = _a.borderRadius;
+    return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    display: flex;\n    width: ", ";\n    align-items: center;\n    justify-content: center;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    display: flex;\n    width: ", ";\n    align-items: center;\n    justify-content: center;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), backgroundColor, borderRadius, width, theme.spacing[1], theme.spacing[1], theme.spacing[2], theme.spacing[2]);
+};
+var templateObject_1;
+
+var StyledTooltip = styled__default.default.div(function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor, width = _a.width, borderRadius = _a.borderRadius;
+    return getStyledTooltipStyles({
+        backgroundColor: backgroundColor,
+        width: width,
+        theme: theme,
+        borderRadius: borderRadius,
+    });
+});
+
+var arrowStyle = function (arrowPosition) {
+    switch (arrowPosition) {
+        case exports.ArrowDirection.DOWN: {
+            return {
+                transform: 'rotate(0deg)',
+            };
+        }
+        case exports.ArrowDirection.UP: {
+            return {
+                transform: 'rotate(180deg)',
+            };
+        }
+        case exports.ArrowDirection.LEFT: {
+            return {
+                marginRight: '-6px',
+                transform: 'rotate(90deg)',
+            };
+        }
+        case exports.ArrowDirection.RIGHT: {
+            return {
+                marginLeft: '-6px',
+                transform: 'rotate(-90deg)',
+            };
+        }
+        default: {
+            return {
+                transform: 'rotate(0deg)',
+            };
+        }
+    }
+};
+var getTooltipArrowStyles = function (_a) {
+    var arrowPosition = _a.arrowPosition;
+    return tslib.__assign({}, arrowStyle(arrowPosition));
+};
+
+var getStyledTooltipArrowStyles = function (_a) {
+    _a.theme; var transform = _a.transform, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        transform: transform,
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+    };
+};
+
+var StyledTooltipArrow = styled__default.default.div(function (_a) {
+    var theme = _a.theme, transform = _a.transform, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+    return getStyledTooltipArrowStyles({
+        theme: theme,
+        transform: transform,
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+    });
+});
+
+var TooltipArrow = function (arrowPosition) {
+    useTheme__default.default();
+    var tooltipArrow = getTooltipArrowStyles(arrowPosition);
+    return (jsxRuntime.jsx(StyledTooltipArrow, tslib.__assign({}, tooltipArrow, { children: jsxRuntime.jsx(ctDesignIcons.TooltipChevronDown, {}) })));
+};
+
+var Tooltip = React.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.width, width = _b === void 0 ? '' : _b, _c = _a.arrowPosition, arrowPosition = _c === void 0 ? exports.ArrowDirection.UP : _c, _d = _a.children, children = _d === void 0 ? null : _d, container = _a.container, _e = _a.open, open = _e === void 0 ? false : _e, _f = _a.showInPortal, showInPortal = _f === void 0 ? true : _f, _g = _a.as, as = _g === void 0 ? 'div' : _g, _h = _a.layoutDiff, layoutDiff = _h === void 0 ? { left: 0, top: 0 } : _h;
+    var theme = useTheme__default.default();
+    var ref = React.useRef(null);
+    var containerRef = React.useRef(null);
+    var _j = React.useState({ left: 0, top: 0 }), childStyle = _j[0], setChildStyle = _j[1];
+    var mergedRef = useMergeRefs__default.default(forwardedRef, containerRef);
+    useIsomorphicEffect__default.default(function () {
+        if (ref.current && containerRef.current) {
+            var childMeta = ref.current.getBoundingClientRect();
+            var containerMeta = containerRef.current.getBoundingClientRect();
+            var leftDiff = 0;
+            var topDiff = 0;
+            if (arrowPosition === 'left' || arrowPosition === 'right') {
+                leftDiff = arrowPosition === 'right' ? -containerMeta.width : layoutDiff.left + childMeta.width;
+                topDiff = -4;
+            }
+            if (arrowPosition === 'up' || arrowPosition === 'down') {
+                topDiff = arrowPosition === 'down' ? -containerMeta.height : containerMeta.height;
+                leftDiff = 8;
+            }
+            var dLeft = Math.abs(childMeta.left + leftDiff);
+            var dTop = Math.abs(childMeta.top + layoutDiff.top + topDiff);
+            if (Math.abs(childStyle.left - dLeft) > 1 || Math.abs(childStyle.top - dTop) > 1) {
+                setChildStyle({ left: dLeft, top: dTop });
+            }
+        }
+    }, [arrowPosition, setChildStyle, childStyle, open]);
+    var tooltipStyles = getTooltipStyles({ theme: theme, width: width });
+    var tooltipBody = jsxRuntime.jsx(StyledTooltip, tslib.__assign({}, tooltipStyles, { children: children }));
+    var downRightFlex = arrowPosition === exports.ArrowDirection.DOWN ? 'column' : 'row';
+    var topLeftFlex = arrowPosition === exports.ArrowDirection.UP ? 'column' : 'row';
+    var containerProps = tslib.__assign({ ref: ref }, container.props);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [open ? (jsxRuntime.jsx(ConditionalWrap__default.default, tslib.__assign({ condition: showInPortal, wrap: function (children) { return jsxRuntime.jsx(ctDesignPortal.Portal, { children: children }); } }, { children: jsxRuntime.jsx(ctDesignTransition.Transition, tslib.__assign({ type: 'fade', in: open }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ as: as, position: 'absolute', ref: mergedRef, left: childStyle.left, top: childStyle.top, zIndex: theme.zIndex.tooltip }, { children: [(arrowPosition === exports.ArrowDirection.DOWN || arrowPosition === exports.ArrowDirection.RIGHT) && (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', flexDirection: downRightFlex }, { children: [tooltipBody, jsxRuntime.jsx(TooltipArrow, { arrowPosition: arrowPosition })] }))), (arrowPosition === exports.ArrowDirection.UP || arrowPosition === exports.ArrowDirection.LEFT) && (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', flexDirection: topLeftFlex }, { children: [jsxRuntime.jsx(TooltipArrow, { arrowPosition: arrowPosition }), tooltipBody] })))] })) })) }))) : null, React__default.default.isValidElement(container) ? React__default.default.cloneElement(container, containerProps) : container] }));
+});
+
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=ct-design-tooltip.cjs.js.map

package/dist/ct-design-tooltip.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-tooltip.cjs.js","sources":["../../packages/components/Tooltip/src/type.ts","../../packages/components/Tooltip/src/style.ts","../../packages/components/Tooltip/src/StyledTooltip/style.ts","../../packages/components/Tooltip/src/StyledTooltip/StyledTooltip.tsx","../../packages/components/Tooltip/src/TooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.tsx","../../packages/components/Tooltip/src/TooltipArrow/TooltipArrow.tsx","../../packages/components/Tooltip/src/Tooltip.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":["ArrowDirection","__assign","css","styled","useTheme","_jsx","TooltipChevronDown","forwardRef","useRef","useState","useMergeRefs","useIsomorphicEffect","_jsxs","ConditionalWrap","Portal","Transition","Container","React"],"mappings":"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"}

package/dist/ct-design-tooltip.esm.js

@@ -0,0 +1,149 @@
+import { __assign, __makeTemplateObject } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, useRef, useState } from 'react';
+import useTheme from '@cleartrip/ct-design-use-theme';
+import { Container } from '@cleartrip/ct-design-container';
+import styled, { css } from 'styled-components';
+import { TooltipChevronDown } from '@cleartrip/ct-design-icons';
+import { Portal } from '@cleartrip/ct-design-portal';
+import ConditionalWrap from '@cleartrip/ct-design-conditional-wrap';
+import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
+import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
+import { Transition } from '@cleartrip/ct-design-transition';
+
+var ArrowDirection;
+(function (ArrowDirection) {
+    ArrowDirection["LEFT"] = "left";
+    ArrowDirection["RIGHT"] = "right";
+    ArrowDirection["UP"] = "up";
+    ArrowDirection["DOWN"] = "down";
+})(ArrowDirection || (ArrowDirection = {}));
+
+var getDefaultTooltipStyles = function (theme) {
+    return {
+        backgroundColor: theme.color.tooltip.primaryBg,
+        borderRadius: theme.border.radius[4],
+    };
+};
+var getTooltipStyles = function (_a) {
+    var theme = _a.theme, width = _a.width;
+    return __assign(__assign({}, getDefaultTooltipStyles(theme)), { width: width });
+};
+
+var getStyledTooltipStyles = function (_a) {
+    var backgroundColor = _a.backgroundColor, width = _a.width, theme = _a.theme, borderRadius = _a.borderRadius;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    display: flex;\n    width: ", ";\n    align-items: center;\n    justify-content: center;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    display: flex;\n    width: ", ";\n    align-items: center;\n    justify-content: center;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), backgroundColor, borderRadius, width, theme.spacing[1], theme.spacing[1], theme.spacing[2], theme.spacing[2]);
+};
+var templateObject_1;
+
+var StyledTooltip = styled.div(function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor, width = _a.width, borderRadius = _a.borderRadius;
+    return getStyledTooltipStyles({
+        backgroundColor: backgroundColor,
+        width: width,
+        theme: theme,
+        borderRadius: borderRadius,
+    });
+});
+
+var arrowStyle = function (arrowPosition) {
+    switch (arrowPosition) {
+        case ArrowDirection.DOWN: {
+            return {
+                transform: 'rotate(0deg)',
+            };
+        }
+        case ArrowDirection.UP: {
+            return {
+                transform: 'rotate(180deg)',
+            };
+        }
+        case ArrowDirection.LEFT: {
+            return {
+                marginRight: '-6px',
+                transform: 'rotate(90deg)',
+            };
+        }
+        case ArrowDirection.RIGHT: {
+            return {
+                marginLeft: '-6px',
+                transform: 'rotate(-90deg)',
+            };
+        }
+        default: {
+            return {
+                transform: 'rotate(0deg)',
+            };
+        }
+    }
+};
+var getTooltipArrowStyles = function (_a) {
+    var arrowPosition = _a.arrowPosition;
+    return __assign({}, arrowStyle(arrowPosition));
+};
+
+var getStyledTooltipArrowStyles = function (_a) {
+    _a.theme; var transform = _a.transform, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        transform: transform,
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+    };
+};
+
+var StyledTooltipArrow = styled.div(function (_a) {
+    var theme = _a.theme, transform = _a.transform, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+    return getStyledTooltipArrowStyles({
+        theme: theme,
+        transform: transform,
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+    });
+});
+
+var TooltipArrow = function (arrowPosition) {
+    useTheme();
+    var tooltipArrow = getTooltipArrowStyles(arrowPosition);
+    return (jsx(StyledTooltipArrow, __assign({}, tooltipArrow, { children: jsx(TooltipChevronDown, {}) })));
+};
+
+var Tooltip = forwardRef(function (_a, forwardedRef) {
+    var _b = _a.width, width = _b === void 0 ? '' : _b, _c = _a.arrowPosition, arrowPosition = _c === void 0 ? ArrowDirection.UP : _c, _d = _a.children, children = _d === void 0 ? null : _d, container = _a.container, _e = _a.open, open = _e === void 0 ? false : _e, _f = _a.showInPortal, showInPortal = _f === void 0 ? true : _f, _g = _a.as, as = _g === void 0 ? 'div' : _g, _h = _a.layoutDiff, layoutDiff = _h === void 0 ? { left: 0, top: 0 } : _h;
+    var theme = useTheme();
+    var ref = useRef(null);
+    var containerRef = useRef(null);
+    var _j = useState({ left: 0, top: 0 }), childStyle = _j[0], setChildStyle = _j[1];
+    var mergedRef = useMergeRefs(forwardedRef, containerRef);
+    useIsomorphicEffect(function () {
+        if (ref.current && containerRef.current) {
+            var childMeta = ref.current.getBoundingClientRect();
+            var containerMeta = containerRef.current.getBoundingClientRect();
+            var leftDiff = 0;
+            var topDiff = 0;
+            if (arrowPosition === 'left' || arrowPosition === 'right') {
+                leftDiff = arrowPosition === 'right' ? -containerMeta.width : layoutDiff.left + childMeta.width;
+                topDiff = -4;
+            }
+            if (arrowPosition === 'up' || arrowPosition === 'down') {
+                topDiff = arrowPosition === 'down' ? -containerMeta.height : containerMeta.height;
+                leftDiff = 8;
+            }
+            var dLeft = Math.abs(childMeta.left + leftDiff);
+            var dTop = Math.abs(childMeta.top + layoutDiff.top + topDiff);
+            if (Math.abs(childStyle.left - dLeft) > 1 || Math.abs(childStyle.top - dTop) > 1) {
+                setChildStyle({ left: dLeft, top: dTop });
+            }
+        }
+    }, [arrowPosition, setChildStyle, childStyle, open]);
+    var tooltipStyles = getTooltipStyles({ theme: theme, width: width });
+    var tooltipBody = jsx(StyledTooltip, __assign({}, tooltipStyles, { children: children }));
+    var downRightFlex = arrowPosition === ArrowDirection.DOWN ? 'column' : 'row';
+    var topLeftFlex = arrowPosition === ArrowDirection.UP ? 'column' : 'row';
+    var containerProps = __assign({ ref: ref }, container.props);
+    return (jsxs(Fragment, { children: [open ? (jsx(ConditionalWrap, __assign({ condition: showInPortal, wrap: function (children) { return jsx(Portal, { children: children }); } }, { children: jsx(Transition, __assign({ type: 'fade', in: open }, { children: jsxs(Container, __assign({ as: as, position: 'absolute', ref: mergedRef, left: childStyle.left, top: childStyle.top, zIndex: theme.zIndex.tooltip }, { children: [(arrowPosition === ArrowDirection.DOWN || arrowPosition === ArrowDirection.RIGHT) && (jsxs(Container, __assign({ display: 'flex', alignItems: 'center', flexDirection: downRightFlex }, { children: [tooltipBody, jsx(TooltipArrow, { arrowPosition: arrowPosition })] }))), (arrowPosition === ArrowDirection.UP || arrowPosition === ArrowDirection.LEFT) && (jsxs(Container, __assign({ display: 'flex', alignItems: 'center', flexDirection: topLeftFlex }, { children: [jsx(TooltipArrow, { arrowPosition: arrowPosition }), tooltipBody] })))] })) })) }))) : null, React.isValidElement(container) ? React.cloneElement(container, containerProps) : container] }));
+});
+
+export { ArrowDirection, Tooltip };
+//# sourceMappingURL=ct-design-tooltip.esm.js.map

package/dist/ct-design-tooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct-design-tooltip.esm.js","sources":["../../packages/components/Tooltip/src/type.ts","../../packages/components/Tooltip/src/style.ts","../../packages/components/Tooltip/src/StyledTooltip/style.ts","../../packages/components/Tooltip/src/StyledTooltip/StyledTooltip.tsx","../../packages/components/Tooltip/src/TooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/style.ts","../../packages/components/Tooltip/src/TooltipArrow/StyledTooltipArrow/StyledTooltipArrow.tsx","../../packages/components/Tooltip/src/TooltipArrow/TooltipArrow.tsx","../../packages/components/Tooltip/src/Tooltip.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/ct-design-tooltip.umd.js

@@ -0,0 +1,194 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-use-theme'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-portal'), require('@cleartrip/ct-design-conditional-wrap'), require('@cleartrip/ct-design-use-merge-refs'), require('@cleartrip/ct-design-use-isomorphic-effect'), require('@cleartrip/ct-design-transition')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-use-theme', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-portal', '@cleartrip/ct-design-conditional-wrap', '@cleartrip/ct-design-use-merge-refs', '@cleartrip/ct-design-use-isomorphic-effect', '@cleartrip/ct-design-transition'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemTooltip = {}, global.jsxRuntime, global.React, global.useTheme, global.ctDesignContainer, global.styled, global.ctDesignIcons, global.ctDesignPortal, global.ConditionalWrap, global.useMergeRefs, global.useIsomorphicEffect, global.ctDesignTransition));
+})(this, (function (exports, jsxRuntime, React, useTheme, ctDesignContainer, styled, ctDesignIcons, ctDesignPortal, ConditionalWrap, useMergeRefs, useIsomorphicEffect, ctDesignTransition) { 'use strict';
+
+    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+    var React__default = /*#__PURE__*/_interopDefault(React);
+    var useTheme__default = /*#__PURE__*/_interopDefault(useTheme);
+    var styled__default = /*#__PURE__*/_interopDefault(styled);
+    var ConditionalWrap__default = /*#__PURE__*/_interopDefault(ConditionalWrap);
+    var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
+    var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol */
+
+    var __assign = function () {
+      __assign = Object.assign || function __assign(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);
+    };
+    function __makeTemplateObject(cooked, raw) {
+      if (Object.defineProperty) {
+        Object.defineProperty(cooked, "raw", {
+          value: raw
+        });
+      } else {
+        cooked.raw = raw;
+      }
+      return cooked;
+    }
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    exports.ArrowDirection = void 0;
+    (function (ArrowDirection) {
+        ArrowDirection["LEFT"] = "left";
+        ArrowDirection["RIGHT"] = "right";
+        ArrowDirection["UP"] = "up";
+        ArrowDirection["DOWN"] = "down";
+    })(exports.ArrowDirection || (exports.ArrowDirection = {}));
+
+    var getDefaultTooltipStyles = function (theme) {
+        return {
+            backgroundColor: theme.color.tooltip.primaryBg,
+            borderRadius: theme.border.radius[4],
+        };
+    };
+    var getTooltipStyles = function (_a) {
+        var theme = _a.theme, width = _a.width;
+        return __assign(__assign({}, getDefaultTooltipStyles(theme)), { width: width });
+    };
+
+    var getStyledTooltipStyles = function (_a) {
+        var backgroundColor = _a.backgroundColor, width = _a.width, theme = _a.theme, borderRadius = _a.borderRadius;
+        return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    display: flex;\n    width: ", ";\n    align-items: center;\n    justify-content: center;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    display: flex;\n    width: ", ";\n    align-items: center;\n    justify-content: center;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), backgroundColor, borderRadius, width, theme.spacing[1], theme.spacing[1], theme.spacing[2], theme.spacing[2]);
+    };
+    var templateObject_1;
+
+    var StyledTooltip = styled__default.default.div(function (_a) {
+        var theme = _a.theme, backgroundColor = _a.backgroundColor, width = _a.width, borderRadius = _a.borderRadius;
+        return getStyledTooltipStyles({
+            backgroundColor: backgroundColor,
+            width: width,
+            theme: theme,
+            borderRadius: borderRadius,
+        });
+    });
+
+    var arrowStyle = function (arrowPosition) {
+        switch (arrowPosition) {
+            case exports.ArrowDirection.DOWN: {
+                return {
+                    transform: 'rotate(0deg)',
+                };
+            }
+            case exports.ArrowDirection.UP: {
+                return {
+                    transform: 'rotate(180deg)',
+                };
+            }
+            case exports.ArrowDirection.LEFT: {
+                return {
+                    marginRight: '-6px',
+                    transform: 'rotate(90deg)',
+                };
+            }
+            case exports.ArrowDirection.RIGHT: {
+                return {
+                    marginLeft: '-6px',
+                    transform: 'rotate(-90deg)',
+                };
+            }
+            default: {
+                return {
+                    transform: 'rotate(0deg)',
+                };
+            }
+        }
+    };
+    var getTooltipArrowStyles = function (_a) {
+        var arrowPosition = _a.arrowPosition;
+        return __assign({}, arrowStyle(arrowPosition));
+    };
+
+    var getStyledTooltipArrowStyles = function (_a) {
+        _a.theme; var transform = _a.transform, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            transform: transform,
+            marginLeft: marginLeft,
+            marginRight: marginRight,
+        };
+    };
+
+    var StyledTooltipArrow = styled__default.default.div(function (_a) {
+        var theme = _a.theme, transform = _a.transform, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
+        return getStyledTooltipArrowStyles({
+            theme: theme,
+            transform: transform,
+            marginLeft: marginLeft,
+            marginRight: marginRight,
+        });
+    });
+
+    var TooltipArrow = function (arrowPosition) {
+        useTheme__default.default();
+        var tooltipArrow = getTooltipArrowStyles(arrowPosition);
+        return (jsxRuntime.jsx(StyledTooltipArrow, __assign({}, tooltipArrow, { children: jsxRuntime.jsx(ctDesignIcons.TooltipChevronDown, {}) })));
+    };
+
+    var Tooltip = React.forwardRef(function (_a, forwardedRef) {
+        var _b = _a.width, width = _b === void 0 ? '' : _b, _c = _a.arrowPosition, arrowPosition = _c === void 0 ? exports.ArrowDirection.UP : _c, _d = _a.children, children = _d === void 0 ? null : _d, container = _a.container, _e = _a.open, open = _e === void 0 ? false : _e, _f = _a.showInPortal, showInPortal = _f === void 0 ? true : _f, _g = _a.as, as = _g === void 0 ? 'div' : _g, _h = _a.layoutDiff, layoutDiff = _h === void 0 ? { left: 0, top: 0 } : _h;
+        var theme = useTheme__default.default();
+        var ref = React.useRef(null);
+        var containerRef = React.useRef(null);
+        var _j = React.useState({ left: 0, top: 0 }), childStyle = _j[0], setChildStyle = _j[1];
+        var mergedRef = useMergeRefs__default.default(forwardedRef, containerRef);
+        useIsomorphicEffect__default.default(function () {
+            if (ref.current && containerRef.current) {
+                var childMeta = ref.current.getBoundingClientRect();
+                var containerMeta = containerRef.current.getBoundingClientRect();
+                var leftDiff = 0;
+                var topDiff = 0;
+                if (arrowPosition === 'left' || arrowPosition === 'right') {
+                    leftDiff = arrowPosition === 'right' ? -containerMeta.width : layoutDiff.left + childMeta.width;
+                    topDiff = -4;
+                }
+                if (arrowPosition === 'up' || arrowPosition === 'down') {
+                    topDiff = arrowPosition === 'down' ? -containerMeta.height : containerMeta.height;
+                    leftDiff = 8;
+                }
+                var dLeft = Math.abs(childMeta.left + leftDiff);
+                var dTop = Math.abs(childMeta.top + layoutDiff.top + topDiff);
+                if (Math.abs(childStyle.left - dLeft) > 1 || Math.abs(childStyle.top - dTop) > 1) {
+                    setChildStyle({ left: dLeft, top: dTop });
+                }
+            }
+        }, [arrowPosition, setChildStyle, childStyle, open]);
+        var tooltipStyles = getTooltipStyles({ theme: theme, width: width });
+        var tooltipBody = jsxRuntime.jsx(StyledTooltip, __assign({}, tooltipStyles, { children: children }));
+        var downRightFlex = arrowPosition === exports.ArrowDirection.DOWN ? 'column' : 'row';
+        var topLeftFlex = arrowPosition === exports.ArrowDirection.UP ? 'column' : 'row';
+        var containerProps = __assign({ ref: ref }, container.props);
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [open ? (jsxRuntime.jsx(ConditionalWrap__default.default, __assign({ condition: showInPortal, wrap: function (children) { return jsxRuntime.jsx(ctDesignPortal.Portal, { children: children }); } }, { children: jsxRuntime.jsx(ctDesignTransition.Transition, __assign({ type: 'fade', in: open }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ as: as, position: 'absolute', ref: mergedRef, left: childStyle.left, top: childStyle.top, zIndex: theme.zIndex.tooltip }, { children: [(arrowPosition === exports.ArrowDirection.DOWN || arrowPosition === exports.ArrowDirection.RIGHT) && (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ display: 'flex', alignItems: 'center', flexDirection: downRightFlex }, { children: [tooltipBody, jsxRuntime.jsx(TooltipArrow, { arrowPosition: arrowPosition })] }))), (arrowPosition === exports.ArrowDirection.UP || arrowPosition === exports.ArrowDirection.LEFT) && (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ display: 'flex', alignItems: 'center', flexDirection: topLeftFlex }, { children: [jsxRuntime.jsx(TooltipArrow, { arrowPosition: arrowPosition }), tooltipBody] })))] })) })) }))) : null, React__default.default.isValidElement(container) ? React__default.default.cloneElement(container, containerProps) : container] }));
+    });
+
+    exports.Tooltip = Tooltip;
+
+}));
+//# sourceMappingURL=ct-design-tooltip.umd.js.map