@matbea-ui/matbea-ui 0.1.9 → 0.2.0

package/dist/matbea-ui.es37.js

@@ -1,85 +0,0 @@
-import { styled as r, css as i } from "styled-components";
-import { Typography as t } from "./matbea-ui.es4.js";
-const l = r.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-`, s = r(t).attrs({
-  variant: "form-input",
-  forwardedAs: "label"
-})`
-  color: ${({ theme: o }) => o.colors.primary.darkBlue};
-`, c = r.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  overflow: hidden;
-  height: 48px;
-  padding-left: 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: border-color 140ms ease;
-
-  ${({ $disabled: o }) => o && i`
-      opacity: 0.6;
-      cursor: not-allowed;
-    `}
-
-  ${({ $hasError: o, theme: e }) => o && i`
-      outline-color: ${e.colors.accent.red};
-    `}
-
-  &:hover {
-    outline-color: ${({ theme: o, $hasError: e }) => e ? o.colors.accent.red : o.colors.primary.lightBlue2};
-  }
-
-  &[data-state="active"] {
-    outline-color: ${({ theme: o, $hasError: e }) => e ? o.colors.accent.red : o.colors.primary.primaryBlue};
-  }
-`, p = r.span`
-  display: inline-flex;
-  width: 24px;
-  height: 24px;
-`, d = r.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 48px;
-  & > button {
-    border-radius: 0px;
-  }
-`, x = r.input`
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: "Proxima Nova", sans-serif;
-  padding-right: 12px;
-  height: 100%;
-  font-size: 15px;
-  line-height: 18px;
-  color: ${({ theme: o }) => o.colors.primary.darkBlue};
-
-  &::placeholder {
-    color: ${({ theme: o }) => o.colors.gray.darkGray};
-  }
-`, f = r.span`
-  font-family: "Proxima Nova", sans-serif;
-  font-size: 15px;
-  line-height: 18px;
-  color: ${({ theme: o }) => o.colors.accent.red};
-`;
-export {
-  d as ActionSlot,
-  f as ErrorText,
-  c as FieldContainer,
-  x as Input,
-  s as Label,
-  p as LeadingIcon,
-  l as Wrapper
-};

package/dist/matbea-ui.es38.js

@@ -1,18 +0,0 @@
-import { styled as i } from "styled-components";
-const a = i.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 24px 28px;
-  background-color: ${({ theme: d }) => d.colors.primary.white};
-  border-radius: 10px;
-  ${({ theme: d }) => d.media.maxWidth.tablet} {
-    padding: 24px 20px;
-  }
-  ${({ theme: d }) => d.media.maxWidth.mobile} {
-    padding: 16px;
-  }
-`;
-export {
-  a as ContainerStyled
-};

package/dist/matbea-ui.es39.js

@@ -1,18 +0,0 @@
-import { styled as o } from "styled-components";
-import { Typography as t } from "./matbea-ui.es4.js";
-const d = o(t).attrs({
-  forwardedAs: "div"
-})`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0px;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  color: #fff;
-  background-color: ${({ theme: r }) => r.colors.primary.primaryBlue};
-`;
-export {
-  d as CounterStyled
-};

package/dist/matbea-ui.es4.js

@@ -1,31 +0,0 @@
-import { j as m } from "./matbea-ui.es31.js";
-import { StyledTypography as y } from "./matbea-ui.es34.js";
-const c = ({
-  as: o = "span",
-  forwardedAs: a,
-  variant: r = "body-m-semibold",
-  color: e,
-  align: p,
-  uppercase: s = !1,
-  truncate: t = !1,
-  inline: i = !1,
-  children: l,
-  ...n
-}) => /* @__PURE__ */ m.jsx(
-  y,
-  {
-    as: o,
-    forwardedAs: a,
-    $variant: r,
-    $color: e,
-    $align: p,
-    $uppercase: s,
-    $truncate: t,
-    $inline: i,
-    ...n,
-    children: l
-  }
-);
-export {
-  c as Typography
-};

package/dist/matbea-ui.es40.js

@@ -1,24 +0,0 @@
-import { j as i } from "./matbea-ui.es31.js";
-import { Icon as s } from "./matbea-ui.es53.js";
-const h = (l) => /* @__PURE__ */ i.jsxs(s, { ...l, children: [
-  /* @__PURE__ */ i.jsxs("g", { "clip-path": "url(#clip0_487_8651)", children: [
-    /* @__PURE__ */ i.jsx(
-      "path",
-      {
-        d: "M4.99543 4.85076C5.38596 4.46024 6.01912 4.46024 6.40965 4.85076L19.265 17.7061C19.6555 18.0966 19.6555 18.7298 19.265 19.1203L19.0937 19.2916C18.7032 19.6821 18.07 19.6821 17.6795 19.2916L4.82414 6.43627C4.43362 6.04574 4.43362 5.41258 4.82414 5.02206L4.99543 4.85076Z",
-        fill: "#9296A5"
-      }
-    ),
-    /* @__PURE__ */ i.jsx(
-      "path",
-      {
-        d: "M4.85129 19.1203C4.46077 18.7298 4.46077 18.0966 4.85129 17.7061L17.7066 4.85075C18.0971 4.46023 18.7303 4.46023 19.1208 4.85075L19.2921 5.02205C19.6827 5.41257 19.6827 6.04574 19.2921 6.43626L6.4368 19.2916C6.04627 19.6821 5.41311 19.6821 5.02258 19.2916L4.85129 19.1203Z",
-        fill: "#9296A5"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx("clipPath", { id: "clip0_487_8651", children: /* @__PURE__ */ i.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
-] });
-export {
-  h as CloseIcon
-};

package/dist/matbea-ui.es41.js

@@ -1,10 +0,0 @@
-import { j as r } from "./matbea-ui.es31.js";
-import { Icon as i } from "./matbea-ui.es53.js";
-const h = (t) => /* @__PURE__ */ r.jsxs(i, { ...t, children: [
-  /* @__PURE__ */ r.jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: "#9296A5" }),
-  /* @__PURE__ */ r.jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: "#9296A5" }),
-  /* @__PURE__ */ r.jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: "#9296A5" })
-] });
-export {
-  h as HamburgerIcon
-};

package/dist/matbea-ui.es42.js

@@ -1,42 +0,0 @@
-import { keyframes as t, styled as a } from "styled-components";
-const e = t`
-  0% {
-    transform: scale(0.5);
-  }
-  25% {
-    transform: scale(1);
-  }
-  75% {
-    transform: scale(0.5);
-  }
-  100% {
-    transform: scale(0.5);
-  }
-`, n = a.div`
-  display: flex;
-`, s = a.div`
-  margin: 2px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: ${({ theme: o }) => o.colors.primary.primaryBlue};
-  transform: scale(0.5);
-  animation: ${e} 1.2s ease-out infinite;
-
-  &:nth-of-type(2) {
-    animation-delay: 0.2s;
-  }
-  &:nth-of-type(3) {
-    animation-delay: 0.3s;
-  }
-  &:nth-of-type(4) {
-    animation-delay: 0.4s;
-  }
-  &:nth-of-type(5) {
-    animation-delay: 0.5s;
-  }
-`;
-export {
-  s as LoaderDot,
-  n as LoaderDots
-};

package/dist/matbea-ui.es43.js

@@ -1,70 +0,0 @@
-import { styled as a, css as e } from "styled-components";
-import { Typography as n } from "./matbea-ui.es4.js";
-const t = a.label`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
-`, s = a.input`
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-`, d = a.span`
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid ${({ theme: o }) => o.colors.gray.darkGray2};
-  background-color: transparent;
-  transition: border-color 160ms ease, background-color 160ms ease;
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  ${({ $checked: o, theme: r }) => o && e`
-      border-color: ${r.colors.primary.primaryBlue};
-      &::after {
-        content: "";
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background-color: ${r.colors.primary.primaryBlue};
-        transition: background-color 160ms ease;
-      }
-    `}
-
-  ${({ $checked: o, theme: r }) => !o && e`
-      &:hover {
-        border-color: ${r.colors.primary.hoverBlue};
-      }
-    `}
-
-  ${({ $checked: o, $disabled: r, theme: i }) => !r && o && e`
-      &:hover {
-        border-color: ${i.colors.primary.hoverBlue};
-        &::after {
-          background-color: ${i.colors.primary.hoverBlue};
-        }
-      }
-    `}
-
-  ${({ $disabled: o, theme: r }) => o && e`
-      border-color: ${r.colors.icon.iconSecondary};
-      background-color: ${r.colors.gray.lightGray2};
-      &::after {
-        content: "";
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background-color: ${r.colors.icon.iconSecondary};
-      }
-    `}
-`, p = a(n)`
-  color: ${({ theme: o }) => o.colors.primary.darkBlue};
-`;
-export {
-  s as HiddenInput,
-  p as LabelText,
-  t as RadioLabel,
-  d as VisualRadio
-};

package/dist/matbea-ui.es44.js

@@ -1,119 +0,0 @@
-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.es45.js

@@ -1,131 +0,0 @@
-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.es46.js

@@ -1,13 +0,0 @@
-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.es47.js

@@ -1,25 +0,0 @@
-import { j as e } from "./matbea-ui.es31.js";
-import { Icon as o } from "./matbea-ui.es53.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.es48.js

@@ -1,34 +0,0 @@
-import { j as m } from "./matbea-ui.es31.js";
-import { useCallback as l } from "react";
-import { TabButton as c } from "./matbea-ui.es49.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.es49.js

@@ -1,64 +0,0 @@
-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
-};