@matbea-ui/matbea-ui 0.1.0 → 0.1.2

package/dist/matbea-ui.es41.js

@@ -0,0 +1,119 @@
+import { styled as r, css as e } from "styled-components";
+import { Typography as t } from "./matbea-ui.es4.js";
+const l = r.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`, s = r(t).attrs({
+  variant: "form-input",
+  forwardedAs: "label"
+})`
+  color: ${({ theme: o }) => o.colors.primary.darkBlue};
+`, p = r.div`
+  display: flex;
+  align-items: 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;
+
+  ${({ $disabled: o }) => o && e`
+      opacity: 0.6;
+      cursor: not-allowed;
+    `}
+
+  ${({ $hasError: o, theme: i }) => o && e`
+      outline-color: ${i.colors.accent.red};
+    `}
+
+  &:hover {
+    outline-color: ${({ theme: o, $hasError: i }) => i ? o.colors.accent.red : o.colors.primary.lightBlue2};
+  }
+
+  &[data-state="active"] {
+    outline-color: ${({ theme: o, $hasError: i }) => i ? o.colors.accent.red : o.colors.primary.primaryBlue};
+  }
+`, c = r.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  color: ${({ theme: o }) => o.colors.primary.primaryBlue};
+`, d = r.span`
+  flex: 1;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 15px;
+  line-height: 18px;
+  color: ${({ theme: o, $placeholder: i }) => i ? o.colors.gray.darkGray : o.colors.primary.darkBlue};
+  user-select: none;
+`, x = r.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`, u = r.span`
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 13px;
+  line-height: 16px;
+  color: ${({ theme: o }) => o.colors.accent.red};
+`, g = r.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;
+`, y = r.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-hovered="true"],
+  &:hover {
+    background: ${({ theme: o }) => o.colors.gray.lightBlueGray};
+  }
+
+  &[data-active="true"] {
+    background: ${({ theme: o }) => o.colors.gray.lightGray};
+  }
+`, h = r.span`
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+`;
+export {
+  u as ErrorText,
+  p as FieldContainer,
+  x as HiddenInput,
+  s as Label,
+  c as LeadingIcon,
+  g as List,
+  y as Option,
+  h as OptionIcon,
+  d as Value,
+  l as Wrapper
+};

package/dist/matbea-ui.es42.js

@@ -0,0 +1,131 @@
+import o, { css as r } from "styled-components";
+import { Typography as a } from "./matbea-ui.es4.js";
+const i = {
+  top: "translate3d(0, 6px, 0)",
+  bottom: "translate3d(0, -6px, 0)",
+  left: "translate3d(6px, 0, 0)",
+  right: "translate3d(-6px, 0, 0)"
+}, s = o.div`
+  display: inline-flex;
+  position: relative;
+`, l = o.div`
+  display: inline-flex;
+  align-items: center;
+  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;
+  }
+`, d = 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)" : i[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;
+  }
+`, x = 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 r`
+          bottom: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;
+    case "bottom":
+      return r`
+          top: -5px;
+          left: 50%;
+          transform: translateX(-50%) translateX(var(--tooltip-arrow-x, 0px))
+            rotate(45deg);
+        `;
+    case "left":
+      return r`
+          right: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;
+    case "right":
+    default:
+      return r`
+          left: -5px;
+          top: 50%;
+          transform: translateY(-50%) translateY(var(--tooltip-arrow-y, 0px))
+            rotate(45deg);
+        `;
+  }
+}}
+`, c = o(a).attrs({
+  variant: "body-s"
+})`
+  color: ${({ theme: t }) => t.colors.primary.darkBlue};
+`;
+export {
+  x as TooltipArrow,
+  d as TooltipBubble,
+  c as TooltipContentText,
+  l as TooltipTrigger,
+  s as TooltipWrapper
+};

package/dist/matbea-ui.es43.js

@@ -0,0 +1,13 @@
+import { styled as o } from "styled-components";
+import { Typography as t } from "./matbea-ui.es4.js";
+const p = o.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`, l = o(t)`
+  color: ${({ theme: r }) => r.colors.primary.darkBlue};
+`;
+export {
+  p as UserAccountStyled,
+  l as UserAccountText
+};

package/dist/matbea-ui.es44.js

@@ -0,0 +1,25 @@
+import { j as e } from "./matbea-ui.es28.js";
+import { Icon as o } from "./matbea-ui.es72.js";
+const d = (l) => /* @__PURE__ */ e.jsxs(o, { ...l, children: [
+  /* @__PURE__ */ e.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"
+    }
+  ),
+  /* @__PURE__ */ e.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"
+    }
+  )
+] });
+export {
+  d as UserIcon
+};

package/dist/matbea-ui.es45.js

@@ -0,0 +1,34 @@
+import { j as m } from "./matbea-ui.es28.js";
+import { useCallback as l } from "react";
+import { TabButton as c } from "./matbea-ui.es46.js";
+const x = ({
+  id: t,
+  label: e,
+  active: o = !1,
+  disabled: r = !1,
+  size: n = "m",
+  onSelect: a,
+  className: s
+}) => {
+  const i = l(() => {
+    r || a?.(t);
+  }, [r, t, a]);
+  return /* @__PURE__ */ m.jsx(
+    c,
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": o,
+      "aria-disabled": r,
+      disabled: r,
+      $size: n,
+      $active: o,
+      className: s,
+      onClick: i,
+      children: e
+    }
+  );
+};
+export {
+  x as Tab
+};

package/dist/matbea-ui.es46.js

@@ -0,0 +1,64 @@
+import r, { css as e } from "styled-components";
+const 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 }
+}, a = r.button`
+  ${({ $size: o }) => e`
+    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};
+    }
+  }
+`, l = r.div`
+  display: flex;
+  box-shadow: inset 0 -1px 0 ${({ theme: o }) => o.colors.gray.lightGray2};
+`;
+export {
+  a as TabButton,
+  l as TabRow
+};

package/dist/matbea-ui.es47.js

@@ -0,0 +1,39 @@
+import r from "styled-components";
+import { Typography as o } from "./matbea-ui.es4.js";
+const e = r.table`
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+`, t = r.tr`
+  &:nth-child(2n) {
+    background: ${({ theme: a }) => a.colors.gray.lightBlueGray};
+  }
+`, s = r(o).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;
+  }
+  &:last-child {
+    border-radius: 0 10px 10px 0;
+  }
+`, p = r(o).attrs({
+  forwardedAs: "th",
+  variant: "body-s"
+})`
+  display: table-cell;
+  color: ${({ theme: a }) => a.colors.gray.darkGray2};
+  padding: 16px 14px;
+`, c = r.tbody``, i = r.thead``;
+export {
+  c as TableBody,
+  s as TableCell,
+  i as TableHead,
+  p as TableHeader,
+  t as TableRow,
+  e as TableStyled
+};

package/dist/matbea-ui.es48.js

@@ -0,0 +1,44 @@
+import { styled as a } from "styled-components";
+const e = a.div`
+  display: inline-flex;
+`, n = a.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);
+  }
+
+  &:hover {
+    background: ${({ $checked: r, theme: o }) => r ? o.colors.primary.hoverBlue : o.colors.gray.darkGray};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${({ theme: r }) => r.colors.gray.darkGray};
+  }
+`, i = a.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;
+`;
+export {
+  e as SwitcherRoot,
+  i as Thumb,
+  n as Track
+};

package/dist/matbea-ui.es49.js

@@ -0,0 +1,58 @@
+import l, { css as i } from "styled-components";
+const s = l.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
+`, c = l.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`, a = l.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 && i`
+      border-color: ${r.colors.primary.primaryBlue};
+      background-color: ${r.colors.primary.primaryBlue};
+    `}
+
+  ${({ $checked: o, $disabled: r, theme: e }) => !r && !o && i`
+      &:hover {
+        border-color: ${e.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $checked: o, $disabled: r, theme: e }) => !r && o && i`
+      &:hover {
+        border-color: ${e.colors.primary.hoverBlue};
+        background-color: ${e.colors.primary.hoverBlue};
+      }
+    `}
+
+  ${({ $disabled: o, theme: r }) => o && i`
+      border-color: ${r.colors.gray.lightGray2};
+      background-color: ${r.colors.gray.lightGray};
+    `}
+`, t = l.svg`
+  width: 12px;
+  height: 9px;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: opacity 120ms ease;
+  stroke: ${({ theme: o }) => o.colors.primary.white};
+`;
+export {
+  a as Box,
+  t as CheckIcon,
+  c as HiddenInput,
+  s as Label
+};

package/dist/matbea-ui.es5.js

@@ -0,0 +1,19 @@
+import { j as o } from "./matbea-ui.es28.js";
+import "react";
+import { InfoIcon as s } from "./matbea-ui.es32.js";
+import { Typography as t } from "./matbea-ui.es4.js";
+import { InformerStyled as e } from "./matbea-ui.es33.js";
+const j = ({
+  label: f,
+  description: m,
+  type: i,
+  icon: r
+}) => /* @__PURE__ */ o.jsxs(e, { $icon: r, $type: i, children: [
+  r && /* @__PURE__ */ o.jsx(s, { size: 18, color: "#fff" }),
+  f && /* @__PURE__ */ o.jsx(t, { color: "#fff", variant: "body-l-semibold", children: f }),
+  r && /* @__PURE__ */ o.jsx("div", {}),
+  m && /* @__PURE__ */ o.jsx(t, { color: "#fff", variant: "body-m-semibold", children: m })
+] });
+export {
+  j as Informer
+};

package/dist/matbea-ui.es50.js

@@ -0,0 +1,26 @@
+import { j as o } from "./matbea-ui.es28.js";
+import { Icon as e } from "./matbea-ui.es72.js";
+const t = (r) => /* @__PURE__ */ o.jsxs(e, { ...r, viewBox: "0 0 18 18", children: [
+  /* @__PURE__ */ o.jsx("circle", { cx: "9", cy: "9", r: "9", fill: "#EFF2FB" }),
+  /* @__PURE__ */ o.jsx(
+    "path",
+    {
+      d: "M13 9L9 12L5 9",
+      stroke: "#5E6F8D",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  ),
+  /* @__PURE__ */ o.jsx(
+    "path",
+    {
+      d: "M13 6L9 9L5 6",
+      stroke: "#5E6F8D",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  )
+] });
+export {
+  t as WithdrawIcon
+};

package/dist/matbea-ui.es51.js

@@ -0,0 +1,58 @@
+import "./matbea-ui.es28.js";
+import "./matbea-ui.es29.js";
+import "react";
+import "./matbea-ui.es30.js";
+import { Typography as i } from "./matbea-ui.es4.js";
+import "./matbea-ui.es33.js";
+import "./matbea-ui.es6.js";
+import "./matbea-ui.es35.js";
+import "./matbea-ui.es36.js";
+import "./matbea-ui.es39.js";
+import "./matbea-ui.es40.js";
+import "./matbea-ui.es12.js";
+import "./matbea-ui.es42.js";
+import "./matbea-ui.es43.js";
+import "./matbea-ui.es46.js";
+import "./matbea-ui.es47.js";
+import "./matbea-ui.es48.js";
+import "./matbea-ui.es49.js";
+import { styled as o } from "styled-components";
+const $ = o.div`
+  display: flex;
+  column-gap: 10px;
+  row-gap: 12px;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  ${({ theme: t }) => t.media.maxWidth.tablet} {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  ${({ theme: t }) => t.media.maxWidth.mobile} {
+    flex-direction: column;
+  }
+`, v = o(i).attrs({
+  forwardedAs: "p",
+  variant: "body-s-semibold"
+})`
+  white-space: nowrap;
+  color: ${({ theme: t }) => t.colors.gray.darkGray};
+`, D = o.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+`, k = o(i).attrs({
+  forwardedAs: "p",
+  variant: "body-m-semibold"
+})`
+  margin: 0;
+  white-space: nowrap;
+  color: ${({ theme: t }) => `${t.colors.primary.darkBlue}`};
+`;
+export {
+  D as ApplicationDataContent,
+  v as ApplicationDataLabel,
+  $ as ApplicationDataStyled,
+  k as ApplicationDataValue
+};

package/dist/matbea-ui.es52.js

@@ -0,0 +1,62 @@
+import { css as d, styled as a } from "styled-components";
+const e = a.div`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 22px;
+  ${({ $variant: i }) => {
+  switch (i) {
+    case "secondary":
+      return d`
+          padding: 24px;
+          background: #f5f5f5;
+        `;
+    case "primary":
+    default:
+      return d`
+          padding: 24px 20px;
+          background: ${({ theme: t }) => t.colors.primary.white};
+          border: 1px solid ${({ theme: t }) => t.colors.gray.lightGray2};
+        `;
+  }
+}}
+
+  border-radius: 6px;
+  ${({ theme: i }) => i.media.maxWidth.tablet} {
+    width: 100%;
+    flex-direction: column;
+    gap: 18px;
+    padding: 18px 20px;
+  }
+  ${({ theme: i }) => i.media.maxWidth.mobile} {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 20px;
+  }
+`, n = a.div`
+  display: flex;
+  gap: 56px;
+  width: fit-content;
+  ${({ theme: i }) => i.media.maxWidth.tablet} {
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+  }
+  ${({ theme: i }) => i.media.maxWidth.mobile} {
+    flex-direction: column;
+    gap: 8px;
+  }
+`, o = a.div`
+  display: flex;
+  gap: 22px;
+  width: fit-content;
+  ${({ theme: i }) => i.media.maxWidth.tablet} {
+    width: 100%;
+    gap: 20px;
+  }
+`;
+export {
+  o as ApplicationDataActions,
+  n as ApplicationInfoDataContainer,
+  e as ApplicationInfoStyled
+};