@landtrustinc/design-system 1.2.42 → 1.2.44

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import React__default, { SVGProps, HTMLAttributes, FC, PropsWithChildren, ReactN
 import * as _emotion_styled from '@emotion/styled';
 import * as csstype from 'csstype';
 import * as styled_system from 'styled-system';
-import { BorderProps, SpaceProps, ColorProps, FlexboxProps, GridProps as GridProps$1, LayoutProps, PositionProps, TypographyProps, WidthProps } from 'styled-system';
+import { BorderProps, SpaceProps, ColorProps, FlexboxProps, GridProps as GridProps$1, LayoutProps, PositionProps, TypographyProps, WidthProps, TLengthStyledSystem } from 'styled-system';
 import * as _emotion_react from '@emotion/react';
 import { Interpolation, Theme } from '@emotion/react';
 
@@ -2016,6 +2016,18 @@ type TimerProps = {
      * Additional CSS class names
      */
     className?: string;
+    /**
+     * Text to display before the time left
+     */
+    fontSize?: TTextSize;
+    /**
+     * Font weight of the text
+     */
+    fontWeight?: TFontWeight;
+    /**
+     * Color of the text
+     */
+    showSeconds?: boolean;
 };
 declare const Timer: FC<TimerProps>;
 
@@ -2355,6 +2367,14 @@ type ProgressBarProps = {
      * Additional CSS class names
      */
     className?: string;
+    /**
+     * Height of the progress bar
+     */
+    height?: TLengthStyledSystem;
+    /**
+     * Kind of the progress bar
+     */
+    kind?: 'rounded' | 'square';
 };
 declare const ProgressBar: FC<ProgressBarProps>;
 

package/dist/index.js

@@ -7835,15 +7835,20 @@ var progressStyles = import_react49.css`
 
 // src/ProgressBar/ProgressBar.tsx
 var import_jsx_runtime242 = require("@emotion/react/jsx-runtime");
-var ProgressBar = ({ progress, className }) => {
+var ProgressBar = ({
+  progress,
+  className,
+  kind = "rounded",
+  height = "10px"
+}) => {
   const clampedProgress = Math.min(100, Math.max(0, progress));
   return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
     Box_default,
     {
       width: "100%",
-      height: "10px",
+      height,
       backgroundColor: "var(--color-primary-100)",
-      borderRadius: "48px",
+      borderRadius: kind === "rounded" ? "48px" : "0px",
       overflow: "hidden",
       position: "relative",
       className,
@@ -7851,7 +7856,7 @@ var ProgressBar = ({ progress, className }) => {
         Box_default,
         {
           height: "100%",
-          borderRadius: "48px",
+          borderRadius: kind === "rounded" ? "48px" : "0px",
           backgroundColor: "var(--color-primary-900)",
           css: progressStyles,
           style: { width: `${clampedProgress}%` },
@@ -7901,7 +7906,10 @@ var Timer = ({
   expirationTimestamp,
   onTimeUpdate,
   onExpire,
-  className
+  className,
+  fontSize = "md",
+  fontWeight = "bold",
+  showSeconds = false
 }) => {
   const [timeLeft, setTimeLeft] = (0, import_react51.useState)(
     () => calculateTimeLeft(expirationTimestamp)
@@ -7931,14 +7939,21 @@ var Timer = ({
   if (!timeLeft) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Box_default, { css: rootStyles2, className, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Text_default, { as: "span", fontWeight: "bold", children: [
-    timeLeft.days,
-    "d : ",
-    timeLeft.hours,
-    "h : ",
-    timeLeft.minutes,
-    "m"
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Box_default, { css: rootStyles2, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Text_default, { as: "span", fontWeight, size: fontSize, children: [
+      timeLeft.days,
+      "d : ",
+      timeLeft.hours,
+      "h : ",
+      timeLeft.minutes,
+      "m"
+    ] }),
+    showSeconds && /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Text_default, { as: "span", fontWeight, size: fontSize, children: [
+      "\xA0: ",
+      timeLeft.seconds,
+      "s"
+    ] })
+  ] });
 };
 Timer.displayName = "Timer";
 var Timer_default = Timer;