@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18

package/dist/components/EstimateCost/Components/Item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { HelpCircleOutlineIcon } from "@ultraviolet/icons";
 import { Stack, Text, Tooltip, Badge } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -10,212 +10,312 @@ import { calculatePrice } from "../helper.js";
 import { useOverlay } from "../OverlayContext.js";
 import { estimateCostOverlayRow, estimateCostCell, paddingLeftCell, estimateCostPriceCell } from "../styles.css.js";
 import { estimateCostTr, estimateCostLeftSide, styledDiv, estimateCostTooltip, estimateCostTextItem, estimateCostBadgeItem, estimateCostMaxWidthText, estimateCostResourceName } from "./components.css.js";
-const TIME_RELATED_UNIT = ["seconds", "minutes", "hours", "days", "months"];
-const Item = memo(({
-  discount = 0,
-  priceText,
-  discountText,
-  label,
-  tooltipInfo,
-  // Shows an icon with tooltip that contains this text
-  subLabel = "",
-  // Usually used for showing amount that is free
-  price: basePrice = 0,
-  // Hourly price for one unit
-  monthlyPrice = 0,
-  // Price per month
-  unit: baseUnit,
-  // Can be GB, MB, Node, Queries, etc.
-  amount: currentAmount = 1,
-  // Current number of items
-  onAmountChange,
-  amountFree = 0,
-  // Amount that is free - offered by company
-  maxAmount = 0,
-  // Max amount - used for kubernetes for example
-  longFractionDigits = false,
-  // In case price is really long 0.0000076 - up 7 fraction digits
-  noIteration = false,
-  // if item is not based on time (ex: download, upload, transfer)
-  noIterationText,
-  noBorder,
-  // remove the border bottom of the item
-  noPrice,
-  // remove the price on right side of the table
-  isDefined = true,
-  children = null,
-  isFirstElement = false,
-  isLastElement = false,
-  isPrimaryBackground = false,
-  productsCallback,
-  iteration: receivedIteration,
-  // Object from parent that contains time period (hours, days, months)
-  shouldBeHidden = false,
-  // Hide element from overlay if screen width is small
-  hideFromOverlay = false,
-  // Hide element from overlay in any case
-  textNotDefined,
-  // Text to display in case of not defined value
-  animated = false,
-  // if true, zoomIn animation is triggered
-  tabulation,
-  // Increase left padding of the item
-  labelTextVariant,
-  // To change left cell typography variant
-  labelTextProminence,
-  // To change left cell typography prominence
-  notice,
-  // To display a gray text below the label
-  strikeThrough,
-  // To strike through the price
-  style
-}) => {
-  const {
-    locales,
-    formatNumber
-  } = useEstimateCost();
-  let iteration;
-  if (noIteration) {
-    iteration = {
-      ...receivedIteration ?? {
-        value: 0
-      },
-      unit: "hours"
-    };
-  } else {
-    iteration = receivedIteration;
-  }
-  const price = useMemo(() => {
-    if (monthlyPrice && basePrice === 0) {
-      return monthlyPrice / multiplier.months;
-    }
-    return basePrice;
-  }, [basePrice, monthlyPrice]);
-  const unit = useMemo(() => {
-    if (!baseUnit) {
-      return locales["estimate.cost.units.gb.label"];
+const TIME_RELATED_UNIT = [
+  "seconds",
+  "minutes",
+  "hours",
+  "days",
+  "months"
+];
+const Item = memo(
+  ({
+    discount = 0,
+    priceText,
+    discountText,
+    label,
+    tooltipInfo,
+    // Shows an icon with tooltip that contains this text
+    subLabel = "",
+    // Usually used for showing amount that is free
+    price: basePrice = 0,
+    // Hourly price for one unit
+    monthlyPrice = 0,
+    // Price per month
+    unit: baseUnit,
+    // Can be GB, MB, Node, Queries, etc.
+    amount: currentAmount = 1,
+    // Current number of items
+    onAmountChange,
+    amountFree = 0,
+    // Amount that is free - offered by company
+    maxAmount = 0,
+    // Max amount - used for kubernetes for example
+    longFractionDigits = false,
+    // In case price is really long 0.0000076 - up 7 fraction digits
+    noIteration = false,
+    // if item is not based on time (ex: download, upload, transfer)
+    noIterationText,
+    noBorder,
+    // remove the border bottom of the item
+    noPrice,
+    // remove the price on right side of the table
+    isDefined = true,
+    children = null,
+    isFirstElement = false,
+    isLastElement = false,
+    isPrimaryBackground = false,
+    productsCallback,
+    iteration: receivedIteration,
+    // Object from parent that contains time period (hours, days, months)
+    shouldBeHidden = false,
+    // Hide element from overlay if screen width is small
+    hideFromOverlay = false,
+    // Hide element from overlay in any case
+    textNotDefined,
+    // Text to display in case of not defined value
+    animated = false,
+    // if true, zoomIn animation is triggered
+    tabulation,
+    // Increase left padding of the item
+    labelTextVariant,
+    // To change left cell typography variant
+    labelTextProminence,
+    // To change left cell typography prominence
+    notice,
+    // To display a gray text below the label
+    strikeThrough,
+    // To strike through the price
+    style
+  }) => {
+    const { locales, formatNumber } = useEstimateCost();
+    let iteration;
+    if (noIteration) {
+      iteration = {
+        ...receivedIteration ?? { value: 0 },
+        unit: "hours"
+      };
+    } else {
+      iteration = receivedIteration;
     }
-    return baseUnit;
-  }, [baseUnit, locales]);
-  const {
-    isOverlay
-  } = useOverlay();
-  const Row = isOverlay ? "li" : "tr";
-  const Cell = isOverlay ? "div" : "td";
-  const LeftSide = "div";
-  const [amount, setAmount] = useState(currentAmount);
-  const [isVariant, setIsVariant] = useState(false);
-  useEffect(() => setAmount(currentAmount), [setAmount, currentAmount]);
-  useEffect(() => onAmountChange?.(amount), [onAmountChange, amount]);
-  const itemCallback = useCallback((localAmount, localIsVariant) => {
-    setAmount(localAmount);
-    setIsVariant(localIsVariant);
-  }, [setAmount, setIsVariant]);
-  const id = useId();
-  useEffect(() => () => productsCallback?.remove({
-    id
-  }), [id, productsCallback]);
-  useEffect(() => {
-    if (!isOverlay) {
-      productsCallback?.add({
+    const price = useMemo(() => {
+      if (monthlyPrice && basePrice === 0) {
+        return monthlyPrice / multiplier.months;
+      }
+      return basePrice;
+    }, [basePrice, monthlyPrice]);
+    const unit = useMemo(() => {
+      if (!baseUnit) {
+        return locales["estimate.cost.units.gb.label"];
+      }
+      return baseUnit;
+    }, [baseUnit, locales]);
+    const { isOverlay } = useOverlay();
+    const Row = isOverlay ? "li" : "tr";
+    const Cell = isOverlay ? "div" : "td";
+    const LeftSide = "div";
+    const [amount, setAmount] = useState(currentAmount);
+    const [isVariant, setIsVariant] = useState(false);
+    useEffect(() => setAmount(currentAmount), [setAmount, currentAmount]);
+    useEffect(() => onAmountChange?.(amount), [onAmountChange, amount]);
+    const itemCallback = useCallback(
+      (localAmount, localIsVariant) => {
+        setAmount(localAmount);
+        setIsVariant(localIsVariant);
+      },
+      [setAmount, setIsVariant]
+    );
+    const id = useId();
+    useEffect(
+      () => () => productsCallback?.remove({ id }),
+      [id, productsCallback]
+    );
+    useEffect(() => {
+      if (!isOverlay) {
+        productsCallback?.add({
+          amount,
+          amountFree,
+          discount,
+          id,
+          isVariant,
+          longFractionDigits,
+          maxAmount,
+          noIteration,
+          price
+        });
+      }
+    }, [
+      price,
+      discount,
+      amount,
+      id,
+      productsCallback,
+      maxAmount,
+      noIteration,
+      isVariant,
+      amountFree,
+      isOverlay,
+      longFractionDigits
+    ]);
+    const computedItemPrice = useMemo(
+      () => calculatePrice({
         amount,
         amountFree,
         discount,
-        id,
-        isVariant,
-        longFractionDigits,
-        maxAmount,
-        noIteration,
-        price
-      });
-    }
-  }, [price, discount, amount, id, productsCallback, maxAmount, noIteration, isVariant, amountFree, isOverlay, longFractionDigits]);
-  const computedItemPrice = useMemo(() => calculatePrice({
-    amount,
-    amountFree,
-    discount,
-    price,
-    timeAmount: noIteration ? 1 : iteration?.value ?? 1,
-    timeUnit: noIteration ? "hours" : iteration?.unit ?? "hours"
-  }), [price, amount, amountFree, iteration, noIteration, discount]);
-  const computedMaxItemPrice = useMemo(() => calculatePrice({
-    amount: maxAmount,
-    amountFree,
-    discount,
-    price,
-    timeAmount: noIteration ? 1 : iteration?.value ?? 1,
-    timeUnit: noIteration ? "hours" : iteration?.unit ?? "hours"
-  }), [price, maxAmount, amountFree, iteration, noIteration, discount]);
-  const formatMaximumFractionDigits = useMemo(() => {
-    if (!iteration?.unit) {
-      return void 0;
-    }
-    return longFractionDigits ? maximumFractionDigitsLong[iteration?.unit] : maximumFractionDigits[iteration?.unit];
-  }, [iteration?.unit, longFractionDigits]);
-  return /* @__PURE__ */ jsxs(Row, { className: isOverlay ? estimateCostOverlayRow({
-    hideFromOverlay,
-    isFirstElement,
-    shouldBeHidden
-  }) : estimateCostTr, style, children: [
-    /* @__PURE__ */ jsx(Cell, { className: estimateCostCell({
-      hasBorder: !isLastElement && !noBorder && !isOverlay
-    }), style: assignInlineVars({
-      [paddingLeftCell]: `${(tabulation ?? 0) * 8 + 16}px`
-    }), children: /* @__PURE__ */ jsxs(LeftSide, { className: isOverlay ? "" : estimateCostLeftSide, children: [
-      /* @__PURE__ */ jsxs(Stack, { children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
-          /* @__PURE__ */ jsx(Text, { as: "p", prominence: labelTextProminence ?? "default", variant: labelTextVariant ?? "body", children: label }),
-          tooltipInfo ? /* @__PURE__ */ jsx("div", { className: styledDiv, children: /* @__PURE__ */ jsx(Tooltip, { className: estimateCostTooltip, text: tooltipInfo, children: /* @__PURE__ */ jsx(HelpCircleOutlineIcon, { size: "medium" }) }) }) : null,
-          subLabel && !isOverlay ? /* @__PURE__ */ jsx(Text, { as: "p", className: estimateCostTextItem, italic: true, sentiment: "primary", variant: "body", children: subLabel }) : null,
-          discount > 0 && discountText ? /* @__PURE__ */ jsx(Badge, { className: estimateCostBadgeItem, prominence: "strong", sentiment: "warning", size: "small", children: discountText }) : null
-        ] }),
-        notice ? /* @__PURE__ */ jsx(Text, { as: "p", className: estimateCostMaxWidthText, prominence: "weak", variant: "caption", children: notice }) : null
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: estimateCostResourceName({
-        isAnimated: isOverlay && animated,
-        isOverlay
-      }), children: isDefined ? Children.map(children, (child) => isValidElement(child) ? cloneElement(child, {
-        amount,
-        itemCallback,
-        maxAmount,
-        unit
-      }) : null) : textNotDefined || locales["estimate.cost.notDefined"] })
-    ] }) }),
-    !isOverlay ? /* @__PURE__ */ jsx("td", { className: `${estimateCostCell({
-      hasBorder: !isLastElement && !noBorder,
-      primary: isPrimaryBackground
-    })} ${estimateCostPriceCell}`, style: assignInlineVars({
-      [paddingLeftCell]: `16px`
-    }), children: !noPrice ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Text, { as: "p", placement: "right", prominence: computedItemPrice === 0 && computedMaxItemPrice === 0 ? "weak" : "default", sentiment: computedItemPrice === 0 && computedMaxItemPrice === 0 ? "neutral" : "primary", strikeThrough, variant: noIterationText ? "headingSmall" : "bodyStrong", children: [
-        priceText,
-        !priceText ? formatNumber(computedItemPrice, {
-          maximumFractionDigits: formatMaximumFractionDigits
-        }) : null,
-        noIterationText ? /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmall", children: [
-          "/",
-          noIterationText
-        ] }) : null,
-        !priceText && computedMaxItemPrice > 0 ? ` - ${formatNumber(computedMaxItemPrice, {
-          maximumFractionDigits: formatMaximumFractionDigits
-        })}` : null
-      ] }),
-      amount - amountFree !== 1 && computedItemPrice > 0 || maxAmount > 0 && computedMaxItemPrice > 0 ? /* @__PURE__ */ jsxs(Text, { as: "p", placement: "right", variant: "body", children: [
-        formatNumber(calculatePrice({
-          amount: 1,
-          discount,
-          price,
-          timeAmount: 1,
-          timeUnit: "hours"
-        }), {
-          maximumFractionDigits: longFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
-        }),
-        TIME_RELATED_UNIT.includes(unit) ? locales[`estimate.cost.units.${unit}.label`].toLowerCase() : `/${unit}`,
-        !noIteration ? `/${locales["estimate.cost.units.hours.label"].toLowerCase()}` : null
-      ] }) : null
-    ] }) : null }) : null
-  ] });
-});
+        price,
+        timeAmount: noIteration ? 1 : iteration?.value ?? 1,
+        timeUnit: noIteration ? "hours" : iteration?.unit ?? "hours"
+      }),
+      [price, amount, amountFree, iteration, noIteration, discount]
+    );
+    const computedMaxItemPrice = useMemo(
+      () => calculatePrice({
+        amount: maxAmount,
+        amountFree,
+        discount,
+        price,
+        timeAmount: noIteration ? 1 : iteration?.value ?? 1,
+        timeUnit: noIteration ? "hours" : iteration?.unit ?? "hours"
+      }),
+      [price, maxAmount, amountFree, iteration, noIteration, discount]
+    );
+    const formatMaximumFractionDigits = useMemo(() => {
+      if (!iteration?.unit) {
+        return void 0;
+      }
+      return longFractionDigits ? maximumFractionDigitsLong[iteration?.unit] : maximumFractionDigits[iteration?.unit];
+    }, [iteration?.unit, longFractionDigits]);
+    return /* @__PURE__ */ jsxs(
+      Row,
+      {
+        className: isOverlay ? estimateCostOverlayRow({
+          hideFromOverlay,
+          isFirstElement,
+          shouldBeHidden
+        }) : estimateCostTr,
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            Cell,
+            {
+              className: estimateCostCell({
+                hasBorder: !isLastElement && !noBorder && !isOverlay
+              }),
+              style: assignInlineVars({
+                [paddingLeftCell]: `${(tabulation ?? 0) * 8 + 16}px`
+              }),
+              children: /* @__PURE__ */ jsxs(LeftSide, { className: isOverlay ? "" : estimateCostLeftSide, children: [
+                /* @__PURE__ */ jsxs(Stack, { children: [
+                  /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "p",
+                        prominence: labelTextProminence ?? "default",
+                        variant: labelTextVariant ?? "body",
+                        children: label
+                      }
+                    ),
+                    tooltipInfo ? /* @__PURE__ */ jsx("div", { className: styledDiv, children: /* @__PURE__ */ jsx(Tooltip, { className: estimateCostTooltip, text: tooltipInfo, children: /* @__PURE__ */ jsx(HelpCircleOutlineIcon, { size: "medium" }) }) }) : null,
+                    subLabel && !isOverlay ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "p",
+                        className: estimateCostTextItem,
+                        italic: true,
+                        sentiment: "primary",
+                        variant: "body",
+                        children: subLabel
+                      }
+                    ) : null,
+                    discount > 0 && discountText ? /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        className: estimateCostBadgeItem,
+                        prominence: "strong",
+                        sentiment: "warning",
+                        size: "small",
+                        children: discountText
+                      }
+                    ) : null
+                  ] }),
+                  notice ? /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "p",
+                      className: estimateCostMaxWidthText,
+                      prominence: "weak",
+                      variant: "caption",
+                      children: notice
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: estimateCostResourceName({
+                      isAnimated: isOverlay && animated,
+                      isOverlay
+                    }),
+                    children: isDefined ? Children.map(
+                      children,
+                      (child) => isValidElement(child) ? cloneElement(child, {
+                        amount,
+                        itemCallback,
+                        maxAmount,
+                        unit
+                      }) : null
+                    ) : textNotDefined || locales["estimate.cost.notDefined"]
+                  }
+                )
+              ] })
+            }
+          ),
+          !isOverlay ? /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: `${estimateCostCell({ hasBorder: !isLastElement && !noBorder, primary: isPrimaryBackground })} ${estimateCostPriceCell}`,
+              style: assignInlineVars({
+                [paddingLeftCell]: `16px`
+              }),
+              children: !noPrice ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  Text,
+                  {
+                    as: "p",
+                    placement: "right",
+                    prominence: computedItemPrice === 0 && computedMaxItemPrice === 0 ? "weak" : "default",
+                    sentiment: computedItemPrice === 0 && computedMaxItemPrice === 0 ? "neutral" : "primary",
+                    strikeThrough,
+                    variant: noIterationText ? "headingSmall" : "bodyStrong",
+                    children: [
+                      priceText,
+                      !priceText ? formatNumber(computedItemPrice, {
+                        maximumFractionDigits: formatMaximumFractionDigits
+                      }) : null,
+                      noIterationText ? /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmall", children: [
+                        "/",
+                        noIterationText
+                      ] }) : null,
+                      !priceText && computedMaxItemPrice > 0 ? ` - ${formatNumber(computedMaxItemPrice, {
+                        maximumFractionDigits: formatMaximumFractionDigits
+                      })}` : null
+                    ]
+                  }
+                ),
+                amount - amountFree !== 1 && computedItemPrice > 0 || maxAmount > 0 && computedMaxItemPrice > 0 ? /* @__PURE__ */ jsxs(Text, { as: "p", placement: "right", variant: "body", children: [
+                  formatNumber(
+                    calculatePrice({
+                      amount: 1,
+                      discount,
+                      price,
+                      timeAmount: 1,
+                      timeUnit: "hours"
+                    }),
+                    {
+                      maximumFractionDigits: longFractionDigits ? maximumFractionDigitsLong.hours : maximumFractionDigits.hours
+                    }
+                  ),
+                  TIME_RELATED_UNIT.includes(unit) ? locales[`estimate.cost.units.${unit}.label`].toLowerCase() : `/${unit}`,
+                  !noIteration ? `/${locales["estimate.cost.units.hours.label"].toLowerCase()}` : null
+                ] }) : null
+              ] }) : null
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 export {
   Item
 };

package/dist/components/EstimateCost/Components/LineThrough.d.ts

@@ -2,5 +2,5 @@ import type { ComponentProps } from 'react';
 type LineThroughProps = ComponentProps<'span'> & {
     isActive?: boolean;
 };
-export declare const LineThrough: ({ isActive, className, ...props }: LineThroughProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineThrough: ({ isActive, className, ...props }: LineThroughProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EstimateCost/Components/LineThrough.js

@@ -1,11 +1,17 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { estimateCostLineThrough } from "./components.css.js";
 const LineThrough = ({
   isActive,
   className,
   ...props
-}) => /* @__PURE__ */ jsx("span", { className: `${className ? `${className} ` : ""} ${isActive ? estimateCostLineThrough : ""}`, ...props });
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: `${className ? `${className} ` : ""} ${isActive ? estimateCostLineThrough : ""}`,
+    ...props
+  }
+);
 export {
   LineThrough
 };

package/dist/components/EstimateCost/Components/NumberInput.d.ts

@@ -6,5 +6,5 @@ type NumberInputProps = {
     maxValue?: number;
     controls?: boolean;
 };
-export declare const NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, controls, }: NumberInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, controls, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EstimateCost/Components/NumberInput.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { NumberInput as NumberInput$1 } from "@ultraviolet/ui";
 import { useState, useEffect } from "react";
 import { useOverlay } from "../OverlayContext.js";
@@ -13,18 +13,26 @@ const NumberInput = ({
   itemCallback,
   controls = true
 }) => {
-  const {
-    isOverlay
-  } = useOverlay();
+  const { isOverlay } = useOverlay();
   const [value, setValue] = useState(amount);
   useEffect(() => {
     getAmountValue?.(amount);
   }, [getAmountValue, amount]);
-  return isOverlay ? /* @__PURE__ */ jsx("div", { className: estimateCostItemResourceName(), children: /* @__PURE__ */ jsx(Regular, { children: amount }) }) : /* @__PURE__ */ jsx(NumberInput$1, { controls, max: maxValue, min: minValue, onChange: (newValue) => {
-    setValue(newValue);
-    itemCallback?.(newValue, true);
-    getAmountValue?.(newValue);
-  }, size: "small", value });
+  return isOverlay ? /* @__PURE__ */ jsx("div", { className: estimateCostItemResourceName(), children: /* @__PURE__ */ jsx(Regular, { children: amount }) }) : /* @__PURE__ */ jsx(
+    NumberInput$1,
+    {
+      controls,
+      max: maxValue,
+      min: minValue,
+      onChange: (newValue) => {
+        setValue(newValue);
+        itemCallback?.(newValue, true);
+        getAmountValue?.(newValue);
+      },
+      size: "small",
+      value
+    }
+  );
 };
 export {
   NumberInput

package/dist/components/EstimateCost/Components/Region.d.ts

@@ -18,5 +18,5 @@ type RegionProps = {
     noBorder?: boolean;
     noPrice?: boolean;
 } & Pick<ComponentProps<typeof Item>, 'hideFromOverlay' | 'style'>;
-export declare const Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, style, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, style, }: RegionProps) => import("react/jsx-runtime").JSX.Element>;
 export {};