trepur_components 2.3.34 → 2.3.36

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

@@ -3,8 +3,11 @@ 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>>;
+        Images: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            asCarousel?: boolean | undefined;
+        } & import('react').RefAttributes<HTMLDivElement>>;
         Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
         Subtitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -1,8 +1,11 @@
 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>>;
+    Images: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        asCarousel?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
     Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     Subtitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

package/lib/components/ImageCard/index.js

@@ -1,32 +1,36 @@
-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 { jsx as m } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Image as C } from "../Image/index.js";
+import N from "clsx";
+import { Carousel as s } from "../Carousel/index.js";
+const d = r(({ className: e, children: a, onClick: t, ...p }, I) => /* @__PURE__ */ m("a", { ref: I, className: "inline-block", href: "", onClick: t, ...p, children: /* @__PURE__ */ m(
   "div",
   {
-    className: c(
+    className: N(
       "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
-      a
+      e
     ),
-    ref: n,
-    ...r,
-    children: e
+    children: 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 })), g = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
+) })), l = r(({ children: e, asCarousel: a = !1, ...t }) => a ? /* @__PURE__ */ m(s, { perView: 1, spacing: 0, className: "h-64", loop: !0, ...t, children: /* @__PURE__ */ m(s.Content, { children: /* @__PURE__ */ m(s.Slides, { children: e }) }) }) : /* @__PURE__ */ m("div", { children: e[0] })), i = r(({ src: e, ...a }) => (
+  // <div className="keen-slider__slide h-64">
+  /* @__PURE__ */ m("div", { className: "h-64", children: /* @__PURE__ */ m(C, { className: "object-cover", src: e, ...a }) })
+)), o = r(({ children: e, ...a }, t) => /* @__PURE__ */ m("div", { className: "px-2 pb-4 pt-2", ref: t, ...a, children: e })), n = r(({ ...e }, a) => /* @__PURE__ */ m("p", { className: "text-lg", ref: a, ...e })), c = r(({ ...e }, a) => /* @__PURE__ */ m("p", { className: "text-sm", ref: a, ...e })), g = r(({ ...e }, a) => /* @__PURE__ */ m("p", { className: "line-clamp-4 pt-4", ref: a, ...e }));
 d.displayName = "ImageCard";
-s.displayName = "ImageCard.Image";
-i.displayName = "ImageCard.Title";
-l.displayName = "ImageCard.Subtitle";
+i.displayName = "ImageCard.Image";
+l.displayName = "ImageCard.Images";
+n.displayName = "ImageCard.Title";
+c.displayName = "ImageCard.Subtitle";
 o.displayName = "ImageCard.Content";
 g.displayName = "ImageCard.Text";
-const b = Object.assign(d, {
-  Image: s,
+const y = Object.assign(d, {
+  Image: i,
+  Images: l,
   Content: o,
-  Title: i,
-  Subtitle: l,
+  Title: n,
+  Subtitle: c,
   Text: g
 });
 export {
-  b as ImageCard
+  y as ImageCard
 };

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/SplitCard.stories.d.ts

@@ -18,3 +18,4 @@ type Story = StoryObj<typeof SplitCard>;
 export declare const Default: Story;
 export declare const swapDesktop: Story;
 export declare const swapMobile: Story;
+export declare const loading: Story;

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

@@ -4,6 +4,7 @@ export interface SplitCardContextProps {
     swapDesktop?: boolean;
     swapMobile?: boolean;
     isMd?: boolean;
+    loading?: boolean;
 }
 declare const SplitCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & SplitCardContextProps & import('react').RefAttributes<HTMLDivElement>> & {
     LeftContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/SplitCard/index.js

@@ -1,85 +1,92 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as u, forwardRef as o, useMemo as N, useContext as c } from "react";
-import h from "../../utils/matchMedia.js";
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import { createContext as S, forwardRef as n, useMemo as v, useContext as u } from "react";
+import w 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 f = `(min-width: ${y.md})`, m = h(f), S = N(
-    () => ({
-      swapDesktop: t,
-      swapMobile: e,
-      isMd: m
-    }),
-    [t, e, m]
-  );
-  return /* @__PURE__ */ n(a.Provider, { value: S, children: /* @__PURE__ */ n(
-    "div",
-    {
-      ref: s,
-      ...i,
-      className: d("grid grid-cols-1 md:grid-cols-2", r),
-      children: l
-    }
-  ) });
-}), g = o(({ className: r, children: l, ...t }, e) => {
-  const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
-  return /* @__PURE__ */ n(
+import o from "clsx";
+const p = S(null), g = n(
+  ({ className: r, children: a, swapDesktop: t, swapMobile: l, loading: s, ...i }, d) => {
+    const C = `(min-width: ${y.md})`, c = w(C), h = v(
+      () => ({
+        swapDesktop: t,
+        swapMobile: l,
+        isMd: c,
+        loading: s
+      }),
+      [t, l, c, s]
+    );
+    return /* @__PURE__ */ e(p.Provider, { value: h, children: /* @__PURE__ */ e(
+      "div",
+      {
+        ref: d,
+        ...i,
+        className: o("grid grid-cols-1 md:grid-cols-2", r),
+        children: a
+      }
+    ) });
+  }
+), f = n(({ className: r, children: a, ...t }, l) => {
+  const { swapDesktop: s, swapMobile: i, isMd: d, loading: m } = u(p) || {};
+  return m ? /* @__PURE__ */ e("div", { className: "pl-20 px-12 py-12 h-full w-full flex", children: /* @__PURE__ */ e("div", { className: "m-auto h-80 border-4 rounded border-gray-300 animate-pulse gap-4 grid w-full" }) }) : /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
+      ref: l,
       ...t,
-      className: d(
+      className: o(
         "mx-auto flex items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
-          "md:order-last lg:pl-12 lg:pr-20": i,
-          "lg:pl-20 lg:pr-12": !i,
-          "order-last": !p && s
+          "md:order-last lg:pl-12 lg:pr-20": s,
+          "lg:pl-20 lg:pr-12": !s,
+          "order-last": !d && i
         },
         r
       ),
-      children: l
+      children: a
     }
   );
-}), C = o(({ className: r, children: l, ...t }, e) => {
-  const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
-  return /* @__PURE__ */ n(
+}), x = n(({ className: r, children: a, ...t }, l) => {
+  const { swapDesktop: s, swapMobile: i, isMd: d, loading: m } = u(p) || {};
+  return m ? /* @__PURE__ */ e("div", { className: "h-full w-full flex", children: /* @__PURE__ */ N("div", { className: "m-auto gap-4 grid w-10/12", children: [
+    /* @__PURE__ */ e("div", { className: "mx-auto h-8 bg-gray-300 rounded-full w-40 animate-pulse" }),
+    /* @__PURE__ */ e("div", { className: "h-6 bg-gray-300 rounded-full w-full animate-pulse" }),
+    /* @__PURE__ */ e("div", { className: "h-6 bg-gray-300 rounded-full w-full animate-pulse" })
+  ] }) }) : /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
+      ref: l,
       ...t,
-      className: d(
+      className: o(
         "flex h-full items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
-          "md:order-first lg:pl-20 lg:pr-12": i,
-          "lg:pl-12 lg:pr-20": !i,
-          "order-first": !p && s
+          "md:order-first lg:pl-20 lg:pr-12": s,
+          "lg:pl-12 lg:pr-20": !s,
+          "order-first": !d && i
         },
         r
       ),
-      children: l
+      children: a
     }
   );
-}), M = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n(
+}), b = n(({ className: r, children: a, ...t }, l) => /* @__PURE__ */ e(
   "p",
   {
-    ref: e,
-    className: d(
-      "items-center text-6xl font-semibold tracking-wider md:text-4xl lg:text-6xl",
+    ref: l,
+    className: o(
+      "items-center font-semibold tracking-wider md:text-4xl lg:text-6xl",
       r
     ),
     ...t,
-    children: l
+    children: a
   }
-)), 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";
-C.displayName = "SplitCard.RightContent";
-const j = Object.assign(x, {
-  LeftContent: g,
-  RightContent: C,
-  Title: M,
-  Text: v
+)), M = n(({ className: r, children: a, ...t }, l) => /* @__PURE__ */ e("p", { ref: l, className: o("text-lg", r), ...t, children: a }));
+g.displayName = "SplitCard";
+f.displayName = "SplitCard.LeftContent";
+x.displayName = "SplitCard.RightContent";
+const z = Object.assign(g, {
+  LeftContent: f,
+  RightContent: x,
+  Title: b,
+  Text: M
 });
 export {
-  j as SplitCard
+  z as SplitCard
 };

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.34",
+  "version": "2.3.36",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -50,6 +50,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",