@matbea-ui/matbea-ui 0.1.7 → 0.1.9

package/dist/matbea-ui.cjs44.js

@@ -1,103 +1,102 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=require("./matbea-ui.cjs4.js"),a={top:"translate3d(0, 6px, 0)",bottom:"translate3d(0, -6px, 0)",left:"translate3d(6px, 0, 0)",right:"translate3d(-6px, 0, 0)"},i=o.div`
-  display: inline-flex;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("./matbea-ui.cjs4.js"),t=r.styled.div`
   position: relative;
-`,n=o.div`
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`,a=r.styled(i.Typography).attrs({variant:"form-input",forwardedAs:"label"})`
+  color: ${({theme:o})=>o.colors.primary.darkBlue};
+`,l=r.styled.div`
+  display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  overflow: hidden;
+  height: 48px;
+  padding: 0 12px;
+  border-radius: 5px;
+  outline: 1px solid ${({theme:o})=>o.colors.gray.lightGray2};
+  outline-offset: -1px;
+  background: ${({theme:o})=>o.colors.primary.white};
+  width: 100%;
+  box-sizing: border-box;
+  transition: outline-color 140ms ease;
   cursor: pointer;
-  outline: none;
-
-  &:focus-visible {
-    box-shadow: inset 0 0 0 2px rgba(84, 132, 255, 0.65);
-    border-radius: 6px;
-  }
-
-  &[data-open="true"] {
-    cursor: default;
-  }
 
-  &[data-disabled="true"] {
-    cursor: not-allowed;
-  }
-`,p=o.div`
-  position: fixed;
-  top: -9999px;
-  left: -9999px;
-  padding: 10px 14px;
-  border-radius: 8px;
-  font-size: 13px;
-  line-height: 1.35;
-  max-width: min(320px, calc(100vw - 16px));
-  box-shadow: 0px 8px 24px 0px #0000001f;
-  filter: drop-shadow(0px 8px 24px 0px #0000001f);
-  background: ${({theme:t})=>t.colors.primary.white};
-  z-index: 9999;
-  opacity: ${({$visible:t})=>t?1:0};
-  visibility: ${({$visible:t})=>t?"visible":"hidden"};
-  transform: ${({$visible:t,$placement:e})=>t?"translate3d(0, 0, 0)":a[e]};
-  transition: opacity 0.18s ease, transform 0.18s ease;
-
-  pointer-events: ${({$visible:t,$interactive:e})=>t&&e?"auto":"none"};
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
+  ${({$disabled:o})=>o&&r.css`
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
 
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-  }
+  ${({$hasError:o,theme:e})=>o&&r.css`
+      outline-color: ${e.colors.accent.red};
+    `}
 
-  &[data-placement="top"] {
-    --tooltip-arrow-x: 0px;
+  &:hover {
+    outline-color: ${({theme:o,$hasError:e})=>e?o.colors.accent.red:o.colors.primary.lightBlue2};
   }
 
-  &[data-placement="bottom"] {
-    --tooltip-arrow-x: 0px;
+  &[data-state="active"] {
+    outline-color: ${({theme:o,$hasError:e})=>e?o.colors.accent.red:o.colors.primary.primaryBlue};
   }
+`,n=r.styled.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  color: ${({theme:o})=>o.colors.primary.primaryBlue};
+`,s=r.styled.span`
+  flex: 1;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({theme:o,$placeholder:e})=>e?o.colors.gray.darkGray:o.colors.primary.darkBlue};
+  user-select: none;
+`,d=r.styled.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`,p=r.styled.span`
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 13px;
+  line-height: 16px;
+  color: ${({theme:o})=>o.colors.accent.red};
+`,c=r.styled.div`
+  position: fixed;
+  top: ${({$top:o})=>`${o}px`};
+  left: ${({$left:o})=>`${o}px`};
+  width: ${({$width:o})=>`${o}px`};
+  z-index: 999;
+  border-radius: 5px;
+  border: 1px solid ${({theme:o})=>o.colors.gray.lightGray2};
+  background: ${({theme:o})=>o.colors.primary.white};
+  box-shadow: 0px 8px 24px rgba(15, 23, 42, 0.12);
+  display: flex;
+  flex-direction: column;
+  max-height: 260px;
+  overflow-y: auto;
+`,x=r.styled.button`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 13px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  color: ${({theme:o})=>o.colors.primary.darkBlue};
+  cursor: pointer;
+  transition: background 140ms ease;
 
-  &[data-placement="left"] {
-    --tooltip-arrow-y: 0px;
+  &[data-hovered="true"],
+  &:hover {
+    background: ${({theme:o})=>o.colors.gray.lightBlueGray};
   }
 
-  &[data-placement="right"] {
-    --tooltip-arrow-y: 0px;
+  &[data-active="true"] {
+    background: ${({theme:o})=>o.colors.gray.lightGray};
   }
-`,s=o.span`
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: inherit;
-  border: inherit;
-  border-radius: 2px;
-  transform: rotate(45deg);
-  pointer-events: none;
-
-  ${({$placement:t})=>{switch(t){case"top":return o.css`
-          bottom: -5px;
-          left: 50%;
-          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
-            rotate(45deg);
-        `;case"bottom":return o.css`
-          top: -5px;
-          left: 50%;
-          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
-            rotate(45deg);
-        `;case"left":return o.css`
-          right: -5px;
-          top: 50%;
-          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
-            rotate(45deg);
-        `;case"right":default:return o.css`
-          left: -5px;
-          top: 50%;
-          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
-            rotate(45deg);
-        `}}}
-`,l=o(r.Typography).attrs({variant:"body-s"})`
-  color: ${({theme:t})=>t.colors.primary.darkBlue};
-`;exports.TooltipArrow=s;exports.TooltipBubble=p;exports.TooltipContentText=l;exports.TooltipTrigger=n;exports.TooltipWrapper=i;
+`,y=r.styled.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`;exports.ErrorText=p;exports.FieldContainer=l;exports.HiddenInput=d;exports.Label=a;exports.LeadingIcon=n;exports.List=c;exports.Option=x;exports.OptionIcon=y;exports.Value=s;exports.Wrapper=t;

package/dist/matbea-ui.cjs45.js

@@ -1,7 +1,103 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("./matbea-ui.cjs4.js"),c=e.styled.div`
-  display: flex;
-  gap: 10px;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=require("./matbea-ui.cjs4.js"),a={top:"translate3d(0, 6px, 0)",bottom:"translate3d(0, -6px, 0)",left:"translate3d(6px, 0, 0)",right:"translate3d(-6px, 0, 0)"},i=o.div`
+  display: inline-flex;
+  position: relative;
+`,n=o.div`
+  display: inline-flex;
   align-items: center;
-`,o=e.styled(r.Typography)`
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px rgba(84, 132, 255, 0.65);
+    border-radius: 6px;
+  }
+
+  &[data-open="true"] {
+    cursor: default;
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+`,p=o.div`
+  position: fixed;
+  top: -9999px;
+  left: -9999px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.35;
+  max-width: min(320px, calc(100vw - 16px));
+  box-shadow: 0px 8px 24px 0px #0000001f;
+  filter: drop-shadow(0px 8px 24px 0px #0000001f);
+  background: ${({theme:t})=>t.colors.primary.white};
+  z-index: 9999;
+  opacity: ${({$visible:t})=>t?1:0};
+  visibility: ${({$visible:t})=>t?"visible":"hidden"};
+  transform: ${({$visible:t,$placement:e})=>t?"translate3d(0, 0, 0)":a[e]};
+  transition: opacity 0.18s ease, transform 0.18s ease;
+
+  pointer-events: ${({$visible:t,$interactive:e})=>t&&e?"auto":"none"};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &[data-placement="top"] {
+    --tooltip-arrow-x: 0px;
+  }
+
+  &[data-placement="bottom"] {
+    --tooltip-arrow-x: 0px;
+  }
+
+  &[data-placement="left"] {
+    --tooltip-arrow-y: 0px;
+  }
+
+  &[data-placement="right"] {
+    --tooltip-arrow-y: 0px;
+  }
+`,s=o.span`
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border: inherit;
+  border-radius: 2px;
+  transform: rotate(45deg);
+  pointer-events: none;
+
+  ${({$placement:t})=>{switch(t){case"top":return o.css`
+          bottom: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;case"bottom":return o.css`
+          top: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;case"left":return o.css`
+          right: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;case"right":default:return o.css`
+          left: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `}}}
+`,l=o(r.Typography).attrs({variant:"body-s"})`
   color: ${({theme:t})=>t.colors.primary.darkBlue};
-`;exports.UserAccountStyled=c;exports.UserAccountText=o;
+`;exports.TooltipArrow=s;exports.TooltipBubble=p;exports.TooltipContentText=l;exports.TooltipTrigger=n;exports.TooltipWrapper=i;

package/dist/matbea-ui.cjs46.js

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./matbea-ui.cjs30.js"),n=require("./matbea-ui.cjs74.js"),r=l=>e.jsxRuntimeExports.jsxs(n.Icon,{...l,children:[e.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13ZM12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15Z",fill:"#202D52"}),e.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12 15C8.13401 15 5 18.134 5 22H3C3 17.0294 7.02944 13 12 13C16.9706 13 21 17.0294 21 22H19C19 18.134 15.866 15 12 15Z",fill:"#202D52"})]});exports.UserIcon=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("./matbea-ui.cjs4.js"),c=e.styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`,o=e.styled(r.Typography)`
+  color: ${({theme:t})=>t.colors.primary.darkBlue};
+`;exports.UserAccountStyled=c;exports.UserAccountText=o;

package/dist/matbea-ui.cjs47.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./matbea-ui.cjs30.js"),c=require("react"),l=require("./matbea-ui.cjs48.js"),b=({id:t,label:s,active:r=!1,disabled:e=!1,size:u="m",onSelect:n,className:a})=>{const i=c.useCallback(()=>{e||n?.(t)},[e,t,n]);return o.jsxRuntimeExports.jsx(l.TabButton,{type:"button",role:"tab","aria-selected":r,"aria-disabled":e,disabled:e,$size:u,$active:r,className:a,onClick:i,children:s})};exports.Tab=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./matbea-ui.cjs31.js"),n=require("./matbea-ui.cjs53.js"),r=l=>e.jsxRuntimeExports.jsxs(n.Icon,{...l,children:[e.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13ZM12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15Z",fill:"#202D52"}),e.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12 15C8.13401 15 5 18.134 5 22H3C3 17.0294 7.02944 13 12 13C16.9706 13 21 17.0294 21 22H19C19 18.134 15.866 15 12 15Z",fill:"#202D52"})]});exports.UserIcon=r;

package/dist/matbea-ui.cjs48.js

@@ -1,55 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i={m:{minWidth:55,height:46,fontSize:16,lineHeight:20,paddingX:14},l:{minWidth:58,height:48,fontSize:18,lineHeight:22,paddingX:14},xl:{minWidth:68,height:56,fontSize:24,lineHeight:30,paddingX:14}},r=e.button`
-  ${({$size:o})=>e.css`
-    min-width: ${i[o].minWidth}px;
-    height: ${i[o].height}px;
-    padding: 0 ${i[o].paddingX}px;
-    font-size: ${i[o].fontSize}px;
-    line-height: ${i[o].lineHeight}px;
-  `}
-  position: relative;
-  background: transparent;
-  border: none;
-  display: inline-flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-weight: 700;
-  cursor: pointer;
-  text-transform: none;
-  color: ${({theme:o,$active:t})=>t?o.colors.primary.darkBlue:o.colors.gray.darkGray};
-  transition: color 120ms ease;
-  padding-bottom: 25px;
-  &::after {
-    content: "";
-    position: absolute;
-    inset-inline: 0;
-    bottom: 0;
-    height: ${({$active:o})=>o?2:1}px;
-    background: ${({theme:o,$active:t})=>t?o.colors.primary.primaryBlue:o.colors.gray.lightGray2};
-    transition: height 120ms ease, background 120ms ease;
-  }
-
-  &:hover:not(:disabled) {
-    color: ${({theme:o})=>o.colors.primary.darkBlue2};
-
-    &::after {
-      height: 2px;
-      background: ${({theme:o})=>o.colors.primary.hoverBlue};
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: inset 0 -2px 0 ${({theme:o})=>o.colors.primary.hoverBlue};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    color: ${({theme:o})=>o.colors.gray.darkGray+"80"};
-    &::after {
-      background: ${({theme:o})=>o.colors.gray.lightGray2};
-    }
-  }
-`,n=e.div`
-  display: flex;
-  box-shadow: inset 0 -1px 0 ${({theme:o})=>o.colors.gray.lightGray2};
-`;exports.TabButton=r;exports.TabRow=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./matbea-ui.cjs31.js"),c=require("react"),l=require("./matbea-ui.cjs49.js"),b=({id:t,label:s,active:r=!1,disabled:e=!1,size:u="m",onSelect:n,className:a})=>{const i=c.useCallback(()=>{e||n?.(t)},[e,t,n]);return o.jsxRuntimeExports.jsx(l.TabButton,{type:"button",role:"tab","aria-selected":r,"aria-disabled":e,disabled:e,$size:u,$active:r,className:a,onClick:i,children:s})};exports.Tab=b;

package/dist/matbea-ui.cjs49.js

@@ -1,23 +1,55 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),l=require("./matbea-ui.cjs4.js"),r=e.table`
-  width: 100%;
-  border-collapse: collapse;
-  overflow: hidden;
-`,d=e.tr`
-  &:nth-child(2n) {
-    background: ${({theme:a})=>a.colors.gray.lightBlueGray};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i={m:{minWidth:55,height:46,fontSize:16,lineHeight:20,paddingX:14},l:{minWidth:58,height:48,fontSize:18,lineHeight:22,paddingX:14},xl:{minWidth:68,height:56,fontSize:24,lineHeight:30,paddingX:14}},r=e.button`
+  ${({$size:o})=>e.css`
+    min-width: ${i[o].minWidth}px;
+    height: ${i[o].height}px;
+    padding: 0 ${i[o].paddingX}px;
+    font-size: ${i[o].fontSize}px;
+    line-height: ${i[o].lineHeight}px;
+  `}
+  position: relative;
+  background: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-weight: 700;
+  cursor: pointer;
+  text-transform: none;
+  color: ${({theme:o,$active:t})=>t?o.colors.primary.darkBlue:o.colors.gray.darkGray};
+  transition: color 120ms ease;
+  padding-bottom: 25px;
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: ${({$active:o})=>o?2:1}px;
+    background: ${({theme:o,$active:t})=>t?o.colors.primary.primaryBlue:o.colors.gray.lightGray2};
+    transition: height 120ms ease, background 120ms ease;
   }
-`,o=e(l.Typography).attrs({forwardedAs:"td",variant:"body-m"})`
-  display: table-cell;
-  color: ${({theme:a})=>a.colors.primary.darkBlue};
-  padding: 16px 14px;
-  &:first-child {
-    border-radius: 10px 0 0 10px;
+
+  &:hover:not(:disabled) {
+    color: ${({theme:o})=>o.colors.primary.darkBlue2};
+
+    &::after {
+      height: 2px;
+      background: ${({theme:o})=>o.colors.primary.hoverBlue};
+    }
   }
-  &:last-child {
-    border-radius: 0 10px 10px 0;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 -2px 0 ${({theme:o})=>o.colors.primary.hoverBlue};
   }
-`,t=e(l.Typography).attrs({forwardedAs:"th",variant:"body-s"})`
-  display: table-cell;
-  color: ${({theme:a})=>a.colors.gray.darkGray2};
-  padding: 16px 14px;
-`,s=e.tbody``,b=e.thead``;exports.TableBody=s;exports.TableCell=o;exports.TableHead=b;exports.TableHeader=t;exports.TableRow=d;exports.TableStyled=r;
+
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({theme:o})=>o.colors.gray.darkGray+"80"};
+    &::after {
+      background: ${({theme:o})=>o.colors.gray.lightGray2};
+    }
+  }
+`,n=e.div`
+  display: flex;
+  box-shadow: inset 0 -1px 0 ${({theme:o})=>o.colors.gray.lightGray2};
+`;exports.TabButton=r;exports.TabRow=n;

package/dist/matbea-ui.cjs5.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./matbea-ui.cjs30.js");require("react");const i=require("./matbea-ui.cjs34.js"),t=require("./matbea-ui.cjs4.js"),x=require("./matbea-ui.cjs35.js"),f=({label:o,description:s,type:n,icon:e})=>r.jsxRuntimeExports.jsxs(x.InformerStyled,{$icon:e,$type:n,children:[e&&r.jsxRuntimeExports.jsx(i.InfoIcon,{size:18,color:"#fff"}),o&&r.jsxRuntimeExports.jsx(t.Typography,{color:"#fff",variant:"body-l-semibold",children:o}),e&&r.jsxRuntimeExports.jsx("div",{}),s&&r.jsxRuntimeExports.jsx(t.Typography,{color:"#fff",variant:"body-m-semibold",children:s})]});exports.Informer=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./matbea-ui.cjs31.js");require("react");const i=require("./matbea-ui.cjs35.js"),t=require("./matbea-ui.cjs4.js"),x=require("./matbea-ui.cjs36.js"),f=({label:o,description:s,type:n,icon:e})=>r.jsxRuntimeExports.jsxs(x.InformerStyled,{$icon:e,$type:n,children:[e&&r.jsxRuntimeExports.jsx(i.InfoIcon,{size:18,color:"#fff"}),o&&r.jsxRuntimeExports.jsx(t.Typography,{color:"#fff",variant:"body-l-semibold",children:o}),e&&r.jsxRuntimeExports.jsx("div",{}),s&&r.jsxRuntimeExports.jsx(t.Typography,{color:"#fff",variant:"body-m-semibold",children:s})]});exports.Informer=f;

package/dist/matbea-ui.cjs50.js

@@ -1,38 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),e=a.styled.div`
-  display: inline-flex;
-`,s=a.styled.button`
-  position: relative;
-  width: 56px;
-  height: 26px;
-  padding: 4px;
-  border: none;
-  border-radius: 22px;
-  background: ${({$checked:r,theme:o})=>r?o.colors.primary.primaryBlue:o.colors.gray.darkGray2};
-  cursor: pointer;
-  transition: background 150ms ease;
-  outline: none;
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px rgba(49, 99, 240, 0.4);
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),l=require("./matbea-ui.cjs4.js"),r=e.table`
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+`,d=e.tr`
+  &:nth-child(2n) {
+    background: ${({theme:a})=>a.colors.gray.lightBlueGray};
   }
-
-  &:hover {
-    background: ${({$checked:r,theme:o})=>r?o.colors.primary.hoverBlue:o.colors.gray.darkGray};
+`,o=e(l.Typography).attrs({forwardedAs:"td",variant:"body-m"})`
+  display: table-cell;
+  color: ${({theme:a})=>a.colors.primary.darkBlue};
+  padding: 16px 14px;
+  &:first-child {
+    border-radius: 10px 0 0 10px;
   }
-
-  &:disabled {
-    cursor: not-allowed;
-    background: ${({theme:r})=>r.colors.gray.darkGray};
+  &:last-child {
+    border-radius: 0 10px 10px 0;
   }
-`,t=a.styled.span`
-  position: absolute;
-  top: 50%;
-  left: 4px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: ${({$disabled:r,theme:o})=>r?o.colors.primary.darkBlue2:"#ffffff"};
-  box-shadow: ${({$disabled:r})=>r?"none":"0 3px 6px rgba(0, 0, 0, 0.25)"};
-  transform: translate(${({$checked:r})=>r?"30px":"0"}, -50%);
-  transition: transform 180ms ease, background 150ms ease, box-shadow 150ms ease;
-`;exports.SwitcherRoot=e;exports.Thumb=t;exports.Track=s;
+`,t=e(l.Typography).attrs({forwardedAs:"th",variant:"body-s"})`
+  display: table-cell;
+  color: ${({theme:a})=>a.colors.gray.darkGray2};
+  padding: 16px 14px;
+`,s=e.tbody``,b=e.thead``;exports.TableBody=s;exports.TableCell=o;exports.TableHead=b;exports.TableHeader=t;exports.TableRow=d;exports.TableStyled=r;

package/dist/matbea-ui.cjs51.js

@@ -1,51 +1,38 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),l=e.label`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),e=a.styled.div`
   display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  cursor: ${({disabled:o})=>o?"not-allowed":"pointer"};
-`,s=e.input`
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-`,n=e.span`
-  width: 24px;
-  height: 24px;
-  border-radius: 3px;
-  border: 1px solid ${({theme:o})=>o.colors.gray.lightGray3};
-  background-color: ${({theme:o})=>o.colors.primary.white};
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 140ms ease, border-color 140ms ease;
+`,s=a.styled.button`
+  position: relative;
+  width: 56px;
+  height: 26px;
+  padding: 4px;
+  border: none;
+  border-radius: 22px;
+  background: ${({$checked:r,theme:o})=>r?o.colors.primary.primaryBlue:o.colors.gray.darkGray2};
+  cursor: pointer;
+  transition: background 150ms ease;
+  outline: none;
 
-  ${({$checked:o,theme:r})=>o&&e.css`
-      border-color: ${r.colors.primary.primaryBlue};
-      background-color: ${r.colors.primary.primaryBlue};
-    `}
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(49, 99, 240, 0.4);
+  }
 
-  ${({$checked:o,$disabled:r,theme:i})=>!r&&!o&&e.css`
-      &:hover {
-        border-color: ${i.colors.primary.hoverBlue};
-      }
-    `}
+  &:hover {
+    background: ${({$checked:r,theme:o})=>r?o.colors.primary.hoverBlue:o.colors.gray.darkGray};
+  }
 
-  ${({$checked:o,$disabled:r,theme:i})=>!r&&o&&e.css`
-      &:hover {
-        border-color: ${i.colors.primary.hoverBlue};
-        background-color: ${i.colors.primary.hoverBlue};
-      }
-    `}
-
-  ${({$disabled:o,theme:r})=>o&&e.css`
-      border-color: ${r.colors.gray.lightGray2};
-      background-color: ${r.colors.gray.lightGray};
-    `}
-`,c=e.svg`
-  width: 12px;
-  height: 9px;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: opacity 120ms ease;
-  stroke: ${({theme:o})=>o.colors.primary.white};
-`;exports.Box=n;exports.CheckIcon=c;exports.HiddenInput=s;exports.Label=l;
+  &:disabled {
+    cursor: not-allowed;
+    background: ${({theme:r})=>r.colors.gray.darkGray};
+  }
+`,t=a.styled.span`
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: ${({$disabled:r,theme:o})=>r?o.colors.primary.darkBlue2:"#ffffff"};
+  box-shadow: ${({$disabled:r})=>r?"none":"0 3px 6px rgba(0, 0, 0, 0.25)"};
+  transform: translate(${({$checked:r})=>r?"30px":"0"}, -50%);
+  transition: transform 180ms ease, background 150ms ease, box-shadow 150ms ease;
+`;exports.SwitcherRoot=e;exports.Thumb=t;exports.Track=s;

package/dist/matbea-ui.cjs52.js

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./matbea-ui.cjs30.js"),o=require("./matbea-ui.cjs74.js"),r=t=>e.jsxRuntimeExports.jsxs(o.Icon,{...t,viewBox:"0 0 18 18",children:[e.jsxRuntimeExports.jsx("circle",{cx:"9",cy:"9",r:"9",fill:"#EFF2FB"}),e.jsxRuntimeExports.jsx("path",{d:"M13 9L9 12L5 9",stroke:"#5E6F8D","stroke-linecap":"round","stroke-linejoin":"round"}),e.jsxRuntimeExports.jsx("path",{d:"M13 6L9 9L5 6",stroke:"#5E6F8D","stroke-linecap":"round","stroke-linejoin":"round"})]});exports.WithdrawIcon=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),l=e.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: ${({disabled:o})=>o?"not-allowed":"pointer"};
+`,s=e.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`,n=e.span`
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  border: 1px solid ${({theme:o})=>o.colors.gray.lightGray3};
+  background-color: ${({theme:o})=>o.colors.primary.white};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 140ms ease, border-color 140ms ease;
+
+  ${({$checked:o,theme:r})=>o&&e.css`
+      border-color: ${r.colors.primary.primaryBlue};
+      background-color: ${r.colors.primary.primaryBlue};
+    `}
+
+  ${({$checked:o,$disabled:r,theme:i})=>!r&&!o&&e.css`
+      &:hover {
+        border-color: ${i.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({$checked:o,$disabled:r,theme:i})=>!r&&o&&e.css`
+      &:hover {
+        border-color: ${i.colors.primary.hoverBlue};
+        background-color: ${i.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({$disabled:o,theme:r})=>o&&e.css`
+      border-color: ${r.colors.gray.lightGray2};
+      background-color: ${r.colors.gray.lightGray};
+    `}
+`,c=e.svg`
+  width: 12px;
+  height: 9px;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: opacity 120ms ease;
+  stroke: ${({theme:o})=>o.colors.primary.white};
+`;exports.Box=n;exports.CheckIcon=c;exports.HiddenInput=s;exports.Label=l;