@agg-market/ui 0.0.1

package/dist/chunk-5MN6ZNFA.mjs

@@ -0,0 +1,355 @@
+import {
+  defaultTradingDisclaimer,
+  getTradingDateLabel,
+  getTradingVenueLabel
+} from "./chunk-KDBYDMYV.mjs";
+import {
+  Tabs
+} from "./chunk-QXFDXXDB.mjs";
+import {
+  Skeleton,
+  skeletonViews
+} from "./chunk-NFYS557L.mjs";
+import {
+  VenueLogo
+} from "./chunk-LY6474C4.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Button
+} from "./chunk-J6L5BLKX.mjs";
+import {
+  Card
+} from "./chunk-YUIZZ6XE.mjs";
+import {
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/trading/place-order/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WarningFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-warning", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var ErrorFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-error", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var getPlaceOrderContainerClassName = () => {
+  return "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+};
+var getRoutingCardClassName = (isHighlighted) => {
+  if (!isHighlighted) {
+    return "border-agg-border bg-agg-secondary";
+  }
+  return "border-agg-trade-highlight-border bg-agg-trade-highlight-surface";
+};
+var getResultValueClassName = (tone) => {
+  if (tone === "default")
+    return "text-agg-foreground";
+  return "text-agg-success";
+};
+var getStatusContent = ({
+  placement,
+  status,
+  onStatusAction
+}) => {
+  if (!status || status.placement !== placement)
+    return null;
+  if (status.tone === "warning") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(WarningFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] }),
+    status.actionLabel ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "aria-label": status.actionLabel,
+        onClick: onStatusAction,
+        children: status.actionLabel
+      }
+    ) : null
+  ] });
+};
+var PlaceOrder = ({
+  title,
+  marketDate,
+  marketImageUrl,
+  activeTab,
+  buyLabel,
+  sellLabel,
+  outcomes,
+  selectedOutcomeId,
+  primaryMetric,
+  routing,
+  result,
+  actionLabel,
+  disclaimer = defaultTradingDisclaimer,
+  isDismissible = false,
+  isLoading = false,
+  status,
+  className,
+  isPrimaryActionDisabled = false,
+  isPrimaryActionLoading = false,
+  onClose,
+  onOutcomeChange,
+  onPrimaryAction,
+  onStatusAction,
+  onTabChange
+}) => {
+  const { enableAnimations } = useSdkUiConfig();
+  const labels = useLabels();
+  const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ariaLabel: labels.common.loading,
+        className,
+        view: skeletonViews.placeOrder
+      }
+    );
+  }
+  const [internalTab, setInternalTab] = useState(activeTab);
+  const [internalOutcomeId, setInternalOutcomeId] = useState(selectedOutcomeId);
+  useEffect(() => {
+    setInternalTab(activeTab);
+  }, [activeTab]);
+  useEffect(() => {
+    setInternalOutcomeId(selectedOutcomeId);
+  }, [selectedOutcomeId]);
+  const resolvedTab = onTabChange ? activeTab : internalTab;
+  const resolvedOutcomeId = onOutcomeChange ? selectedOutcomeId : internalOutcomeId;
+  const hasHighlightedRouting = routing.tone === "highlighted";
+  const dateLabel = getTradingDateLabel(marketDate);
+  const tabItems = useMemo(() => {
+    return [
+      { value: "buy", label: buyLabel },
+      { value: "sell", label: sellLabel }
+    ];
+  }, [buyLabel, sellLabel]);
+  const handleTabChange = (nextTab) => {
+    if (!onTabChange) {
+      setInternalTab(nextTab);
+    }
+    onTabChange == null ? void 0 : onTabChange(nextTab);
+  };
+  const handleOutcomeChange = (nextOutcomeId) => {
+    if (!onOutcomeChange) {
+      setInternalOutcomeId(nextOutcomeId);
+    }
+    onOutcomeChange == null ? void 0 : onOutcomeChange(nextOutcomeId);
+  };
+  const actionButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "xxl",
+      className: "w-full",
+      disabled: isPrimaryActionDisabled,
+      isLoading: isPrimaryActionLoading,
+      "aria-label": actionLabel,
+      onClick: onPrimaryAction,
+      children: actionLabel
+    }
+  );
+  const contentBody = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          marketImageUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: marketImageUrl,
+              alt: "",
+              className: "h-12 w-12 shrink-0 rounded-agg-lg object-cover"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
+        ] }),
+        isDismissible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.common.close,
+            className: "shrink-0 text-agg-foreground",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "close",
+                size: "m",
+                className: "h-6 w-6 text-agg-foreground",
+                color: "currentColor"
+              }
+            )
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        ariaLabel: labels.common.tabsAria,
+        items: tabItems,
+        value: resolvedTab,
+        onChange: handleTabChange,
+        variant: "underline",
+        size: "s",
+        overflowBehavior: "scroll",
+        className: "w-full"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex w-full gap-2", children: outcomes.map((outcome) => {
+        const isActive = outcome.id === resolvedOutcomeId;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex-1 rounded-agg-full px-6 py-2.5 text-agg-base leading-agg-6",
+              getMotionClassName(enableAnimations, "transition-colors"),
+              isActive ? "bg-agg-success font-agg-bold text-agg-on-primary" : "bg-agg-secondary-hover font-agg-normal text-agg-foreground"
+            ),
+            "aria-pressed": isActive,
+            "aria-label": `${outcome.label} ${outcome.priceLabel}`,
+            onClick: () => handleOutcomeChange(outcome.id),
+            children: `${outcome.label} ${outcome.priceLabel}`
+          },
+          outcome.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative overflow-hidden rounded-agg-lg border p-3",
+            getRoutingCardClassName(hasHighlightedRouting)
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-gradient-to-b from-transparent to-agg-trade-highlight-glow",
+                  hasHighlightedRouting ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3", children: [
+              routing.rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      VenueLogo,
+                      {
+                        venue: row.venue,
+                        size: "s",
+                        ariaLabel: getTradingVenueLabel(row.venue)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
+                ] }),
+                index < routing.rows.length - 1 ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-px w-full",
+                      hasHighlightedRouting ? "bg-agg-trade-highlight-border" : "bg-agg-separator"
+                    )
+                  }
+                ) : null
+              ] }, `${row.venue}-${row.label}`)),
+              routing.highlightLabel ? /* @__PURE__ */ jsx("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-agg-3xl font-agg-bold leading-agg-9",
+            getResultValueClassName(result.tone)
+          ),
+          children: result.value
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      getStatusContent({
+        placement: "above-action",
+        status,
+        onStatusAction
+      }),
+      actionButton,
+      getStatusContent({
+        placement: "below-action",
+        status,
+        onStatusAction
+      })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
+  ] });
+  return /* @__PURE__ */ jsx(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
+};
+PlaceOrder.displayName = "PlaceOrder";
+
+export {
+  PlaceOrder
+};

package/dist/chunk-6RRBINER.mjs

@@ -0,0 +1,50 @@
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/select/index.tsx
+import { useLabels, useSdkUiConfig } from "@agg/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Select = ({
+  items,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+  disabled = false
+}) => {
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  const hasEnabledItems = items.some((item) => !item.disabled);
+  return /* @__PURE__ */ jsxs("label", { className: cn("relative inline-flex w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+        className: cn(
+          "w-full appearance-none rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+          getMotionClassName(
+            enableAnimations,
+            "transition-[border-color,box-shadow] duration-200 ease-out"
+          ),
+          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+          "disabled:cursor-not-allowed disabled:opacity-60"
+        ),
+        disabled: disabled || !hasEnabledItems,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        children: items.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+  ] });
+};
+Select.displayName = "Select";
+
+export {
+  Select
+};

package/dist/chunk-765JPQDG.mjs

@@ -0,0 +1,280 @@
+import {
+  EventList
+} from "./chunk-H7P6DIX4.mjs";
+import {
+  Tabs
+} from "./chunk-QXFDXXDB.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/pages/home/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useCategories, useLabels } from "@agg-market/hooks";
+
+// src/pages/home/home.constants.ts
+var ALL_CATEGORIES_TAB_VALUE = "trending";
+var DEFAULT_CATEGORIES_LIMIT = 100;
+var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
+var CATEGORY_TAB_NAME_ORDER = [
+  "crypto",
+  "economy",
+  "entertainment",
+  "finance",
+  "geopolitics",
+  "health",
+  "mentions",
+  "politics",
+  "science",
+  "sports",
+  "technology",
+  "weather",
+  "world"
+];
+var getDefaultHomePageTabs = (allCategoryTabLabel) => {
+  return [
+    {
+      value: ALL_CATEGORIES_TAB_VALUE,
+      label: allCategoryTabLabel,
+      iconName: "arrow-trend-up"
+    },
+    { value: "crypto", label: "crypto", categoryIds: ["crypto"] },
+    { value: "economy", label: "economy", categoryIds: ["economy"] },
+    {
+      value: "entertainment",
+      label: "entertainment",
+      categoryIds: ["entertainment"]
+    },
+    { value: "finance", label: "finance", categoryIds: ["finance"] },
+    {
+      value: "geopolitics",
+      label: "geopolitics",
+      categoryIds: ["geopolitics"]
+    },
+    { value: "health", label: "health", categoryIds: ["health"] },
+    { value: "mentions", label: "mentions", categoryIds: ["mentions"] },
+    { value: "politics", label: "politics", categoryIds: ["politics"] },
+    { value: "science", label: "science", categoryIds: ["science"] },
+    { value: "sports", label: "sports", categoryIds: ["sports"] },
+    { value: "technology", label: "technology", categoryIds: ["technology"] },
+    { value: "weather", label: "weather", categoryIds: ["weather"] },
+    { value: "world", label: "world", categoryIds: ["world"] }
+  ];
+};
+var getDefaultEventSectionItems = (labels) => {
+  return [
+    {
+      id: "top-markets",
+      title: labels.home.topMarkets,
+      maxItemsPerRow: 3,
+      limit: 3,
+      maxVisibleItems: 3
+    },
+    {
+      id: "new-markets",
+      title: labels.home.newMarkets,
+      maxItemsPerRow: 3,
+      limit: 3,
+      maxVisibleItems: 3
+    }
+  ];
+};
+
+// src/pages/home/home.utils.ts
+var categoryOrderMap = CATEGORY_TAB_NAME_ORDER.reduce(
+  (accumulator, name, index) => {
+    accumulator.set(name, index);
+    return accumulator;
+  },
+  /* @__PURE__ */ new Map()
+);
+var normalizeCategoryName = (name) => {
+  return name.trim().toLowerCase();
+};
+var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
+  const sortedCategories = [...categories].sort((left, right) => {
+    const leftName = normalizeCategoryName(left.name);
+    const rightName = normalizeCategoryName(right.name);
+    const leftOrder = categoryOrderMap.get(leftName);
+    const rightOrder = categoryOrderMap.get(rightName);
+    if (leftOrder != null && rightOrder != null) {
+      return leftOrder - rightOrder;
+    }
+    if (leftOrder != null)
+      return -1;
+    if (rightOrder != null)
+      return 1;
+    return leftName.localeCompare(rightName);
+  });
+  const seenCategoryIds = /* @__PURE__ */ new Set();
+  const tabs = [
+    {
+      value: ALL_CATEGORIES_TAB_VALUE,
+      label: allCategoryTabLabel,
+      iconName: "arrow-trend-up"
+    }
+  ];
+  for (const category of sortedCategories) {
+    if (seenCategoryIds.has(category.id))
+      continue;
+    seenCategoryIds.add(category.id);
+    tabs.push({
+      value: category.id,
+      label: normalizeCategoryName(category.name),
+      categoryIds: [category.id]
+    });
+  }
+  return tabs;
+};
+var resolveInitialTabValue = (tabs, defaultActiveTab) => {
+  var _a, _b;
+  if (defaultActiveTab) {
+    const hasDefaultTab = tabs.some((tab) => tab.value === defaultActiveTab);
+    if (hasDefaultTab)
+      return defaultActiveTab;
+  }
+  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "trending";
+};
+
+// src/pages/home/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HomePage = ({
+  tabs,
+  defaultActiveTab,
+  onTabChange,
+  eventSectionItems,
+  classNames,
+  useCategoriesTabs = true,
+  categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
+  allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
+}) => {
+  const labels = useLabels();
+  const hasCustomTabs = !!tabs && tabs.length > 0;
+  const shouldUseCategoriesTabs = !hasCustomTabs && useCategoriesTabs;
+  const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
+  const { categories } = useCategories({
+    limit: categoriesLimit,
+    enabled: shouldUseCategoriesTabs
+  });
+  const categoryTabs = useMemo(() => {
+    return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
+  }, [categories, resolvedAllCategoryTabLabel]);
+  const resolvedTabs = useMemo(() => {
+    if (hasCustomTabs && tabs)
+      return tabs;
+    if (shouldUseCategoriesTabs)
+      return categoryTabs;
+    return getDefaultHomePageTabs(resolvedAllCategoryTabLabel);
+  }, [categoryTabs, hasCustomTabs, resolvedAllCategoryTabLabel, shouldUseCategoriesTabs, tabs]);
+  const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
+  const [activeTabValue, setActiveTabValue] = useState(() => {
+    return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+  });
+  useEffect(() => {
+    setActiveTabValue((currentValue) => {
+      const hasCurrentValue = resolvedTabs.some((tab) => tab.value === currentValue);
+      if (hasCurrentValue)
+        return currentValue;
+      return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+    });
+  }, [defaultActiveTab, resolvedTabs]);
+  const tabsItems = useMemo(() => {
+    return resolvedTabs.map((tab) => {
+      const isActive = tab.value === activeTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: tab.iconName ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: tab.iconName,
+            size: "m",
+            color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+          }
+        ) : void 0,
+        disabled: tab.disabled
+      };
+    });
+  }, [activeTabValue, resolvedTabs]);
+  const activeTab = useMemo(() => {
+    return resolvedTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue, resolvedTabs]);
+  const resolvedSectionItems = useMemo(() => {
+    var _a, _b, _c, _d, _e;
+    if (activeTabValue === ALL_CATEGORIES_TAB_VALUE) {
+      return resolvedEventSectionItems;
+    }
+    const maxItemsPerRow = (_b = (_a = resolvedEventSectionItems[0]) == null ? void 0 : _a.maxItemsPerRow) != null ? _b : 3;
+    const showVenueLogo = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.showVenueLogo;
+    const firstSectionLimit = (_d = resolvedEventSectionItems[0]) == null ? void 0 : _d.limit;
+    const limit = firstSectionLimit && Number.isFinite(firstSectionLimit) ? Math.max(9, Math.floor(firstSectionLimit)) : 9;
+    return [
+      {
+        id: `${activeTabValue}-markets`,
+        title: (_e = activeTab == null ? void 0 : activeTab.label) != null ? _e : activeTabValue,
+        maxItemsPerRow,
+        limit,
+        maxVisibleItems: void 0,
+        showVenueLogo,
+        search: activeTab == null ? void 0 : activeTab.search,
+        categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
+      }
+    ];
+  }, [activeTab, activeTabValue, resolvedEventSectionItems]);
+  const handleTabChange = (value) => {
+    setActiveTabValue(value);
+    onTabChange == null ? void 0 : onTabChange(value);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: cn("w-full bg-agg-secondary border-b border-agg-separator", classNames == null ? void 0 : classNames.header),
+        children: /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            ariaLabel: labels.home.categoryTabsAria,
+            variant: "underline",
+            className: cn("w-full px-4 md:px-10", classNames == null ? void 0 : classNames.tabs),
+            items: tabsItems,
+            value: activeTabValue,
+            onChange: handleTabChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        className: cn(
+          "flex w-full flex-col gap-4 md:gap-10 px-4 md:px-10 py-4 md:py-8",
+          classNames == null ? void 0 : classNames.sections
+        ),
+        children: resolvedSectionItems.map((eventSectionItem) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsx(
+            EventList,
+            {
+              title: eventSectionItem.title,
+              maxItemsPerRow: eventSectionItem.maxItemsPerRow,
+              limit: eventSectionItem.limit,
+              maxVisibleItems: eventSectionItem.maxVisibleItems,
+              showVenueLogo: eventSectionItem.showVenueLogo,
+              search: (_b = eventSectionItem.search) != null ? _b : activeTab == null ? void 0 : activeTab.search,
+              categoryIds: (_c = eventSectionItem.categoryIds) != null ? _c : activeTab == null ? void 0 : activeTab.categoryIds
+            },
+            (_a = eventSectionItem.id) != null ? _a : eventSectionItem.title
+          );
+        })
+      }
+    )
+  ] });
+};
+HomePage.displayName = "HomePage";
+
+export {
+  HomePage
+};