@stokr/components-library 3.0.22 → 3.0.23

package/dist/components/Modal/SuccessModal/SuccessModal.js

@@ -7,6 +7,7 @@ import { Modal } from "../Modal.js";
 import { SuccessModalContent, AnimationContainer, Title, Subtitle, ContentWrapper } from "./SuccessModal.styles.js";
 import successAnimation from "../../../static/animations/checked.lottie.js";
 import progressAnimation from "../../../static/animations/progress.lottie.js";
+import uploadAnimation from "../../../static/animations/upload.lottie.js";
 const variantConfig = {
   success: {
     animation: successAnimation,
@@ -17,6 +18,11 @@ const variantConfig = {
     animation: progressAnimation,
     segment: null,
     loop: false
+  },
+  upload: {
+    animation: uploadAnimation,
+    segment: null,
+    loop: false
   }
 };
 const SuccessModalComponent = ({
@@ -79,7 +85,7 @@ const SuccessModalComponent = ({
 SuccessModalComponent.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  variant: PropTypes.oneOf(["success", "progress"]),
+  variant: PropTypes.oneOf(["success", "progress", "upload"]),
   title: PropTypes.node,
   subtitle: PropTypes.node,
   content: PropTypes.node,

package/dist/components/StatusDot/StatusDot.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { colors } from "../../styles/colors.js";
+import { Root, Dot, Label } from "./StatusDot.styles.js";
+const VARIANT_PRESETS = {
+  pending: {
+    color: colors.grey2,
+    backgroundColor: "rgba(155, 155, 155, 0.14)"
+  },
+  initiated: {
+    color: colors.blue,
+    backgroundColor: "#0050CA0D"
+  },
+  paid: {
+    color: colors.fernGreen,
+    backgroundColor: "#4D97410D"
+  },
+  declined: {
+    color: colors.darkRed,
+    backgroundColor: "rgba(210, 32, 13, 0.08)"
+  }
+};
+const StatusDot = ({
+  children,
+  variant,
+  color,
+  backgroundColor,
+  surface = "transparent",
+  uppercase = false,
+  dotSize = 6,
+  className,
+  style,
+  labelStyle,
+  onClick,
+  ...rest
+}) => {
+  const preset = variant && VARIANT_PRESETS[variant] ? VARIANT_PRESETS[variant] : null;
+  const resolvedColor = color ?? preset?.color ?? colors.black;
+  const isSubtle = surface === "subtle";
+  const resolvedBackground = isSubtle && (backgroundColor !== void 0 ? backgroundColor : preset?.backgroundColor);
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      $subtle: isSubtle,
+      $backgroundColor: resolvedBackground,
+      $hasClick: Boolean(onClick),
+      className,
+      style,
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick(e);
+        }
+      } : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Dot, { $size: dotSize, $color: resolvedColor }),
+        /* @__PURE__ */ jsx(Label, { $color: resolvedColor, $uppercase: uppercase, style: labelStyle, children })
+      ]
+    }
+  );
+};
+export {
+  StatusDot
+};

package/dist/components/StatusDot/StatusDot.styles.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+const Root = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["$subtle", "$backgroundColor", "$hasClick"].includes(prop)
+})`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: ${(p) => p.$subtle ? "2px 8px" : "0"};
+  background-color: ${(p) => p.$subtle && p.$backgroundColor ? p.$backgroundColor : "transparent"};
+  border-radius: ${(p) => p.$subtle ? "2px" : "0"};
+  cursor: ${(p) => p.$hasClick ? "pointer" : "default"};
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+
+  ${(p) => p.$hasClick && `
+    &:hover {
+      opacity: 0.85;
+    }
+  `}
+`;
+const Dot = styled.span.withConfig({
+  shouldForwardProp: (prop) => !["$size", "$color"].includes(prop)
+})`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  border-radius: 50%;
+  background-color: ${(p) => p.$color};
+  flex-shrink: 0;
+`;
+const Label = styled.span.withConfig({
+  shouldForwardProp: (prop) => !["$color", "$uppercase"].includes(prop)
+})`
+  font-size: ${(p) => p.$uppercase ? "11px" : "12px"};
+  font-weight: ${(p) => p.$uppercase ? "700" : "400"};
+  line-height: 20px;
+  color: ${(p) => p.$color};
+  text-transform: ${(p) => p.$uppercase ? "uppercase" : "none"};
+  letter-spacing: ${(p) => p.$uppercase ? "2px" : "0.6px"};
+`;
+export {
+  Dot,
+  Label,
+  Root
+};

package/dist/components/icons/LinkIcon.js

@@ -17,13 +17,13 @@ const LinkIcon = () => /* @__PURE__ */ jsxs(
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859\n			c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318\n			c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6\n			c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581\n			c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0\n			c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0\n			c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
+          d: "M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859\r\n			c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318\r\n			c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6\r\n			c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581\r\n			c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0\r\n			c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0\r\n			c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
         }
       ) }) }),
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387\n			c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877\n			l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768\n			l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0\n			c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893\n			c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365\n			c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597\n			c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403\n			l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"
+          d: "M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387\r\n			c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877\r\n			l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768\r\n			l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0\r\n			c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893\r\n			c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365\r\n			c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597\r\n			c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403\r\n			l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"
         }
       ) }) }),
       /* @__PURE__ */ jsx("g", {}),

package/dist/index.js

@@ -119,6 +119,7 @@ import { CurrencyLogo, DetailItem, DetailsSection, PaymentDetailsCard } from "./
 import { Timeline } from "./components/Timeline/Timeline.js";
 import { TimelineStep } from "./components/Timeline/TimelineStep.js";
 import { StatusTag } from "./components/StatusTag/StatusTag.js";
+import { StatusDot } from "./components/StatusDot/StatusDot.js";
 import { StepIndicator } from "./components/StepsProgress/StepIndicator.js";
 import { Snackbar } from "./components/Snackbar/Snackbar.js";
 import { SnackbarContext, SnackbarProvider } from "./components/Snackbar/SnackbarProvider.js";
@@ -509,6 +510,7 @@ export {
   default35 as SocialYoutube,
   SpanButton,
   StatusBadge,
+  StatusDot,
   StatusTag,
   StepController,
   StepControllerConsumer,

package/dist/runtime-config.js

@@ -1,4 +1,4 @@
-const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false, "VITE_API_URL": "https://platform-api.stokr.info/api/v1", "VITE_BASE_URL_PUBLIC": "https://platform-api-no-auth.stokr.info/api/v1", "VITE_COOKIE_DOMAIN": "stokr.info", "VITE_FIREBASE_API_KEY": "AIzaSyBBp_3Romnfv--YpUuV0mJgDymvSp3oq0c", "VITE_FIREBASE_APP_ID": "1:568229412804:web:2391857e3e2a0b02346e91", "VITE_FIREBASE_AUTH_DOMAIN": "stokr-development-env.firebaseapp.com", "VITE_FIREBASE_MEASUREMENT_ID": "G-CP53SZVSMN", "VITE_FIREBASE_MESSAGING_SENDER_ID": "568229412804", "VITE_FIREBASE_PROJECT_ID": "stokr-development-env", "VITE_FIREBASE_STORAGE_BUCKET": "stokr-development-env.appspot.com", "VITE_MIXPANEL_TOKEN": "a7bb1e881f9b2600762fded84d8ce0ea", "VITE_PHOTO_API_URL": "https://platform-api.stokr.info/api/v1", "VITE_WEBSITE_DOMAIN": "stokr.info" };
+const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
 const _overrides = {};
 const ENV_KEY_BY_CONFIG = {
   apiUrl: "VITE_API_URL",

package/dist/static/animations/upload.lottie.js

@@ -0,0 +1,4 @@
+const uploadAnimation = "data:application/octet-stream;base64,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";
+export {
+  uploadAnimation as default
+};