@dotss/ui 0.0.4 → 0.0.6

package/dist/TextArea/TextArea.es.js

@@ -0,0 +1,222 @@
+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/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./TextArea').TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        helper: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Outlined: Story;
+export declare const Filled: Story;
+export declare const FullWidth: Story;
+export declare const Small: Story;
+export declare const Success: Story;
+export declare const Error: Story;

package/dist/TextArea/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./TextArea.cjs");exports.default=e.default;

package/dist/TextArea/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextArea } from './TextArea';
+
+export default TextArea;

package/dist/TextArea/index.es.js

@@ -0,0 +1,4 @@
+import r from "./TextArea.es.js";
+export {
+  r as default
+};

package/dist/TextField/TextField.cjs

@@ -0,0 +1,47 @@
+"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.d.ts

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps, Size, Variant } from '../typings/component';
+
+export interface TextFieldProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
+    variant?: Extract<Variant, 'outlined' | 'filled'>;
+    size?: Extract<Size, 'large' | 'xLarge' | '2xLarge'>;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    helper?: {
+        severity: 'success' | 'error';
+        message?: string;
+    };
+    fullWidth?: boolean;
+    disablePasswordVisibility?: boolean;
+}
+declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/TextField/TextField.es.js

@@ -0,0 +1,271 @@
+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/TextField/TextField.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./TextField').TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        helper: {
+            control: {
+                disable: true;
+            };
+        };
+        startAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+        endAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Outlined: Story;
+export declare const Filled: Story;
+export declare const FullWidth: Story;
+export declare const PasswordVisibility: Story;
+export declare const Success: Story;
+export declare const Error: Story;

package/dist/TextField/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./TextField.cjs");exports.default=e.default;

package/dist/TextField/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextField } from './TextField';
+
+export default TextField;

package/dist/TextField/index.es.js

@@ -0,0 +1,4 @@
+import t from "./TextField.es.js";
+export {
+  t as default
+};

package/dist/Tooltip/Tooltip.cjs

@@ -0,0 +1,26 @@
+"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;