@dotss/ui 0.0.8 → 0.0.11

package/dist/TextArea/TextArea.es.js

@@ -1,222 +0,0 @@
-import { jsxs as g, jsx as p } from "@emotion/react/jsx-runtime";
-import { forwardRef as A, useRef as m, useState as j, useId as F, useEffect as M } from "react";
-import l from "@emotion/styled";
-const T = l.div`
-  position: relative;
-  border-radius: 12px;
-  height: auto;
-  overflow: hidden;
-
-  ${({
-  theme: {
-    palette: { brand: t, background: i, grey: n }
-  },
-  variant: c,
-  isFocused: r
-}) => c === "filled" ? {
-  backgroundColor: i.primary,
-  border: "1px solid transparent"
-} : c === "outlined" ? r ? {
-  backgroundColor: n.white,
-  border: `1px solid ${t.primary.line}`
-} : {
-  backgroundColor: n.white,
-  border: `1px solid ${n[50]}`
-} : {}};
-
-  ${({
-  theme: {
-    palette: { etc: t }
-  },
-  variant: i,
-  helper: n
-}) => i === "outlined" && ((n == null ? void 0 : n.severity) === "error" || n != null && n.message) ? {
-  borderColor: t.red
-} : {}}
-
-  ${({
-  theme: {
-    palette: { grey: t }
-  },
-  variant: i,
-  disabled: n
-}) => i === "outlined" && n ? {
-  backgroundColor: t[10],
-  borderColor: t[30]
-} : {}}
-
-  ${({ fullWidth: t }) => t ? {
-  width: "100%"
-} : {}}
-`, q = l.textarea`
-  width: 100%;
-  overflow: hidden;
-  resize: none;
-  border: none;
-  outline: 0;
-  background: transparent;
-  padding: ${({ theme: t }) => `${t.spacing.content(3)}px ${t.spacing.content(4)}px ${t.spacing.content(2)}px`};
-  min-height: ${({ minHeight: t }) => t}px;
-
-  ${({
-  theme: {
-    typography: { b2R: t }
-  }
-}) => ({
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing
-})};
-
-  @media (max-width: 360px) {
-    ${({
-  theme: {
-    typography: { b3R: t }
-  }
-}) => ({
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing
-})};
-  }
-
-  &::placeholder {
-    color: ${({ theme: t }) => t.palette.grey[50]};
-    text-align: justify;
-  }
-
-  &[disabled] {
-    color: ${({ theme: t }) => t.palette.grey[30]};
-    cursor: not-allowed;
-  }
-
-  &[disabled]::placeholder {
-    color: ${({ theme: t }) => t.palette.grey[30]};
-  }
-`, B = l.div`
-  color: ${({ theme: t, disabled: i }) => i ? t.palette.grey[30] : t.palette.grey[50]};
-  text-align: right;
-  padding-right: ${({ theme: t }) => t.spacing.content(4)}px;
-  padding-bottom: ${({ theme: t }) => t.spacing.content(3)}px;
-
-  ${({
-  theme: {
-    typography: { b4R: t }
-  }
-}) => ({
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing
-})};
-
-  & > span {
-    color: ${({ theme: t, disabled: i }) => i ? t.palette.grey[30] : t.palette.grey[100]};
-  }
-`, I = l.p`
-  margin-top: ${({ theme: { spacing: t } }) => t.content(1)}px;
-  color: ${({ theme: t }) => t.palette.etc.red};
-
-  ${({
-  theme: {
-    typography: { c3R: t }
-  }
-}) => ({
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing
-})};
-`, E = l.p`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-`, J = A(
-  ({
-    onChange: t,
-    value: i,
-    variant: n = "filled",
-    size: c = "large",
-    maxLength: r = 290,
-    onFocus: h,
-    onBlur: y,
-    helper: o,
-    disabled: s = !1,
-    wrapperProps: d,
-    ...S
-  }, H) => {
-    const f = m(null), u = m(c === "large" ? 112.5 : 57.5), [v, x] = j(!1), $ = F(), w = (e) => {
-      e.target.value.length > r && (e.target.value = e.target.value.slice(0, r)), typeof t == "function" && t(e);
-    }, C = (e) => {
-      x(!0), typeof h == "function" && h(e);
-    }, z = (e) => {
-      x(!1), typeof y == "function" && y(e);
-    }, b = () => {
-      var a;
-      const e = (a = f.current) == null ? void 0 : a.querySelector("textarea");
-      e && e.focus();
-    };
-    return M(() => {
-      var a;
-      const e = (a = f.current) == null ? void 0 : a.querySelector("textarea");
-      if (e) {
-        e.style.height = "auto";
-        const { scrollHeight: k, clientHeight: W } = e;
-        e.style.height = `${u.current}px`, e.style.height = `${Math.max(k, u.current, W)}px`;
-      }
-    }, [i]), /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ g(
-        T,
-        {
-          ref: f,
-          isFocused: v,
-          variant: n,
-          helper: o,
-          disabled: s,
-          ...d,
-          css: d == null ? void 0 : d.inlineCSS,
-          children: [
-            /* @__PURE__ */ p(
-              q,
-              {
-                ref: H,
-                onChange: w,
-                onFocus: C,
-                onBlur: z,
-                value: i,
-                disabled: s,
-                "aria-invalid": (o == null ? void 0 : o.severity) === "error",
-                "aria-describedby": o != null && o.message ? $ : void 0,
-                minHeight: u.current,
-                ...S
-              }
-            ),
-            /* @__PURE__ */ g(B, { disabled: s, onClick: b, children: [
-              "(",
-              /* @__PURE__ */ p("span", { children: i.length }),
-              " / ",
-              r,
-              ")"
-            ] })
-          ]
-        }
-      ),
-      (o == null ? void 0 : o.message) && !s && /* @__PURE__ */ p(I, { id: $, helper: o, children: o.message }),
-      i.length >= r && /* @__PURE__ */ g(E, { "aria-live": "assertive", role: "alert", children: [
-        "최대 입력 글자 수에 도달하였습니다. ",
-        r,
-        " 자까지 입력이 가능합니다."
-      ] })
-    ] });
-  }
-);
-export {
-  J as default
-};

package/dist/TextField/TextField.cjs

@@ -1,47 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),g=require("react"),x=require("../Icon/Icon.cjs"),z=require("@emotion/styled"),F=t=>t&&t.__esModule?t:{default:t},d=F(z),O=d.default.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  ${({fullWidth:t})=>t?{width:"100%"}:null};
-`,_=d.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
-  border: 1px solid transparent;
-
-  ${({theme:{palette:{green:t,grey:e,background:i,etc:o}},variant:f,helper:s})=>{let r={backgroundColor:e.white,borderColor:e[50],color:e[100]};switch(f){case"outlined":(s==null?void 0:s.severity)==="success"&&(r={...r,borderColor:`${t[70]} !important`}),(s==null?void 0:s.severity)==="error"&&(r={...r,borderColor:`${o.red} !important`});break;case"filled":r={backgroundColor:i.primary};break}return r}};
-
-  ${({theme:{spacing:t},size:e})=>{let i={maxHeight:48,padding:`${t.content(3)}px ${t.content(4)}px`,borderRadius:10};switch(e){case"2xLarge":i={maxHeight:80,padding:`${t.content(4)}px ${t.content(5)}px`,borderRadius:12,"& svg":{width:48,height:48}};break;case"xLarge":i={maxHeight:56,padding:t.content(4),borderRadius:12};break}return i}};
-
-  ${({theme:{palette:{brand:t}},variant:e,focus:i})=>e==="outlined"&&i?{borderColor:t.primary.line}:null};
-
-  ${({fullWidth:t})=>t?{width:"100%"}:null};
-
-  ${({theme:{palette:{grey:t}},variant:e,disabled:i})=>{if(!i)return null;let o={backgroundColor:t[10],borderColor:t[30]};switch(e){case"filled":o={backgroundColor:t[10]};break}return o}}
-`,T=d.default.input`
-  width: inherit;
-  flex-grow: 1;
-  border: none;
-  background-color: transparent;
-  outline: 0;
-
-  ${({theme:{typography:{b2R:t,h0R:e}},inputSize:i})=>i==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
-
-  &::placeholder {
-    ${({theme:{palette:{grey:t}},variant:e})=>({color:t[50]})};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    
-    ${({theme:{palette:{grey:t}}})=>({color:t[30],"&::placeholder":{color:t[30]}})}
-`,I=d.default.div`
-  position: absolute;
-  left: 0;
-  bottom: ${({inputSize:t})=>t==="2xLarge"?"-26px":"-16px"};
-  white-space: nowrap;
-  ${({theme:{typography:{c3R:t,b1R:e}},inputSize:i})=>i==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
-
-  ${({theme:{palette:{etc:t,grey:e}},helper:i})=>{const o={color:e[100]};return(i==null?void 0:i.severity)==="error"?{color:t.red}:o}}
-`,V=g.forwardRef(function({type:e,variant:i="outlined",size:o="large",startAdornment:f,endAdornment:s,fullWidth:r,helper:n,disabled:b,inlineCSS:w,onFocus:m,onBlur:p,disablePasswordVisibility:$,...j},h){const[v,S]=g.useState(!1),[l,C]=g.useState(!1),u=!$&&!s&&e==="password"&&(n==null?void 0:n.severity)!=="success",k=c=>{S(!0),typeof m=="function"&&m(c)},H=c=>{S(!1),typeof p=="function"&&p(c)},y=()=>C(c=>!c),L=()=>u&&l?"text":u&&!l?"password":e;return a.jsxs(O,{fullWidth:r,children:[a.jsxs(_,{variant:i,size:o,focus:v,fullWidth:r,helper:n,disabled:b,css:w,children:[f,a.jsx(T,{ref:h,type:L(),variant:i,inputSize:o,disabled:b,...j,onFocus:k,onBlur:H}),s,!s&&(n==null?void 0:n.severity)==="success"&&a.jsx(x.default,{name:"CheckLine",color:"green.70"}),u&&l&&a.jsx(x.default,{name:"EyeVisibleLine","data-testid":"EyeVisibleLine",onClick:y,inlineCSS:{cursor:"pointer"}}),u&&!l&&a.jsx(x.default,{name:"EyeInvisibleLine","data-testid":"EyeInvisibleLine",onClick:y,inlineCSS:{cursor:"pointer"}})]}),(n==null?void 0:n.message)&&a.jsx(I,{helper:n,inputSize:o,"data-testid":"helper",children:n==null?void 0:n.message})]})});exports.default=V;

package/dist/TextField/TextField.es.js

@@ -1,271 +0,0 @@
-import { jsxs as y, jsx as c } from "@emotion/react/jsx-runtime";
-import { forwardRef as z, useState as S } from "react";
-import f from "../Icon/Icon.es.js";
-import u from "@emotion/styled";
-const F = u.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
-`, O = u.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
-  border: 1px solid transparent;
-
-  ${({
-  theme: {
-    palette: { green: t, grey: e, background: i, etc: n }
-  },
-  variant: g,
-  helper: r
-}) => {
-  let s = {
-    backgroundColor: e.white,
-    borderColor: e[50],
-    color: e[100]
-  };
-  switch (g) {
-    case "outlined":
-      (r == null ? void 0 : r.severity) === "success" && (s = {
-        ...s,
-        borderColor: `${t[70]} !important`
-      }), (r == null ? void 0 : r.severity) === "error" && (s = {
-        ...s,
-        borderColor: `${n.red} !important`
-      });
-      break;
-    case "filled":
-      s = {
-        backgroundColor: i.primary
-      };
-      break;
-  }
-  return s;
-}};
-
-  ${({ theme: { spacing: t }, size: e }) => {
-  let i = {
-    maxHeight: 48,
-    padding: `${t.content(3)}px ${t.content(4)}px`,
-    borderRadius: 10
-  };
-  switch (e) {
-    case "2xLarge":
-      i = {
-        maxHeight: 80,
-        padding: `${t.content(4)}px ${t.content(5)}px`,
-        borderRadius: 12,
-        "& svg": {
-          width: 48,
-          height: 48
-        }
-      };
-      break;
-    case "xLarge":
-      i = {
-        maxHeight: 56,
-        padding: t.content(4),
-        borderRadius: 12
-      };
-      break;
-  }
-  return i;
-}};
-
-  ${({
-  theme: {
-    palette: { brand: t }
-  },
-  variant: e,
-  focus: i
-}) => e === "outlined" && i ? {
-  borderColor: t.primary.line
-} : null};
-
-  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
-
-  ${({
-  theme: {
-    palette: { grey: t }
-  },
-  variant: e,
-  disabled: i
-}) => {
-  if (!i) return null;
-  let n = {
-    backgroundColor: t[10],
-    borderColor: t[30]
-  };
-  switch (e) {
-    case "filled":
-      n = {
-        backgroundColor: t[10]
-      };
-      break;
-  }
-  return n;
-}}
-`, T = u.input`
-  width: inherit;
-  flex-grow: 1;
-  border: none;
-  background-color: transparent;
-  outline: 0;
-
-  ${({
-  theme: {
-    typography: { b2R: t, h0R: e }
-  },
-  inputSize: i
-}) => i === "2xLarge" ? {
-  fontSize: e.size,
-  fontWeight: e.weight,
-  lineHeight: e.lineHeight,
-  letterSpacing: e.letterSpacing
-} : {
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing
-}};
-
-  &::placeholder {
-    ${({
-  theme: {
-    palette: { grey: t }
-  },
-  variant: e
-}) => ({
-  color: t[50]
-})};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    
-    ${({
-  theme: {
-    palette: { grey: t }
-  }
-}) => ({
-  color: t[30],
-  "&::placeholder": {
-    color: t[30]
-  }
-})}
-`, I = u.div`
-  position: absolute;
-  left: 0;
-  bottom: ${({ inputSize: t }) => t === "2xLarge" ? "-26px" : "-16px"};
-  white-space: nowrap;
-  ${({
-  theme: {
-    typography: { c3R: t, b1R: e }
-  },
-  inputSize: i
-}) => i === "2xLarge" ? {
-  fontSize: e.size,
-  fontWeight: e.weight,
-  lineHeight: e.lineHeight,
-  letterSpacing: e.letterSpacing
-} : {
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing
-}};
-
-  ${({
-  theme: {
-    palette: { etc: t, grey: e }
-  },
-  helper: i
-}) => {
-  const n = {
-    color: e[100]
-  };
-  return (i == null ? void 0 : i.severity) === "error" ? {
-    color: t.red
-  } : n;
-}}
-`, P = z(function({
-  type: e,
-  variant: i = "outlined",
-  size: n = "large",
-  startAdornment: g,
-  endAdornment: r,
-  fullWidth: s,
-  helper: o,
-  disabled: m,
-  inlineCSS: $,
-  onFocus: b,
-  onBlur: p,
-  disablePasswordVisibility: h,
-  ...C
-}, k) {
-  const [v, x] = S(!1), [l, H] = S(!1), d = !h && !r && e === "password" && (o == null ? void 0 : o.severity) !== "success", L = (a) => {
-    x(!0), typeof b == "function" && b(a);
-  }, j = (a) => {
-    x(!1), typeof p == "function" && p(a);
-  }, w = () => H((a) => !a);
-  return /* @__PURE__ */ y(F, { fullWidth: s, children: [
-    /* @__PURE__ */ y(
-      O,
-      {
-        variant: i,
-        size: n,
-        focus: v,
-        fullWidth: s,
-        helper: o,
-        disabled: m,
-        css: $,
-        children: [
-          g,
-          /* @__PURE__ */ c(
-            T,
-            {
-              ref: k,
-              type: d && l ? "text" : d && !l ? "password" : e,
-              variant: i,
-              inputSize: n,
-              disabled: m,
-              ...C,
-              onFocus: L,
-              onBlur: j
-            }
-          ),
-          r,
-          !r && (o == null ? void 0 : o.severity) === "success" && /* @__PURE__ */ c(f, { name: "CheckLine", color: "green.70" }),
-          d && l && /* @__PURE__ */ c(
-            f,
-            {
-              name: "EyeVisibleLine",
-              "data-testid": "EyeVisibleLine",
-              onClick: w,
-              inlineCSS: {
-                cursor: "pointer"
-              }
-            }
-          ),
-          d && !l && /* @__PURE__ */ c(
-            f,
-            {
-              name: "EyeInvisibleLine",
-              "data-testid": "EyeInvisibleLine",
-              onClick: w,
-              inlineCSS: {
-                cursor: "pointer"
-              }
-            }
-          )
-        ]
-      }
-    ),
-    (o == null ? void 0 : o.message) && /* @__PURE__ */ c(I, { helper: o, inputSize: n, "data-testid": "helper", children: o == null ? void 0 : o.message })
-  ] });
-});
-export {
-  P as default
-};

package/dist/Tooltip/Tooltip.cjs

@@ -1,26 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),n=require("react"),p=require("../Flexbox/Flexbox.cjs"),b=require("../Icon/Icon.cjs"),k=require("../Typography/Typography.cjs"),$=require("@emotion/styled"),T=t=>t&&t.__esModule?t:{default:t},m=T($),L=m.default.div`
-  position: relative;
-  display: inline-block;
-  &[open] > .tooltip {
-    display: flex;
-  }
-`,j=m.default.div`
-  position: absolute;
-  display: none;
-  flex-direction: column;
-  gap: ${({theme:{spacing:t}})=>`${t.content(1)}px`};
-  padding: ${({theme:{spacing:t}})=>`${t.content(3)}px`};
-  border-radius: 8px;
-  width: auto;
-  height: auto;
-  max-width: 300px;
-  max-height: calc(136px - 8px);
-  z-index: 100003;
-  white-space: nowrap;
-
-  ${({theme:{palette:{brand:t,grey:r}},color:a})=>{let e={};return a==="primary"&&(e={backgroundColor:t.primary.tooltip,color:r[100]}),a==="secondary"&&(e={backgroundColor:r[80],color:r.white}),e}}
-
-  ${({theme:{typography:t}})=>({fontSize:t.b4R.size,fontWeight:t.b4R.weight,lineHeight:t.b4R.lineHeight,letterSpacing:t.b4R.letterSpacing,"& svg:not(.tooltip__closer)":{width:24,height:24}})};
-
-  ${({theme:{palette:{brand:t,grey:r}},placement:a,color:e})=>{let o={};switch(a){case"bottom-left":o={top:"-12px",left:"-6px",transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",left:"12px",borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-center":o={top:"-12px",left:"50%",transform:"translate(-50%, -100%)","&:after":{content:'""',position:"absolute",top:"100%",left:"50%",transform:"translateX(-50%)",borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-right":o={top:"-12px",right:"-6px",transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",right:"12px",borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"left-top":o={top:"-6px",left:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",top:"12px",right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-middle":o={top:"50%",left:"calc(100% + 12px)",transform:"translateY(-50%)","&:after":{content:'""',position:"absolute",top:"50%",right:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-bottom":o={bottom:"-6px",left:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",bottom:"12px",right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"top-left":o={left:"-6px",transform:"translate(0, 12px)","&:after":{content:'""',position:"absolute",bottom:"100%",left:"12px",borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-center":o={right:"50%",transform:"translate(50%, 12px)","&:after":{content:'""',position:"absolute",bottom:"100%",left:"50%",transform:"translateX(-50%)",borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-right":o={right:"-6px",transform:"translate(0, 12px)","&:after":{content:'""',position:"absolute",bottom:"100%",right:"12px",borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"right-top":o={top:"-6px",right:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",top:"12px",left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-middle":o={top:"50%",right:"calc(100% + 12px)",transform:"translateY(-50%)","&:after":{content:'""',position:"absolute",top:"50%",left:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-bottom":o={bottom:"-6px",right:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",bottom:"12px",left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break}return o}};
-`,B=n.forwardRef(function({children:r,placement:a="bottom-center",color:e="primary",title:o,body:h,closer:d,endAdornment:x,inlineCSS:u,open:f=!1,onClose:c,wrapperProps:s,...g},y){const l=n.useRef(null),[S,R]=n.useState(!1);return n.useEffect(()=>{l.current&&l.current.getBoundingClientRect().width>=276&&R(!0)},[f]),i.jsxs(L,{open:f,...s,css:s==null?void 0:s.inlineCSS,children:[r,i.jsxs(j,{className:"tooltip",ref:y,placement:a,color:e,...g,css:u,children:[o&&i.jsxs(p.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[i.jsx(k.default,{variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:o}),d&&i.jsx(p.default,{flexShrink:0,children:i.jsx(b.default,{className:"tooltip__closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",onClick:c,inlineCSS:{marginLeft:"2px",cursor:"pointer"}})})]}),i.jsxs(p.default,{alignItems:"center",gap:2,ref:l,style:S?{width:"276px",whiteSpace:"wrap"}:{},children:[h,x&&i.jsx(p.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:x}),!o&&d&&i.jsx(p.default,{flexShrink:0,children:i.jsx(b.default,{className:"tooltip__closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",inlineCSS:{marginLeft:"2px",cursor:"pointer"},onClick:c})})]})]})]})});exports.default=B;