@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.41

package/dist/esm/components/infinite-scroll/index.js

@@ -0,0 +1,4 @@
+import { InfiniteScrollWrapper as o } from "./infinite-scroll-wrapper.js";
+export {
+  o as InfiniteScrollWrapper
+};

package/dist/esm/components/infinite-scroll/infinite-scroll-wrapper.js

@@ -0,0 +1,30 @@
+import { jsxs as r, Fragment as a, jsx as e } from "react/jsx-runtime";
+import { DialogContainer as l } from "../dialog/dialog-container.js";
+import { FormattedMessageTyped as p } from "../typed-intl/index.js";
+import { Typography as s } from "../typography/typography.js";
+import { VSpace as m } from "../vspace/vspace.js";
+function g({
+  hasMore: o,
+  dataLength: t,
+  children: i,
+  onNextLoad: n
+}) {
+  return /* @__PURE__ */ r("div", { className: "w-full", children: [
+    i,
+    o && t > 0 && /* @__PURE__ */ r(a, { children: [
+      /* @__PURE__ */ e(m, { size: "md" }),
+      /* @__PURE__ */ e(l, { padding: !1, children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: n,
+          className: "flex w-full cursor-pointer items-center justify-center gap-2 p-3.5 hover:text-white",
+          children: /* @__PURE__ */ e(s, { as: "span", variant: "bodySmall", color: "secondary", children: /* @__PURE__ */ e(p, { messageId: "components.infiniteScrollWrapper.showMore" }) })
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  g as InfiniteScrollWrapper
+};

package/dist/esm/components/input/input.js

@@ -1,10 +1,9 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
 import { cva as T } from "class-variance-authority";
 import * as R from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import { useIconSlotWidths as S } from "./use-icon-slot-widths.js";
@@ -71,7 +70,7 @@ const z = T(
       variant: "default"
     }
   }
-), G = R.forwardRef(
+), F = R.forwardRef(
   ({
     hasError: o,
     errorMessage: d,
@@ -158,6 +157,6 @@ const z = T(
   }
 );
 export {
-  G as Input,
+  F as Input,
   z as inputVariants
 };

package/dist/esm/components/label/label.js

@@ -2,10 +2,9 @@ import { jsx as x } from "react/jsx-runtime";
 import * as d from "@radix-ui/react-label";
 import { cva as v } from "class-variance-authority";
 import * as r from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const y = v(

package/dist/esm/components/layout/app-footer/app-footer.js

@@ -1,37 +1,34 @@
-import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
-import * as d from "react";
-import { BlockSyncPill as x } from "../../block-sync-pill/block-sync-pill.js";
-import { cn as h } from "../../../utils/cn.js";
-const u = [
+import { jsx as e, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as f } from "../../../utils/cn.js";
+const d = [
   { label: "Docs", href: "https://docs.gearbox.finance" },
   { label: "Support", href: "https://discord.com/invite/gearbox" },
   { label: "Terms", href: "https://gearbox.finance/terms" },
   { label: "Privacy Policy", href: "https://gearbox.finance/privacy" }
-], g = d.forwardRef(
+], x = i.forwardRef(
   ({
-    links: o = u,
+    links: o = d,
     copyright: s,
     year: l = (/* @__PURE__ */ new Date()).getFullYear(),
-    showStatus: c = !0,
-    statusLabel: m = "Status",
-    blockSyncProps: t,
-    className: n,
-    ...i
-  }, p) => /* @__PURE__ */ e(
+    status: a,
+    className: c,
+    ...n
+  }, m) => /* @__PURE__ */ e(
     "footer",
     {
-      ref: p,
-      className: h(
+      ref: m,
+      className: f(
         "border-t border-border/60 px-4 sm:px-6 lg:px-8",
-        n
+        c
       ),
-      ...i,
-      children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
-        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ a(f, { children: [
+      ...n,
+      children: /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
+        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ t(p, { children: [
           "© Gearbox Protocol, ",
           l
         ] }) }),
-        c && t ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: /* @__PURE__ */ e(x, { ...t, statusLabel: m }) }) : null,
+        a ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: a }) : null,
         /* @__PURE__ */ e("nav", { className: "order-3 flex w-full flex-wrap items-center justify-center gap-4 sm:order-2 sm:ml-auto sm:w-auto sm:justify-start", children: o.map((r) => /* @__PURE__ */ e(
           "a",
           {
@@ -47,8 +44,8 @@ const u = [
     }
   )
 );
-g.displayName = "AppFooter";
+x.displayName = "AppFooter";
 export {
-  g as AppFooter,
-  u as DEFAULT_APP_FOOTER_LINKS
+  x as AppFooter,
+  d as DEFAULT_APP_FOOTER_LINKS
 };

package/dist/esm/components/link/link.js

@@ -3,10 +3,9 @@ import { IconExternal as x } from "@gearbox-protocol/static";
 import { cva as b } from "class-variance-authority";
 import { BaseLink as N } from "../base-link/base-link.js";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as h } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const v = b(
@@ -26,39 +25,39 @@ function k({
   className: i,
   children: n,
   href: c,
-  target: m,
+  target: l,
   variant: e = "default",
-  size: l = "default",
+  size: m = "default",
   color: d = "main",
-  external: a = !1,
+  external: t = !1,
   asChild: f = !1,
   ...w
 }) {
-  const p = a ? /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(x, { size: 14 }) }) : null, s = a && typeof n == "string" ? (() => {
-    const t = n.trimEnd().lastIndexOf(" "), u = t === -1 ? "" : n.slice(0, t + 1), _ = t === -1 ? n : n.slice(t + 1);
+  const s = t ? /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(x, { size: 14 }) }) : null, p = t && typeof n == "string" ? (() => {
+    const a = n.trimEnd().lastIndexOf(" "), u = a === -1 ? "" : n.slice(0, a + 1), _ = a === -1 ? n : n.slice(a + 1);
     return /* @__PURE__ */ o("span", { className: "content-wrap", children: [
       u,
       /* @__PURE__ */ o("span", { className: "whitespace-nowrap", children: [
         _,
-        p
+        s
       ] })
     ] });
   })() : /* @__PURE__ */ o(g, { children: [
     /* @__PURE__ */ r("span", { className: "content-wrap", children: n }),
-    p
+    s
   ] });
   return /* @__PURE__ */ r(
     N,
     {
       href: c,
-      target: m,
-      external: a,
+      target: l,
+      external: t,
       variant: e,
-      size: l,
+      size: m,
       color: d,
       className: h(v({ variant: e }), i),
       ...w,
-      children: f ? /* @__PURE__ */ r("span", { children: s }) : s
+      children: f ? /* @__PURE__ */ r("span", { children: p }) : p
     }
   );
 }

package/dist/esm/components/loader/loader.js

@@ -2,10 +2,9 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { IconPending as m } from "@gearbox-protocol/static";
 import * as a from "react";
 import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const n = a.forwardRef(function({ className: o }, i) {

package/dist/esm/components/loading-bar/loading-bar.js

@@ -3,10 +3,9 @@ import { cva as m } from "class-variance-authority";
 import * as d from "react";
 import { Modal as l } from "../modal/modal.js";
 import { SpinnerLoader as c } from "../spinner-loader/spinner-loader.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const s = m(

package/dist/esm/components/modal/modal.js

@@ -1,10 +1,9 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-dialog";
 import { cva as D } from "class-variance-authority";
-import * as i from "react";
-import "@gearbox-protocol/sdk/common-utils";
+import * as s from "react";
 import { useIsMobile as M } from "../../hooks/use-media-query.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
@@ -28,30 +27,30 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
     colorTheme: "default",
     backdrop: "default"
   }
-}), w = i.forwardRef(
+}), w = s.forwardRef(
   ({
     show: r = !0,
     colorTheme: g = "default",
     backdrop: p = "default",
     xsCentered: v = !1,
-    onClickOutside: s,
+    onClickOutside: i,
     zIndexLayer: c = "MODAL",
     className: x,
     children: y,
     ...h
   }, C) => {
     const _ = M(), d = O[c], f = { zIndex: N[c] };
-    i.useEffect(() => {
+    s.useEffect(() => {
       if (!(typeof document > "u") && r)
         return n += 1, document.body.classList.add(u), () => {
           n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(u);
         };
     }, [r]);
-    const l = i.useCallback(
+    const l = s.useCallback(
       (e) => {
-        e || s?.();
+        e || i?.();
       },
-      [s]
+      [i]
     );
     return r ? /* @__PURE__ */ t(a.Root, { open: r, onOpenChange: l, modal: !0, children: /* @__PURE__ */ m(a.Portal, { children: [
       /* @__PURE__ */ t(

package/dist/esm/components/name-cell/index.js

@@ -0,0 +1,4 @@
+import { NameCell as m } from "./name-cell.js";
+export {
+  m as NameCell
+};

package/dist/esm/components/name-cell/name-cell.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Typography as l } from "../typography/typography.js";
+function f({
+  title: c,
+  subtitle: r,
+  chips: o,
+  caption: s,
+  leading: n,
+  disabledStyle: t = !1
+}) {
+  const i = /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col items-start justify-center gap-0.5", children: [
+    /* @__PURE__ */ a("div", { className: "flex min-w-0 w-full items-start gap-x-2", children: [
+      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 break-words [overflow-wrap:anywhere]", children: c }),
+      o
+    ] }),
+    r && /* @__PURE__ */ e(
+      l,
+      {
+        variant: "caption",
+        color: "secondary",
+        as: "span",
+        className: "block min-w-0 text-xs",
+        children: r
+      }
+    ),
+    t && s && /* @__PURE__ */ e(l, { as: "span", variant: "caption", className: "leading-none", children: s })
+  ] });
+  return n ? /* @__PURE__ */ a("div", { className: "grid min-w-0 grid-cols-[auto_1fr] gap-x-3", children: [
+    n,
+    i
+  ] }) : i;
+}
+export {
+  f as NameCell
+};

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -1,12 +1,11 @@
 import { jsx as n } from "react/jsx-runtime";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function f({
+function y({
   size: o,
   className: t,
   style: i,
@@ -29,5 +28,5 @@ function f({
   );
 }
 export {
-  f as NavBarLogo
+  y as NavBarLogo
 };

package/dist/esm/components/network-icon/index.js

@@ -1,4 +1,6 @@
-import { NetworkIcon as e } from "./network-icon.js";
+import { NetworkIcon as t } from "./network-icon.js";
+import { NetworkIndicator as c } from "./network-indicator.js";
 export {
-  e as NetworkIcon
+  t as NetworkIcon,
+  c as NetworkIndicator
 };

package/dist/esm/components/network-icon/network-indicator.js

@@ -0,0 +1,81 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { faChevronDown as h } from "@fortawesome/free-solid-svg-icons";
+import { forwardRef as b } from "react";
+import "../buttons/back-button/back-button.js";
+import { Button as y } from "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import "../../utils/z-index.js";
+import "../buttons/tab-button/tab-button.js";
+import { FaIcon as u } from "../icons/fa-icon.js";
+import { FormattedMessageTyped as I } from "../typed-intl/index.js";
+import { Typography as w } from "../typography/typography.js";
+import { NetworkIcon as v } from "./network-icon.js";
+const x = {
+  sm: "sm",
+  md: "default",
+  default: "default",
+  lg: "lg"
+}, N = b(
+  ({
+    network: m,
+    chainId: k,
+    size: d = "md",
+    iconSize: n = 20,
+    chevronSize: o = 12,
+    showTitle: s = !0,
+    opened: p,
+    onClick: t,
+    interactive: l,
+    className: c,
+    ...f
+  }, g) => {
+    const e = l ?? !!t;
+    return /* @__PURE__ */ r(
+      y,
+      {
+        ref: g,
+        variant: "outline",
+        size: x[d],
+        disabled: !e,
+        onClick: t,
+        className: i(
+          c,
+          "min-w-fit",
+          "h-10 rounded-[20px]",
+          "hover:bg-transparent hover:border hover:border-gray-60",
+          "disabled:text-primary-foreground disabled:bg-transparent disabled:border disabled:border-gray-40"
+        ),
+        ...f,
+        children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+          s && /* @__PURE__ */ a(w, { as: "span", variant: "bodySmall", color: "secondary", children: [
+            /* @__PURE__ */ r(I, { messageId: "components.networkIndicator.title" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ r(v, { network: m, size: n }),
+          e && /* @__PURE__ */ r(
+            u,
+            {
+              icon: h,
+              className: i(
+                "text-secondary-foreground transition-transform",
+                p && "rotate-180"
+              ),
+              style: { width: o, height: o }
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+N.displayName = "NetworkIndicator";
+export {
+  N as NetworkIndicator
+};

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -1,9 +1,8 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const a = {
@@ -13,7 +12,7 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function f({
+function y({
   size: r = 24,
   color: n = "primary",
   className: s,
@@ -74,5 +73,5 @@ function f({
   ] });
 }
 export {
-  f as PoolPointsIndicator
+  y as PoolPointsIndicator
 };

package/dist/esm/components/radio-group/index.js

@@ -0,0 +1,5 @@
+import { RadioGroup as p, RadioGroupItem as a } from "./radio-group.js";
+export {
+  p as RadioGroup,
+  a as RadioGroupItem
+};

package/dist/esm/components/radio-group/radio-group.js

@@ -0,0 +1,56 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import { cva as n } from "class-variance-authority";
+import * as s from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import "../../utils/z-index.js";
+const l = n("", {
+  variants: {
+    size: {
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    },
+    color: {
+      primary: "border-primary",
+      secondary: "border-gray-50 data-[state=checked]:border-primary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), c = s.forwardRef(({ className: e, ...o }, i) => /* @__PURE__ */ a(r.Root, { ref: i, className: t(e), ...o }));
+c.displayName = r.Root.displayName;
+const p = s.forwardRef(({ className: e, color: o, size: i, ...d }, m) => /* @__PURE__ */ a(
+  r.Item,
+  {
+    ref: m,
+    className: t(
+      "group relative shrink-0 rounded-full border shadow cursor-pointer transition-colors flex items-center justify-center",
+      "data-[state=checked]:border-primary",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      l({ size: i, color: o }),
+      "disabled:cursor-not-allowed disabled:bg-gray-20 disabled:border-gray-50",
+      e
+    ),
+    ...d,
+    children: /* @__PURE__ */ a(
+      r.Indicator,
+      {
+        className: t(
+          "pointer-events-none flex items-center justify-center",
+          "size-2 rounded-full bg-primary",
+          "group-disabled:bg-gray-50"
+        )
+      }
+    )
+  }
+));
+p.displayName = r.Item.displayName;
+export {
+  c as RadioGroup,
+  p as RadioGroupItem
+};

package/dist/esm/components/rounded-image/rounded-image.js

@@ -1,10 +1,9 @@
 import { jsx as I } from "react/jsx-runtime";
 import * as L from "react";
 import { useState as s, useRef as j, useEffect as E } from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as k } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import { getStatic as w } from "../../utils/static.js";
 import "luxon";
 import "../../utils/z-index.js";

package/dist/esm/components/sdk-status-pill/constants.js

@@ -0,0 +1,8 @@
+class s {
+  static root = "sdk-status-pill-root";
+  static dot = "sdk-status-pill-dot";
+  static tooltip = "sdk-status-pill-tooltip";
+}
+export {
+  s as SdkStatusPillTest
+};

package/dist/esm/components/sdk-status-pill/index.js

@@ -0,0 +1,8 @@
+import { SdkStatusPillTest as r } from "./constants.js";
+import { sdkStatusDotVariant as s } from "./sdk-status.js";
+import { SdkStatusPill as e } from "./sdk-status-pill.js";
+export {
+  e as SdkStatusPill,
+  r as SdkStatusPillTest,
+  s as sdkStatusDotVariant
+};

package/dist/esm/components/sdk-status-pill/sdk-status-pill.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { StatusDot as a } from "../status-dot/status-dot.js";
+import { SimpleTooltip as c } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { useIntlTyped as m } from "../typed-intl/index.js";
+import "react";
+import { useMediaQuery as d } from "../../hooks/use-media-query.js";
+import { SdkStatusPillTest as e } from "./constants.js";
+import { sdkStatusDotVariant as l } from "./sdk-status.js";
+const p = "(hover: none)", u = {
+  loading: "components.sdkStatus.connecting",
+  ready: "components.sdkStatus.connected",
+  error: "components.sdkStatus.disconnected"
+};
+function E({
+  status: o
+}) {
+  const { formatMessage: s } = m(), n = !d(p), r = s({ messageId: u[o] }), i = (
+    // `<output>` rather than a span with role="status": same implicit live
+    // region, and the status is announced without the dot being focusable.
+    //
+    // The box is `size-6`, not the dot's 6px: a 6px hover/tap target is far
+    // under the 24px WCAG 2.5.8 minimum and genuinely hard to hit, while the
+    // dot itself has to stay small to keep the footer quiet.
+    //
+    // `-m-1.5` keeps that out of the layout in both axes, so the footer row
+    // keeps its height and the links do not shift.
+    /* @__PURE__ */ t(
+      "output",
+      {
+        className: "-m-1.5 flex size-6 cursor-pointer items-center justify-center",
+        "data-testid": e.root,
+        "aria-label": r,
+        children: /* @__PURE__ */ t(
+          a,
+          {
+            variant: l(o),
+            size: "xs",
+            pulse: o === "loading",
+            "data-testid": e.dot
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ t(
+    c,
+    {
+      title: i,
+      trigger: n ? "hover" : "click",
+      placement: "top",
+      children: /* @__PURE__ */ t("span", { className: "text-xs", "data-testid": e.tooltip, children: r })
+    }
+  );
+}
+export {
+  E as SdkStatusPill
+};

package/dist/esm/components/sdk-status-pill/sdk-status.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return t === "ready" ? "success" : "default";
+}
+export {
+  a as sdkStatusDotVariant
+};

package/dist/esm/components/search-line/search-line.js

@@ -5,10 +5,9 @@ import * as r from "react";
 import { faMagnifyingGlass as I, faArrowRight as S } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as p } from "../icons/fa-icon.js";
 import { Input as V } from "../input/input.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as f } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const D = x("relative w-full transition-all duration-200", {