keystone-design-bootstrap 1.0.103 → 1.0.105-dev.0

package/dist/design_system/elements/index.js

@@ -0,0 +1,4007 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/design_system/elements/index.tsx
+import React14 from "react";
+
+// src/lib/component-registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerThemeVariant(componentName, theme, component) {
+  if (!registry.has(componentName)) {
+    registry.set(componentName, /* @__PURE__ */ new Map());
+  }
+  registry.get(componentName).set(theme, component);
+}
+function getThemedComponent(componentName, theme = "classic") {
+  const variants = registry.get(componentName);
+  if (!variants || variants.size === 0) {
+    throw new Error(`No theme variants registered for "${componentName}"`);
+  }
+  if (variants.has(theme)) {
+    return variants.get(theme);
+  }
+  if (theme === "classic") {
+    throw new Error(`No classic variant for "${componentName}" - use base component`);
+  }
+  throw new Error(`No variant available for "${componentName}.${theme}"`);
+}
+
+// src/contexts/ThemeContext.tsx
+import { createContext, useContext } from "react";
+
+// src/tracking/logging.ts
+import { logs } from "@opentelemetry/api-logs";
+import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
+import { resourceFromAttributes } from "@opentelemetry/resources";
+import { BatchLogRecordProcessor, LoggerProvider } from "@opentelemetry/sdk-logs";
+var BUILD_CONSOLE_DISABLED = process.env.NEXT_PUBLIC_LOGGING_DISABLED === "1";
+var BUILD_POSTHOG_DISABLED = process.env.NEXT_PUBLIC_POSTHOG_LOGGING_DISABLED === "1";
+var MAX_PENDING_POSTHOG_LOGS = 500;
+var otelLogger = null;
+var pendingPostHogLogs = [];
+var browserConsole = globalThis == null ? void 0 : globalThis["console"];
+var CHANNEL_COLORS = {
+  // Shared diagnostics
+  "global-client": "#d2a8ff",
+  // Section pins (desktop)
+  "every-channel-pin": "#9febd7",
+  "hero-pin": "#6ecc8b",
+  "pricing-pin": "#399587",
+  "product-screens-pin": "#4fafa0",
+  "social-proof-pin": "#ffbb8a",
+  "value-props-pin": "#e0a733",
+  "work-pin": "#f57e56",
+  // Section pins (mobile)
+  "mobile-every-channel-pin": "#7ed9c6",
+  "mobile-hero-pin": "#f0eee6",
+  "mobile-pricing-pin": "#80d4ff",
+  "mobile-product-screens-pin": "#3a9085",
+  "mobile-social-proof-pin": "#ffd580",
+  "mobile-value-props-pin": "#4fafa0"
+};
+function flattenAttributes(input, prefix = "") {
+  const output = {};
+  for (const [key, value] of Object.entries(input)) {
+    const nextKey = prefix ? `${prefix}.${key}` : key;
+    if (value === null || value === void 0) continue;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      output[nextKey] = value;
+      continue;
+    }
+    if (Array.isArray(value)) {
+      output[nextKey] = JSON.stringify(value);
+      continue;
+    }
+    if (typeof value === "object") {
+      Object.assign(output, flattenAttributes(value, nextKey));
+      continue;
+    }
+    output[nextKey] = String(value);
+  }
+  return output;
+}
+function enqueuePendingPostHogLog(entry) {
+  if (pendingPostHogLogs.length >= MAX_PENDING_POSTHOG_LOGS) {
+    pendingPostHogLogs.shift();
+  }
+  pendingPostHogLogs.push(entry);
+}
+function isConsoleEnabled() {
+  if (BUILD_CONSOLE_DISABLED) return false;
+  if (typeof window === "undefined") return true;
+  return window.__loggingDisabled !== true;
+}
+function isPostHogShippingEnabled() {
+  if (BUILD_POSTHOG_DISABLED) return false;
+  if (typeof window === "undefined") return false;
+  return window.__posthogLoggingDisabled !== true;
+}
+function formatDetail(detail) {
+  return Object.entries(detail).map(([k, v]) => `${k}=${typeof v === "number" ? v.toFixed(4) : String(v)}`).join("  ");
+}
+function emitConsole(level, channel, event, detail) {
+  var _a, _b, _c, _d;
+  const color = (_a = CHANNEL_COLORS[channel]) != null ? _a : "#aaa";
+  const detailStr = formatDetail(detail);
+  const message = `%c[${channel}] %c${event}%c ${detailStr}`;
+  const channelStyle = `color:${color}; font-weight:bold`;
+  const eventStyle = level === "error" ? "color:#e94e4e; font-weight:bold" : level === "warn" ? "color:#f5a623; font-weight:bold" : "color:#fff; font-weight:bold";
+  const detailStyle = "color:#999; font-weight:normal";
+  if (level === "error") {
+    (_b = browserConsole == null ? void 0 : browserConsole.error) == null ? void 0 : _b.call(browserConsole, message, channelStyle, eventStyle, detailStyle);
+    return;
+  }
+  if (level === "warn") {
+    (_c = browserConsole == null ? void 0 : browserConsole.warn) == null ? void 0 : _c.call(browserConsole, message, channelStyle, eventStyle, detailStyle);
+    return;
+  }
+  (_d = browserConsole == null ? void 0 : browserConsole.log) == null ? void 0 : _d.call(browserConsole, message, channelStyle, eventStyle, detailStyle);
+}
+function emitToPostHog(level, channel, event, detail) {
+  if (!otelLogger) return false;
+  const severityText = level === "warn" ? "WARNING" : level === "error" ? "ERROR" : "INFO";
+  const attributes = flattenAttributes(__spreadValues({ channel }, detail));
+  otelLogger.emit({
+    severityText,
+    body: event,
+    attributes
+  });
+  return true;
+}
+function emit(level, channel, event, detail, options) {
+  var _a;
+  const shouldShip = ((_a = options == null ? void 0 : options.shipToPostHog) != null ? _a : level !== "info") && isPostHogShippingEnabled();
+  if (level !== "info" || isConsoleEnabled()) {
+    emitConsole(level, channel, event, detail);
+  }
+  if (shouldShip) {
+    const shipped = emitToPostHog(level, channel, event, detail);
+    if (!shipped) {
+      enqueuePendingPostHogLog({ level, channel, event, detail });
+    }
+  }
+}
+function warn(channel, event, detail = {}, options) {
+  emit("warn", channel, event, detail, options);
+}
+function error(channel, event, detail = {}, options) {
+  emit("error", channel, event, detail, options);
+}
+
+// src/contexts/ThemeContext.tsx
+var ThemeContext = createContext({ theme: "classic" });
+function useTheme() {
+  return useContext(ThemeContext);
+}
+
+// src/design_system/elements/buttons/button.tsx
+import React2, { isValidElement } from "react";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+
+// src/utils/cx.ts
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// src/utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && typeof component === "function" && component.prototype !== void 0 && component.prototype !== null && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && "$$typeof" in component && component.$$typeof !== void 0 && component.$$typeof !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+
+// src/design_system/elements/buttons/button.tsx
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
+      // When button is used within `InputGroup`
+      "in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
+      // Disabled styles
+      "disabled:cursor-not-allowed disabled:text-fg-disabled",
+      // Icon styles
+      "disabled:*:data-icon:text-fg-disabled_subtle",
+      // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
+      "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none size-5 shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    sm: {
+      root: [
+        "gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2",
+        "in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5"
+      ].join(" "),
+      linkRoot: "gap-1"
+    },
+    md: {
+      root: [
+        "gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5",
+        "in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3"
+      ].join(" "),
+      linkRoot: "gap-1"
+    },
+    lg: {
+      root: "gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3",
+      linkRoot: "gap-1.5"
+    },
+    xl: {
+      root: "gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5",
+      linkRoot: "gap-1.5"
+    }
+  },
+  colors: {
+    primary: {
+      root: [
+        "bg-brand-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover",
+        // Inner border gradient
+        "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+        // Disabled styles
+        "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-button-primary-icon hover:*:data-icon:text-button-primary-icon_hover"
+      ].join(" ")
+    },
+    secondary: {
+      root: [
+        "bg-primary text-secondary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
+        // Disabled styles
+        "disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    tertiary: {
+      root: [
+        "text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover",
+        // Icon styles
+        "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    "link-gray": {
+      root: [
+        "justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover",
+        // Inner text underline
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+        // Icon styles
+        "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    "link-color": {
+      root: [
+        "justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover",
+        // Inner text underline
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+        // Icon styles
+        "*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent outline-error ring-inset",
+        // Inner border gradient
+        "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+        // Disabled styles
+        "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-button-destructive-primary-icon hover:*:data-icon:text-button-destructive-primary-icon_hover"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "bg-primary text-error-primary shadow-xs-skeumorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+        // Disabled styles
+        "disabled:bg-primary disabled:shadow-xs disabled:ring-disabled_subtle",
+        // Icon styles
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+        // Icon styles
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "link-destructive": {
+      root: [
+        "justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover",
+        // Inner text underline
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+        // Icon styles
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    }
+  }
+});
+var Button = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "color",
+    "children",
+    "className",
+    "noTextPadding",
+    "iconLeading",
+    "iconTrailing",
+    "isDisabled",
+    "isLoading",
+    "showTextWhileLoading"
+  ]);
+  const href = "href" in otherProps ? otherProps.href : void 0;
+  const Component = href ? AriaLink : AriaButton;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  let props = {};
+  if (href) {
+    props = __spreadValues(__spreadProps(__spreadValues({}, otherProps), {
+      href: disabled ? void 0 : href
+    }), disabled ? { "data-rac": true, "data-disabled": true } : {});
+  } else {
+    props = __spreadProps(__spreadValues({}, otherProps), {
+      type: otherProps.type || "button",
+      isPending: loading,
+      isDisabled: disabled
+    });
+  }
+  return /* @__PURE__ */ React2.createElement(
+    Component,
+    __spreadProps(__spreadValues({
+      "data-loading": loading ? true : void 0,
+      "data-icon-only": isIcon ? true : void 0
+    }, props), {
+      className: cx(
+        styles.common.root,
+        styles.sizes[size].root,
+        styles.colors[color].root,
+        isLinkType && styles.sizes[size].linkRoot,
+        (loading || href && (disabled || loading)) && "pointer-events-none",
+        // If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
+        loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+        className
+      )
+    }),
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && React2.createElement(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ React2.createElement(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 20 20",
+        className: cx(styles.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")
+      },
+      /* @__PURE__ */ React2.createElement("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }),
+      /* @__PURE__ */ React2.createElement(
+        "circle",
+        {
+          className: "origin-center animate-spin stroke-current",
+          cx: "10",
+          cy: "10",
+          r: "8",
+          fill: "none",
+          strokeWidth: "2",
+          strokeDasharray: "12.5 50",
+          strokeLinecap: "round"
+        }
+      )
+    ),
+    children && /* @__PURE__ */ React2.createElement("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && "px-0.5") }, children),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && React2.createElement(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  );
+};
+
+// src/design_system/elements/buttons/round-button.tsx
+import { createElement } from "react";
+var RoundButton = (_a) => {
+  var _b = _a, { icon: Icon } = _b, props = __objRest(_b, ["icon"]);
+  var _a2;
+  return /* @__PURE__ */ React.createElement(
+    Button2,
+    __spreadProps(__spreadValues({}, props), {
+      color: "link-gray",
+      className: cx(
+        "group flex size-12 items-center justify-center rounded-full bg-primary ring-1 ring-secondary backdrop-blur transition duration-100 ease-linear ring-inset hover:bg-secondary md:size-14",
+        props.className
+      )
+    }),
+    (_a2 = props.children) != null ? _a2 : isReactComponent(Icon) ? createElement(Icon, { className: "size-5 text-fg-quaternary transition-inherit-all group-hover:text-fg-quaternary_hover md:size-6" }) : null
+  );
+};
+
+// src/design_system/elements/button-group/button-group.tsx
+import { createContext as createContext2, createElement as createElement2, isValidElement as isValidElement2, useContext as useContext2 } from "react";
+import {
+  ToggleButton as AriaToggleButton,
+  ToggleButtonGroup as AriaToggleButtonGroup
+} from "react-aria-components";
+var styles2 = sortCx({
+  common: {
+    root: [
+      "group/button-group inline-flex h-max cursor-pointer items-center bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeumorphic ring-1 ring-primary outline-brand transition duration-100 ease-linear ring-inset",
+      // Hover and focus styles
+      "hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+      // Disabled styles
+      "disabled:cursor-not-allowed disabled:bg-primary disabled:text-disabled",
+      // Selected styles
+      "selected:bg-active selected:text-secondary_hover selected:disabled:bg-disabled_subtle"
+    ].join(" "),
+    icon: "pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-disabled/button-group:text-fg-disabled_subtle"
+  },
+  sizes: {
+    sm: {
+      root: "gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:p-2",
+      icon: "size-5"
+    },
+    md: {
+      root: "gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3",
+      icon: "size-5"
+    },
+    lg: {
+      root: "gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:p-3",
+      icon: "size-5"
+    }
+  }
+});
+var ButtonGroupContext = createContext2({ size: "md" });
+var ButtonGroup = (_a) => {
+  var _b = _a, { children, size = "md", className } = _b, otherProps = __objRest(_b, ["children", "size", "className"]);
+  return /* @__PURE__ */ React.createElement(ButtonGroupContext.Provider, { value: { size } }, /* @__PURE__ */ React.createElement(
+    AriaToggleButtonGroup,
+    __spreadValues({
+      selectionMode: "single",
+      className: cx("relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs", className)
+    }, otherProps),
+    children
+  ));
+};
+
+// src/design_system/elements/input/input.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { HelpCircle as HelpCircle2, InfoCircle } from "@untitledui/icons";
+import { Group as AriaGroup, Input as AriaInput, TextField as AriaTextField } from "react-aria-components";
+
+// src/design_system/elements/input/hint-text.tsx
+import { Text as AriaText } from "react-aria-components";
+var HintText = (_a) => {
+  var _b = _a, { isInvalid, className } = _b, props = __objRest(_b, ["isInvalid", "className"]);
+  return /* @__PURE__ */ React.createElement(
+    AriaText,
+    __spreadProps(__spreadValues({}, props), {
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    })
+  );
+};
+HintText.displayName = "HintText";
+
+// src/design_system/elements/input/label.tsx
+import { HelpCircle } from "@untitledui/icons";
+import { Label as AriaLabel } from "react-aria-components";
+
+// src/design_system/elements/tooltip/tooltip.tsx
+import { Button as AriaButton2, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
+var Tooltip = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    children,
+    arrow = false,
+    delay = 300,
+    closeDelay = 0,
+    trigger,
+    isDisabled,
+    isOpen,
+    defaultOpen,
+    offset = 6,
+    crossOffset,
+    placement = "top",
+    onOpenChange
+  } = _b, tooltipProps = __objRest(_b, [
+    "title",
+    "description",
+    "children",
+    "arrow",
+    "delay",
+    "closeDelay",
+    "trigger",
+    "isDisabled",
+    "isOpen",
+    "defaultOpen",
+    "offset",
+    "crossOffset",
+    "placement",
+    "onOpenChange"
+  ]);
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ React.createElement(AriaTooltipTrigger, __spreadValues({}, { trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }), children, /* @__PURE__ */ React.createElement(
+    AriaTooltip,
+    __spreadProps(__spreadValues({}, tooltipProps), {
+      offset,
+      placement,
+      crossOffset: crossOffset != null ? crossOffset : calculatedCrossOffset,
+      className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out")
+    }),
+    ({ isEntering, isExiting }) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(
+          "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+          description ? "py-3" : "py-2",
+          isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+          isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+        )
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold text-white" }, title),
+      description && /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-tooltip-supporting-text" }, description),
+      arrow && /* @__PURE__ */ React.createElement(AriaOverlayArrow, null, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          viewBox: "0 0 100 100",
+          className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180"
+        },
+        /* @__PURE__ */ React.createElement("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+      ))
+    )
+  ));
+};
+var TooltipTrigger = (_a) => {
+  var _b = _a, { children, className } = _b, buttonProps = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React.createElement(AriaButton2, __spreadProps(__spreadValues({}, buttonProps), { className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className) }), children);
+};
+
+// src/design_system/elements/input/label.tsx
+var Label = (_a) => {
+  var _b = _a, { isRequired, tooltip, tooltipDescription, className } = _b, props = __objRest(_b, ["isRequired", "tooltip", "tooltipDescription", "className"]);
+  return /* @__PURE__ */ React.createElement(
+    AriaLabel,
+    __spreadProps(__spreadValues({
+      "data-label": "true"
+    }, props), {
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className)
+    }),
+    props.children,
+    /* @__PURE__ */ React.createElement("span", { className: cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block") }, "*"),
+    tooltip && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip, description: tooltipDescription, placement: "top" }, /* @__PURE__ */ React.createElement(
+      TooltipTrigger,
+      {
+        isDisabled: false,
+        className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover"
+      },
+      /* @__PURE__ */ React.createElement(HelpCircle, { className: "size-4" })
+    ))
+  );
+};
+Label.displayName = "Label";
+
+// src/design_system/elements/input/input.tsx
+var InputBase = (_a) => {
+  var _b = _a, {
+    ref,
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "sm",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName
+  } = _b, inputProps = __objRest(_b, [
+    "ref",
+    "tooltip",
+    "shortcut",
+    "groupRef",
+    "size",
+    "isInvalid",
+    "isDisabled",
+    "icon",
+    "placeholder",
+    "wrapperClassName",
+    "tooltipClassName",
+    "inputClassName",
+    "iconClassName"
+  ]);
+  const hasTrailingIcon = tooltip || isInvalid;
+  const hasLeadingIcon = Icon;
+  const context = useContext3(TextFieldContext);
+  const inputSize = (context == null ? void 0 : context.size) || size;
+  const sizes5 = sortCx({
+    sm: {
+      root: cx("px-3 py-2", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+      iconLeading: "left-3",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    md: {
+      root: cx("px-3.5 py-2.5", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+      iconLeading: "left-3.5",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-3"
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    AriaGroup,
+    __spreadProps(__spreadValues({}, { isDisabled, isInvalid }), {
+      ref: groupRef,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset",
+        isFocusWithin && !isDisabled2 && "ring-2 ring-brand",
+        // Disabled state styles
+        isDisabled2 && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+        "group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
+        // Invalid state styles
+        isInvalid2 && "ring-error_subtle",
+        "group-invalid:ring-error_subtle",
+        // Invalid state with focus-within styles
+        isInvalid2 && isFocusWithin && "ring-2 ring-error",
+        isFocusWithin && "group-invalid:ring-2 group-invalid:ring-error",
+        context == null ? void 0 : context.wrapperClassName,
+        wrapperClassName
+      )
+    }),
+    Icon && /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        className: cx(
+          "pointer-events-none absolute size-5 text-fg-quaternary",
+          isDisabled && "text-fg-disabled",
+          sizes5[inputSize].iconLeading,
+          context == null ? void 0 : context.iconClassName,
+          iconClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      AriaInput,
+      __spreadProps(__spreadValues({}, inputProps), {
+        ref,
+        placeholder,
+        className: cx(
+          "m-0 w-full bg-transparent text-md text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary",
+          isDisabled && "cursor-not-allowed text-disabled",
+          sizes5[inputSize].root,
+          context == null ? void 0 : context.inputClassName,
+          inputClassName
+        )
+      })
+    ),
+    tooltip && !isInvalid && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip, placement: "top" }, /* @__PURE__ */ React.createElement(
+      TooltipTrigger,
+      {
+        className: cx(
+          "absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+          sizes5[inputSize].iconTrailing,
+          context == null ? void 0 : context.tooltipClassName,
+          tooltipClassName
+        )
+      },
+      /* @__PURE__ */ React.createElement(HelpCircle2, { className: "size-4" })
+    )),
+    isInvalid && /* @__PURE__ */ React.createElement(
+      InfoCircle,
+      {
+        className: cx(
+          "pointer-events-none absolute size-4 text-fg-error-secondary",
+          sizes5[inputSize].iconTrailing,
+          context == null ? void 0 : context.tooltipClassName,
+          tooltipClassName
+        )
+      }
+    ),
+    shortcut && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(
+          "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+          sizes5[inputSize].shortcut
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: cx(
+            "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+            isDisabled && "bg-transparent text-disabled"
+          ),
+          "aria-hidden": "true"
+        },
+        typeof shortcut === "string" ? shortcut : "\u2318K"
+      )
+    )
+  );
+};
+InputBase.displayName = "InputBase";
+var TextFieldContext = createContext3({});
+var TextField = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React.createElement(TextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
+    AriaTextField,
+    __spreadProps(__spreadValues({}, props), {
+      "data-input-wrapper": true,
+      className: (state) => cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+    })
+  ));
+};
+TextField.displayName = "TextField";
+var Input = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    placeholder,
+    icon: Icon,
+    label,
+    hint,
+    shortcut,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    tooltip,
+    iconClassName,
+    inputClassName,
+    wrapperClassName,
+    tooltipClassName
+  } = _b, props = __objRest(_b, [
+    "size",
+    "placeholder",
+    "icon",
+    "label",
+    "hint",
+    "shortcut",
+    "hideRequiredIndicator",
+    "className",
+    "ref",
+    "groupRef",
+    "tooltip",
+    "iconClassName",
+    "inputClassName",
+    "wrapperClassName",
+    "tooltipClassName"
+  ]);
+  return /* @__PURE__ */ React.createElement(TextField, __spreadProps(__spreadValues({ "aria-label": !label ? placeholder : void 0 }, props), { className }), ({ isRequired, isInvalid }) => /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(Label, { isRequired: hideRequiredIndicator ? !hideRequiredIndicator : isRequired }, label), /* @__PURE__ */ React.createElement(
+    InputBase,
+    __spreadValues({}, {
+      ref,
+      groupRef,
+      size,
+      placeholder,
+      icon: Icon,
+      shortcut,
+      iconClassName,
+      inputClassName,
+      wrapperClassName,
+      tooltipClassName,
+      tooltip
+    })
+  ), hint && /* @__PURE__ */ React.createElement(HintText, { isInvalid }, hint)));
+};
+Input.displayName = "Input";
+
+// src/design_system/elements/input/input-group.tsx
+var InputPrefix = (_a) => {
+  var _b = _a, { isDisabled, children } = _b, props = __objRest(_b, ["isDisabled", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: cx(
+        "flex text-md text-tertiary shadow-xs ring-1 ring-border-primary ring-inset",
+        // Styles when the prefix is within an `InputGroup`
+        "in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-l-lg",
+        "in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-r-lg",
+        // Size styles based on size when within an `InputGroup`
+        "in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:pr-3 in-data-input-wrapper:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2",
+        // Disabled styles
+        isDisabled && "border-disabled bg-disabled_subtle text-tertiary",
+        "in-data-input-wrapper:group-disabled:bg-disabled_subtle in-data-input-wrapper:group-disabled:text-disabled in-data-input-wrapper:group-disabled:ring-border-disabled",
+        props.className
+      )
+    }),
+    children
+  );
+};
+var InputGroup = (_a) => {
+  var _b = _a, { size = "sm", prefix, leadingAddon, trailingAddon, label, hint, children } = _b, props = __objRest(_b, ["size", "prefix", "leadingAddon", "trailingAddon", "label", "hint", "children"]);
+  const hasLeading = !!leadingAddon;
+  const hasTrailing = !!trailingAddon;
+  const paddings = sortCx({
+    sm: {
+      input: cx(
+        hasLeading && "group-has-[&>select]:px-2.5 group-has-[&>select]:pl-2.5",
+        hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3")
+      ),
+      leadingText: "pl-3"
+    },
+    md: {
+      input: cx(
+        hasLeading && "group-has-[&>select]:px-3 group-has-[&>select]:pl-3",
+        hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3")
+      ),
+      leadingText: "pl-3.5"
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    __spreadValues({
+      size,
+      "aria-label": label || void 0,
+      inputClassName: cx(paddings[size].input),
+      tooltipClassName: cx(hasTrailing && !hasLeading && "group-has-[&>select]:right-0"),
+      wrapperClassName: cx(
+        "z-10 min-w-0 flex-1 !w-auto",
+        hasLeading && "rounded-sm rounded-l-none bg-white ring-1 ring-secondary ring-inset focus-within:ring-2 focus-within:ring-brand group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
+        hasTrailing && "rounded-r-none"
+      )
+    }, props),
+    ({ isDisabled, isInvalid, isRequired }) => /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(Label, { isRequired }, label), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-input-size": size,
+        "data-input-wrapper": true,
+        className: cx(
+          "group relative flex h-max w-full flex-row items-center rounded-sm bg-white transition-all duration-100 ease-linear",
+          "has-[&>select]:shadow-xs has-[&>select]:ring-1 has-[&>select]:ring-secondary has-[&>select]:ring-inset has-[&>select]:has-[input:focus]:ring-2 has-[&>select]:has-[input:focus]:ring-brand",
+          isDisabled && "cursor-not-allowed has-[&>select]:bg-disabled_subtle has-[&>select]:ring-border-disabled",
+          isInvalid && "has-[&>select]:ring-border-error_subtle has-[&>select]:has-[input:focus]:ring-border-error"
+        )
+      },
+      leadingAddon && /* @__PURE__ */ React.createElement("div", { "data-leading": hasLeading || void 0, className: "flex shrink-0" }, leadingAddon),
+      prefix && /* @__PURE__ */ React.createElement("span", { className: cx("my-auto grow pr-2", paddings[size].leadingText) }, /* @__PURE__ */ React.createElement("p", { className: cx("text-md text-tertiary", isDisabled && "text-disabled") }, prefix)),
+      children,
+      trailingAddon && /* @__PURE__ */ React.createElement("div", { "data-trailing": hasTrailing || void 0 }, trailingAddon)
+    ), hint && /* @__PURE__ */ React.createElement(HintText, { isInvalid }, hint))
+  );
+};
+InputGroup.Prefix = InputPrefix;
+InputGroup.displayName = "InputGroup";
+
+// src/design_system/elements/textarea/textarea.tsx
+import React3 from "react";
+import { TextArea as AriaTextArea, TextField as AriaTextField2 } from "react-aria-components";
+var getResizeHandleBg = (color) => {
+  return `url(data:image/svg+xml;base64,${btoa(`<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${color}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${color}" stroke-linecap="round"/></svg>`)})`;
+};
+var TextAreaBase = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React3.createElement(
+    AriaTextArea,
+    __spreadProps(__spreadValues({}, props), {
+      style: {
+        "--resize-handle-bg": getResizeHandleBg("#D5D7DA"),
+        "--resize-handle-bg-dark": getResizeHandleBg("#373A41")
+      },
+      className: (state) => cx(
+        "w-full scroll-py-3 rounded-lg bg-primary px-3.5 py-3 text-md text-primary shadow-xs ring-1 ring-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden",
+        // Resize handle
+        "[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)",
+        state.isFocused && !state.isDisabled && "ring-2 ring-brand",
+        state.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled ring-disabled",
+        state.isInvalid && "ring-error_subtle",
+        state.isInvalid && state.isFocused && "ring-2 ring-error",
+        typeof className === "function" ? className(state) : className
+      )
+    })
+  );
+};
+TextAreaBase.displayName = "TextAreaBase";
+var TextArea = (_a) => {
+  var _b = _a, {
+    label,
+    hint,
+    tooltip,
+    textAreaRef,
+    hideRequiredIndicator,
+    textAreaClassName,
+    placeholder,
+    className,
+    rows,
+    cols
+  } = _b, props = __objRest(_b, [
+    "label",
+    "hint",
+    "tooltip",
+    "textAreaRef",
+    "hideRequiredIndicator",
+    "textAreaClassName",
+    "placeholder",
+    "className",
+    "rows",
+    "cols"
+  ]);
+  return /* @__PURE__ */ React3.createElement(
+    AriaTextField2,
+    __spreadProps(__spreadValues({}, props), {
+      className: (state) => cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+    }),
+    ({ isInvalid, isRequired }) => /* @__PURE__ */ React3.createElement(React3.Fragment, null, label && /* @__PURE__ */ React3.createElement(Label, { isRequired: hideRequiredIndicator ? !hideRequiredIndicator : isRequired, tooltip }, label), /* @__PURE__ */ React3.createElement(TextAreaBase, { placeholder, className: textAreaClassName, ref: textAreaRef, rows, cols }), hint && /* @__PURE__ */ React3.createElement(HintText, { isInvalid }, hint))
+  );
+};
+TextArea.displayName = "TextArea";
+
+// src/design_system/elements/checkbox/privacy-checkbox.tsx
+import { useId } from "react";
+function PrivacyCheckbox() {
+  const id = useId();
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      id,
+      name: "privacy",
+      required: true,
+      "aria-label": "Agree to Privacy Policy, Terms of Service, and SMS consent",
+      className: "mt-1 w-4 h-4 shrink-0 border-secondary rounded focus:ring-focus-ring"
+    }
+  ), /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: "font-body text-sm text-tertiary" }, "By checking this box, you agree to our", " ", /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "/privacy-policy",
+      className: "underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+    },
+    "Privacy Policy"
+  ), " ", "and", " ", /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "/terms-of-service",
+      className: "underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+    },
+    "Terms of Service"
+  ), ". You consent to receive text messages from our team and our automated systems (e.g., question follow-ups, updates, responses to ads) at the number provided. Message frequency varies. Message and data rates may apply. Reply HELP for help, STOP to opt out. *"));
+}
+
+// src/design_system/elements/form/form.tsx
+import { Form as AriaForm } from "react-aria-components";
+var Form = (props) => {
+  return /* @__PURE__ */ React.createElement(AriaForm, __spreadValues({}, props));
+};
+Form.displayName = "Form";
+
+// src/design_system/elements/form-container/form-container.tsx
+import React4 from "react";
+var FormContainer = ({
+  children,
+  title,
+  description,
+  variant = "default",
+  bordered = false,
+  className
+}) => {
+  const isAman = variant === "aman";
+  const isBarelux = variant === "barelux";
+  const containerClassName = cx(
+    "bg-white p-6 md:p-8",
+    bordered && "border border-secondary",
+    isAman && bordered && "",
+    // No rounded corners for Aman
+    !isAman && bordered && "rounded-lg",
+    // Default and Barelux have rounded corners
+    className
+  );
+  const titleClassName = cx(
+    isAman && "font-heading text-2xl font-light uppercase tracking-wide text-primary",
+    isBarelux && "font-heading text-2xl font-semibold text-primary",
+    !isAman && !isBarelux && "font-display text-2xl font-semibold text-primary"
+  );
+  const descriptionClassName = cx(
+    "mt-2 text-base text-tertiary",
+    isAman && "font-body",
+    isBarelux && "font-body",
+    !isAman && !isBarelux && "font-body"
+  );
+  return /* @__PURE__ */ React4.createElement("div", { className: containerClassName }, (title || description) && /* @__PURE__ */ React4.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React4.createElement("h2", { className: titleClassName }, title), description && /* @__PURE__ */ React4.createElement("p", { className: descriptionClassName }, description)), children);
+};
+
+// src/design_system/elements/select/select.tsx
+import { createContext as createContext4, isValidElement as isValidElement4 } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import { Button as AriaButton3, ListBox as AriaListBox2, Select as AriaSelect, SelectValue as AriaSelectValue } from "react-aria-components";
+
+// src/design_system/elements/avatar/avatar.tsx
+import { useState } from "react";
+import Image from "next/image";
+import { User01 } from "@untitledui/icons";
+
+// src/design_system/elements/avatar/base-components/avatar-online-indicator.tsx
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-fg-disabled_subtle",
+      sizes[size],
+      className
+    )
+  }
+);
+
+// src/design_system/elements/avatar/base-components/verified-tick.tsx
+var sizes2 = {
+  xs: { root: "size-2.5", tick: "size-[4.38px" },
+  sm: { root: "size-3", tick: "size-[5.25px]" },
+  md: { root: "size-3.5", tick: "size-[6.13px]" },
+  lg: { root: "size-4", tick: "size-[7px]" },
+  xl: { root: "size-4.5", tick: "size-[7.88px]" },
+  "2xl": { root: "size-5", tick: "size-[8.75px]" },
+  "3xl": { root: "size-6", tick: "size-[10.5px]" },
+  "4xl": { root: "size-8", tick: "size-[14px]" }
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ React.createElement("svg", { "data-verified": true, className: cx("z-10 text-utility-blue-500", sizes2[size].root, className), viewBox: "0 0 10 10", fill: "none" }, /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+    className: "fill-current"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+    fill: "white"
+  }
+));
+
+// src/design_system/elements/avatar/avatar.tsx
+var styles3 = {
+  xxs: { root: "size-4 outline-[0.5px] -outline-offset-[0.5px]", initials: "text-xs font-semibold", icon: "size-3" },
+  xs: { root: "size-6 outline-[0.5px] -outline-offset-[0.5px]", initials: "text-xs font-semibold", icon: "size-4" },
+  sm: { root: "size-8 outline-[0.75px] -outline-offset-[0.75px]", initials: "text-sm font-semibold", icon: "size-5" },
+  md: { root: "size-10 outline-1 -outline-offset-1", initials: "text-md font-semibold", icon: "size-6" },
+  lg: { root: "size-12 outline-1 -outline-offset-1", initials: "text-lg font-semibold", icon: "size-7" },
+  xl: { root: "size-14 outline-1 -outline-offset-1", initials: "text-xl font-semibold", icon: "size-8" },
+  "2xl": { root: "size-16 outline-1 -outline-offset-1", initials: "text-display-xs font-semibold", icon: "size-8" }
+};
+var Avatar = ({
+  contrastBorder = true,
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  badge,
+  status,
+  verified,
+  focusable = false,
+  className
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const renderMainContent = () => {
+    if (src && !isFailed) {
+      return /* @__PURE__ */ React.createElement(Image, { "data-avatar-img": true, className: "size-full rounded-full object-cover", src, alt: alt || "", onError: () => setIsFailed(true), width: 100, height: 100 });
+    }
+    if (initials) {
+      return /* @__PURE__ */ React.createElement("span", { className: cx("text-quaternary", styles3[size].initials) }, initials);
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ React.createElement(PlaceholderIcon, { className: cx("text-fg-quaternary", styles3[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ React.createElement(User01, { className: cx("text-fg-quaternary", styles3[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ React.createElement(AvatarOnlineIndicator, { status, size: size === "xxs" ? "xs" : size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ React.createElement(
+        VerifiedTick,
+        {
+          size: size === "xxs" ? "xs" : size,
+          className: cx("absolute right-0 bottom-0", (size === "xxs" || size === "xs") && "-right-px -bottom-px")
+        }
+      );
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-avatar": true,
+      className: cx(
+        "relative inline-flex shrink-0 items-center justify-center rounded-full bg-avatar-bg outline-transparent",
+        // Focus styles
+        focusable && "group-outline-focus-ring group-focus-visible:outline-2 group-focus-visible:outline-offset-2",
+        contrastBorder && "outline outline-avatar-contrast-border",
+        styles3[size].root,
+        className
+      )
+    },
+    renderMainContent(),
+    renderBadgeContent()
+  );
+};
+
+// src/design_system/elements/select/combobox.tsx
+import { useCallback, useContext as useContext4, useRef, useState as useState2 } from "react";
+import { SearchLg as SearchIcon } from "@untitledui/icons";
+import { ComboBox as AriaComboBox, Group as AriaGroup2, Input as AriaInput2, ListBox as AriaListBox, ComboBoxStateContext } from "react-aria-components";
+
+// src/design_system/elements/select/popover.tsx
+import { Popover as AriaPopover } from "react-aria-components";
+var Popover = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    AriaPopover,
+    __spreadProps(__spreadValues({
+      placement: "bottom",
+      containerPadding: 0,
+      offset: 4
+    }, props), {
+      className: (state) => cx(
+        "max-h-64! w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+        state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+        state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+        props.size === "md" && "max-h-80!",
+        typeof props.className === "function" ? props.className(state) : props.className
+      )
+    })
+  );
+};
+
+// src/lib/hooks/use-resize-observer.ts
+import { useEffect } from "react";
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
+}
+function useResizeObserver(options) {
+  const { ref, box, onResize } = options;
+  useEffect(() => {
+    const element = ref == null ? void 0 : ref.current;
+    if (!element) {
+      return;
+    }
+    if (!hasResizeObserver()) {
+      window.addEventListener("resize", onResize, false);
+      return () => {
+        window.removeEventListener("resize", onResize, false);
+      };
+    } else {
+      const resizeObserverInstance = new window.ResizeObserver((entries) => {
+        if (!entries.length) {
+          return;
+        }
+        onResize();
+      });
+      resizeObserverInstance.observe(element, { box });
+      return () => {
+        if (element) {
+          resizeObserverInstance.unobserve(element);
+        }
+      };
+    }
+  }, [onResize, ref, box]);
+}
+
+// src/design_system/elements/select/combobox.tsx
+var ComboBoxValue = (_a) => {
+  var _b = _a, { size, shortcut, placeholder, shortcutClassName } = _b, otherProps = __objRest(_b, ["size", "shortcut", "placeholder", "shortcutClassName"]);
+  var _a2, _b2;
+  const state = useContext4(ComboBoxStateContext);
+  const value = ((_a2 = state == null ? void 0 : state.selectedItem) == null ? void 0 : _a2.value) || null;
+  const inputValue = (state == null ? void 0 : state.inputValue) || null;
+  const first = ((_b2 = inputValue == null ? void 0 : inputValue.split(value == null ? void 0 : value.supportingText)) == null ? void 0 : _b2[0]) || "";
+  const last = inputValue == null ? void 0 : inputValue.split(first)[1];
+  return /* @__PURE__ */ React.createElement(
+    AriaGroup2,
+    __spreadProps(__spreadValues({}, otherProps), {
+      className: ({ isFocusWithin, isDisabled }) => cx(
+        "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset",
+        isDisabled && "cursor-not-allowed bg-disabled_subtle",
+        isFocusWithin && "ring-2 ring-brand",
+        sizes3[size].root
+      )
+    }),
+    ({ isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SearchIcon, { className: "pointer-events-none size-5 shrink-0 text-fg-quaternary" }), /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full items-center gap-2" }, inputValue && /* @__PURE__ */ React.createElement("span", { className: "absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 gap-2 truncate", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("p", { className: cx("text-md font-medium text-primary", isDisabled && "text-disabled") }, first), last && /* @__PURE__ */ React.createElement("p", { className: cx("-ml-0.75 text-md text-tertiary", isDisabled && "text-disabled") }, last)), /* @__PURE__ */ React.createElement(
+      AriaInput2,
+      {
+        placeholder,
+        className: "z-10 w-full appearance-none bg-transparent text-md text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
+      }
+    )), shortcut && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(
+          "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+          isDisabled && "to-bg-disabled_subtle",
+          sizes3[size].shortcut,
+          shortcutClassName
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: cx(
+            "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+            isDisabled && "bg-transparent text-disabled"
+          ),
+          "aria-hidden": "true"
+        },
+        "\u2318K"
+      )
+    ))
+  );
+};
+var ComboBox = (_a) => {
+  var _b = _a, { placeholder = "Search", shortcut = true, size = "sm", children, items, shortcutClassName } = _b, otherProps = __objRest(_b, ["placeholder", "shortcut", "size", "children", "items", "shortcutClassName"]);
+  const placeholderRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState2("");
+  const onResize = useCallback(() => {
+    var _a2;
+    if (!placeholderRef.current) return;
+    const divRect = (_a2 = placeholderRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    setPopoverWidth(divRect.width + "px");
+  }, [placeholderRef, setPopoverWidth]);
+  useResizeObserver({
+    ref: placeholderRef,
+    box: "border-box",
+    onResize
+  });
+  return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { size } }, /* @__PURE__ */ React.createElement(AriaComboBox, __spreadValues({ menuTrigger: "focus" }, otherProps), (state) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5" }, otherProps.label && /* @__PURE__ */ React.createElement(Label, { isRequired: state.isRequired, tooltip: otherProps.tooltip }, otherProps.label), /* @__PURE__ */ React.createElement(
+    ComboBoxValue,
+    {
+      ref: placeholderRef,
+      placeholder,
+      shortcut,
+      shortcutClassName,
+      size,
+      onFocus: onResize,
+      onPointerEnter: onResize
+    }
+  ), /* @__PURE__ */ React.createElement(Popover, { size, triggerRef: placeholderRef, style: { width: popoverWidth }, className: otherProps.popoverClassName }, /* @__PURE__ */ React.createElement(AriaListBox, { items, className: "size-full outline-hidden" }, children)), otherProps.hint && /* @__PURE__ */ React.createElement(HintText, { isInvalid: state.isInvalid }, otherProps.hint))));
+};
+
+// src/design_system/elements/select/select-item.tsx
+import { isValidElement as isValidElement3, useContext as useContext5 } from "react";
+import { Check } from "@untitledui/icons";
+import { ListBoxItem as AriaListBoxItem, Text as AriaText2 } from "react-aria-components";
+var sizes4 = {
+  sm: "p-2 pr-2.5",
+  md: "p-2.5 pl-2"
+};
+var SelectItem = (_a) => {
+  var _b = _a, { label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children } = _b, props = __objRest(_b, ["label", "id", "value", "avatarUrl", "supportingText", "isDisabled", "icon", "className", "children"]);
+  const { size } = useContext5(SelectContext);
+  const labelOrChildren = label || (typeof children === "string" ? children : "");
+  const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+  return /* @__PURE__ */ React.createElement(
+    AriaListBoxItem,
+    __spreadProps(__spreadValues({
+      id,
+      value: value != null ? value : {
+        id,
+        label: labelOrChildren,
+        avatarUrl,
+        supportingText,
+        isDisabled,
+        icon: Icon
+      },
+      textValue,
+      isDisabled
+    }, props), {
+      className: (state) => cx("w-full px-1.5 py-px outline-hidden", typeof className === "function" ? className(state) : className)
+    }),
+    (state) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(
+          "flex cursor-pointer items-center gap-2 rounded-md outline-hidden select-none",
+          state.isSelected && "bg-active",
+          state.isDisabled && "cursor-not-allowed",
+          state.isFocused && "bg-primary_hover",
+          state.isFocusVisible && "ring-2 ring-focus-ring ring-inset",
+          // Icon styles
+          "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+          state.isDisabled && "*:data-icon:text-fg-disabled",
+          sizes4[size]
+        )
+      },
+      avatarUrl ? /* @__PURE__ */ React.createElement(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label }) : isReactComponent(Icon) ? /* @__PURE__ */ React.createElement(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement3(Icon) ? Icon : null,
+      /* @__PURE__ */ React.createElement("div", { className: "flex w-full min-w-0 flex-1 flex-wrap gap-x-2" }, /* @__PURE__ */ React.createElement(
+        AriaText2,
+        {
+          slot: "label",
+          className: cx("truncate text-md font-medium whitespace-nowrap text-primary", state.isDisabled && "text-disabled")
+        },
+        label || (typeof children === "function" ? children(state) : children)
+      ), supportingText && /* @__PURE__ */ React.createElement(AriaText2, { slot: "description", className: cx("text-md whitespace-nowrap text-tertiary", state.isDisabled && "text-disabled") }, supportingText)),
+      state.isSelected && /* @__PURE__ */ React.createElement(
+        Check,
+        {
+          "aria-hidden": "true",
+          className: cx(
+            "ml-auto text-fg-brand-primary",
+            size === "sm" ? "size-4 stroke-[2.5px]" : "size-5",
+            state.isDisabled && "text-fg-disabled"
+          )
+        }
+      )
+    )
+  );
+};
+
+// src/design_system/elements/select/select.tsx
+var sizes3 = {
+  sm: { root: "py-2 px-3", shortcut: "pr-2.5" },
+  md: { root: "py-2.5 px-3.5", shortcut: "pr-3" }
+};
+var SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, placeholderIcon, ref }) => {
+  return /* @__PURE__ */ React.createElement(
+    AriaButton3,
+    {
+      ref,
+      className: cx(
+        "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+        (isFocused || isOpen) && "ring-2 ring-brand",
+        isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      AriaSelectValue,
+      {
+        className: cx(
+          "flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle",
+          // Icon styles
+          "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary in-disabled:*:data-icon:text-fg-disabled",
+          sizes3[size].root
+        )
+      },
+      (state) => {
+        var _a, _b, _c, _d, _e;
+        const Icon = ((_a = state.selectedItem) == null ? void 0 : _a.icon) || placeholderIcon;
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = state.selectedItem) == null ? void 0 : _b.avatarUrl) ? /* @__PURE__ */ React.createElement(Avatar, { size: "xs", src: state.selectedItem.avatarUrl, alt: state.selectedItem.label }) : isReactComponent(Icon) ? /* @__PURE__ */ React.createElement(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement4(Icon) ? Icon : null, state.selectedItem ? /* @__PURE__ */ React.createElement("section", { className: "flex w-full gap-2 truncate" }, /* @__PURE__ */ React.createElement("p", { className: "truncate text-md font-medium text-primary" }, (_c = state.selectedItem) == null ? void 0 : _c.label), ((_d = state.selectedItem) == null ? void 0 : _d.supportingText) && /* @__PURE__ */ React.createElement("p", { className: "text-md text-tertiary" }, (_e = state.selectedItem) == null ? void 0 : _e.supportingText)) : /* @__PURE__ */ React.createElement("p", { className: cx("text-md text-placeholder", isDisabled && "text-disabled") }, placeholder), /* @__PURE__ */ React.createElement(
+          ChevronDown,
+          {
+            "aria-hidden": "true",
+            className: cx("ml-auto shrink-0 text-fg-quaternary", size === "sm" ? "size-4 stroke-[2.5px]" : "size-5")
+          }
+        ));
+      }
+    )
+  );
+};
+var SelectContext = createContext4({ size: "sm" });
+var Select = (_a) => {
+  var _b = _a, { placeholder = "Select", placeholderIcon, size = "sm", children, items, label, hint, tooltip, className } = _b, rest = __objRest(_b, ["placeholder", "placeholderIcon", "size", "children", "items", "label", "hint", "tooltip", "className"]);
+  return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { size } }, /* @__PURE__ */ React.createElement(AriaSelect, __spreadProps(__spreadValues({}, rest), { className: (state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className) }), (state) => /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(Label, { isRequired: state.isRequired, tooltip }, label), /* @__PURE__ */ React.createElement(SelectValue, __spreadProps(__spreadValues(__spreadValues({}, state), { size, placeholder }), { placeholderIcon })), /* @__PURE__ */ React.createElement(Popover, { size, className: rest.popoverClassName }, /* @__PURE__ */ React.createElement(AriaListBox2, { items, className: "size-full outline-hidden" }, children)), hint && /* @__PURE__ */ React.createElement(HintText, { isInvalid: state.isInvalid }, hint))));
+};
+var _Select = Select;
+_Select.ComboBox = ComboBox;
+_Select.Item = SelectItem;
+
+// src/design_system/elements/select/select-native.tsx
+import { useId as useId2 } from "react";
+import { ChevronDown as ChevronDown2 } from "@untitledui/icons";
+var NativeSelect = (_a) => {
+  var _b = _a, { label, hint, options, className, selectClassName } = _b, props = __objRest(_b, ["label", "hint", "options", "className", "selectClassName"]);
+  const id = useId2();
+  const selectId = `select-native-${id}`;
+  const hintId = `select-native-hint-${id}`;
+  return /* @__PURE__ */ React.createElement("div", { className: cx("w-full in-data-input-wrapper:w-max", className) }, label && /* @__PURE__ */ React.createElement(Label, { htmlFor: selectId, id: selectId, className: "mb-1.5" }, label), /* @__PURE__ */ React.createElement("div", { className: "relative grid w-full items-center" }, /* @__PURE__ */ React.createElement(
+    "select",
+    __spreadProps(__spreadValues({}, props), {
+      id: selectId,
+      "aria-describedby": hintId,
+      "aria-labelledby": selectId,
+      className: cx(
+        "appearance-none rounded-lg bg-primary px-3.5 py-2.5 text-md font-medium text-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset placeholder:text-fg-quaternary focus-visible:ring-2 focus-visible:ring-brand disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:text-disabled",
+        /* InputGroup: match other inputs (bg-white, rounded-sm, ring-secondary) */
+        "in-data-input-wrapper:flex in-data-input-wrapper:h-full in-data-input-wrapper:gap-1 in-data-input-wrapper:!bg-white in-data-input-wrapper:px-3 in-data-input-wrapper:py-2 in-data-input-wrapper:font-normal in-data-input-wrapper:text-tertiary in-data-input-wrapper:shadow-none in-data-input-wrapper:ring-1 in-data-input-wrapper:ring-secondary in-data-input-wrapper:ring-inset in-data-input-wrapper:rounded-sm in-data-input-wrapper:focus-visible:ring-2 in-data-input-wrapper:focus-visible:ring-brand",
+        "in-data-input-wrapper:group-disabled:pointer-events-none in-data-input-wrapper:group-disabled:cursor-not-allowed in-data-input-wrapper:group-disabled:bg-transparent in-data-input-wrapper:group-disabled:ring-disabled in-data-input-wrapper:group-disabled:text-disabled",
+        "in-data-input-wrapper:in-data-leading:rounded-l-sm in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-trailing:rounded-r-sm in-data-input-wrapper:in-data-trailing:rounded-l-none",
+        "in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:pl-3",
+        "in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pr-4.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=sm]:pr-4.5",
+        "in-data-input-wrapper:in-data-trailing:in-data-[input-size=md]:pr-8 in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:pr-7.5",
+        selectClassName
+      )
+    }),
+    options.map((opt) => /* @__PURE__ */ React.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+  ), /* @__PURE__ */ React.createElement(
+    ChevronDown2,
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute right-3.5 size-5 text-fg-quaternary in-data-input-wrapper:right-1.5 in-data-input-wrapper:size-4 in-data-input-wrapper:stroke-[2.625px] in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:right-3"
+    }
+  )), hint && /* @__PURE__ */ React.createElement(HintText, { className: "mt-2", id: hintId }, hint));
+};
+
+// src/design_system/elements/photo-fallback/photo-fallback.tsx
+import React5, { useState as useState3, useEffect as useEffect2, useMemo } from "react";
+import Image2 from "next/image";
+
+// src/utils/gradient-placeholder.ts
+var getGradientUrl = (seed) => {
+  const gradients = [
+    // Purple gradients (like from-purple-200 to-purple-300)
+    ["rgb(233, 213, 255)", "rgb(221, 214, 254)", "rgb(196, 181, 253)"],
+    // purple-200 to purple-300
+    ["rgb(250, 232, 255)", "rgb(251, 207, 232)", "rgb(244, 114, 182)"],
+    // pink-200 to pink-300 via pink-400
+    // Blue gradients (like from-blue-200 to-blue-300)
+    ["rgb(191, 219, 254)", "rgb(147, 197, 253)", "rgb(96, 165, 250)"],
+    // blue-200 to blue-300 to blue-400
+    // Green gradients (like from-green-200 to-green-300)
+    ["rgb(187, 247, 208)", "rgb(134, 239, 172)", "rgb(74, 222, 128)"],
+    // green-200 to green-300 to green-400
+    // Pink to Purple (like from-pink-400 to-purple-500)
+    ["rgb(244, 114, 182)", "rgb(217, 70, 239)", "rgb(168, 85, 247)"],
+    // pink-400 to purple-500
+    // Blue to Purple (like from-blue-500 to-purple-600)
+    ["rgb(59, 130, 246)", "rgb(147, 51, 234)", "rgb(147, 51, 234)"],
+    // blue-500 to purple-600
+    // Indigo to Purple (like from-indigo-500 to-purple-600)
+    ["rgb(99, 102, 241)", "rgb(139, 92, 246)", "rgb(147, 51, 234)"],
+    // indigo-500 to purple-600
+    // Orange gradients (like from-orange-200 to-orange-300)
+    ["rgb(254, 215, 170)", "rgb(253, 186, 116)", "rgb(251, 146, 60)"],
+    // orange-200 to orange-300 to orange-400
+    // Purple to Pink (like from-purple-400 to-pink-400)
+    ["rgb(192, 132, 252)", "rgb(232, 121, 249)", "rgb(244, 114, 182)"],
+    // purple-400 to pink-400
+    // Softer blue-green blend
+    ["rgb(165, 243, 252)", "rgb(103, 232, 249)", "rgb(134, 239, 172)"],
+    // cyan-300 to green-400
+    // Warm pink-orange
+    ["rgb(251, 207, 232)", "rgb(254, 202, 202)", "rgb(253, 186, 116)"],
+    // pink-200 to orange-300
+    // Cool indigo-blue
+    ["rgb(199, 210, 254)", "rgb(165, 180, 252)", "rgb(129, 140, 248)"]
+    // indigo-200 to indigo-400
+  ];
+  const index = typeof seed === "string" ? seed.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % gradients.length : Number(seed) % gradients.length;
+  const [color1, color2, color3] = gradients[index];
+  const svg = `
+    <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="grad${index}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style="stop-color:${color1};stop-opacity:1" />
+          <stop offset="50%" style="stop-color:${color2};stop-opacity:1" />
+          <stop offset="100%" style="stop-color:${color3};stop-opacity:1" />
+        </linearGradient>
+      </defs>
+      <rect width="600" height="400" fill="url(#grad${index})" />
+    </svg>
+  `.trim();
+  return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+
+// src/design_system/elements/photo-fallback/photo-fallback.tsx
+function PhotoWithFallback({
+  item,
+  photoUrl,
+  photoAlt,
+  fallbackId,
+  className = "",
+  alt,
+  websitePhotos,
+  companyInformation
+}) {
+  const { imageUrl, imageAlt } = useMemo(() => {
+    const isStubMode = (companyInformation == null ? void 0 : companyInformation.account_status) === "stub";
+    const stockPhotos = (websitePhotos == null ? void 0 : websitePhotos.stock_photos) || [];
+    if (photoUrl) {
+      return { imageUrl: photoUrl, imageAlt: photoAlt || alt || "" };
+    }
+    if ((item == null ? void 0 : item.photo_attachments) && item.photo_attachments.length > 0) {
+      const photoAttachments = item.photo_attachments;
+      const featuredPhoto = photoAttachments.find((pa) => pa.featured) || photoAttachments[0];
+      const photo = featuredPhoto == null ? void 0 : featuredPhoto.photo;
+      if (photo) {
+        const url = photo.large_url || photo.medium_url || photo.thumbnail_url || photo.original_url;
+        if (url) {
+          return {
+            imageUrl: url,
+            imageAlt: photo.title || item.name || item.title || alt || "Image"
+          };
+        }
+      }
+    }
+    if (isStubMode && stockPhotos.length > 0) {
+      const itemId = (item == null ? void 0 : item.id) || fallbackId || 1;
+      const numericId = typeof itemId === "number" ? itemId : typeof itemId === "string" ? parseInt(itemId, 10) || 1 : 1;
+      const stockPhotoIndex = numericId % stockPhotos.length;
+      const stockPhoto = stockPhotos[stockPhotoIndex];
+      if (stockPhoto == null ? void 0 : stockPhoto.url) {
+        return {
+          imageUrl: stockPhoto.url,
+          imageAlt: stockPhoto.alt || (item == null ? void 0 : item.name) || (item == null ? void 0 : item.title) || alt || "Image"
+        };
+      }
+    }
+    const id = fallbackId || (item == null ? void 0 : item.id) || 1;
+    return {
+      imageUrl: getGradientUrl(id),
+      imageAlt: (item == null ? void 0 : item.name) || (item == null ? void 0 : item.title) || alt || "Image"
+    };
+  }, [item, photoUrl, photoAlt, fallbackId, alt, websitePhotos, companyInformation]);
+  const [isLoaded, setIsLoaded] = useState3(false);
+  const imgRef = React5.useRef(null);
+  useEffect2(() => {
+    const resetTimer = setTimeout(() => {
+      setIsLoaded(false);
+    }, 0);
+    const checkTimer = setTimeout(() => {
+      var _a;
+      if (((_a = imgRef.current) == null ? void 0 : _a.complete) && imgRef.current.naturalWidth > 0) {
+        setIsLoaded(true);
+      }
+    }, 0);
+    return () => {
+      clearTimeout(resetTimer);
+      clearTimeout(checkTimer);
+    };
+  }, [imageUrl]);
+  const setImgRef = React5.useCallback((img) => {
+    imgRef.current = img;
+    if (img && img.complete && img.naturalWidth > 0) {
+      setIsLoaded(true);
+    }
+  }, []);
+  if (!imageUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(
+    Image2,
+    {
+      ref: setImgRef,
+      src: imageUrl,
+      alt: imageAlt,
+      width: 800,
+      height: 600,
+      className: `${className} transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : "opacity-0"}`,
+      onLoad: () => setIsLoaded(true),
+      onError: () => setIsLoaded(true)
+    }
+  );
+}
+
+// src/design_system/elements/badges/badges.tsx
+import Image3 from "next/image";
+import { X as CloseX } from "@untitledui/icons";
+
+// src/design_system/elements/badges/badge-types.ts
+var badgeTypes = {
+  pillColor: "pill-color",
+  badgeColor: "color",
+  badgeModern: "modern"
+};
+
+// src/design_system/elements/badges/badges.tsx
+var dotSizes = {
+  sm: { wh: 8, c: 4, r: 2.5 },
+  md: { wh: 10, c: 5, r: 4 }
+};
+var Dot = (_a) => {
+  var _b = _a, { size = "md" } = _b, props = __objRest(_b, ["size"]);
+  return /* @__PURE__ */ React.createElement("svg", __spreadValues({ width: dotSizes[size].wh, height: dotSizes[size].wh, viewBox: `0 0 ${dotSizes[size].wh} ${dotSizes[size].wh}`, fill: "none" }, props), /* @__PURE__ */ React.createElement("circle", { cx: dotSizes[size].c, cy: dotSizes[size].c, r: dotSizes[size].r, fill: "currentColor", stroke: "currentColor" }));
+};
+var filledColors = {
+  gray: {
+    root: "bg-utility-gray-50 text-utility-gray-700 ring-utility-gray-200",
+    addon: "text-utility-gray-500",
+    addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
+  },
+  brand: {
+    root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200",
+    addon: "text-utility-brand-500",
+    addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500"
+  },
+  error: {
+    root: "bg-utility-error-50 text-utility-error-700 ring-utility-error-200",
+    addon: "text-utility-error-500",
+    addonButton: "hover:bg-utility-error-100 text-utility-error-400 hover:text-utility-error-500"
+  },
+  warning: {
+    root: "bg-utility-warning-50 text-utility-warning-700 ring-utility-warning-200",
+    addon: "text-utility-warning-500",
+    addonButton: "hover:bg-utility-warning-100 text-utility-warning-400 hover:text-utility-warning-500"
+  },
+  success: {
+    root: "bg-utility-success-50 text-utility-success-700 ring-utility-success-200",
+    addon: "text-utility-success-500",
+    addonButton: "hover:bg-utility-success-100 text-utility-success-400 hover:text-utility-success-500"
+  },
+  "gray-blue": {
+    root: "bg-utility-gray-blue-50 text-utility-gray-blue-700 ring-utility-gray-blue-200",
+    addon: "text-utility-gray-blue-500",
+    addonButton: "hover:bg-utility-gray-blue-100 text-utility-gray-blue-400 hover:text-utility-gray-blue-500"
+  },
+  "blue-light": {
+    root: "bg-utility-blue-light-50 text-utility-blue-light-700 ring-utility-blue-light-200",
+    addon: "text-utility-blue-light-500",
+    addonButton: "hover:bg-utility-blue-light-100 text-utility-blue-light-400 hover:text-utility-blue-light-500"
+  },
+  blue: {
+    root: "bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200",
+    addon: "text-utility-blue-500",
+    addonButton: "hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500"
+  },
+  indigo: {
+    root: "bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200",
+    addon: "text-utility-indigo-500",
+    addonButton: "hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500"
+  },
+  purple: {
+    root: "bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200",
+    addon: "text-utility-purple-500",
+    addonButton: "hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500"
+  },
+  pink: {
+    root: "bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200",
+    addon: "text-utility-pink-500",
+    addonButton: "hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500"
+  },
+  orange: {
+    root: "bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200",
+    addon: "text-utility-orange-500",
+    addonButton: "hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500"
+  }
+};
+var addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: "", addon: value.addon }]));
+var withPillTypes = {
+  [badgeTypes.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeModern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs",
+    styles: {
+      gray: {
+        root: "bg-primary text-secondary ring-primary",
+        addon: "text-gray-500",
+        addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
+      }
+    }
+  }
+};
+var withBadgeTypes = {
+  [badgeTypes.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeModern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs",
+    styles: addonOnlyColors
+  }
+};
+var Badge = (props) => {
+  const { type = "pill-color", size = "md", color = "gray", children } = props;
+  const colors = withPillTypes[type];
+  const pillSizes = {
+    sm: "py-0.5 px-2 text-xs font-medium",
+    md: "py-0.5 px-2.5 text-sm font-medium",
+    lg: "py-1 px-3 text-sm font-medium"
+  };
+  const badgeSizes = {
+    sm: "py-0.5 px-1.5 text-xs font-medium",
+    md: "py-0.5 px-2 text-sm font-medium",
+    lg: "py-1 px-2.5 text-sm font-medium rounded-lg"
+  };
+  const sizes5 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ React.createElement("span", { className: cx(colors.common, sizes5[type][size], colors.styles[color].root, props.className) }, children);
+};
+var BadgeWithDot = (props) => {
+  const { size = "md", color = "gray", type = "pill-color", className, children } = props;
+  const colors = withBadgeTypes[type];
+  const pillSizes = {
+    sm: "gap-1 py-0.5 pl-1.5 pr-2 text-xs font-medium",
+    md: "gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-medium",
+    lg: "gap-1.5 py-1 pl-2.5 pr-3 text-sm font-medium"
+  };
+  const badgeSizes = {
+    sm: "gap-1 py-0.5 px-1.5 text-xs font-medium",
+    md: "gap-1.5 py-0.5 px-2 text-sm font-medium",
+    lg: "gap-1.5 py-1 px-2.5 text-sm font-medium rounded-lg"
+  };
+  const sizes5 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ React.createElement("span", { className: cx(colors.common, sizes5[type][size], colors.styles[color].root, className) }, /* @__PURE__ */ React.createElement(Dot, { className: colors.styles[color].addon, size: "sm" }), children);
+};
+
+// src/design_system/elements/badges/badge-groups.tsx
+import { createElement as createElement3, isValidElement as isValidElement5 } from "react";
+import { ArrowRight } from "@untitledui/icons";
+var baseClasses = {
+  light: {
+    root: "rounded-full ring-1 ring-inset",
+    addon: "rounded-full ring-1 ring-inset"
+  },
+  modern: {
+    root: "rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-primary hover:bg-secondary",
+    addon: "flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-primary",
+    icon: "text-utility-gray-500"
+  }
+};
+var getSizeClasses = (theme, text, icon) => ({
+  leading: {
+    md: {
+      root: cx("py-1 pr-2 pl-1 text-xs font-medium", !text && !icon && "pr-1"),
+      addon: cx("px-2 py-0.5", theme === "modern" && "gap-1 px-1.5", text && "mr-2"),
+      icon: "ml-1 size-4"
+    },
+    lg: {
+      root: cx("py-1 pr-2 pl-1 text-sm font-medium", !text && !icon && "pr-1"),
+      addon: cx("px-2.5 py-0.5", theme === "modern" && "gap-1.5 px-2", text && "mr-2"),
+      icon: "ml-1 size-4"
+    }
+  },
+  trailing: {
+    md: {
+      root: cx("py-1 pr-1 pl-3 text-xs font-medium", theme === "modern" && "pl-2.5"),
+      addon: cx("py-0.5 pr-1.5 pl-2", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+      icon: "ml-0.5 size-3 stroke-[3px]",
+      dot: "mr-1.5"
+    },
+    lg: {
+      root: "py-1 pr-1 pl-3 text-sm font-medium",
+      addon: cx("py-0.5 pr-2 pl-2.5", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+      icon: "ml-1 size-3 stroke-[3px]",
+      dot: "mr-2"
+    }
+  }
+});
+var colorClasses = sortCx({
+  light: {
+    brand: {
+      root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100",
+      addon: "bg-primary text-current ring-utility-brand-200",
+      icon: "text-utility-brand-500"
+    },
+    gray: {
+      root: "bg-utility-gray-50 text-utility-gray-700 ring-utility-gray-200 hover:bg-utility-gray-100",
+      addon: "bg-primary text-current ring-utility-gray-200",
+      icon: "text-utility-gray-500"
+    },
+    error: {
+      root: "bg-utility-error-50 text-utility-error-700 ring-utility-error-200 hover:bg-utility-error-100",
+      addon: "bg-primary text-current ring-utility-error-200",
+      icon: "text-utility-error-500"
+    },
+    warning: {
+      root: "bg-utility-warning-50 text-utility-warning-700 ring-utility-warning-200 hover:bg-utility-warning-100",
+      addon: "bg-primary text-current ring-utility-warning-200",
+      icon: "text-utility-warning-500"
+    },
+    success: {
+      root: "bg-utility-success-50 text-utility-success-700 ring-utility-success-200 hover:bg-utility-success-100",
+      addon: "bg-primary text-current ring-utility-success-200",
+      icon: "text-utility-success-500"
+    }
+  },
+  modern: {
+    brand: {
+      dot: "bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100"
+    },
+    gray: {
+      dot: "bg-utility-gray-500 outline-3 -outline-offset-1 outline-utility-gray-100"
+    },
+    error: {
+      dot: "bg-utility-error-500 outline-3 -outline-offset-1 outline-utility-error-100"
+    },
+    warning: {
+      dot: "bg-utility-warning-500 outline-3 -outline-offset-1 outline-utility-warning-100"
+    },
+    success: {
+      dot: "bg-utility-success-500 outline-3 -outline-offset-1 outline-utility-success-100"
+    }
+  }
+});
+var BadgeGroup = ({
+  children,
+  addonText,
+  size = "md",
+  color = "brand",
+  theme = "light",
+  align = "leading",
+  className,
+  iconTrailing: IconTrailing = ArrowRight
+}) => {
+  const colors = colorClasses[theme][color];
+  const sizes5 = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];
+  const rootClasses = cx(
+    "inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear",
+    baseClasses[theme].root,
+    sizes5.root,
+    colors.root,
+    className
+  );
+  const addonClasses = cx("inline-flex items-center", baseClasses[theme].addon, sizes5.addon, colors.addon);
+  const dotClasses = cx("inline-block size-2 shrink-0 rounded-full", sizes5.dot, colors.dot);
+  const iconClasses = cx(baseClasses[theme].icon, sizes5.icon, colors.icon);
+  if (align === "trailing") {
+    return /* @__PURE__ */ React.createElement("div", { className: rootClasses }, theme === "modern" && /* @__PURE__ */ React.createElement("span", { className: dotClasses }), children, /* @__PURE__ */ React.createElement("span", { className: addonClasses }, addonText, isReactComponent(IconTrailing) && createElement3(IconTrailing, { className: iconClasses }), isValidElement5(IconTrailing) && IconTrailing));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: rootClasses }, /* @__PURE__ */ React.createElement("span", { className: addonClasses }, theme === "modern" && /* @__PURE__ */ React.createElement("span", { className: dotClasses }), addonText), children, isReactComponent(IconTrailing) && createElement3(IconTrailing, { className: iconClasses }), isValidElement5(IconTrailing) && IconTrailing);
+};
+
+// src/design_system/elements/rating/rating-stars.tsx
+import { useId as useId3 } from "react";
+var getStarProgress = (starPosition, rating, maxRating = 5) => {
+  const clampedRating = Math.min(Math.max(rating, 0), maxRating);
+  const diff = clampedRating - starPosition;
+  if (diff >= 1) return 100;
+  if (diff <= 0) return 0;
+  return Math.round(diff * 100);
+};
+var StarIcon = (_a) => {
+  var _b = _a, { progress = 100 } = _b, props = __objRest(_b, ["progress"]);
+  const id = useId3();
+  return /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props), { className: cx("size-5 text-warning-400", props.className) }), /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z",
+      className: "fill-bg-tertiary"
+    }
+  ), /* @__PURE__ */ React.createElement("g", { clipPath: `url(#clip-${id})` }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: `clip-${id}` }, /* @__PURE__ */ React.createElement("rect", { width: `${progress}%`, height: "20", fill: "white" }))));
+};
+var RatingStars = (_a) => {
+  var _b = _a, { rating = 5, stars = 5, starClassName } = _b, props = __objRest(_b, ["rating", "stars", "starClassName"]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), { className: cx("flex", props.className) }), Array.from({ length: stars }).map((_, index) => /* @__PURE__ */ React.createElement(StarIcon, { key: index, progress: getStarProgress(index, rating, stars), className: starClassName })));
+};
+
+// src/design_system/elements/rating/rating-badge.tsx
+var Wreath = (props) => /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({ width: "36", height: "81", viewBox: "0 0 36 81", fill: "none" }, props), { className: cx("text-fg-primary", props.className) }), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M34.188 79.123C21.8844 77.4193 12.9273 67.7396 8.84084 54.5087C7.16207 49.0327 6.91909 42.9593 7.50445 36.6094C8.58681 25.2702 13.7888 15.4245 21.3764 8.24482C21.4095 8.21163 21.4206 8.20057 21.4316 8.23376C21.4537 8.26695 21.52 8.30013 21.5531 8.32226C21.5973 8.34439 21.6083 8.32226 21.5752 8.37757C13.5237 15.7563 8.35488 27.4938 7.79161 39.3529C6.91909 56.2898 15.1362 71.2907 27.4509 76.4569C29.5162 77.3308 31.6809 77.9946 33.934 78.3375C34.0886 78.5367 34.177 78.8132 34.188 79.123Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.51737 50.8359C4.52243 52.0306 6.12388 53.2033 7.84683 52.7497C7.93518 52.8825 8.38801 53.5462 8.45428 53.6458C8.53159 53.7675 8.67517 53.8892 8.78561 53.7896C8.85188 53.7453 8.9071 53.6458 8.84084 53.4909C8.58681 53.1812 8.34383 52.8603 8.05667 52.5285C7.54863 49.8402 6.80864 48.0481 5.26241 46.2338C3.4732 44.1541 1.6398 43.2248 0.502216 42.8376C0.336548 42.7934 0.181926 42.7491 0.0162576 42.6938C-0.0941877 43.7337 0.380727 45.2493 0.756241 46.1121C1.48518 47.8822 2.28039 49.4309 3.51737 50.8359Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.317 12.9686C18.1735 13.0239 17.3341 13.2451 17.2347 13.0792C17.2015 13.0349 17.2457 12.869 17.323 12.8579C17.6323 12.8247 17.9747 12.8026 18.2729 12.7362C18.814 11.0326 20.3161 10.2914 21.6967 10.0038C23.3533 9.6719 25.1757 10.1808 27.1306 10.4573C27.23 10.4795 27.3404 10.4905 27.4288 10.4905C27.3956 10.5569 27.3515 10.6012 27.3073 10.6675C26.49 11.7849 25.2088 12.8137 23.9608 13.3226C23.1214 13.6766 22.1164 13.8757 21.1334 13.8425C20.0952 13.7983 19.2227 13.5659 18.317 12.9686Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.5531 8.3112C21.6194 8.33332 21.6194 8.3112 21.7408 8.24482C21.9728 8.02357 22.1716 7.89082 22.4035 7.68063C23.7289 7.69169 24.9879 7.29344 26.1807 6.49693C26.7109 6.14293 27.241 5.71148 27.6828 5.19154C28.7431 4.05209 29.5935 2.38164 29.9801 0.854996C30.0022 0.766495 30.0132 0.711182 30.0242 0.622681C29.9248 0.666931 29.8365 0.711183 29.7371 0.755433C27.5945 1.61832 25.5181 2.01657 23.7951 3.68703C22.6244 4.80435 22.017 6.15399 22.2599 7.45938C21.9949 7.66957 21.7188 7.86869 21.4647 8.11207C21.3543 8.21163 21.4868 8.3112 21.5531 8.3112Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7557 20.1039C13.6121 20.1814 12.8058 20.6018 12.6843 20.4579C12.6291 20.4026 12.6512 20.2256 12.7285 20.1924C13.0267 20.0818 13.3801 20.0044 13.6783 19.8716C13.7888 18.6658 14.4625 17.5374 15.7989 16.763C17.8421 15.6789 20.1615 15.8559 22.3483 15.6678C22.4587 15.6568 22.5581 15.6568 22.6575 15.6457C22.6244 15.7121 22.5913 15.7674 22.5692 15.8338C21.8402 17.0949 20.6585 18.4556 19.4546 19.23C18.6484 19.7721 17.6544 20.1814 16.6604 20.3805C15.6111 20.5907 14.7165 20.469 13.7557 20.1039Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.0535 38.7113C3.71618 40.2047 4.90898 41.842 6.65402 41.9526C6.70924 42.1075 7.02953 42.8266 7.07371 42.9372C7.10685 43.0921 7.21729 43.258 7.36087 43.1916C7.42714 43.1695 7.4934 43.081 7.48236 42.9261C7.31669 42.5279 7.10685 42.2181 6.90804 41.8088C7.06267 39.0653 6.90804 37.0629 5.85881 34.8062C4.666 32.2064 3.03141 30.713 2.02636 29.9829C1.90487 29.8722 1.76129 29.7837 1.61771 29.6952C1.38578 30.7572 1.46309 32.4056 1.60667 33.357C1.86069 35.2818 2.26934 36.9744 3.0535 38.7113Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.00838 27.6929C5.29554 29.2859 6.01344 30.89 7.60385 31.5869C7.62594 31.7529 7.80265 32.5273 7.82474 32.6489C7.82474 32.8149 7.87996 33.0029 8.03458 32.9808C8.07876 32.9698 8.18921 32.9255 8.20025 32.7596C8.13399 32.3392 8.0125 31.8635 7.93519 31.4099C8.46532 29.474 8.75248 27.704 8.66412 25.8123C8.52054 23.1462 7.52654 20.8341 5.95821 18.9756C5.83672 18.8428 5.74837 18.699 5.63792 18.5773C5.19614 19.4955 4.90898 21.0664 4.83167 22.0067C4.666 23.9095 4.67705 25.8233 5.00838 27.6929Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.01755 17.637C8.97337 19.2742 9.37097 21.1106 10.7405 22.1727C10.7295 22.3386 10.6963 23.1351 10.6963 23.2457C10.6742 23.4006 10.6853 23.5887 10.8399 23.6219C10.8951 23.6219 10.9945 23.6108 11.0277 23.4559C11.0608 23.0466 11.0718 22.416 11.0939 21.9625C12.2646 19.9712 12.8942 17.8029 12.9163 15.3249C12.9604 12.4597 12.2536 10.6343 11.6903 9.48383C11.613 9.32896 11.5357 9.17408 11.4584 9.01921C10.8399 9.77146 10.2545 11.2096 9.98947 12.0946C9.45933 13.8868 9.07277 15.7563 9.01755 17.637Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.092 8.45501C14.7386 9.99271 14.838 12.2495 15.9867 13.1787C15.9425 13.3779 15.8431 14.0638 15.832 14.2186C15.7878 14.3846 15.7547 14.5394 15.8872 14.6058C15.9425 14.6279 15.9866 14.628 16.0529 14.4841C16.1302 14.0527 16.1523 13.6987 16.2186 13.2562C17.8532 11.5083 18.7809 9.78252 19.3 7.42619C19.8191 4.95923 19.7418 3.00114 19.5209 1.61832C19.4988 1.45238 19.4546 1.28644 19.4105 1.10944C17.9747 2.25995 16.9586 3.77553 16.0971 5.50129C15.6332 6.44162 15.2688 7.40406 15.092 8.45501Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.0889 29.5182C9.95633 29.6399 9.22739 30.3369 9.05068 30.2484C9.0065 30.2041 8.97337 29.9718 9.05068 29.9275C9.32679 29.7063 9.68022 29.5404 9.95633 29.3302C9.86798 28.0026 10.1662 26.653 11.37 25.3919C13.2255 23.5887 15.6884 22.9802 17.9305 22.051C18.0299 22.0067 18.1293 21.9514 18.2508 21.9071C18.2287 21.9846 18.2176 22.0731 18.1845 22.1505C17.7427 23.6993 16.8592 25.5025 15.7878 26.7194C15.092 27.538 14.1533 28.3235 13.1703 28.8434C12.1432 29.3965 11.1712 29.5735 10.0889 29.5182Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.54263 40.3264C8.44323 40.5034 7.85787 41.4548 7.67012 41.4105C7.5928 41.4105 7.51549 41.1782 7.57072 41.0897C7.81369 40.7689 8.12294 40.5145 8.33279 40.1826C7.95727 38.9657 8.13399 37.2067 9.03964 35.5252C10.4754 33.0693 12.5739 31.8746 14.6061 30.1599C14.6944 30.0714 14.7828 29.9939 14.8822 29.8944C14.8932 29.9718 14.9043 30.0603 14.8932 30.1599C14.8491 31.8414 14.4073 33.9543 13.6231 35.5474C13.1151 36.6204 12.364 37.6935 11.5026 38.5896C10.608 39.4856 9.65813 40.0056 8.54263 40.3264Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.55873 50.9244C9.48142 51.1346 9.08382 52.263 8.88501 52.3072C8.81875 52.2961 8.68621 52.1302 8.74144 52.0085C8.90711 51.6324 9.09486 51.2009 9.24948 50.8138C8.56472 50.1611 8.33279 48.3468 8.88501 46.444C9.80171 43.6562 11.8449 41.5654 13.4906 39.2533C13.5679 39.1427 13.6452 39.0321 13.7225 38.9214C13.7446 38.9989 13.7557 39.0874 13.7777 39.1759C14.0649 40.8021 14.0428 42.9593 13.601 44.7183C13.3028 45.8909 12.7837 47.1852 12.11 48.2915C11.4142 49.4641 10.5859 50.2717 9.55873 50.9244Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.0958 63.3256C8.34383 64.1442 10.5748 64.7637 12.11 63.757C12.2315 63.8455 12.8721 64.2327 12.9494 64.2991C13.0598 64.4097 13.2145 64.4871 13.3139 64.3323C13.3691 64.2659 13.4022 64.1553 13.2918 64.0336C12.9715 63.8123 12.6181 63.6685 12.2757 63.4473C11.105 61.0135 9.84589 59.3652 7.9131 58.1483C5.70419 56.7323 3.85975 56.7101 2.67799 56.7101C2.51232 56.7101 2.34665 56.7212 2.18098 56.7212C2.46814 59.1218 5.43912 62.2968 7.0958 63.3256Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.2255 61.4449C13.2145 61.5998 13.1372 62.2857 13.0267 62.7061C12.9936 62.8277 12.9825 63.0048 12.8169 62.9384C12.7506 62.9273 12.6843 62.7835 12.6843 62.7171C12.7616 62.3078 12.8279 61.8432 12.861 61.4339C12.099 60.9471 11.5026 59.3541 11.3811 57.396C11.5136 54.4423 12.839 51.7651 13.8992 48.9774C13.9324 48.8557 13.9765 48.7229 14.0207 48.5902C14.0649 48.6565 14.087 48.7229 14.1312 48.7893C14.838 50.2496 15.3792 52.2962 15.4234 54.1436C15.4676 55.3494 15.2908 56.7544 14.9374 58.0598C14.5619 59.3983 14.0097 60.4493 13.2255 61.4449Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.8551 73.4257C15.2908 73.7134 17.2347 73.647 18.4496 72.0982C18.7588 72.1425 19.2558 72.2199 19.5761 72.242C19.6645 72.2531 19.7307 72.1867 19.7639 72.0761C19.786 71.9987 19.7639 71.8991 19.6203 71.8217C19.2558 71.7442 18.8914 71.7442 18.5048 71.6778C16.8923 69.7861 15.3682 68.7241 13.1703 68.3259C10.6301 67.8612 8.47637 68.5139 7.32774 68.9896C7.17311 69.0449 7.00744 69.1113 6.86387 69.1888C7.27251 70.1069 8.46532 71.0473 9.21635 71.5008C10.6521 72.4522 12.1211 73.1381 13.8551 73.4257Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.9908 69.4321C19.0128 69.5981 19.0349 70.2618 19.0349 70.7043C19.0239 70.826 19.057 70.992 18.8914 71.003C18.814 71.003 18.7257 70.9035 18.7257 70.826C18.6926 70.4167 18.7146 69.9742 18.6484 69.5538C17.798 69.2883 16.6714 67.994 16.1523 66.2129C15.5559 63.3588 16.2075 60.4161 16.5168 57.396C16.5389 57.2633 16.5278 57.1305 16.5389 56.9867C16.5941 57.042 16.6604 57.0973 16.7156 57.1526C17.7538 58.2921 18.792 60.051 19.289 61.7768C19.6313 62.9052 19.8081 64.2991 19.8081 65.6376C19.786 67.0426 19.4988 68.2263 18.9908 69.4321Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M27.0312 75.24C27.1085 75.3617 27.2079 75.9148 27.3183 76.3352C27.3515 76.4348 27.4177 76.5896 27.2631 76.645C27.1858 76.6781 27.0864 76.6118 27.0643 76.5454C26.9207 76.1914 26.9207 75.8153 26.744 75.4613C25.9157 75.6604 24.4799 74.6094 23.5411 73.2377C22.2379 70.8703 22.0943 68.0936 21.5862 65.2726C21.5752 65.1398 21.531 65.0182 21.5089 64.8854C21.5752 64.8965 21.6414 64.9407 21.7077 64.9628C22.9557 65.5934 24.3805 66.7107 25.2972 68.0825C25.9267 68.9675 26.5121 70.1955 26.8434 71.4234C27.1858 72.7177 27.1968 73.9457 27.0312 75.24Z",
+    fill: "currentColor"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22.514 80.5058C23.9829 80.3067 25.8825 79.6319 26.7219 77.7512C27.0201 77.6627 27.5392 77.6074 27.8485 77.5189C27.9368 77.5078 27.981 77.4083 27.9921 77.2866C27.9921 77.2202 27.9479 77.1207 27.7933 77.0985C27.4288 77.1538 27.0643 77.2645 26.6557 77.3087C24.5241 76.0476 22.8011 75.4723 20.5591 75.7931C17.9857 76.1582 16.1081 77.4525 15.1031 78.2822C14.9595 78.4039 14.8159 78.5145 14.6834 78.6362C15.3019 79.3996 16.6935 79.9084 17.5218 80.1297C19.1454 80.5833 20.7358 80.7603 22.514 80.5058Z",
+    fill: "currentColor"
+  }
+));
+var RatingBadge = (_a) => {
+  var _b = _a, { title = "Best Design Tool", subtitle = "2,000+ reviews", rating, theme = "dark", className } = _b, props = __objRest(_b, ["title", "subtitle", "rating", "theme", "className"]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), { className: cx("flex items-center -space-x-0.5", className) }), /* @__PURE__ */ React.createElement(Wreath, { className: cx("shrink-0", theme === "light" && "text-fg-white") }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-1" }, /* @__PURE__ */ React.createElement(RatingStars, { rating, className: "gap-0.5", starClassName: "size-4" }), /* @__PURE__ */ React.createElement("div", { className: "text-center" }, /* @__PURE__ */ React.createElement("p", { className: cx("text-sm font-semibold", theme === "light" ? "text-primary_on-brand" : "text-primary") }, title), /* @__PURE__ */ React.createElement("p", { className: cx("text-xs font-medium", theme === "light" ? "text-secondary_on-brand" : "text-secondary") }, subtitle))), /* @__PURE__ */ React.createElement(Wreath, { className: cx("shrink-0 -scale-x-100", theme === "light" && "text-fg-white") }));
+};
+
+// src/design_system/elements/avatar/avatar-label-group.tsx
+var styles4 = {
+  sm: { root: "gap-2", title: "text-sm font-semibold", subtitle: "text-xs" },
+  md: { root: "gap-2", title: "text-sm font-semibold", subtitle: "text-sm" },
+  lg: { root: "gap-3", title: "text-md font-semibold", subtitle: "text-md" },
+  xl: { root: "gap-4", title: "text-lg font-semibold", subtitle: "text-md" }
+};
+var AvatarLabelGroup = (_a) => {
+  var _b = _a, { title, subtitle, className } = _b, props = __objRest(_b, ["title", "subtitle", "className"]);
+  return /* @__PURE__ */ React.createElement("figure", { className: cx("group flex min-w-0 flex-1 items-center", styles4[props.size].root, className) }, /* @__PURE__ */ React.createElement(Avatar, __spreadValues({}, props)), /* @__PURE__ */ React.createElement("figcaption", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("p", { className: cx("text-primary", styles4[props.size].title) }, title), /* @__PURE__ */ React.createElement("p", { className: cx("truncate text-tertiary", styles4[props.size].subtitle) }, subtitle)));
+};
+
+// src/design_system/elements/breadcrumb/Breadcrumb.tsx
+import { ChevronLeft } from "@untitledui/icons";
+var Breadcrumb = ({ backHref, backLabel, currentLabel }) => {
+  return /* @__PURE__ */ React.createElement("nav", { className: "mb-8", "aria-label": "Breadcrumb" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "link-gray",
+      size: "md",
+      href: backHref,
+      iconLeading: ChevronLeft,
+      className: "text-tertiary hover:text-primary"
+    },
+    backLabel
+  ), /* @__PURE__ */ React.createElement("span", { className: "text-tertiary" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "text-primary font-medium" }, currentLabel)));
+};
+
+// src/design_system/elements/featured-icon/featured-icon.tsx
+import { createElement as createElement4, isValidElement as isValidElement6 } from "react";
+var iconsSizes = {
+  sm: "*:data-icon:size-4",
+  md: "*:data-icon:size-5",
+  lg: "*:data-icon:size-6",
+  xl: "*:data-icon:size-7"
+};
+var styles5 = sortCx({
+  light: {
+    base: "rounded-full",
+    sizes: {
+      sm: "size-8",
+      md: "size-10",
+      lg: "size-12",
+      xl: "size-14"
+    },
+    colors: {
+      brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+      gray: "bg-tertiary text-featured-icon-light-fg-gray",
+      error: "bg-error-secondary text-featured-icon-light-fg-error",
+      warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+      success: "bg-success-secondary text-featured-icon-light-fg-success"
+    }
+  },
+  gradient: {
+    base: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full",
+    sizes: {
+      sm: "size-8 after:size-6 *:data-icon:size-4",
+      md: "size-10 after:size-7 *:data-icon:size-4",
+      lg: "size-12 after:size-8 *:data-icon:size-5",
+      xl: "size-14 after:size-10 *:data-icon:size-5"
+    },
+    colors: {
+      brand: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid",
+      gray: "before:border-utility-gray-200 before:bg-utility-gray-50 after:bg-secondary-solid",
+      error: "before:border-utility-error-200 before:bg-utility-error-50 after:bg-error-solid",
+      warning: "before:border-utility-warning-200 before:bg-utility-warning-50 after:bg-warning-solid",
+      success: "before:border-utility-success-200 before:bg-utility-success-50 after:bg-success-solid"
+    }
+  },
+  dark: {
+    base: "text-fg-white shadow-xs-skeumorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+    sizes: {
+      sm: "size-8 rounded-md before:rounded-[5px]",
+      md: "size-10 rounded-lg before:rounded-[7px]",
+      lg: "size-12 rounded-[10px] before:rounded-[9px]",
+      xl: "size-14 rounded-xl before:rounded-[11px]"
+    },
+    colors: {
+      brand: "bg-brand-solid before:border-utility-brand-200/12",
+      gray: "bg-secondary-solid before:border-utility-gray-200/12",
+      error: "bg-error-solid before:border-utility-error-200/12",
+      warning: "bg-warning-solid before:border-utility-warning-200/12",
+      success: "bg-success-solid before:border-utility-success-200/12"
+    }
+  },
+  modern: {
+    base: "bg-primary shadow-xs-skeumorphic ring-1 ring-inset",
+    sizes: {
+      sm: "size-8 rounded-md",
+      md: "size-10 rounded-lg",
+      lg: "size-12 rounded-[10px]",
+      xl: "size-14 rounded-xl"
+    },
+    colors: {
+      brand: "",
+      gray: "text-fg-secondary ring-primary",
+      error: "",
+      warning: "",
+      success: ""
+    }
+  },
+  "modern-neue": {
+    base: [
+      "bg-primary_alt ring-1 ring-inset before:absolute before:inset-1",
+      // Shadow
+      "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-secondary_alt"
+    ].join(" "),
+    sizes: {
+      sm: "size-8 rounded-[8px] before:rounded-[4px]",
+      md: "size-10 rounded-[10px] before:rounded-[6px]",
+      lg: "size-12 rounded-[12px] before:rounded-[8px]",
+      xl: "size-14 rounded-[14px] before:rounded-[10px]"
+    },
+    colors: {
+      brand: "",
+      gray: "text-fg-secondary ring-primary",
+      error: "",
+      warning: "",
+      success: ""
+    }
+  },
+  outline: {
+    base: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+    sizes: {
+      sm: "size-4 before:size-6 after:size-8.5",
+      md: "size-5 before:size-7 after:size-9.5",
+      lg: "size-6 before:size-8 after:size-10.5",
+      xl: "size-7 before:size-9 after:size-11.5"
+    },
+    colors: {
+      brand: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10",
+      gray: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10",
+      error: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10",
+      warning: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10",
+      success: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10"
+    }
+  }
+});
+var FeaturedIcon = (props) => {
+  const _a = props, { size = "sm", theme: variant = "light", color = "brand", icon: Icon } = _a, otherProps = __objRest(_a, ["size", "theme", "color", "icon"]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, otherProps), {
+      "data-featured-icon": true,
+      className: cx(
+        "relative flex shrink-0 items-center justify-center",
+        iconsSizes[size],
+        styles5[variant].base,
+        styles5[variant].sizes[size],
+        styles5[variant].colors[color],
+        props.className
+      )
+    }),
+    isReactComponent(Icon) && createElement4(Icon, { "data-icon": true, className: "z-1" }),
+    isValidElement6(Icon) && /* @__PURE__ */ React.createElement("div", { className: "z-1" }, Icon),
+    props.children
+  );
+};
+
+// src/design_system/elements/pagination/pagination.tsx
+import { ArrowLeft, ArrowRight as ArrowRight2 } from "@untitledui/icons";
+
+// src/lib/hooks/use-breakpoint.ts
+import { useSyncExternalStore } from "react";
+var screens = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+var useBreakpoint = (size) => {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      if (typeof window === "undefined") {
+        return () => {
+        };
+      }
+      const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);
+      breakpoint.addEventListener("change", onStoreChange);
+      return () => breakpoint.removeEventListener("change", onStoreChange);
+    },
+    () => {
+      if (typeof window === "undefined") {
+        return true;
+      }
+      return window.matchMedia(`(min-width: ${screens[size]})`).matches;
+    },
+    () => true
+  );
+};
+
+// src/design_system/elements/pagination/pagination-base.tsx
+import React6, { cloneElement, createContext as createContext5, isValidElement as isValidElement7, useContext as useContext6, useMemo as useMemo2 } from "react";
+var PaginationContext = createContext5(void 0);
+var PaginationRoot = ({ total, siblingCount = 1, page, onPageChange, children, style, className }) => {
+  const pages = useMemo2(() => {
+    const items = [];
+    const totalPageNumbers = siblingCount * 2 + 5;
+    if (totalPageNumbers >= total) {
+      for (let i = 1; i <= total; i++) {
+        items.push({
+          type: "page",
+          value: i,
+          isCurrent: i === page
+        });
+      }
+    } else {
+      const leftSiblingIndex = Math.max(page - siblingCount, 1);
+      const rightSiblingIndex = Math.min(page + siblingCount, total);
+      const showLeftEllipsis = leftSiblingIndex > 2;
+      const showRightEllipsis = rightSiblingIndex < total - 1;
+      if (!showLeftEllipsis && showRightEllipsis) {
+        const leftItemCount = siblingCount * 2 + 3;
+        const leftRange = range(1, leftItemCount);
+        leftRange.forEach(
+          (pageNum) => items.push({
+            type: "page",
+            value: pageNum,
+            isCurrent: pageNum === page
+          })
+        );
+        items.push({ type: "ellipsis", key: leftItemCount + 1 });
+        items.push({
+          type: "page",
+          value: total,
+          isCurrent: total === page
+        });
+      } else if (showLeftEllipsis && !showRightEllipsis) {
+        const rightItemCount = siblingCount * 2 + 3;
+        const rightRange = range(total - rightItemCount + 1, total);
+        items.push({
+          type: "page",
+          value: 1,
+          isCurrent: page === 1
+        });
+        items.push({ type: "ellipsis", key: total - rightItemCount });
+        rightRange.forEach(
+          (pageNum) => items.push({
+            type: "page",
+            value: pageNum,
+            isCurrent: pageNum === page
+          })
+        );
+      } else if (showLeftEllipsis && showRightEllipsis) {
+        items.push({
+          type: "page",
+          value: 1,
+          isCurrent: page === 1
+        });
+        items.push({ type: "ellipsis", key: leftSiblingIndex - 1 });
+        const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+        middleRange.forEach(
+          (pageNum) => items.push({
+            type: "page",
+            value: pageNum,
+            isCurrent: pageNum === page
+          })
+        );
+        items.push({ type: "ellipsis", key: rightSiblingIndex + 1 });
+        items.push({
+          type: "page",
+          value: total,
+          isCurrent: total === page
+        });
+      }
+    }
+    return items;
+  }, [total, siblingCount, page]);
+  const onPageChangeHandler = (newPage) => {
+    onPageChange == null ? void 0 : onPageChange(newPage);
+  };
+  const paginationContextValue = {
+    pages,
+    currentPage: page,
+    total,
+    onPageChange: onPageChangeHandler
+  };
+  return /* @__PURE__ */ React6.createElement(PaginationContext.Provider, { value: paginationContextValue }, /* @__PURE__ */ React6.createElement("nav", { "aria-label": "Pagination Navigation", style, className }, children));
+};
+var range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, index) => index + start);
+};
+var Trigger = ({ children, style, className, asChild = false, direction, ariaLabel }) => {
+  const context = useContext6(PaginationContext);
+  if (!context) {
+    throw new Error("Pagination components must be used within a Pagination.Root");
+  }
+  const { currentPage, total, onPageChange } = context;
+  const isDisabled = direction === "prev" ? currentPage <= 1 : currentPage >= total;
+  const handleClick = () => {
+    if (isDisabled) return;
+    const newPage = direction === "prev" ? currentPage - 1 : currentPage + 1;
+    onPageChange == null ? void 0 : onPageChange(newPage);
+  };
+  const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;
+  const defaultAriaLabel = direction === "prev" ? "Previous Page" : "Next Page";
+  if (typeof children === "function") {
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children({ isDisabled, onClick: handleClick }));
+  }
+  if (asChild && isValidElement7(children)) {
+    return cloneElement(children, {
+      onClick: handleClick,
+      disabled: isDisabled,
+      isDisabled,
+      "aria-label": ariaLabel || defaultAriaLabel,
+      style: __spreadValues(__spreadValues({}, children.props.style), style),
+      className: [computedClassName, children.props.className].filter(Boolean).join(" ") || void 0
+    });
+  }
+  return /* @__PURE__ */ React6.createElement("button", { "aria-label": ariaLabel || defaultAriaLabel, onClick: handleClick, disabled: isDisabled, style, className: computedClassName }, children);
+};
+var PaginationPrevTrigger = (props) => /* @__PURE__ */ React6.createElement(Trigger, __spreadProps(__spreadValues({}, props), { direction: "prev" }));
+var PaginationNextTrigger = (props) => /* @__PURE__ */ React6.createElement(Trigger, __spreadProps(__spreadValues({}, props), { direction: "next" }));
+var PaginationItem = ({ value, isCurrent, children, style, className, ariaLabel, asChild = false }) => {
+  const context = useContext6(PaginationContext);
+  if (!context) {
+    throw new Error("Pagination components must be used within a <Pagination.Root />");
+  }
+  const { onPageChange } = context;
+  const isSelected = isCurrent;
+  const handleClick = () => {
+    onPageChange == null ? void 0 : onPageChange(value);
+  };
+  const computedClassName = typeof className === "function" ? className({ isSelected }) : className;
+  if (typeof children === "function") {
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children({
+      isSelected,
+      onClick: handleClick,
+      value,
+      "aria-current": isCurrent ? "page" : void 0,
+      "aria-label": ariaLabel || `Page ${value}`
+    }));
+  }
+  if (asChild && isValidElement7(children)) {
+    return cloneElement(children, {
+      onClick: handleClick,
+      "aria-current": isCurrent ? "page" : void 0,
+      "aria-label": ariaLabel || `Page ${value}`,
+      style: __spreadValues(__spreadValues({}, children.props.style), style),
+      className: [computedClassName, children.props.className].filter(Boolean).join(" ") || void 0
+    });
+  }
+  return /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      onClick: handleClick,
+      style,
+      className: computedClassName,
+      "aria-current": isCurrent ? "page" : void 0,
+      "aria-label": ariaLabel || `Page ${value}`,
+      role: "listitem"
+    },
+    children
+  );
+};
+var PaginationEllipsis = ({ children, style, className }) => {
+  const computedClassName = typeof className === "function" ? className() : className;
+  return /* @__PURE__ */ React6.createElement("span", { style, className: computedClassName, "aria-hidden": "true" }, children);
+};
+var PaginationContextComponent = ({ children }) => {
+  const context = useContext6(PaginationContext);
+  if (!context) {
+    throw new Error("Pagination components must be used within a Pagination.Root");
+  }
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children(context));
+};
+var Pagination = {
+  Root: PaginationRoot,
+  PrevTrigger: PaginationPrevTrigger,
+  NextTrigger: PaginationNextTrigger,
+  Item: PaginationItem,
+  Ellipsis: PaginationEllipsis,
+  Context: PaginationContextComponent
+};
+
+// src/design_system/elements/pagination/pagination.tsx
+var PaginationItem2 = ({ value, rounded, isCurrent }) => {
+  return /* @__PURE__ */ React.createElement(
+    Pagination.Item,
+    {
+      value,
+      isCurrent,
+      className: ({ isSelected }) => cx(
+        "flex size-10 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2",
+        rounded ? "rounded-full" : "rounded-lg",
+        isSelected && "bg-primary_hover text-secondary"
+      )
+    },
+    value
+  );
+};
+var PaginationPageDefault = (_a) => {
+  var _b = _a, { rounded, page = 1, total = 10, className } = _b, props = __objRest(_b, ["rounded", "page", "total", "className"]);
+  const isDesktop = useBreakpoint("md");
+  return /* @__PURE__ */ React.createElement(
+    Pagination.Root,
+    __spreadProps(__spreadValues({}, props), {
+      page,
+      total,
+      className: cx("flex w-full items-center justify-between gap-3 border-t border-secondary pt-4 md:pt-5", className)
+    }),
+    /* @__PURE__ */ React.createElement("div", { className: "hidden flex-1 justify-start md:flex" }, /* @__PURE__ */ React.createElement(Pagination.PrevTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { iconLeading: ArrowLeft, color: "link-gray", size: "sm" }, isDesktop ? "Previous" : void 0, " "))),
+    /* @__PURE__ */ React.createElement(Pagination.PrevTrigger, { asChild: true, className: "md:hidden" }, /* @__PURE__ */ React.createElement(Button, { iconLeading: ArrowLeft, color: "secondary", size: "sm" }, isDesktop ? "Previous" : void 0)),
+    /* @__PURE__ */ React.createElement(Pagination.Context, null, ({ pages, currentPage, total: total2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "hidden justify-center gap-0.5 md:flex" }, pages.map(
+      (page2, index) => page2.type === "page" ? /* @__PURE__ */ React.createElement(PaginationItem2, __spreadValues({ key: index, rounded }, page2)) : /* @__PURE__ */ React.createElement(Pagination.Ellipsis, { key: index, className: "flex size-10 shrink-0 items-center justify-center text-tertiary" }, "\u2026")
+    )), /* @__PURE__ */ React.createElement("div", { className: "flex justify-center text-sm whitespace-pre text-fg-secondary md:hidden" }, "Page ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, currentPage), " of ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, total2)))),
+    /* @__PURE__ */ React.createElement("div", { className: "hidden flex-1 justify-end md:flex" }, /* @__PURE__ */ React.createElement(Pagination.NextTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { iconTrailing: ArrowRight2, color: "link-gray", size: "sm" }, isDesktop ? "Next" : void 0))),
+    /* @__PURE__ */ React.createElement(Pagination.NextTrigger, { asChild: true, className: "md:hidden" }, /* @__PURE__ */ React.createElement(Button, { iconTrailing: ArrowRight2, color: "secondary", size: "sm" }, isDesktop ? "Next" : void 0))
+  );
+};
+var PaginationPageMinimalCenter = (_a) => {
+  var _b = _a, { rounded, page = 1, total = 10, className } = _b, props = __objRest(_b, ["rounded", "page", "total", "className"]);
+  const isDesktop = useBreakpoint("md");
+  return /* @__PURE__ */ React.createElement(
+    Pagination.Root,
+    __spreadProps(__spreadValues({}, props), {
+      page,
+      total,
+      className: cx("flex w-full items-center justify-between gap-3 border-t border-secondary pt-4 md:pt-5", className)
+    }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 justify-start" }, /* @__PURE__ */ React.createElement(Pagination.PrevTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { iconLeading: ArrowLeft, color: "secondary", size: "sm" }, isDesktop ? "Previous" : void 0))),
+    /* @__PURE__ */ React.createElement(Pagination.Context, null, ({ pages, currentPage, total: total2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "hidden justify-center gap-0.5 md:flex" }, pages.map(
+      (page2, index) => page2.type === "page" ? /* @__PURE__ */ React.createElement(PaginationItem2, __spreadValues({ key: index, rounded }, page2)) : /* @__PURE__ */ React.createElement(Pagination.Ellipsis, { key: index, className: "flex size-10 shrink-0 items-center justify-center text-tertiary" }, "\u2026")
+    )), /* @__PURE__ */ React.createElement("div", { className: "flex justify-center text-sm whitespace-pre text-fg-secondary md:hidden" }, "Page ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, currentPage), " of ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, total2)))),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 justify-end" }, /* @__PURE__ */ React.createElement(Pagination.NextTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { iconTrailing: ArrowRight2, color: "secondary", size: "sm" }, isDesktop ? "Next" : void 0)))
+  );
+};
+
+// src/design_system/elements/map/GoogleMap.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4, useCallback as useCallback2 } from "react";
+var GOOGLE_MAPS_API_KEY = "AIzaSyAb4-zSsPFx-QGi4cAiCGaRrzsAJC6e348";
+function GoogleMap({ address, locationName, className = "" }) {
+  const mapRef = useRef2(null);
+  const [mapError, setMapError] = useState4(null);
+  const [isLoaded, setIsLoaded] = useState4(false);
+  const geocoderRef = useRef2(null);
+  const mapInstanceRef = useRef2(null);
+  const isInitializingRef = useRef2(false);
+  const callbackNameRef = useRef2(null);
+  const initMapRef = useRef2(null);
+  const initMap = useCallback2(async () => {
+    if (isInitializingRef.current) return;
+    if (!mapRef.current || !window.google || !window.google.maps) {
+      return;
+    }
+    if (!window.google.maps.Geocoder) {
+      warn("google-map", "GEOCODER_NOT_READY_RETRYING", {
+        address
+      });
+      setTimeout(() => {
+        var _a, _b;
+        if (mapRef.current && ((_b = (_a = window.google) == null ? void 0 : _a.maps) == null ? void 0 : _b.Geocoder) && initMapRef.current) {
+          void initMapRef.current();
+        }
+      }, 100);
+      return;
+    }
+    if (!document.body.contains(mapRef.current)) {
+      return;
+    }
+    isInitializingRef.current = true;
+    try {
+      if (mapInstanceRef.current) {
+        const markers = mapInstanceRef.current.markers || [];
+        markers.forEach((marker) => {
+          if (marker.map) marker.map = null;
+        });
+        mapInstanceRef.current = null;
+      }
+      const markerLibrary = await window.google.maps.importLibrary("marker");
+      const AdvancedMarkerElement = markerLibrary.AdvancedMarkerElement;
+      geocoderRef.current = new window.google.maps.Geocoder();
+      geocoderRef.current.geocode({ address }, (results, status) => {
+        if (!mapRef.current || !document.body.contains(mapRef.current)) {
+          isInitializingRef.current = false;
+          return;
+        }
+        if (status === "OK" && results && results[0]) {
+          const location = results[0].geometry.location;
+          if (!window.google) return;
+          const map = new window.google.maps.Map(mapRef.current, {
+            zoom: 15,
+            center: location,
+            mapId: "DEMO_MAP_ID",
+            // Can be replaced with a custom Map ID from Google Cloud Console
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: true,
+            zoomControl: true
+            // Styles cannot be set when mapId is present - configure in Google Cloud Console instead
+          });
+          const marker = new AdvancedMarkerElement({
+            map,
+            position: location,
+            title: locationName || address
+          });
+          map.markers = [marker];
+          mapInstanceRef.current = map;
+          setIsLoaded(true);
+          setMapError(null);
+        } else {
+          setMapError("Unable to find the address. Please check the address and try again.");
+          setIsLoaded(false);
+        }
+        isInitializingRef.current = false;
+      });
+    } catch (error2) {
+      error("google-map", "MAP_INITIALIZATION_FAILED", {
+        address,
+        message: error2 instanceof Error ? error2.message : String(error2),
+        stack: error2 instanceof Error ? error2.stack || "" : ""
+      });
+      setMapError("Error loading map. Please try again later.");
+      isInitializingRef.current = false;
+    }
+  }, [address, locationName]);
+  useEffect3(() => {
+    initMapRef.current = initMap;
+  }, [initMap]);
+  useEffect3(() => {
+    let mounted = true;
+    let checkInterval = null;
+    const callbackName = `initGoogleMap_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    callbackNameRef.current = callbackName;
+    window[callbackName] = () => {
+      if (mounted && mapRef.current && initMapRef.current) {
+        setTimeout(() => {
+          if (mounted && mapRef.current && initMapRef.current) {
+            void initMapRef.current();
+          }
+        }, 100);
+      }
+    };
+    if (window.google && window.google.maps && window.google.maps.Geocoder) {
+      setTimeout(() => {
+        if (mounted && mapRef.current && initMapRef.current) {
+          void initMapRef.current();
+        }
+      }, 100);
+      return () => {
+        mounted = false;
+        delete window[callbackName];
+      };
+    }
+    const existingScript = document.querySelector(`script[src*="maps.googleapis.com"]`);
+    if (existingScript) {
+      checkInterval = setInterval(() => {
+        if (window.google && window.google.maps && window.google.maps.Geocoder && mounted) {
+          clearInterval(checkInterval);
+          setTimeout(() => {
+            if (mounted && mapRef.current && initMapRef.current) {
+              void initMapRef.current();
+            }
+          }, 100);
+        }
+      }, 100);
+      return () => {
+        mounted = false;
+        if (checkInterval) {
+          clearInterval(checkInterval);
+        }
+        delete window[callbackName];
+      };
+    }
+    const script = document.createElement("script");
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places,marker&loading=async&callback=${callbackName}`;
+    script.async = true;
+    script.defer = true;
+    script.onerror = () => {
+      if (mounted) {
+        setMapError("Failed to load Google Maps. Please check your internet connection.");
+        delete window[callbackName];
+      }
+    };
+    document.head.appendChild(script);
+    return () => {
+      mounted = false;
+      if (checkInterval) {
+        clearInterval(checkInterval);
+      }
+      if (callbackNameRef.current) {
+        delete window[callbackNameRef.current];
+        callbackNameRef.current = null;
+      }
+    };
+  }, []);
+  useEffect3(() => {
+    if (window.google && window.google.maps && window.google.maps.Geocoder && mapRef.current && !isInitializingRef.current && initMapRef.current) {
+      const timeoutId = setTimeout(() => {
+        if (mapRef.current && initMapRef.current) {
+          void initMapRef.current();
+        }
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [address, locationName]);
+  useEffect3(() => {
+    return () => {
+      if (mapInstanceRef.current) {
+        const markers = mapInstanceRef.current.markers || [];
+        markers.forEach((marker) => {
+          if (marker.map) marker.map = null;
+        });
+        mapInstanceRef.current = null;
+      }
+      isInitializingRef.current = false;
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: `h-full w-full rounded-lg ${className}`, style: { minHeight: "240px", position: "relative" } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: mapRef,
+      className: "h-full w-full rounded-lg",
+      style: { minHeight: "240px" }
+    }
+  ), !isLoaded && !mapError && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "absolute inset-0 bg-secondary_alt rounded-lg flex items-center justify-center z-10",
+      style: { pointerEvents: "none" }
+    },
+    /* @__PURE__ */ React.createElement("p", { className: "text-tertiary" }, "Loading map...")
+  ), mapError && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "absolute inset-0 bg-secondary_alt rounded-lg flex items-center justify-center z-10",
+      style: { pointerEvents: "auto" }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "text-center p-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-tertiary mb-2" }, mapError), /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: `https://maps.google.com/?q=${encodeURIComponent(address)}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-sm text-brand-secondary hover:underline"
+      },
+      "Open in Google Maps"
+    ))
+  ));
+}
+
+// src/design_system/elements/markdown-renderer/MarkdownRenderer.tsx
+import Image4 from "next/image";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function extractTextFromChildren(children) {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.map((child) => extractTextFromChildren(child)).join("");
+  }
+  if (children && typeof children === "object" && "props" in children && children.props && typeof children.props === "object" && "children" in children.props) {
+    return extractTextFromChildren(children.props.children);
+  }
+  return "";
+}
+function MarkdownRenderer({ content, className = "" }) {
+  return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        // Headings with IDs for table of contents
+        h1: (_a) => {
+          var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+          const text = extractTextFromChildren(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ React.createElement("h1", __spreadValues({ id, className: "text-3xl md:text-4xl font-bold text-gray-900 mb-6" }, props), children);
+        },
+        h2: (_c) => {
+          var _d = _c, { children } = _d, props = __objRest(_d, ["children"]);
+          const text = extractTextFromChildren(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ React.createElement("h2", __spreadValues({ id, className: "text-2xl font-semibold text-gray-900 mb-4" }, props), children);
+        },
+        h3: (_e) => {
+          var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
+          const text = extractTextFromChildren(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ React.createElement("h3", __spreadValues({ id, className: "text-xl font-semibold text-gray-900 mb-3" }, props), children);
+        },
+        h4: (_g) => {
+          var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
+          const text = extractTextFromChildren(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ React.createElement("h4", __spreadValues({ id, className: "text-lg font-semibold text-gray-900 mb-2" }, props), children);
+        },
+        h5: (_i) => {
+          var _j = _i, { children } = _j, props = __objRest(_j, ["children"]);
+          const text = extractTextFromChildren(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ React.createElement("h5", __spreadValues({ id, className: "text-base font-semibold text-gray-900 mb-2" }, props), children);
+        },
+        h6: (_k) => {
+          var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
+          const text = extractTextFromChildren(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ React.createElement("h6", __spreadValues({ id, className: "text-sm font-semibold text-gray-900 mb-2" }, props), children);
+        },
+        // Paragraphs and text
+        p: (props) => /* @__PURE__ */ React.createElement("p", __spreadValues({ className: "text-gray-700 leading-relaxed mb-4 last:mb-0" }, props)),
+        strong: (props) => /* @__PURE__ */ React.createElement("strong", __spreadValues({ className: "font-semibold text-gray-900" }, props)),
+        em: (props) => /* @__PURE__ */ React.createElement("em", __spreadValues({ className: "italic text-gray-700" }, props)),
+        // Lists
+        ul: (props) => /* @__PURE__ */ React.createElement("ul", __spreadValues({ className: "list-disc list-inside space-y-1 mb-4 last:mb-0" }, props)),
+        ol: (props) => /* @__PURE__ */ React.createElement("ol", __spreadValues({ className: "list-decimal list-inside space-y-1 mb-4 last:mb-0" }, props)),
+        li: (props) => /* @__PURE__ */ React.createElement("li", __spreadValues({ className: "text-gray-700 leading-relaxed" }, props)),
+        // Blockquotes
+        blockquote: (props) => /* @__PURE__ */ React.createElement("blockquote", __spreadValues({ className: "border-l-4 border-blue-500 pl-4 italic text-gray-600 bg-blue-50 py-2 mb-4" }, props)),
+        // Links
+        a: (props) => /* @__PURE__ */ React.createElement("a", __spreadValues({ className: "text-blue-600 hover:text-blue-800 hover:underline" }, props)),
+        // Images
+        img: (props) => {
+          const _a = props, { src, alt, width, height } = _a, restProps = __objRest(_a, ["src", "alt", "width", "height"]);
+          if (!src || typeof src !== "string") return null;
+          return /* @__PURE__ */ React.createElement(
+            Image4,
+            __spreadValues({
+              src,
+              alt: alt || "",
+              width: typeof width === "number" ? width : 800,
+              height: typeof height === "number" ? height : 600,
+              className: "max-w-full h-auto rounded-lg shadow-md my-4"
+            }, restProps)
+          );
+        },
+        // Horizontal rules
+        hr: () => /* @__PURE__ */ React.createElement("hr", { className: "my-6 border-gray-200" }),
+        // Tables
+        table: (props) => /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto my-4" }, /* @__PURE__ */ React.createElement("table", __spreadValues({ className: "min-w-full bg-white border border-gray-200 rounded-lg" }, props))),
+        thead: (props) => /* @__PURE__ */ React.createElement("thead", __spreadValues({ className: "bg-gray-50" }, props)),
+        tbody: (props) => /* @__PURE__ */ React.createElement("tbody", __spreadValues({}, props)),
+        tr: (props) => /* @__PURE__ */ React.createElement("tr", __spreadValues({ className: "border-b border-gray-200" }, props)),
+        th: (props) => /* @__PURE__ */ React.createElement("th", __spreadValues({ className: "px-4 py-3 text-left text-sm font-semibold text-gray-900" }, props)),
+        td: (props) => /* @__PURE__ */ React.createElement("td", __spreadValues({ className: "px-4 py-3 text-sm text-gray-700" }, props)),
+        // Code blocks
+        pre: (props) => /* @__PURE__ */ React.createElement("pre", __spreadValues({ className: "bg-gray-100 p-4 rounded-lg overflow-x-auto my-4" }, props)),
+        // Code
+        code: (props) => /* @__PURE__ */ React.createElement("code", __spreadValues({ className: "bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800" }, props))
+      }
+    },
+    content
+  ));
+}
+
+// src/design_system/elements/buttons/button.aman.tsx
+import React7, { isValidElement as isValidElement8 } from "react";
+import { Button as AriaButton4, Link as AriaLink2 } from "react-aria-components";
+var styles6 = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-none transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none size-5 shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    sm: {
+      root: "gap-2 rounded-sm px-5 py-2.5 text-sm font-medium uppercase tracking-wide"
+    },
+    md: {
+      root: "gap-2 rounded-sm px-6 py-3 text-base font-medium uppercase tracking-wide"
+    },
+    lg: {
+      root: "gap-2 rounded-sm px-8 py-3.5 text-lg font-medium uppercase tracking-wide"
+    },
+    xl: {
+      root: "gap-2.5 rounded-sm px-10 py-4 text-xl font-medium uppercase tracking-wide"
+    }
+  },
+  colors: {
+    primary: {
+      root: "bg-brand-solid text-white hover:bg-brand-solid_hover transition-colors"
+    },
+    secondary: {
+      root: "bg-white text-fg-primary border-2 hover:opacity-90 transition-all"
+    },
+    tertiary: {
+      root: "text-fg-primary hover:underline"
+    },
+    "link-gray": {
+      root: [
+        "p-0! text-fg-primary",
+        "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline"
+      ].join(" ")
+    },
+    "link-color": {
+      root: [
+        "p-0! text-fg-primary",
+        "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline"
+      ].join(" ")
+    }
+  }
+});
+var Button3 = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "color",
+    "children",
+    "className",
+    "noTextPadding",
+    "iconLeading",
+    "iconTrailing",
+    "isDisabled",
+    "isLoading",
+    "showTextWhileLoading"
+  ]);
+  const href = "href" in otherProps ? otherProps.href : void 0;
+  const Component = href ? AriaLink2 : AriaButton4;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  let props = {};
+  if (href) {
+    props = __spreadValues(__spreadProps(__spreadValues({}, otherProps), {
+      href: disabled ? void 0 : href
+    }), disabled ? { "data-rac": true, "data-disabled": true } : {});
+  } else {
+    props = __spreadProps(__spreadValues({}, otherProps), {
+      type: otherProps.type || "button",
+      isPending: loading,
+      isDisabled: disabled
+    });
+  }
+  const secondaryStyle = color === "secondary" ? {
+    borderColor: "var(--color-text-brand-secondary)"
+  } : void 0;
+  return /* @__PURE__ */ React7.createElement(
+    Component,
+    __spreadProps(__spreadValues({
+      "data-loading": loading ? true : void 0,
+      "data-icon-only": isIcon ? true : void 0
+    }, props), {
+      style: secondaryStyle,
+      className: cx(
+        styles6.common.root,
+        styles6.sizes[size].root,
+        styles6.colors[color].root,
+        (loading || href && (disabled || loading)) && "pointer-events-none",
+        loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+        className
+      )
+    }),
+    isValidElement8(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && React7.createElement(IconLeading, { "data-icon": "leading", className: styles6.common.icon }),
+    loading && /* @__PURE__ */ React7.createElement(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 20 20",
+        className: cx(styles6.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")
+      },
+      /* @__PURE__ */ React7.createElement("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }),
+      /* @__PURE__ */ React7.createElement(
+        "circle",
+        {
+          className: "origin-center animate-spin stroke-current",
+          cx: "10",
+          cy: "10",
+          r: "8",
+          fill: "none",
+          strokeWidth: "2",
+          strokeDasharray: "12.5 50",
+          strokeLinecap: "round"
+        }
+      )
+    ),
+    children && /* @__PURE__ */ React7.createElement("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && "px-0.5") }, children),
+    isValidElement8(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && React7.createElement(IconTrailing, { "data-icon": "trailing", className: styles6.common.icon })
+  );
+};
+registerThemeVariant("button", "aman", Button3);
+
+// src/design_system/elements/buttons/button.barelux.tsx
+import React8, { isValidElement as isValidElement9 } from "react";
+import { Button as AriaButton5, Link as AriaLink3 } from "react-aria-components";
+var styles7 = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-none transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none size-5 shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    sm: {
+      root: "gap-2 rounded-full px-6 py-2.5 text-sm font-medium uppercase tracking-wide"
+    },
+    md: {
+      root: "gap-2 rounded-full px-8 py-3 text-base font-medium uppercase tracking-wide"
+    },
+    lg: {
+      root: "gap-2 rounded-full px-10 py-3.5 text-lg font-medium uppercase tracking-wide"
+    },
+    xl: {
+      root: "gap-2.5 rounded-full px-12 py-4 text-xl font-medium uppercase tracking-wide"
+    }
+  },
+  colors: {
+    primary: {
+      root: "bg-brand-solid text-white hover:bg-brand-solid_hover transition-colors"
+    },
+    secondary: {
+      root: "bg-secondary text-fg-primary hover:opacity-90 transition-all"
+    },
+    tertiary: {
+      root: "text-fg-primary hover:underline"
+    },
+    "link-gray": {
+      root: [
+        "p-0! text-fg-primary",
+        "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline"
+      ].join(" ")
+    },
+    "link-color": {
+      root: [
+        "p-0! text-fg-primary",
+        "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline"
+      ].join(" ")
+    }
+  }
+});
+var Button4 = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "color",
+    "children",
+    "className",
+    "noTextPadding",
+    "iconLeading",
+    "iconTrailing",
+    "isDisabled",
+    "isLoading",
+    "showTextWhileLoading"
+  ]);
+  const href = "href" in otherProps ? otherProps.href : void 0;
+  const Component = href ? AriaLink3 : AriaButton5;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  let props = {};
+  if (href) {
+    props = __spreadValues(__spreadProps(__spreadValues({}, otherProps), {
+      href: disabled ? void 0 : href
+    }), disabled ? { "data-rac": true, "data-disabled": true } : {});
+  } else {
+    props = __spreadProps(__spreadValues({}, otherProps), {
+      type: otherProps.type || "button",
+      isPending: loading,
+      isDisabled: disabled
+    });
+  }
+  return /* @__PURE__ */ React8.createElement(
+    Component,
+    __spreadProps(__spreadValues({
+      "data-loading": loading ? true : void 0,
+      "data-icon-only": isIcon ? true : void 0
+    }, props), {
+      className: cx(
+        styles7.common.root,
+        styles7.sizes[size].root,
+        styles7.colors[color].root,
+        (loading || href && (disabled || loading)) && "pointer-events-none",
+        loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+        className
+      )
+    }),
+    isValidElement9(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && React8.createElement(IconLeading, { "data-icon": "leading", className: styles7.common.icon }),
+    loading && /* @__PURE__ */ React8.createElement(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 20 20",
+        className: cx(styles7.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")
+      },
+      /* @__PURE__ */ React8.createElement("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }),
+      /* @__PURE__ */ React8.createElement(
+        "circle",
+        {
+          className: "origin-center animate-spin stroke-current",
+          cx: "10",
+          cy: "10",
+          r: "8",
+          fill: "none",
+          strokeWidth: "2",
+          strokeDasharray: "12.5 50",
+          strokeLinecap: "round"
+        }
+      )
+    ),
+    children && /* @__PURE__ */ React8.createElement("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && "px-0.5") }, children),
+    isValidElement9(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && React8.createElement(IconTrailing, { "data-icon": "trailing", className: styles7.common.icon })
+  );
+};
+registerThemeVariant("button", "barelux", Button4);
+
+// src/design_system/elements/buttons/button.balance.tsx
+import React9, { isValidElement as isValidElement10 } from "react";
+import { Button as AriaButton6, Link as AriaLink4 } from "react-aria-components";
+var styles8 = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-none transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none size-5 shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    sm: {
+      root: "gap-2 rounded-full px-6 py-2.5 text-sm font-medium"
+    },
+    md: {
+      root: "gap-2 rounded-full px-8 py-3 text-base font-medium"
+    },
+    lg: {
+      root: "gap-2 rounded-full px-10 py-3.5 text-lg font-medium"
+    },
+    xl: {
+      root: "gap-2.5 rounded-full px-12 py-4 text-xl font-medium"
+    }
+  },
+  colors: {
+    primary: {
+      root: "bg-brand-solid text-white hover:bg-brand-solid_hover transition-colors"
+    },
+    secondary: {
+      root: "bg-secondary text-fg-primary hover:opacity-90 transition-all"
+    },
+    tertiary: {
+      root: "text-fg-primary hover:underline"
+    },
+    "link-gray": {
+      root: [
+        "p-0! text-fg-primary",
+        "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline"
+      ].join(" ")
+    },
+    "link-color": {
+      root: [
+        "p-0! text-fg-primary",
+        "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline"
+      ].join(" ")
+    }
+  }
+});
+var Button5 = (_a) => {
+  var _b = _a, {
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "color",
+    "children",
+    "className",
+    "noTextPadding",
+    "iconLeading",
+    "iconTrailing",
+    "isDisabled",
+    "isLoading",
+    "showTextWhileLoading"
+  ]);
+  const href = "href" in otherProps ? otherProps.href : void 0;
+  const Component = href ? AriaLink4 : AriaButton6;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  let props = {};
+  if (href) {
+    props = __spreadValues(__spreadProps(__spreadValues({}, otherProps), {
+      href: disabled ? void 0 : href
+    }), disabled ? { "data-rac": true, "data-disabled": true } : {});
+  } else {
+    props = __spreadProps(__spreadValues({}, otherProps), {
+      type: otherProps.type || "button",
+      isPending: loading,
+      isDisabled: disabled
+    });
+  }
+  return /* @__PURE__ */ React9.createElement(
+    Component,
+    __spreadProps(__spreadValues({
+      "data-loading": loading ? true : void 0,
+      "data-icon-only": isIcon ? true : void 0
+    }, props), {
+      className: cx(
+        styles8.common.root,
+        styles8.sizes[size].root,
+        styles8.colors[color].root,
+        (loading || href && (disabled || loading)) && "pointer-events-none",
+        loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+        className
+      )
+    }),
+    isValidElement10(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && React9.createElement(IconLeading, { "data-icon": "leading", className: styles8.common.icon }),
+    loading && /* @__PURE__ */ React9.createElement(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 20 20",
+        className: cx(styles8.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")
+      },
+      /* @__PURE__ */ React9.createElement("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }),
+      /* @__PURE__ */ React9.createElement(
+        "circle",
+        {
+          className: "origin-center animate-spin stroke-current",
+          cx: "10",
+          cy: "10",
+          r: "8",
+          fill: "none",
+          strokeWidth: "2",
+          strokeDasharray: "12.5 50",
+          strokeLinecap: "round"
+        }
+      )
+    ),
+    children && /* @__PURE__ */ React9.createElement("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && "px-0.5") }, children),
+    isValidElement10(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && React9.createElement(IconTrailing, { "data-icon": "trailing", className: styles8.common.icon })
+  );
+};
+registerThemeVariant("button", "balance", Button5);
+
+// src/design_system/elements/input/input.aman.tsx
+import { createContext as createContext6, useContext as useContext7 } from "react";
+import { HelpCircle as HelpCircle3, InfoCircle as InfoCircle2 } from "@untitledui/icons";
+import { Group as AriaGroup3, Input as AriaInput3, TextField as AriaTextField3 } from "react-aria-components";
+var TextFieldContext2 = createContext6({});
+var InputBase2 = (_a) => {
+  var _b = _a, {
+    ref,
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "sm",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName
+  } = _b, inputProps = __objRest(_b, [
+    "ref",
+    "tooltip",
+    "shortcut",
+    "groupRef",
+    "size",
+    "isInvalid",
+    "isDisabled",
+    "icon",
+    "placeholder",
+    "wrapperClassName",
+    "tooltipClassName",
+    "inputClassName",
+    "iconClassName"
+  ]);
+  const hasTrailingIcon = tooltip || isInvalid;
+  const hasLeadingIcon = Icon;
+  const context = useContext7(TextFieldContext2);
+  const inputSize = (context == null ? void 0 : context.size) || size;
+  const sizes5 = sortCx({
+    sm: {
+      root: cx("px-3 py-2.5", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+      iconLeading: "left-3",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    md: {
+      root: cx("px-3.5 py-3", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+      iconLeading: "left-3.5",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-3"
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    AriaGroup3,
+    __spreadProps(__spreadValues({}, { isDisabled, isInvalid }), {
+      ref: groupRef,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "relative flex w-full flex-row place-content-center place-items-center rounded-sm bg-white ring-1 ring-secondary transition-shadow duration-100 ease-linear ring-inset",
+        isFocusWithin && !isDisabled2 && "ring-2 ring-focus-ring",
+        isDisabled2 && "cursor-not-allowed bg-primary ring-secondary",
+        isInvalid2 && "ring-error_subtle",
+        isInvalid2 && isFocusWithin && "ring-2 ring-error",
+        context == null ? void 0 : context.wrapperClassName,
+        wrapperClassName
+      )
+    }),
+    Icon && /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        className: cx(
+          "pointer-events-none absolute size-5 text-secondary",
+          isDisabled && "text-border-secondary",
+          sizes5[inputSize].iconLeading,
+          context == null ? void 0 : context.iconClassName,
+          iconClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      AriaInput3,
+      __spreadProps(__spreadValues({}, inputProps), {
+        ref,
+        placeholder,
+        className: cx(
+          "m-0 w-full bg-transparent text-base font-body text-fg-primary ring-0 outline-hidden placeholder:text-secondary autofill:rounded-sm autofill:text-fg-primary",
+          isDisabled && "cursor-not-allowed text-secondary",
+          sizes5[inputSize].root,
+          context == null ? void 0 : context.inputClassName,
+          inputClassName
+        )
+      })
+    ),
+    tooltip && !isInvalid && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip, placement: "top" }, /* @__PURE__ */ React.createElement(
+      TooltipTrigger,
+      {
+        className: cx(
+          "absolute cursor-pointer text-secondary transition duration-200 hover:text-fg-primary focus:text-fg-primary",
+          sizes5[inputSize].iconTrailing,
+          context == null ? void 0 : context.tooltipClassName,
+          tooltipClassName
+        )
+      },
+      /* @__PURE__ */ React.createElement(HelpCircle3, { className: "size-4" })
+    )),
+    isInvalid && /* @__PURE__ */ React.createElement(
+      InfoCircle2,
+      {
+        className: cx(
+          "pointer-events-none absolute size-4 text-error",
+          sizes5[inputSize].iconTrailing
+        )
+      }
+    ),
+    shortcut && /* @__PURE__ */ React.createElement(
+      "kbd",
+      {
+        className: cx(
+          "pointer-events-none absolute flex h-5 items-center justify-center rounded bg-utility-gray-50 px-1.5 text-xs font-medium text-tertiary shadow-xs ring-1 ring-inset ring-utility-gray-200",
+          sizes5[inputSize].shortcut
+        )
+      },
+      shortcut === true ? "\u2318K" : shortcut
+    )
+  );
+};
+var Input2 = (_a) => {
+  var _b = _a, {
+    label,
+    hint,
+    size,
+    isInvalid,
+    isDisabled,
+    isRequired
+  } = _b, props = __objRest(_b, [
+    "label",
+    "hint",
+    "size",
+    "isInvalid",
+    "isDisabled",
+    "isRequired"
+  ]);
+  const textFieldContext = { size, wrapperClassName: props.wrapperClassName, inputClassName: props.inputClassName, iconClassName: props.iconClassName, tooltipClassName: props.tooltipClassName };
+  return /* @__PURE__ */ React.createElement(TextFieldContext2.Provider, { value: textFieldContext }, /* @__PURE__ */ React.createElement(
+    AriaTextField3,
+    __spreadProps(__spreadValues({}, { isInvalid, isDisabled, isRequired }), {
+      className: "flex flex-col gap-1.5"
+    }),
+    label && /* @__PURE__ */ React.createElement(Label, null, label),
+    /* @__PURE__ */ React.createElement(InputBase2, __spreadProps(__spreadValues({}, props), { size, isInvalid, isDisabled })),
+    hint && /* @__PURE__ */ React.createElement(HintText, null, hint)
+  ));
+};
+registerThemeVariant("input", "aman", Input2);
+
+// src/design_system/elements/textarea/textarea.aman.tsx
+import { TextArea as AriaTextArea2, TextField as AriaTextField4 } from "react-aria-components";
+var TextArea2 = (_a) => {
+  var _b = _a, {
+    label,
+    hint,
+    placeholder,
+    rows = 4,
+    isInvalid,
+    isDisabled,
+    isRequired,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "hint",
+    "placeholder",
+    "rows",
+    "isInvalid",
+    "isDisabled",
+    "isRequired",
+    "className"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    AriaTextField4,
+    __spreadProps(__spreadValues({}, { isInvalid, isDisabled, isRequired }), {
+      className: "flex flex-col gap-1.5"
+    }),
+    label && /* @__PURE__ */ React.createElement(Label, null, label),
+    /* @__PURE__ */ React.createElement(
+      AriaTextArea2,
+      __spreadProps(__spreadValues({}, props), {
+        rows,
+        placeholder,
+        className: cx(
+          "w-full rounded-sm bg-white px-3 py-2.5 text-base font-body text-fg-primary ring-1 ring-secondary ring-inset placeholder:text-secondary outline-none transition-shadow duration-100 ease-linear",
+          "focus:ring-2 focus:ring-focus-ring",
+          isDisabled && "cursor-not-allowed bg-primary text-secondary ring-secondary",
+          isInvalid && "ring-error_subtle focus:ring-2 focus:ring-error",
+          className
+        )
+      })
+    ),
+    hint && /* @__PURE__ */ React.createElement(HintText, null, hint)
+  );
+};
+registerThemeVariant("textarea", "aman", TextArea2);
+
+// src/design_system/elements/select/select.aman.tsx
+import React10 from "react";
+import { ChevronDown as ChevronDown3 } from "@untitledui/icons";
+import {
+  Button as AriaButton7,
+  ListBox as AriaListBox3,
+  Popover as AriaPopover2,
+  Select as AriaSelect2,
+  SelectValue as AriaSelectValue2
+} from "react-aria-components";
+function Select2(_a) {
+  var _b = _a, {
+    label,
+    hint,
+    placeholder = "Select an option",
+    isInvalid,
+    isDisabled,
+    isRequired,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "hint",
+    "placeholder",
+    "isInvalid",
+    "isDisabled",
+    "isRequired",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ React10.createElement(
+    AriaSelect2,
+    __spreadProps(__spreadValues({}, props), {
+      isInvalid,
+      isDisabled,
+      isRequired,
+      className: cx("flex flex-col gap-1.5", className)
+    }),
+    label && /* @__PURE__ */ React10.createElement(Label, null, label),
+    /* @__PURE__ */ React10.createElement(
+      AriaButton7,
+      {
+        className: ({ isFocusVisible, isDisabled: isDisabled2 }) => cx(
+          "flex items-center justify-between w-full rounded-sm bg-white px-3 py-2.5 text-base font-body text-fg-primary shadow-sm ring-1 ring-secondary ring-inset transition-shadow duration-100 ease-linear",
+          isFocusVisible && !isDisabled2 && "ring-2 ring-focus-ring",
+          isDisabled2 && "cursor-not-allowed bg-primary text-secondary ring-secondary",
+          isInvalid && "ring-error_subtle"
+        )
+      },
+      /* @__PURE__ */ React10.createElement(AriaSelectValue2, { className: "flex-1 text-left placeholder-shown:text-secondary" }, ({ selectedText }) => selectedText || placeholder),
+      /* @__PURE__ */ React10.createElement(ChevronDown3, { className: "size-5 text-secondary" })
+    ),
+    hint && /* @__PURE__ */ React10.createElement(HintText, null, hint),
+    /* @__PURE__ */ React10.createElement(
+      AriaPopover2,
+      {
+        className: "w-[--trigger-width] rounded-sm bg-white shadow-lg ring-1 ring-secondary overflow-auto max-h-60"
+      },
+      /* @__PURE__ */ React10.createElement(AriaListBox3, { className: "outline-none p-1" }, children)
+    )
+  );
+}
+registerThemeVariant("select", "aman", Select2);
+
+// src/design_system/elements/social-icons/social-icons.tsx
+import React11 from "react";
+var defaultClassName = "w-5 h-5 flex-shrink-0";
+var FacebookIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }));
+var InstagramIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }));
+var YouTubeIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }));
+var GoogleIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), /* @__PURE__ */ React11.createElement("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), /* @__PURE__ */ React11.createElement("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), /* @__PURE__ */ React11.createElement("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }));
+var TikTokIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" }));
+var LinkedInIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }));
+var TwitterIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }));
+var PinterestIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" }));
+var YelpIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M20.16 12.594l-4.995 1.33c-.96.26-1.96-.19-2.23-1.11l-.894-3.39c-.27-.99.31-2.04 1.31-2.42l4.995-1.33c.96-.26 1.96.19 2.23 1.11l.894 3.39c.27.99-.31 2.04-1.31 2.42zM12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1z" }));
+var TripAdvisorIcon = ({ className = defaultClassName }) => /* @__PURE__ */ React11.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { d: "M12.006 4.295c-2.67 0-5.338.784-7.645 2.353H0l2.337 4.598a11.994 11.994 0 0 0 9.669 5.107 11.994 11.994 0 0 0 9.669-5.107L24 6.648h-4.35a12.037 12.037 0 0 0-7.644-2.353zM12 6.255c1.531 0 2.764 1.233 2.764 2.764S13.531 11.783 12 11.783 9.236 10.55 9.236 9.019s1.233-2.764 2.764-2.764zM12 15.021c-2.667 0-5.338-.784-7.645-2.352H0l2.337 4.598a11.994 11.994 0 0 0 9.669 5.107 11.994 11.994 0 0 0 9.669-5.107L24 15.021h-4.35A12.037 12.037 0 0 1 12 15.021z" }));
+function SocialIcon({ platform, className = defaultClassName }) {
+  const p = platform.toLowerCase();
+  switch (p) {
+    case "facebook":
+      return /* @__PURE__ */ React11.createElement(FacebookIcon, { className });
+    case "instagram":
+      return /* @__PURE__ */ React11.createElement(InstagramIcon, { className });
+    case "youtube":
+      return /* @__PURE__ */ React11.createElement(YouTubeIcon, { className });
+    case "google":
+    case "google_my_business":
+    case "google_reviews":
+      return /* @__PURE__ */ React11.createElement(GoogleIcon, { className });
+    case "tiktok":
+      return /* @__PURE__ */ React11.createElement(TikTokIcon, { className });
+    case "linkedin":
+      return /* @__PURE__ */ React11.createElement(LinkedInIcon, { className });
+    case "twitter":
+      return /* @__PURE__ */ React11.createElement(TwitterIcon, { className });
+    case "pinterest":
+      return /* @__PURE__ */ React11.createElement(PinterestIcon, { className });
+    case "yelp":
+      return /* @__PURE__ */ React11.createElement(YelpIcon, { className });
+    case "tripadvisor":
+      return /* @__PURE__ */ React11.createElement(TripAdvisorIcon, { className });
+    default:
+      return null;
+  }
+}
+function getSocialIcon(platform, className) {
+  return /* @__PURE__ */ React11.createElement(SocialIcon, { platform, className: className != null ? className : defaultClassName });
+}
+
+// src/design_system/elements/carousel/carousel.tsx
+import { cloneElement as cloneElement2, createContext as createContext7, isValidElement as isValidElement11, useCallback as useCallback3, useContext as useContext8, useEffect as useEffect4, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+var CarouselContext = createContext7(null);
+var useCarousel = () => {
+  const context = useContext8(CarouselContext);
+  if (!context) {
+    throw new Error("The `useCarousel` hook must be used within a <Carousel />");
+  }
+  return context;
+};
+var DEFAULT_SNAPSHOT = {
+  canScrollPrev: false,
+  canScrollNext: false,
+  selectedIndex: 0,
+  scrollSnaps: []
+};
+var CarouselRoot = (_a) => {
+  var _b = _a, { orientation = "horizontal", opts, setApi, plugins, className, children } = _b, props = __objRest(_b, ["orientation", "opts", "setApi", "plugins", "className", "children"]);
+  const [carouselRef, api] = useEmblaCarousel(
+    __spreadProps(__spreadValues({}, opts), {
+      axis: orientation === "horizontal" ? "x" : "y"
+    }),
+    plugins
+  );
+  const snapshotRef = useRef3(DEFAULT_SNAPSHOT);
+  const getSnapshot = useCallback3(() => {
+    if (!api) {
+      return DEFAULT_SNAPSHOT;
+    }
+    const canScrollPrev2 = api.canScrollPrev();
+    const canScrollNext2 = api.canScrollNext();
+    const selectedIndex2 = api.selectedScrollSnap();
+    const scrollSnaps2 = api.scrollSnapList();
+    if (snapshotRef.current.canScrollPrev !== canScrollPrev2 || snapshotRef.current.canScrollNext !== canScrollNext2 || snapshotRef.current.selectedIndex !== selectedIndex2 || snapshotRef.current.scrollSnaps.length !== scrollSnaps2.length || snapshotRef.current.scrollSnaps.some((val, idx) => val !== scrollSnaps2[idx])) {
+      snapshotRef.current = {
+        canScrollPrev: canScrollPrev2,
+        canScrollNext: canScrollNext2,
+        selectedIndex: selectedIndex2,
+        scrollSnaps: scrollSnaps2
+      };
+    }
+    return snapshotRef.current;
+  }, [api]);
+  const getServerSnapshot = useCallback3(() => DEFAULT_SNAPSHOT, []);
+  const subscribe = useCallback3(
+    (onStoreChange) => {
+      if (!api) return () => {
+      };
+      api.on("select", onStoreChange);
+      api.on("reInit", onStoreChange);
+      return () => {
+        api.off("select", onStoreChange);
+        api.off("reInit", onStoreChange);
+      };
+    },
+    [api]
+  );
+  const { canScrollPrev, canScrollNext, selectedIndex, scrollSnaps } = useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
+  const scrollPrev = useCallback3(() => {
+    api == null ? void 0 : api.scrollPrev();
+  }, [api]);
+  const scrollNext = useCallback3(() => {
+    api == null ? void 0 : api.scrollNext();
+  }, [api]);
+  const handleKeyDown = useCallback3(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  useEffect4(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  return /* @__PURE__ */ React.createElement(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || ((opts == null ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", __spreadValues({ onKeyDownCapture: handleKeyDown, className: cx("relative", className), role: "region", "aria-roledescription": "carousel" }, props), children)
+  );
+};
+var CarouselContent = (_a) => {
+  var _b = _a, { className, overflowHidden = true } = _b, props = __objRest(_b, ["className", "overflowHidden"]);
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ React.createElement("div", { ref: carouselRef, className: cx("h-full w-full", overflowHidden && "overflow-hidden") }, /* @__PURE__ */ React.createElement("div", __spreadValues({ className: cx("flex max-h-full", orientation === "horizontal" ? "" : "flex-col", className) }, props)));
+};
+var CarouselItem = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ role: "group", "aria-roledescription": "slide", className: cx("min-w-0 shrink-0 grow-0 basis-full", className) }, props));
+};
+var Trigger2 = (_a) => {
+  var _b = _a, { className, children, asChild, direction, style } = _b, props = __objRest(_b, ["className", "children", "asChild", "direction", "style"]);
+  const { scrollPrev, canScrollNext, scrollNext, canScrollPrev } = useCarousel();
+  const isDisabled = direction === "prev" ? !canScrollPrev : !canScrollNext;
+  const handleClick = () => {
+    if (isDisabled) return;
+    if (direction === "prev") {
+      scrollPrev();
+    } else {
+      scrollNext();
+    }
+  };
+  const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;
+  const defaultAriaLabel = direction === "prev" ? "Previous slide" : "Next slide";
+  if (typeof children === "function") {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ isDisabled, onClick: handleClick }));
+  }
+  if (asChild && isValidElement11(children)) {
+    return cloneElement2(children, {
+      onClick: handleClick,
+      disabled: isDisabled,
+      "aria-label": defaultAriaLabel,
+      style: __spreadValues(__spreadValues({}, children.props.style), style),
+      className: [computedClassName, children.props.className].filter(Boolean).join(" ") || void 0
+    });
+  }
+  return /* @__PURE__ */ React.createElement("button", __spreadValues({ "aria-label": defaultAriaLabel, disabled: isDisabled, className: computedClassName, onClick: handleClick }, props), children);
+};
+var CarouselPrevTrigger = (props) => /* @__PURE__ */ React.createElement(Trigger2, __spreadProps(__spreadValues({}, props), { direction: "prev" }));
+var CarouselNextTrigger = (props) => /* @__PURE__ */ React.createElement(Trigger2, __spreadProps(__spreadValues({}, props), { direction: "next" }));
+var CarouselIndicator = ({ index, isSelected = false, children, asChild, className, style }) => {
+  const { api, selectedIndex } = useCarousel();
+  isSelected = isSelected || selectedIndex === index;
+  const handleClick = () => {
+    api == null ? void 0 : api.scrollTo(index);
+  };
+  const computedClassName = typeof className === "function" ? className({ isSelected }) : className;
+  const defaultAriaLabel = "Go to slide" + (index + 1);
+  if (typeof children === "function") {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ isSelected, onClick: handleClick }));
+  }
+  if (asChild && isValidElement11(children)) {
+    return cloneElement2(children, {
+      onClick: handleClick,
+      "aria-label": defaultAriaLabel,
+      "aria-current": isSelected ? "true" : void 0,
+      style: __spreadValues(__spreadValues({}, children.props.style), style),
+      className: [computedClassName, children.props.className].filter(Boolean).join(" ") || void 0
+    });
+  }
+  return /* @__PURE__ */ React.createElement("button", { "aria-label": defaultAriaLabel, "aria-current": isSelected ? "true" : void 0, className: computedClassName, onClick: handleClick }, children);
+};
+var CarouselIndicatorGroup = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const { scrollSnaps } = useCarousel();
+  if (typeof children === "function") {
+    return /* @__PURE__ */ React.createElement("nav", __spreadValues({}, props), scrollSnaps.map((index) => children({ index })));
+  }
+  return /* @__PURE__ */ React.createElement("nav", __spreadValues({}, props), children);
+};
+var Carousel = {
+  Root: CarouselRoot,
+  Content: CarouselContent,
+  Item: CarouselItem,
+  PrevTrigger: CarouselPrevTrigger,
+  NextTrigger: CarouselNextTrigger,
+  IndicatorGroup: CarouselIndicatorGroup,
+  Indicator: CarouselIndicator
+};
+
+// src/design_system/elements/carousel/carousel-section-wrapper.tsx
+import React12 from "react";
+import { ChevronLeft as ChevronLeft2, ChevronRight } from "@untitledui/icons";
+var CarouselSectionWrapper = ({
+  title,
+  subtitle,
+  hasItems,
+  children,
+  emptyMessage = "No items available"
+}) => {
+  return /* @__PURE__ */ React12.createElement("section", null, /* @__PURE__ */ React12.createElement("div", { className: "mx-auto max-w-container px-4 md:px-8" }, hasItems ? /* @__PURE__ */ React12.createElement(Carousel.Root, { opts: { align: "start", loop: true } }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-between mb-12" }, /* @__PURE__ */ React12.createElement("h2", { className: "font-display text-4xl font-normal text-fg-primary md:text-5xl" }, title), /* @__PURE__ */ React12.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React12.createElement(Carousel.PrevTrigger, { className: "rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed" }, /* @__PURE__ */ React12.createElement(ChevronLeft2, { className: "w-6 h-6 text-fg-primary" })), /* @__PURE__ */ React12.createElement(Carousel.NextTrigger, { className: "rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed" }, /* @__PURE__ */ React12.createElement(ChevronRight, { className: "w-6 h-6 text-fg-primary" })))), /* @__PURE__ */ React12.createElement(Carousel.Content, { className: "-ml-4" }, children)) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "mb-12" }, /* @__PURE__ */ React12.createElement("h2", { className: "font-display text-4xl font-normal text-fg-primary md:text-5xl" }, title), subtitle && /* @__PURE__ */ React12.createElement("p", { className: "mt-4 text-lg text-tertiary md:mt-6 md:text-xl" }, subtitle)), /* @__PURE__ */ React12.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React12.createElement("p", { className: "font-body text-base text-tertiary" }, emptyMessage)))));
+};
+
+// src/design_system/elements/video-modal.tsx
+import { useEffect as useEffect5 } from "react";
+function VideoModal({ isOpen, onClose, videoUrl }) {
+  useEffect5(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "fixed inset-0 z-[60] flex items-center justify-center p-4 backdrop-blur-md bg-black/50",
+      onClick: onClose
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: onClose,
+        className: "absolute top-4 right-4 md:top-8 md:right-8 text-white text-4xl md:text-5xl hover:text-gray-300 z-10 transition-colors",
+        "aria-label": "Close video"
+      },
+      "\xD7"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "relative w-full max-w-5xl aspect-video",
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React.createElement(
+        "iframe",
+        {
+          src: videoUrl,
+          title: "Video player",
+          className: "w-full h-full rounded-lg shadow-2xl",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true
+        }
+      )
+    )
+  );
+}
+
+// src/design_system/elements/video-play-button.tsx
+function VideoPlayButton({ onClick, className = "" }) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick,
+      className: `group flex items-center justify-center w-24 h-24 md:w-32 md:h-32 rounded-full bg-black/40 backdrop-blur-sm hover:bg-black/50 transition-all hover:scale-105 ${className}`,
+      "aria-label": "Play video"
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: "w-10 h-10 md:w-14 md:h-14 text-white group-hover:scale-110 transition-transform ml-1",
+        fill: "currentColor",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M8 5v14l11-7z" })
+    )
+  );
+}
+
+// src/design_system/elements/modal/modal.tsx
+import React13, { useEffect as useEffect6, useRef as useRef4 } from "react";
+var MAX_WIDTH_CLASSES = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl"
+};
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  titleId = "modal-title",
+  children,
+  footer,
+  hideHeader = false,
+  ariaLabel,
+  overlayClassName,
+  panelClassName,
+  maxWidth = "md"
+}) {
+  const overlayRef = useRef4(null);
+  const closeButtonRef = useRef4(null);
+  useEffect6(() => {
+    var _a;
+    if (!isOpen) return;
+    const previouslyFocused = document.activeElement;
+    (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+      previouslyFocused == null ? void 0 : previouslyFocused.focus();
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const maxWidthClass = MAX_WIDTH_CLASSES[maxWidth];
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      ref: overlayRef,
+      className: overlayClassName != null ? overlayClassName : "fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/50",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      "aria-labelledby": !ariaLabel && title && !hideHeader ? titleId : void 0,
+      onClick: (e) => e.target === overlayRef.current && onClose()
+    },
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        className: panelClassName != null ? panelClassName : `bg-primary border border-secondary rounded-lg shadow-xl w-full overflow-hidden ${maxWidthClass} max-h-[90vh] flex flex-col`,
+        onClick: (e) => e.stopPropagation()
+      },
+      !hideHeader && /* @__PURE__ */ React13.createElement("div", { className: "flex items-start justify-between gap-4 p-4 md:p-6 border-b border-secondary flex-shrink-0" }, title ? /* @__PURE__ */ React13.createElement(
+        "h2",
+        {
+          id: titleId,
+          className: "font-display text-lg font-normal text-fg-primary md:text-xl flex-1 min-w-0"
+        },
+        title
+      ) : /* @__PURE__ */ React13.createElement("span", { className: "flex-1", "aria-hidden": true }), /* @__PURE__ */ React13.createElement(
+        "button",
+        {
+          ref: closeButtonRef,
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 p-1 text-fg-primary hover:text-brand-accent rounded focus:outline-none focus:ring-2 focus:ring-brand-accent",
+          "aria-label": "Close"
+        },
+        /* @__PURE__ */ React13.createElement(
+          "svg",
+          {
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": true
+          },
+          /* @__PURE__ */ React13.createElement(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          )
+        )
+      )),
+      /* @__PURE__ */ React13.createElement("div", { className: "overflow-y-auto flex-1 p-4 md:p-6" }, children),
+      footer && /* @__PURE__ */ React13.createElement("div", { className: "flex-shrink-0 border-t border-secondary" }, footer)
+    )
+  );
+}
+
+// src/design_system/elements/index.tsx
+function createThemedExport(componentName, BaseComponent) {
+  return function ThemedComponent(props) {
+    const { theme } = useTheme();
+    try {
+      const Component = getThemedComponent(componentName, theme);
+      return React14.createElement(Component, props);
+    } catch (e) {
+      return React14.createElement(BaseComponent, props);
+    }
+  };
+}
+var Button2 = createThemedExport("button", Button);
+var RoundButton2 = createThemedExport("round-button", RoundButton);
+var ButtonGroup2 = createThemedExport("button-group", ButtonGroup);
+var Input3 = createThemedExport("input", Input);
+var InputBase3 = InputBase;
+var Textarea = createThemedExport("textarea", TextArea);
+var PrivacyCheckbox2 = PrivacyCheckbox;
+var Form2 = createThemedExport("form", Form);
+var FormContainer2 = createThemedExport("form-container", FormContainer);
+var InputGroup2 = createThemedExport("input-group", InputGroup);
+var Label2 = createThemedExport("label", Label);
+var HintText2 = createThemedExport("hint-text", HintText);
+var Select3 = createThemedExport("select", _Select);
+var SelectItem2 = createThemedExport("select-item", SelectItem);
+var NativeSelect2 = createThemedExport("native-select", NativeSelect);
+var PhotoWithFallback2 = createThemedExport("photo-fallback", PhotoWithFallback);
+var Badge2 = createThemedExport("badge", Badge);
+var BadgeWithDot2 = createThemedExport("badge-with-dot", BadgeWithDot);
+var BadgeGroup2 = createThemedExport("badge-group", BadgeGroup);
+var RatingStars2 = createThemedExport("rating-stars", RatingStars);
+var RatingBadge2 = createThemedExport("rating-badge", RatingBadge);
+var Tooltip2 = createThemedExport("tooltip", Tooltip);
+var Avatar2 = createThemedExport("avatar", Avatar);
+var AvatarLabelGroup2 = createThemedExport("avatar-label-group", AvatarLabelGroup);
+var VerifiedTick2 = createThemedExport("verified-tick", VerifiedTick);
+var Breadcrumb2 = createThemedExport("breadcrumb", Breadcrumb);
+var FeaturedIcon2 = createThemedExport("featured-icon", FeaturedIcon);
+var PaginationPageDefault2 = createThemedExport("pagination-page-default", PaginationPageDefault);
+var PaginationPageMinimalCenter2 = createThemedExport("pagination-page-minimal-center", PaginationPageMinimalCenter);
+var GoogleMap2 = createThemedExport("google-map", GoogleMap);
+var MarkdownRenderer2 = createThemedExport("markdown-renderer", MarkdownRenderer);
+export {
+  Avatar2 as Avatar,
+  AvatarLabelGroup2 as AvatarLabelGroup,
+  Badge2 as Badge,
+  BadgeGroup2 as BadgeGroup,
+  BadgeWithDot2 as BadgeWithDot,
+  Breadcrumb2 as Breadcrumb,
+  Button2 as Button,
+  ButtonGroup2 as ButtonGroup,
+  Carousel,
+  CarouselContext,
+  CarouselSectionWrapper,
+  ComboBox,
+  FeaturedIcon2 as FeaturedIcon,
+  Form2 as Form,
+  FormContainer2 as FormContainer,
+  GoogleMap2 as GoogleMap,
+  HintText2 as HintText,
+  Input3 as Input,
+  InputBase3 as InputBase,
+  InputGroup2 as InputGroup,
+  Label2 as Label,
+  MarkdownRenderer2 as MarkdownRenderer,
+  Modal,
+  NativeSelect2 as NativeSelect,
+  Pagination,
+  PaginationPageDefault2 as PaginationPageDefault,
+  PaginationPageMinimalCenter2 as PaginationPageMinimalCenter,
+  PhotoWithFallback2 as PhotoWithFallback,
+  PrivacyCheckbox2 as PrivacyCheckbox,
+  RatingBadge2 as RatingBadge,
+  RatingStars2 as RatingStars,
+  RoundButton2 as RoundButton,
+  Select3 as Select,
+  SelectItem2 as SelectItem,
+  SocialIcon,
+  StarIcon,
+  Textarea,
+  Tooltip2 as Tooltip,
+  VerifiedTick2 as VerifiedTick,
+  VideoModal,
+  VideoPlayButton,
+  Wreath,
+  getSocialIcon,
+  getStarProgress,
+  useCarousel
+};
+//# sourceMappingURL=index.js.map