@schematichq/schematic-components 0.7.3 → 0.7.4

package/dist/schematic-components.cjs.js

@@ -3017,7 +3017,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.16";
+var v = "6.1.17";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -3026,7 +3026,7 @@ var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t2, n) {
   if (true) {
-    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i2 = console.error;
+    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i2 = console.error;
     try {
       var a2 = true;
       console.error = function(t3) {
@@ -10743,7 +10743,8 @@ function BillingProductPriceTierResponseDataFromJSONTyped(json, ignoreDiscrimina
   }
   return {
     flatAmount: json["flat_amount"] == null ? void 0 : json["flat_amount"],
-    perUnitPrice: json["per_unit_price"],
+    perUnitPrice: json["per_unit_price"] == null ? void 0 : json["per_unit_price"],
+    perUnitPriceDecimal: json["per_unit_price_decimal"] == null ? void 0 : json["per_unit_price_decimal"],
     upTo: json["up_to"] == null ? void 0 : json["up_to"]
   };
 }
@@ -13189,7 +13190,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.3";
+      headers["X-Schematic-Components-Version"] = "0.7.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14372,14 +14373,6 @@ var ModalHeader = ({
   );
 };
 
-// src/components/ui/progress-bar/styles.ts
-var Container3 = dt.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-`;
-
 // src/components/ui/progress-bar/ProgressBar.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var progressColorMap = [
@@ -14396,7 +14389,6 @@ var ProgressBar = ({
   total = 0,
   color = "gray",
   bgColor = "#F2F4F7",
-  barWidth = "100%",
   ...props
 }) => {
   const theme = nt();
@@ -14407,18 +14399,18 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container3, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Flex,
-      {
-        $position: "relative",
-        $alignItems: "center",
-        $width: `${barWidth}`,
-        $maxWidth: "100%",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Flex,
+    {
+      $position: "relative",
+      $alignItems: "center",
+      $gap: "1rem",
+      $width: "100%",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Box,
           {
-            $position: "relative",
             $overflow: "hidden",
             $width: "100%",
             $height: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14429,29 +14421,28 @@ var ProgressBar = ({
               {
                 $width: `${Math.min(progress, 100)}%`,
                 $height: "100%",
-                $backgroundColor: barColorMap[color],
-                $borderRadius: "9999px"
+                $backgroundColor: barColorMap[color]
               }
             )
           }
+        ),
+        total && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          Text,
+          {
+            $font: theme.typography.text.fontFamily,
+            $size: 14,
+            $weight: 500,
+            $color: theme.typography.text.color,
+            children: [
+              value,
+              "/",
+              total
+            ]
+          }
         )
-      }
-    ),
-    total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      Text,
-      {
-        $font: theme.typography.text.fontFamily,
-        $size: 14,
-        $weight: 500,
-        $color: theme.typography.text.color,
-        children: [
-          value,
-          "/",
-          total
-        ]
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
 // src/components/ui/text/styles.ts
@@ -14500,7 +14491,9 @@ var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt.div``;
+var Trigger = dt.div`
+  width: 100%;
+`;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14656,13 +14649,15 @@ var Tooltip = ({
     }
   }, [position2]);
   (0, import_react19.useLayoutEffect)(() => {
-    updateCoords();
     const handleResize = (0, import_debounce.default)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
+  (0, import_react19.useLayoutEffect)(() => {
+    updateCoords();
+  }, [updateCoords, show]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Trigger,
@@ -16377,7 +16372,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "acacia";
+var RELEASE_TRAIN = "basil";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -16417,7 +16412,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "6.1.0",
+    version: "7.0.0",
     startTime
   });
 };
@@ -16492,7 +16487,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("6.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -18940,7 +18935,7 @@ Invoices.displayName = "Invoices";
 var import_react35 = require("react");
 
 // src/components/elements/metered-features/styles.ts
-var Container4 = dt.div`
+var Container3 = dt.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -19036,7 +19031,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container3, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -19061,8 +19056,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" },
-          $flexGrow: 1
+          ...isOverage && { bgColor: "#EF4444" }
         }
       );
       return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column-reverse", children: [

package/dist/schematic-components.d.ts

@@ -462,7 +462,13 @@ declare interface BillingProductPriceTierResponseData {
      * @type {number}
      * @memberof BillingProductPriceTierResponseData
      */
-    perUnitPrice: number;
+    perUnitPrice?: number | null;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingProductPriceTierResponseData
+     */
+    perUnitPriceDecimal?: string | null;
     /**
      *
      * @type {number}
@@ -4244,7 +4250,7 @@ export declare const PricingTable: ForwardRefExoticComponent<ElementProps & Recu
 
 export declare type PricingTableProps = DesignProps_7;
 
-export declare const ProgressBar: ({ progress, value, total, color, bgColor, barWidth, ...props }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ progress, value, total, color, bgColor, ...props }: ProgressBarProps) => JSX.Element;
 
 export declare interface ProgressBarProps extends React.ComponentPropsWithoutRef<typeof Flex> {
     progress: number;
@@ -4252,7 +4258,6 @@ export declare interface ProgressBarProps extends React.ComponentPropsWithoutRef
     total?: number | string;
     color?: "gray" | "blue" | "yellow" | "orange" | "red";
     bgColor?: string;
-    barWidth?: string | number;
 }
 
 export declare const progressColorMap: ("blue" | "red" | "yellow")[];

package/dist/schematic-components.esm.js

@@ -2964,7 +2964,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.16";
+var v = "6.1.17";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -2973,7 +2973,7 @@ var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t2, n) {
   if (true) {
-    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i2 = console.error;
+    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i2 = console.error;
     try {
       var a2 = true;
       console.error = function(t3) {
@@ -10690,7 +10690,8 @@ function BillingProductPriceTierResponseDataFromJSONTyped(json, ignoreDiscrimina
   }
   return {
     flatAmount: json["flat_amount"] == null ? void 0 : json["flat_amount"],
-    perUnitPrice: json["per_unit_price"],
+    perUnitPrice: json["per_unit_price"] == null ? void 0 : json["per_unit_price"],
+    perUnitPriceDecimal: json["per_unit_price_decimal"] == null ? void 0 : json["per_unit_price_decimal"],
     upTo: json["up_to"] == null ? void 0 : json["up_to"]
   };
 }
@@ -13136,7 +13137,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.3";
+      headers["X-Schematic-Components-Version"] = "0.7.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14319,14 +14320,6 @@ var ModalHeader = ({
   );
 };
 
-// src/components/ui/progress-bar/styles.ts
-var Container3 = dt.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-`;
-
 // src/components/ui/progress-bar/ProgressBar.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var progressColorMap = [
@@ -14343,7 +14336,6 @@ var ProgressBar = ({
   total = 0,
   color = "gray",
   bgColor = "#F2F4F7",
-  barWidth = "100%",
   ...props
 }) => {
   const theme = nt();
@@ -14354,18 +14346,18 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ jsxs4(Container3, { ...props, children: [
-    /* @__PURE__ */ jsx7(
-      Flex,
-      {
-        $position: "relative",
-        $alignItems: "center",
-        $width: `${barWidth}`,
-        $maxWidth: "100%",
-        children: /* @__PURE__ */ jsx7(
-          Flex,
+  return /* @__PURE__ */ jsxs4(
+    Flex,
+    {
+      $position: "relative",
+      $alignItems: "center",
+      $gap: "1rem",
+      $width: "100%",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7(
+          Box,
           {
-            $position: "relative",
             $overflow: "hidden",
             $width: "100%",
             $height: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14376,29 +14368,28 @@ var ProgressBar = ({
               {
                 $width: `${Math.min(progress, 100)}%`,
                 $height: "100%",
-                $backgroundColor: barColorMap[color],
-                $borderRadius: "9999px"
+                $backgroundColor: barColorMap[color]
               }
             )
           }
+        ),
+        total && /* @__PURE__ */ jsxs4(
+          Text,
+          {
+            $font: theme.typography.text.fontFamily,
+            $size: 14,
+            $weight: 500,
+            $color: theme.typography.text.color,
+            children: [
+              value,
+              "/",
+              total
+            ]
+          }
         )
-      }
-    ),
-    total !== 0 && /* @__PURE__ */ jsxs4(
-      Text,
-      {
-        $font: theme.typography.text.fontFamily,
-        $size: 14,
-        $weight: 500,
-        $color: theme.typography.text.color,
-        children: [
-          value,
-          "/",
-          total
-        ]
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
 // src/components/ui/text/styles.ts
@@ -14447,7 +14438,9 @@ import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useRe
 import { createPortal } from "react-dom";
 
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt.div``;
+var Trigger = dt.div`
+  width: 100%;
+`;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14603,13 +14596,15 @@ var Tooltip = ({
     }
   }, [position2]);
   useLayoutEffect3(() => {
-    updateCoords();
     const handleResize = (0, import_debounce.default)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
+  useLayoutEffect3(() => {
+    updateCoords();
+  }, [updateCoords, show]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx8(
       Trigger,
@@ -16334,7 +16329,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "acacia";
+var RELEASE_TRAIN = "basil";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -16374,7 +16369,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "6.1.0",
+    version: "7.0.0",
     startTime
   });
 };
@@ -16449,7 +16444,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("6.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -18901,7 +18896,7 @@ Invoices.displayName = "Invoices";
 import { forwardRef as forwardRef10, useMemo as useMemo10, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
-var Container4 = dt.div`
+var Container3 = dt.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -18997,7 +18992,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx31(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ jsx31(Container3, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -19022,8 +19017,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" },
-          $flexGrow: 1
+          ...isOverage && { bgColor: "#EF4444" }
         }
       );
       return /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column-reverse", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -30,14 +30,14 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^6.1.0",
+    "@stripe/stripe-js": "^7.0.0",
     "classnames": "^2.5.1",
     "i18next": "^24.2.3",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
     "pluralize": "^8.0.0",
     "react-i18next": "^15.4.1",
-    "styled-components": "^6.1.16",
+    "styled-components": "^6.1.17",
     "uuid": "^11.1.0"
   },
   "devDependencies": {