@dotss/ui 0.0.8 → 0.0.11

package/Slider/Slider.es.js

@@ -0,0 +1,251 @@
+import { jsxs as I, jsx as k } from "@emotion/react/jsx-runtime";
+import { forwardRef as z, useRef as b, useState as B, useEffect as G } from "react";
+import _ from "../Flexbox/Flexbox.es.js";
+import u from "@emotion/styled";
+import J from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import Q from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+const Y = u.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 12px;
+  margin: ${({ theme: { spacing: i } }) => `${i.content(2)}px 0px`};
+  cursor: pointer;
+  border-radius: 20px;
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: i }) => i.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: i, theme: n }) => i ? {
+  outline: `${n.palette.grey[100]} solid 2px`,
+  outlineOffset: 2
+} : {}}
+  }
+`, Z = u.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme: { palette: i } }) => i.grey[10]};
+  border-radius: inherit;
+`, V = u.div`
+  position: absolute;
+  height: 100%;
+  background: ${({ theme: { palette: i } }) => i.brand.primary.main};
+  border-radius: inherit;
+`, P = u.div`
+  position: absolute;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${({ theme: { spacing: i } }) => `${i.content(2)}px ${i.content(3)}px`};
+  background: ${({ theme: { palette: i } }) => i.grey[90]};
+  transform: translateX(-50%);
+  border-radius: 50%;
+
+  &:focus {
+    outline-offset: 2px;
+  }
+`, ee = u.div`
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  transform: translateX(-50%);
+  border-radius: 50%;
+
+  ${({ theme: { palette: i }, marked: n, disabled: c, hasMarks: o }) => c || !o ? {
+  background: "transparent",
+  opacity: 0
+} : n ? {
+  background: i.grey.white
+} : {
+  background: i.grey[30]
+}}
+`, X = 10, ce = z(function({
+  value: n,
+  onChange: c,
+  step: o = 1,
+  min: s = 0,
+  max: l = 100,
+  hasMarks: C = !0,
+  disabledValues: a = [],
+  readValue: w,
+  railProps: d,
+  trackProps: h,
+  thumbProps: y,
+  inlineCSS: L,
+  ...v
+}, M) {
+  const m = b(null), { isKeyboardMode: E } = J(), { hasFocus: K } = Q({ ref: M || m }), f = b(null), S = b(null), j = b(null), [F, $] = B(!1), p = 100 / ((l - s) / o), x = (t) => {
+    if (f.current) {
+      const e = t - f.current.getBoundingClientRect().left, r = Array.from(
+        f.current.querySelectorAll('[class^="slider-mark-"]:not([disabled])')
+      ), R = r.reduce((N, T) => Math.abs(T.offsetLeft - e) < Math.abs(N.offsetLeft - e) ? T : N, r[0]).getAttribute("data-value");
+      return R !== null ? Number(R) : null;
+    }
+    return null;
+  }, U = (t) => {
+    let e = n;
+    if (t.key === "ArrowRight" || t.key === "ArrowUp") {
+      if (n === l) return;
+      e = n + o;
+    } else if (t.key === "ArrowLeft" || t.key === "ArrowDown") {
+      if (n === s) return;
+      e = n - o;
+    } else if (t.key === "PageUp") {
+      if (n === l) return;
+      e = Math.min(n + o * 5, l);
+    } else if (t.key === "PageDown") {
+      if (n === s) return;
+      e = Math.max(n - o * 5, s);
+    } else if (t.key === "Home") {
+      for (let r = s; r <= l; r += o)
+        if (!a.includes(r)) {
+          e = r;
+          break;
+        }
+    } else if (t.key === "End") {
+      for (let r = l; r >= s; r -= o)
+        if (!a.includes(r)) {
+          e = r;
+          break;
+        }
+    }
+    if (a.includes(e)) {
+      if (e > n) {
+        for (let r = e; r <= l; r += o)
+          if (!a.includes(r)) {
+            c(r);
+            return;
+          }
+      } else if (e < n) {
+        for (let r = e; r >= s; r -= o)
+          if (!a.includes(r)) {
+            c(r);
+            return;
+          }
+      }
+      return;
+    }
+    c(e);
+  }, D = (t) => {
+    $(!0);
+    const e = x(t);
+    e !== null && c(e);
+  }, A = (t) => {
+    if (!F) return;
+    const e = x(t);
+    e !== null && c(e);
+  }, g = () => $(!1), q = (t) => D(t.clientX), H = (t) => D(t.touches[0].clientX), O = (t) => A(t.clientX), W = (t) => A(t.touches[0].clientX);
+  return G(() => {
+    if (f.current) {
+      const t = f.current.querySelector(
+        `[data-value="${n}"]`
+      );
+      if (S.current && t) {
+        const { offsetLeft: e, offsetWidth: r } = t;
+        S.current.style.width = `${e + r + X * 2}px`;
+      }
+    }
+  }, [n, s, l, o]), /* @__PURE__ */ I(
+    Y,
+    {
+      ref: M || m,
+      ...v,
+      className: "slider",
+      onMouseDown: q,
+      onMouseMove: O,
+      onMouseUp: g,
+      onMouseLeave: g,
+      onTouchStart: H,
+      onTouchMove: W,
+      onTouchEnd: g,
+      onTouchCancel: g,
+      css: L,
+      focusWithin: E && K,
+      children: [
+        /* @__PURE__ */ k(
+          Z,
+          {
+            ref: j,
+            ...d,
+            css: d == null ? void 0 : d.inlineCSS,
+            className: "slider-rail",
+            tabIndex: -1,
+            "aria-hidden": !0
+          }
+        ),
+        /* @__PURE__ */ k(
+          V,
+          {
+            ref: S,
+            ...h,
+            css: h == null ? void 0 : h.inlineCSS,
+            className: "slider-track",
+            tabIndex: -1,
+            "aria-hidden": !0
+          }
+        ),
+        /* @__PURE__ */ I(
+          _,
+          {
+            className: "slider-mark-wrapper",
+            alignItems: "center",
+            ref: f,
+            tabIndex: -1,
+            inlineCSS: {
+              margin: `0 ${X + 2}px`,
+              width: "100%",
+              height: "24px",
+              position: "relative"
+            },
+            children: [
+              l > 0 && s < l && o > 0 && Array.from({ length: (l - s) / o + 1 }, (t, e) => /* @__PURE__ */ k(
+                ee,
+                {
+                  className: `slider-mark-${e} slider-mark`,
+                  marked: e <= (n - s) / o,
+                  hasMarks: C,
+                  disabled: a.includes(s + o * e),
+                  "data-value": s + o * e,
+                  style: {
+                    left: `${p * e}%`
+                  },
+                  "aria-hidden": !0
+                },
+                `slider-mark-${n}:${s + o * e}`
+              )),
+              /* @__PURE__ */ k(
+                P,
+                {
+                  ...y,
+                  className: "slider-thumb",
+                  css: y == null ? void 0 : y.inlineCSS,
+                  onKeyDown: U,
+                  role: "slider",
+                  "aria-orientation": "horizontal",
+                  tabIndex: 0,
+                  "aria-valuemin": s,
+                  "aria-valuemax": l,
+                  "aria-valuenow": n,
+                  "aria-valuetext": w && typeof w == "function" ? w(n) : n.toString(),
+                  style: { left: `${p * (n - s) / o}%` }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ce as default
+};

package/Switch/Switch.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),c=require("react"),X=require("@emotion/styled"),q=require("../core/useTheme.cjs"),H=t=>t&&t.__esModule?t:{default:t},s=H(X),L=s.default.div`
+  position: relative;
+  display: flex;
+  min-width: 56px;
+  height: 32px;
+  padding: ${({theme:{spacing:t}})=>`${t.content(1)}px`};
+  align-items: center;
+  border-radius: 20px;
+  transition: ${({transitionDuration:t})=>`background-color ${t}ms ease-in-out`};
+  pointer-events: ${({disabled:t})=>t?"none":"auto"};
+
+  ${({theme:{palette:{brand:t,grey:r}},selected:n,disabled:e})=>n&&e?{backgroundColor:t.primary.bg}:n&&!e?{backgroundColor:t.primary.main}:!n&&e?{backgroundColor:r[20]}:!n&&!e?{backgroundColor:r[40]}:{}}
+`,E=s.default.div`
+  position: absolute;
+  right: ${({withLabel:t})=>t?"24px":"auto"};
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  transition: ${({transitionDuration:t})=>`all ${t}ms ease-in-out`};
+  transition-property: background-color, transform, filter;
+
+  ${({theme:{palette:{grey:t,background:r},spacing:n},selected:e,disabled:o,labelWidth:h,withLabel:f})=>{if(f){if(e&&o)return{backgroundColor:t.white,transform:`translateX(calc(100% - ${n.content(1)}px))`};if(e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",transform:`translateX(calc(100% - ${n.content(1)}px))`};if(!e&&o)return{backgroundColor:r.primary,transform:`translateX(calc(100% - ${h+n.content(1)}px))`};if(!e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",transform:`translateX(calc(100% - ${h+n.content(1)}px))`}}else{if(e&&o)return{backgroundColor:t.white,transform:"translateX(100%)"};if(e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",transform:"translateX(100%)"};if(!e&&o)return{backgroundColor:r.primary};if(!e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"}}return{}}}
+`,T=s.default.input`
+  position: absolute;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 20px;
+  cursor: pointer;
+`,v=s.default.div`
+  position: absolute;
+  opacity: ${({selected:t})=>t?1:0};
+  pointer-events: none;
+  transition: opacity 0.2s;
+
+  ${({theme:{spacing:t},variant:r})=>{switch(r){case"unselected":return{right:t.content(2)};case"selected":return{left:t.content(2)};default:return{}}}}
+
+  ${({theme:{typography:t,palette:{grey:r}}})=>({fontSize:t.c2M.size,fontWeight:t.c2M.weight,lineHeight:t.c2M.lineHeight,color:r.white})}
+`,S=s.default.div`
+  ${({theme:{spacing:t},variant:r})=>{switch(r){case"unselected":return{marginRight:`${t.content(8)}px`};case"selected":return{marginRight:`${t.content(8)}px`};default:return{}}}}
+
+  visibility: hidden;
+
+  ${({theme:{typography:t,palette:{grey:r}}})=>({fontSize:t.c2M.size,fontWeight:t.c2M.weight,lineHeight:t.c2M.lineHeight,color:r.white})}
+`,y=c.forwardRef(function({selected:r,disabled:n,onChange:e,transitionDuration:o=150,inputProps:h,thumbProps:f,inlineCSS:C,selectedLabel:a,unselectedLabel:u,...R},W){const{spacing:l}=q.default(),[p,j]=c.useState(0),[x,M]=c.useState(0),w=c.useRef(null),m=c.useRef(null),z=!!a||!!u,_=r?x||p:p||x;return c.useEffect(()=>{const d=()=>{var b,k;const g=((b=m.current)==null?void 0:b.offsetWidth)??0,$=((k=w.current)==null?void 0:k.offsetWidth)??0;g>0&&M(g+l.content(2)),$>0&&j($+l.content(2))};return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d)}},[l,u,a,r]),i.jsxs(L,{ref:W,selected:r,disabled:n,transitionDuration:o,css:C,...R,children:[i.jsx(E,{selected:r,disabled:n,labelWidth:_,withLabel:z,transitionDuration:o,...f}),i.jsx(T,{type:"checkbox",role:"switch",checked:r,disabled:n,onChange:e,...h}),u&&!r&&i.jsx(S,{ref:w,variant:"unselected","aria-hidden":!0,children:u}),a&&r&&i.jsx(S,{ref:m,variant:"selected","aria-hidden":!0,children:a}),u&&i.jsx(v,{variant:"unselected",selected:!r,"aria-hidden":r,children:u}),a&&i.jsx(v,{variant:"selected",selected:r,"aria-hidden":!r,children:a})]})});exports.default=y;

package/{dist/Switch → Switch}/Switch.d.ts

@@ -8,6 +8,8 @@ export interface SwitchProps extends GeneralComponentProps<HTMLAttributes<HTMLDi
     transitionDuration?: number;
     inputProps?: HTMLAttributes<HTMLInputElement>;
     thumbProps?: HTMLAttributes<HTMLDivElement>;
+    selectedLabel?: string;
+    unselectedLabel?: string;
 }
 declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Switch;

package/Switch/Switch.es.js

@@ -0,0 +1,231 @@
+import { jsxs as E, jsx as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as j, useState as b, useRef as v, useEffect as T } from "react";
+import h from "@emotion/styled";
+import U from "../core/useTheme.es.js";
+const B = h.div`
+  position: relative;
+  display: flex;
+  min-width: 56px;
+  height: 32px;
+  padding: ${({ theme: { spacing: t } }) => `${t.content(1)}px`};
+  align-items: center;
+  border-radius: 20px;
+  transition: ${({ transitionDuration: t }) => `background-color ${t}ms ease-in-out`};
+  pointer-events: ${({ disabled: t }) => t ? "none" : "auto"};
+
+  ${({
+  theme: {
+    palette: { brand: t, grey: r }
+  },
+  selected: o,
+  disabled: n
+}) => o && n ? {
+  backgroundColor: t.primary.bg
+} : o && !n ? {
+  backgroundColor: t.primary.main
+} : !o && n ? {
+  backgroundColor: r[20]
+} : !o && !n ? {
+  backgroundColor: r[40]
+} : {}}
+`, I = h.div`
+  position: absolute;
+  right: ${({ withLabel: t }) => t ? "24px" : "auto"};
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  transition: ${({ transitionDuration: t }) => `all ${t}ms ease-in-out`};
+  transition-property: background-color, transform, filter;
+
+  ${({
+  theme: {
+    palette: { grey: t, background: r },
+    spacing: o
+  },
+  selected: n,
+  disabled: e,
+  labelWidth: u,
+  withLabel: s
+}) => {
+  if (s) {
+    if (n && e)
+      return {
+        backgroundColor: t.white,
+        transform: `translateX(calc(100% - ${o.content(1)}px))`
+      };
+    if (n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",
+        transform: `translateX(calc(100% - ${o.content(1)}px))`
+      };
+    if (!n && e)
+      return {
+        backgroundColor: r.primary,
+        transform: `translateX(calc(100% - ${u + o.content(1)}px))`
+      };
+    if (!n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",
+        transform: `translateX(calc(100% - ${u + o.content(1)}px))`
+      };
+  } else {
+    if (n && e)
+      return {
+        backgroundColor: t.white,
+        transform: "translateX(100%)"
+      };
+    if (n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",
+        transform: "translateX(100%)"
+      };
+    if (!n && e)
+      return {
+        backgroundColor: r.primary
+      };
+    if (!n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"
+      };
+  }
+  return {};
+}}
+`, q = h.input`
+  position: absolute;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 20px;
+  cursor: pointer;
+`, C = h.div`
+  position: absolute;
+  opacity: ${({ selected: t }) => t ? 1 : 0};
+  pointer-events: none;
+  transition: opacity 0.2s;
+
+  ${({ theme: { spacing: t }, variant: r }) => {
+  switch (r) {
+    case "unselected":
+      return {
+        right: t.content(2)
+      };
+    case "selected":
+      return {
+        left: t.content(2)
+      };
+    default:
+      return {};
+  }
+}}
+
+  ${({
+  theme: {
+    typography: t,
+    palette: { grey: r }
+  }
+}) => ({
+  fontSize: t.c2M.size,
+  fontWeight: t.c2M.weight,
+  lineHeight: t.c2M.lineHeight,
+  color: r.white
+})}
+`, S = h.div`
+  ${({ theme: { spacing: t }, variant: r }) => {
+  switch (r) {
+    case "unselected":
+      return {
+        marginRight: `${t.content(8)}px`
+      };
+    case "selected":
+      return {
+        marginRight: `${t.content(8)}px`
+      };
+    default:
+      return {};
+  }
+}}
+
+  visibility: hidden;
+
+  ${({
+  theme: {
+    typography: t,
+    palette: { grey: r }
+  }
+}) => ({
+  fontSize: t.c2M.size,
+  fontWeight: t.c2M.weight,
+  lineHeight: t.c2M.lineHeight,
+  color: r.white
+})}
+`, G = j(function({
+  selected: r,
+  disabled: o,
+  onChange: n,
+  transitionDuration: e = 150,
+  inputProps: u,
+  thumbProps: s,
+  inlineCSS: W,
+  selectedLabel: i,
+  unselectedLabel: a,
+  ...z
+}, R) {
+  const { spacing: f } = U(), [l, M] = b(0), [m, X] = b(0), d = v(null), w = v(null), H = !!i || !!a, L = r ? m || l : l || m;
+  return T(() => {
+    const p = () => {
+      var $, k;
+      const x = (($ = w.current) == null ? void 0 : $.offsetWidth) ?? 0, g = ((k = d.current) == null ? void 0 : k.offsetWidth) ?? 0;
+      x > 0 && X(x + f.content(2)), g > 0 && M(g + f.content(2));
+    };
+    return p(), window.addEventListener("resize", p), () => {
+      window.removeEventListener("resize", p);
+    };
+  }, [f, a, i, r]), /* @__PURE__ */ E(
+    B,
+    {
+      ref: R,
+      selected: r,
+      disabled: o,
+      transitionDuration: e,
+      css: W,
+      ...z,
+      children: [
+        /* @__PURE__ */ c(
+          I,
+          {
+            selected: r,
+            disabled: o,
+            labelWidth: L,
+            withLabel: H,
+            transitionDuration: e,
+            ...s
+          }
+        ),
+        /* @__PURE__ */ c(
+          q,
+          {
+            type: "checkbox",
+            role: "switch",
+            checked: r,
+            disabled: o,
+            onChange: n,
+            ...u
+          }
+        ),
+        a && !r && /* @__PURE__ */ c(S, { ref: d, variant: "unselected", "aria-hidden": !0, children: a }),
+        i && r && /* @__PURE__ */ c(S, { ref: w, variant: "selected", "aria-hidden": !0, children: i }),
+        a && /* @__PURE__ */ c(C, { variant: "unselected", selected: !r, "aria-hidden": r, children: a }),
+        i && /* @__PURE__ */ c(C, { variant: "selected", selected: r, "aria-hidden": !r, children: i })
+      ]
+    }
+  );
+});
+export {
+  G as default
+};

package/{dist/Switch → Switch}/Switch.stories.d.ts

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Label: Story;

package/TextArea/TextArea.cjs

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