trepur_components 2.3.33 → 2.3.35

package/lib/components/ImageCard/ImageCard.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & import('react').RefAttributes<HTMLAnchorElement>> & {
         Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<import('../Image').ImageProps> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
         Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

package/lib/components/ImageCard/index.d.ts

@@ -1,7 +1,7 @@
 import { ImageProps } from '../Image';
 import { HTMLAttributes } from 'react';
 
-declare const ImageCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+declare const ImageCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & import('react').RefAttributes<HTMLAnchorElement>> & {
     Image: import('react').ForwardRefExoticComponent<HTMLAttributes<ImageProps> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
     Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

package/lib/components/ImageCard/index.js

@@ -1,31 +1,29 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { Image as p } from "../Image/index.js";
-import c from "clsx";
-const d = m(({ className: a, children: e, ...r }, n) => /* @__PURE__ */ t(
+import C from "clsx";
+const d = m(({ className: a, children: e, onClick: r, ...g }, c) => /* @__PURE__ */ t("a", { ref: c, className: "", href: "", onClick: r, ...g, children: /* @__PURE__ */ t(
   "div",
   {
-    className: c(
+    className: C(
       "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
       a
     ),
-    ref: n,
-    ...r,
     children: e
   }
-)), s = m(({ src: a, ...e }) => /* @__PURE__ */ t("div", { className: "h-64 object-cover", children: /* @__PURE__ */ t(p, { src: a, ...e }) })), o = m(({ children: a, ...e }, r) => /* @__PURE__ */ t("div", { className: "px-2 pb-4 pt-2", ref: r, ...e, children: a })), i = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-lg", ref: e, ...a })), l = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-sm", ref: e, ...a })), g = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
+) })), s = m(({ src: a, ...e }) => /* @__PURE__ */ t("div", { className: "h-64 object-cover", children: /* @__PURE__ */ t(p, { src: a, ...e }) })), o = m(({ children: a, ...e }, r) => /* @__PURE__ */ t("div", { className: "px-2 pb-4 pt-2", ref: r, ...e, children: a })), i = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-lg", ref: e, ...a })), l = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-sm", ref: e, ...a })), n = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
 d.displayName = "ImageCard";
 s.displayName = "ImageCard.Image";
 i.displayName = "ImageCard.Title";
 l.displayName = "ImageCard.Subtitle";
 o.displayName = "ImageCard.Content";
-g.displayName = "ImageCard.Text";
+n.displayName = "ImageCard.Text";
 const b = Object.assign(d, {
   Image: s,
   Content: o,
   Title: i,
   Subtitle: l,
-  Text: g
+  Text: n
 });
 export {
   b as ImageCard

package/lib/components/Nav/index.js

@@ -1,97 +1,83 @@
 import { jsx as e, jsxs as p, Fragment as H } from "react/jsx-runtime";
-import { createContext as w, forwardRef as l, useState as v, useMemo as C, useContext as m, useRef as k } from "react";
+import { createContext as w, forwardRef as d, useState as v, useMemo as C, useContext as c, useRef as k } from "react";
 import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
 import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
-import d from "clsx";
+import n from "clsx";
 import { Icon as D } from "../Icon/index.js";
 import { NavItem as F } from "../NavItem/index.js";
-const i = w(null), N = l(({ className: t, children: r, loading: a }, o) => {
-  const [s, n] = v(!1), c = C(
+const i = w(null), g = d(({ className: t, children: r, loading: a }, o) => {
+  const [s, l] = v(!1), m = C(
     () => ({
       expanded: s,
-      setExpanded: n,
+      setExpanded: l,
       loading: a
     }),
-    [s, n, a]
+    [s, l, a]
   );
-  return /* @__PURE__ */ e(i.Provider, { value: c, children: /* @__PURE__ */ e("div", { className: t, ref: o, children: r }) });
-}), f = l(
+  return /* @__PURE__ */ e(i.Provider, { value: m, children: /* @__PURE__ */ e("div", { className: t, ref: o, children: r }) });
+}), N = d(
   ({ className: t, children: r }, a) => /* @__PURE__ */ e(
     "div",
     {
       ref: a,
-      className: d("relative h-24 w-full bg-nav-bg px-2 py-2", t),
+      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", t),
       children: r
     }
   )
-), g = l(({ className: t, children: r }, a) => {
-  const { loading: o, setExpanded: s, expanded: n } = m(i) || {};
-  return /* @__PURE__ */ p("div", { ref: a, className: d("flex h-full lg:hidden", t), children: [
+), f = d(({ className: t, children: r }, a) => {
+  const { loading: o, setExpanded: s, expanded: l } = c(i) || {};
+  return /* @__PURE__ */ p("div", { ref: a, className: n("flex h-full lg:hidden", t), children: [
     !o && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
       M,
       {
         variant: "ghost",
-        onClick: () => s == null ? void 0 : s(!n),
+        onClick: () => s == null ? void 0 : s(!l),
         className: "aspect-square"
       }
     ) }),
     /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: r })
   ] });
-}), u = l(({ className: t, children: r }, a) => /* @__PURE__ */ e(
+}), u = d(({ className: t, children: r }, a) => /* @__PURE__ */ e(
   "div",
   {
     ref: a,
-    className: d(
-      "hidden justify-between lg:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
+    className: n(
+      "hidden justify-between lg:flex gap-4 px-4 lg:gap-8 lg:px-20",
       t
     ),
     children: r
   }
-)), x = l(
+)), x = d(
   ({ className: t, children: r }, a) => {
-    const { expanded: o } = m(i) || {};
+    const { expanded: o } = c(i) || {};
     return o ? /* @__PURE__ */ e(
       "div",
       {
         ref: a,
-        className: d(
-          "h-screen bg-nav-bg px-8 pb-12 pt-2 md:hidden",
+        className: n(
+          "h-screen bg-nav-bg px-8 pb-12 pt-2 lg:hidden",
           t
         ),
-        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: r })
+        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 lg:hidden", children: r })
       }
     ) : /* @__PURE__ */ e(H, {});
   }
-), h = l(
+), h = d(
   ({ className: t, children: r }, a) => {
-    const { loading: o } = m(i) || {};
-    return o ? /* @__PURE__ */ e(
-      "div",
-      {
-        ref: a,
-        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
-        children: [...Array(5)].map((s, n) => /* @__PURE__ */ e(F, { loading: !0 }, n))
-      }
-    ) : /* @__PURE__ */ e(
-      "div",
-      {
-        ref: a,
-        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
-        children: r
-      }
-    );
+    const { loading: o } = c(i) || {};
+    return o ? /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", t), children: [...Array(5)].map((s, l) => /* @__PURE__ */ e(F, { loading: !0 }, l)) }) : /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", t), children: r });
   }
-), b = l(({ className: t, label: r, children: a, active: o = !1 }) => {
-  const [s, n] = v(!1), c = k(null);
+), b = d(({ className: t, label: r, children: a, active: o = !1 }) => {
+  const [s, l] = v(!1), m = k(null);
   return /* @__PURE__ */ p(
     "div",
     {
-      ref: c,
-      onMouseEnter: () => n(!0),
-      onMouseLeave: () => n(!1),
-      onClick: () => n(!s),
-      className: d(
-        "relative m-auto py-0 text-nav-text md:after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
+      ref: m,
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      onClick: () => l(!s),
+      className: n(
+        "relative m-auto py-0 text-nav-text lg:after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
         {
           "font-bold": o,
           "font-light": !o
@@ -103,34 +89,34 @@ const i = w(null), N = l(({ className: t, children: r, loading: a }, o) => {
           /* @__PURE__ */ e("p", { className: "text-lg", children: r }),
           /* @__PURE__ */ e(D, { size: "xs", icon: j })
         ] }),
-        s && /* @__PURE__ */ e("div", { className: "rounded-md md:absolute md:-left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "rounded-md grid grid-cols-1 gap-y-2 bg-nav-bg px-1 py-2 w-full", children: a }) })
+        s && /* @__PURE__ */ e("div", { className: "rounded-md lg:absolute lg:-left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "rounded-md grid grid-cols-1 gap-y-2 bg-nav-bg px-1 py-2 w-full", children: a }) })
       ]
     }
   );
-}), y = l(({ className: t, src: r, ...a }, o) => {
-  const { loading: s } = m(i) || {};
+}), y = d(({ className: t, src: r, ...a }, o) => {
+  const { loading: s } = c(i) || {};
   return s ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
     "img",
     {
-      className: d("h-20 flex-none", t),
+      className: n("h-20 flex-none", t),
       ref: o,
       src: r,
       ...a
     }
   );
 });
-N.displayName = "Nav";
-f.displayName = "Nav.Header";
+g.displayName = "Nav";
+N.displayName = "Nav.Header";
 u.displayName = "Nav.DesktopHeader";
-g.displayName = "Nav.MobileHeader";
+f.displayName = "Nav.MobileHeader";
 y.displayName = "Nav.Logo";
 h.displayName = "Nav.Section";
 x.displayName = "Nav.Body";
 b.displayName = "Nav.Folder";
-const q = Object.assign(N, {
-  Header: f,
+const q = Object.assign(g, {
+  Header: N,
   DesktopHeader: u,
-  MobileHeader: g,
+  MobileHeader: f,
   Section: h,
   Logo: y,
   Body: x,

package/lib/components/Pill/Pill.stories.d.ts

@@ -17,6 +17,10 @@ export default meta;
 type Story = StoryObj<typeof Pill>;
 export declare const Default: Story;
 export declare const Error: Story;
+export declare const ErrorInverse: Story;
 export declare const Warning: Story;
+export declare const WarningInverse: Story;
 export declare const Success: Story;
+export declare const SuccessInverse: Story;
 export declare const Info: Story;
+export declare const InfoInverse: Story;

package/lib/components/Pill/index.d.ts

@@ -7,6 +7,7 @@ export type PillVariant = 'warning' | 'error' | 'info' | 'success';
 export interface PillProps {
     variant?: PillVariant;
     loading?: boolean;
+    inverse?: boolean;
 }
 declare const Pill: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & PillProps & import('react').RefAttributes<HTMLDivElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{

package/lib/components/Pill/index.js

@@ -1,30 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import i from "clsx";
-import { Icon as c } from "../Icon/index.js";
-const s = t(({ children: r, variant: e = "info" }, l) => /* @__PURE__ */ o(
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import s from "clsx";
+import { Icon as a } from "../Icon/index.js";
+const i = r(({ children: o, variant: e = "info", inverse: l = !1 }, f) => /* @__PURE__ */ t(
   "div",
   {
-    ref: l,
-    className: i(
-      "inline-grid grid-flow-col items-center gap-1 rounded-full border px-2 py-0.5",
+    ref: f,
+    className: s(
+      "inline-grid grid-flow-col w-auto py-2 px-4 text-base font-semibold rounded-full gap-2",
       {
-        "border-error-default bg-error-light text-error-default": e === "error",
-        "border-info-default bg-info-light text-info-default": e === "info",
-        "border-success-default bg-success-light text-success-default": e === "success",
-        "border-warning-default bg-warning-light text-warning-default": e === "warning"
+        "border-error-default bg-error-light text-error-default": e === "error" && !l,
+        "border-info-default bg-info-light text-info-default": e === "info" && !l,
+        "border-success-default bg-success-light text-success-default": e === "success" && !l,
+        "border-warning-default bg-warning-light text-warning-default": e === "warning" && !l,
+        "border-error-light bg-error-default text-error-light": e === "error" && l,
+        "border-info-light bg-info-default text-info-light": e === "info" && l,
+        "border-success-light bg-success-default text-success-light": e === "success" && l,
+        "border-warning-light bg-warning-default text-warning-light": e === "warning" && l
       }
     ),
-    children: r
+    children: o
   }
-)), n = t(({ className: r, ...e }, l) => /* @__PURE__ */ o("p", { className: i("text-xs", r), ref: l, ...e })), a = t(({ icon: r }, e) => /* @__PURE__ */ o(c, { size: "xs", ref: e, icon: r }));
-s.displayName = "Pill";
-a.displayName = "Pill.Icon";
-n.displayName = "Chip.Label";
-const u = Object.assign(s, {
-  Icon: a,
-  Label: n
+)), g = r(({ className: o, ...e }, l) => /* @__PURE__ */ t("p", { className: s("text-base my-auto", o), ref: l, ...e })), d = r(({ icon: o }, e) => /* @__PURE__ */ t(a, { className: "my-auto", size: "md", ref: e, icon: o }));
+i.displayName = "Pill";
+d.displayName = "Pill.Icon";
+g.displayName = "Chip.Label";
+const m = Object.assign(i, {
+  Icon: d,
+  Label: g
 });
 export {
-  u as Pill
+  m as Pill
 };

package/lib/components/SplitCard/index.js

@@ -3,7 +3,7 @@ import { createContext as u, forwardRef as o, useMemo as N, useContext as c } fr
 import h from "../../utils/matchMedia.js";
 import { Screens as y } from "../../utils/screens.js";
 import d from "clsx";
-const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobile: e, ...i }, s) => {
+const a = u(null), g = o(({ className: r, children: l, swapDesktop: t, swapMobile: e, ...i }, s) => {
   const f = `(min-width: ${y.md})`, m = h(f), S = N(
     () => ({
       swapDesktop: t,
@@ -21,7 +21,7 @@ const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobil
       children: l
     }
   ) });
-}), g = o(({ className: r, children: l, ...t }, e) => {
+}), x = o(({ className: r, children: l, ...t }, e) => {
   const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
   return /* @__PURE__ */ n(
     "div",
@@ -64,18 +64,18 @@ const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobil
   {
     ref: e,
     className: d(
-      "items-center text-6xl font-semibold tracking-wider md:text-4xl lg:text-6xl",
+      "items-center font-semibold tracking-wider md:text-4xl lg:text-6xl",
       r
     ),
     ...t,
     children: l
   }
 )), v = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n("p", { ref: e, className: d("text-lg", r), ...t, children: l }));
-x.displayName = "SplitCard";
-g.displayName = "SplitCard.LeftContent";
+g.displayName = "SplitCard";
+x.displayName = "SplitCard.LeftContent";
 C.displayName = "SplitCard.RightContent";
-const j = Object.assign(x, {
-  LeftContent: g,
+const j = Object.assign(g, {
+  LeftContent: x,
   RightContent: C,
   Title: M,
   Text: v

package/lib/components/Tubestops/index.js

@@ -1,43 +1,43 @@
-import { jsx as l, jsxs as x } from "react/jsx-runtime";
-import { createContext as T, forwardRef as r, useState as d, useMemo as f, useContext as c, Children as z } from "react";
-import a from "clsx";
+import { jsx as l, jsxs as T } from "react/jsx-runtime";
+import { createContext as f, forwardRef as a, useState as x, useMemo as v, useContext as i, Children as k } from "react";
+import r from "clsx";
 import { Button as b } from "../Button/index.js";
-const p = T(null), N = T(
+const p = f(null), N = f(
   null
-), v = r(({ className: n, children: t, activeStop: s = 1 }, e) => {
-  const [o, u] = d(s), [i, m] = d(0), j = f(
+), h = a(({ className: n, children: t, activeStop: s = 1 }, e) => {
+  const [o, u] = x(s), [c, m] = x(0), d = v(
     () => ({
-      totalStops: i ?? 0,
+      totalStops: c ?? 0,
       setTotalStops: m,
       currentStop: o,
       setCurrentStop: u
     }),
-    [o, u, i, m]
+    [o, u, c, m]
   );
-  return /* @__PURE__ */ l(p.Provider, { value: j, children: /* @__PURE__ */ l("div", { ref: e, className: n, children: t }) });
-}), S = r(({ className: n, children: t }, s) => {
-  const { setTotalStops: e } = c(p) || {}, o = z.count(t);
-  return e == null || e(o), /* @__PURE__ */ l("div", { ref: s, className: a("flex py-4", n), children: t });
-}), h = r(({ className: n, children: t }, s) => /* @__PURE__ */ l("div", { ref: s, className: a("", n), children: t })), y = r(({ className: n, stopId: t, children: s }, e) => {
-  const { currentStop: o = 0 } = c(p) || {};
+  return /* @__PURE__ */ l(p.Provider, { value: d, children: /* @__PURE__ */ l("div", { ref: e, className: n, children: t }) });
+}), y = a(({ className: n, children: t }, s) => {
+  const { setTotalStops: e } = i(p) || {}, o = k.count(t);
+  return e == null || e(o), /* @__PURE__ */ l("div", { ref: s, className: r("flex py-4", n), children: t });
+}), C = a(({ className: n, children: t }, s) => /* @__PURE__ */ l("div", { ref: s, className: r("", n), children: t })), S = a(({ className: n, stopId: t, children: s }, e) => {
+  const { currentStop: o = 0 } = i(p) || {};
   return /* @__PURE__ */ l(
     "div",
     {
       ref: e,
-      className: a("", n, {
+      className: r("", n, {
         block: o === t,
         hidden: o !== t
       }),
       children: s
     }
   );
-}), C = r(({ className: n }, t) => {
+}), w = a(({ className: n }, t) => {
   const {
     setCurrentStop: s,
     currentStop: e = 0,
     totalStops: o = 0
-  } = c(p) || {};
-  return /* @__PURE__ */ x("div", { ref: t, className: a("flex justify-between", n), children: [
+  } = i(p) || {};
+  return /* @__PURE__ */ T("div", { ref: t, className: r("flex justify-between", n), children: [
     /* @__PURE__ */ l(
       b,
       {
@@ -55,46 +55,51 @@ const p = T(null), N = T(
       }
     )
   ] });
-}), w = r(({ className: n, stopId: t = 0, children: s }, e) => {
-  const { currentStop: o = 0, totalStops: u = 0 } = c(p) || {}, [i] = d(t), m = f(
+}), g = a(({ className: n, stopId: t = 0, children: s }, e) => {
+  const {
+    currentStop: o = 0,
+    setCurrentStop: u,
+    totalStops: c = 0
+  } = i(p) || {}, [m] = x(t), d = v(
     () => ({
-      stopNumber: i
+      stopNumber: m
     }),
-    [i]
+    [m]
   );
-  return /* @__PURE__ */ l(N.Provider, { value: m, children: /* @__PURE__ */ x("div", { ref: e, className: a(n, "w-full min-w-[120px]"), children: [
+  return /* @__PURE__ */ l(N.Provider, { value: d, children: /* @__PURE__ */ T("div", { ref: e, className: r(n, "w-full min-w-[120px]"), children: [
     /* @__PURE__ */ l(
       "div",
       {
-        className: a({
-          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-future": t >= o && t < u,
-          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-complete": t < o && t < u
+        className: r({
+          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-future": t >= o && t < c,
+          "mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-complete": t < o && t < c
         })
       }
     ),
     /* @__PURE__ */ l(
       "p",
       {
-        className: a(
+        onClick: () => u == null ? void 0 : u(t),
+        className: r(
+          "hover:cursor-pointer z-10 mx-auto h-6 w-6 rounded-full",
           {
             "relative z-20 -mt-4 bg-tubestop-station-complete": t < o,
             "relative z-20 -mt-4 bg-tubestop-station-active": o === t,
             "relative z-20 -mt-4 bg-tubestop-station-future": t > o,
-            "mt-1": t === u
-          },
-          "z-10 mx-auto h-6 w-6 rounded-full"
+            "mt-1": t === c
+          }
         )
       }
     ),
     s
   ] }) });
-}), g = r(({ className: n, children: t }, s) => {
-  const { currentStop: e = 0 } = c(p) || {}, { stopNumber: o = 0 } = c(N) || {};
+}), j = a(({ className: n, children: t }, s) => {
+  const { currentStop: e = 0 } = i(p) || {}, { stopNumber: o = 0 } = i(N) || {};
   return /* @__PURE__ */ l(
     "p",
     {
       ref: s,
-      className: a(
+      className: r(
         "mt-2 text-center",
         {
           "font-medium text-tubestop-text-complete": o < e,
@@ -107,20 +112,20 @@ const p = T(null), N = T(
     }
   );
 });
-v.displayName = "Tubestop";
-S.displayName = "Tubestops.Header";
-w.displayName = "Tubestops.Stop";
-g.displayName = "Tubestops.Text";
-C.displayName = "Tubestops.Controls";
-h.displayName = "Tubestops.Body";
-y.displayName = "Tubestops.Content";
-const L = Object.assign(v, {
-  Header: S,
-  Stop: w,
-  Text: g,
-  Controls: C,
-  Body: h,
-  Content: y
+h.displayName = "Tubestop";
+y.displayName = "Tubestops.Header";
+g.displayName = "Tubestops.Stop";
+j.displayName = "Tubestops.Text";
+w.displayName = "Tubestops.Controls";
+C.displayName = "Tubestops.Body";
+S.displayName = "Tubestops.Content";
+const L = Object.assign(h, {
+  Header: y,
+  Stop: g,
+  Text: j,
+  Controls: w,
+  Body: C,
+  Content: S
 });
 export {
   L as Tubestops

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.33",
+  "version": "2.3.35",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,