@loafmarkets/ui 0.1.6 → 0.1.7

package/dist/index.d.mts

@@ -429,4 +429,40 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+type PropertyAddressOption = {
+    id: string;
+    label: string;
+};
+type PropertyValueSummary = {
+    value: number;
+    change?: number;
+    label?: string;
+    currencySymbol?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+};
+type PropertyPriceSummary = {
+    value: number;
+    change?: number;
+    changePercent?: number;
+    currencySymbol?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    percentFormatOptions?: Intl.NumberFormatOptions;
+};
+type PropertyCompareBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    propertyValue?: PropertyValueSummary;
+    propertyValueVariant?: "classic" | "card" | "pill";
+    price?: PropertyPriceSummary;
+};
+declare const PropertyCompareBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    propertyValue?: PropertyValueSummary;
+    propertyValueVariant?: "classic" | "card" | "pill";
+    price?: PropertyPriceSummary;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyCompareBar, type PropertyCompareBarProps, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type PropertyValueSummary, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.d.ts

@@ -429,4 +429,40 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+type PropertyAddressOption = {
+    id: string;
+    label: string;
+};
+type PropertyValueSummary = {
+    value: number;
+    change?: number;
+    label?: string;
+    currencySymbol?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+};
+type PropertyPriceSummary = {
+    value: number;
+    change?: number;
+    changePercent?: number;
+    currencySymbol?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    percentFormatOptions?: Intl.NumberFormatOptions;
+};
+type PropertyCompareBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    propertyValue?: PropertyValueSummary;
+    propertyValueVariant?: "classic" | "card" | "pill";
+    price?: PropertyPriceSummary;
+};
+declare const PropertyCompareBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    propertyValue?: PropertyValueSummary;
+    propertyValueVariant?: "classic" | "card" | "pill";
+    price?: PropertyPriceSummary;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, LoafLiquidityBadge, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyCompareBar, type PropertyCompareBarProps, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type PropertyValueSummary, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.js

@@ -5650,6 +5650,393 @@ var PropertySubheader = o__namespace.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
+var PropertyCompareBar = o__namespace.forwardRef(
+  ({
+    className,
+    addresses,
+    selectedAddressId,
+    onSelectAddress,
+    propertyValue,
+    propertyValueVariant = "classic",
+    price,
+    ...props
+  }, ref) => {
+    const normalizedAddresses = o__namespace.useMemo(() => {
+      return addresses.map(
+        (option) => typeof option === "string" ? { id: option, label: option } : option
+      );
+    }, [addresses]);
+    const hasAddresses = normalizedAddresses.length > 0;
+    const firstAddressId = normalizedAddresses[0]?.id;
+    const isControlled = selectedAddressId !== void 0;
+    const [internalSelectedId, setInternalSelectedId] = o__namespace.useState(
+      () => isControlled ? void 0 : firstAddressId
+    );
+    const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
+    o__namespace.useEffect(() => {
+      if (!isControlled) {
+        setInternalSelectedId((current) => {
+          if (current != null && normalizedAddresses.some((option) => option.id === current)) {
+            return current;
+          }
+          return firstAddressId;
+        });
+      }
+    }, [firstAddressId, isControlled, normalizedAddresses]);
+    const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
+    const [isDropdownOpen, setIsDropdownOpen] = o__namespace.useState(false);
+    const dropdownRef = o__namespace.useRef(null);
+    o__namespace.useEffect(() => {
+      if (!isDropdownOpen) return;
+      const handleClick = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsDropdownOpen(false);
+        }
+      };
+      const handleKey = (event) => {
+        if (event.key === "Escape") {
+          setIsDropdownOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClick);
+      document.addEventListener("keydown", handleKey);
+      return () => {
+        document.removeEventListener("mousedown", handleClick);
+        document.removeEventListener("keydown", handleKey);
+      };
+    }, [isDropdownOpen]);
+    const handleAddressSelect = (addressId) => {
+      if (!isControlled) {
+        setInternalSelectedId(addressId);
+      }
+      onSelectAddress?.(addressId);
+      setIsDropdownOpen(false);
+    };
+    const propertyValueLabel = propertyValue?.label ?? "Property Value";
+    const propertyValueCurrency = propertyValue?.currencySymbol ?? "$";
+    const propertyValueFormat = propertyValue?.formatOptions ?? {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    };
+    const formattedPropertyValue = propertyValue == null ? null : `${propertyValueCurrency}${propertyValue.value.toLocaleString(
+      void 0,
+      propertyValueFormat
+    )}`;
+    const formattedPropertyChange = propertyValue?.change == null ? null : `${propertyValue.change >= 0 ? "+" : "-"}${propertyValueCurrency}${Math.abs(
+      propertyValue.change
+    ).toLocaleString(void 0, propertyValueFormat)}`;
+    const priceCurrency = price?.currencySymbol ?? "$";
+    const priceFormat = price?.formatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    const pricePercentFormat = price?.percentFormatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    const formattedPriceValue = price == null ? null : `${priceCurrency}${price.value.toLocaleString(void 0, priceFormat)}`;
+    const formattedPriceChange = price?.change == null ? null : `${price.change >= 0 ? "+" : "-"}${priceCurrency}${Math.abs(price.change).toLocaleString(
+      void 0,
+      priceFormat
+    )}`;
+    const formattedPricePercent = price?.changePercent == null ? null : `${price.changePercent >= 0 ? "+" : "-"}${Math.abs(price.changePercent).toLocaleString(
+      void 0,
+      pricePercentFormat
+    )}%`;
+    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock2, { $variant: propertyValueVariant, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PriceAmount, { children: formattedPriceValue }),
+      formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxRuntime.jsxs(
+        PriceChange,
+        {
+          $isPositive: price?.change != null ? price.change >= 0 : price?.changePercent != null ? price.changePercent >= 0 : void 0,
+          children: [
+            formattedPriceChange ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedPriceChange }) : null,
+            formattedPricePercent ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedPricePercent }) : null
+          ]
+        }
+      ) : null
+    ] }) : null;
+    const propertyValueContent = formattedPropertyValue ? /* @__PURE__ */ jsxRuntime.jsxs(PropertyValueBlock, { $variant: propertyValueVariant, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyValueLabel, { children: propertyValueLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyValueAmount, { children: formattedPropertyValue }),
+      formattedPropertyChange ? /* @__PURE__ */ jsxRuntime.jsx(PropertyValueChange, { $isPositive: propertyValue?.change != null ? propertyValue.change >= 0 : void 0, children: formattedPropertyChange }) : null
+    ] }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(PropertySelectorContainer, { ref, className, $variant: propertyValueVariant, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(PropertySelector, { ref: dropdownRef, onClick: () => hasAddresses && setIsDropdownOpen((prev2) => !prev2), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PropertyAddress, { children: [
+          selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "dropdown-icon",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              style: { transform: isDropdownOpen ? "rotate(180deg)" : void 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5H7z" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorDropdown, { $isOpen: isDropdownOpen && hasAddresses, children: normalizedAddresses.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          PropertySelectorOption,
+          {
+            onClick: (event) => {
+              event.stopPropagation();
+              handleAddressSelect(option.id);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorName, { children: option.label })
+          },
+          option.id
+        )) })
+      ] }),
+      propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        priceContent,
+        propertyValueContent
+      ] }) : propertyValueContent
+    ] });
+  }
+);
+PropertyCompareBar.displayName = "PropertyCompareBar";
+var PropertySelectorContainer = at.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background-color: ${({ $variant }) => $variant === "pill" ? "#0f0f0f" : "rgba(30, 32, 38, 0.95)"};
+  border: ${({ $variant }) => $variant === "pill" ? "1px solid rgba(255, 255, 255, 0.15)" : "none"};
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: var(--color-text, #f8f9fa);
+  font-family: var(--font-family, "Inter", sans-serif);
+
+  @media (max-width: 1024px) {
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  @media (max-width: 768px) {
+    border-radius: 0;
+    margin-top: 0;
+    padding-top: 0.5rem;
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+
+    ${({ $variant }) => $variant === "pill" ? rt`
+            display: grid;
+            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
+            gap: 0.35rem;
+            align-items: center;
+
+            > *:nth-child(1) {
+              width: 100%;
+            }
+
+            > *:nth-child(2) {
+              justify-self: center;
+              width: 100%;
+            }
+
+            > *:nth-child(3) {
+              justify-self: end;
+              text-align: right;
+            }
+          ` : rt`
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5rem;
+          `};
+  }
+`;
+var PropertySelector = at.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  flex: 1;
+
+  &:hover {
+    .dropdown-icon {
+      transform: translateY(2px);
+    }
+  }
+`;
+var PropertyAddress = at.div`
+  font-size: 1.125rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit;
+
+  svg {
+    transition: transform 0.2s;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.2rem;
+    font-size: 1rem;
+    line-height: 1.2;
+    white-space: normal;
+  }
+`;
+var PropertySelectorDropdown = at.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--color-card, #1f232b);
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  overflow: hidden;
+  display: ${(props) => props.$isOpen ? "block" : "none"};
+`;
+var PropertySelectorOption = at.div`
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+var PropertySelectorName = at.div`
+  font-weight: 600;
+`;
+var PropertyValueBlock = at.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 1rem;
+  white-space: nowrap;
+
+  ${({ $variant }) => $variant === "card" && rt`
+      margin-left: auto;
+      flex-direction: row;
+      align-items: center;
+      min-width: 220px;
+      border: none;
+      background: rgba(30, 32, 38, 0.95);
+      border-radius: 14px;
+      padding: 0.9rem 1.25rem;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      gap: 0.85rem;
+      justify-content: flex-end;
+
+      @media (max-width: 600px) {
+        margin: 0;
+        width: auto;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.125rem;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
+    `}
+
+  ${({ $variant }) => $variant === "pill" && rt`
+      margin-left: auto;
+      margin-right: 1rem;
+      background: #191919;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      padding: 0.5rem 1rem;
+      gap: 1rem;
+      align-items: center;
+
+      @media (max-width: 600px) {
+        margin: 0;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        text-align: right;
+        gap: 0.2rem;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        border: none;
+        white-space: normal;
+      }
+    `}
+
+  @media (max-width: 600px) {
+    margin: 0;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.2rem;
+    white-space: normal;
+  }
+`;
+var PropertyValueLabel = at.span`
+  font-size: 0.7rem;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  @media (max-width: 600px) {
+    font-size: 0.6rem;
+    letter-spacing: 0.4px;
+  }
+`;
+var PropertyValueAmount = at.span`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+
+  @media (max-width: 600px) {
+    font-size: 0.95rem;
+  }
+`;
+var PropertyValueChange = at.span`
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
+
+  @media (max-width: 600px) {
+    font-size: 0.65rem;
+  }
+`;
+var PriceBlock2 = at.div`
+  display: none;
+
+  ${({ $variant }) => $variant === "pill" && rt`
+      @media (max-width: 600px) {
+        display: flex;
+        flex: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.15rem;
+        width: 100%;
+      }
+    `}
+`;
+var PriceAmount = at.span`
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.2px;
+`;
+var PriceChange = at.span`
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: inline-flex;
+  gap: 0.35rem;
+  color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
+`;
 
 exports.Badge = Badge;
 exports.Button = Button;
@@ -5666,6 +6053,7 @@ exports.MobileTradeNav = MobileTradeNav;
 exports.Orderbook = Orderbook;
 exports.PortfolioSummary = PortfolioSummary;
 exports.PriceChart = PriceChart;
+exports.PropertyCompareBar = PropertyCompareBar;
 exports.PropertyHeroHeader = PropertyHeroHeader;
 exports.PropertyNewsUpdates = PropertyNewsUpdates;
 exports.PropertySubheader = PropertySubheader;