@fluid-app/portal-sdk 0.1.300 → 0.1.302

package/dist/{PointsWidget-4tTrD6UA.mjs.map → PointsWidget-D0TPHzoh.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PointsWidget-4tTrD6UA.mjs","names":[],"sources":["../../widgets/src/hooks/use-points-ledger.preview.ts","../../widgets/src/hooks/use-points-ledger.ts","../../widgets/src/widgets/PointsWidget.tsx"],"sourcesContent":["import type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nconst now = new Date();\n\nfunction daysAgo(days: number): string {\n  return new Date(now.getTime() - days * 86_400_000).toISOString();\n}\n\nexport const PREVIEW_DATA: PointsData = {\n  balance: 25,\n  entries: [\n    {\n      id: 1,\n      description: \"Purchase March 3rd\",\n      amount: 20,\n      createdAt: daysAgo(3),\n    },\n    {\n      id: 2,\n      description: \"Referral Bonus\",\n      amount: 50,\n      createdAt: daysAgo(14),\n    },\n    {\n      id: 3,\n      description: \"Points Redemption\",\n      amount: -75,\n      createdAt: daysAgo(60),\n    },\n    {\n      id: 4,\n      description: \"Welcome Reward\",\n      amount: 30,\n      createdAt: daysAgo(90),\n    },\n  ],\n};\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useWidgetsApi } from \"@fluid-app/portal-core/widgets-api-context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-react/data-sources/preview-context\";\nimport { useDataSourceRegistryConfig } from \"@fluid-app/portal-react/data-sources/registry-context\";\nimport { PREVIEW_DATA } from \"./use-points-ledger.preview\";\nimport type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport type {\n  PointsData,\n  PointsEntry,\n} from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport const POINTS_LEDGER_QUERY_KEY = \"points-ledger\" as const;\n\nexport function usePointsLedger(): UseQueryResult<PointsData, Error> {\n  const widgetsApi = useWidgetsApi();\n  const { isPreview } = useWidgetPreviewContext();\n  const registryConfig = useDataSourceRegistryConfig();\n  const { baseUrl } = registryConfig;\n  const customerId = registryConfig.variables?.customer_id;\n\n  // Contract: the BFF adapter (portal app, composite factory spreads BFF over\n  // legacy) ignores customerId and infers the customer from the JWT, so the\n  // portal renders this widget with no registry-variable plumbing. The legacy\n  // adapter (fluid-admin) builds /v202506/customers/{customerId}/points_ledgers\n  // and MUST receive a real id; that consumer always supplies one via registry\n  // variables, so empty string never reaches the legacy URL in practice. If a\n  // future caller wires this hook to a legacy-only adapter, configure\n  // registry variables.customer_id at the provider — otherwise the request\n  // would 404 on /customers//points_ledgers.\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      POINTS_LEDGER_QUERY_KEY,\n      isPreview ? \"preview\" : baseUrl,\n      customerId ?? null,\n    ] as const,\n    queryFn: ({ signal }) =>\n      widgetsApi.fetchPointsLedger(customerId ?? \"\", signal),\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import { useId, useState, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  BorderWidthOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getBorderWidthField,\n  getBorderColorField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n  borderWidthClasses,\n  borderColorClasses,\n} from \"../core/fields\";\nimport { usePointsLedger, type PointsEntry } from \"../hooks/use-points-ledger\";\nimport { ErrorState } from \"../components/error-state\";\nimport { ChevronDown, Coins } from \"lucide-react\";\n\nconst formatRelativeTime = (dateString: string): string => {\n  const now = new Date();\n  const date = new Date(dateString);\n  const diffMs = now.getTime() - date.getTime();\n  const diffDays = Math.floor(diffMs / 86_400_000);\n\n  if (diffDays < 1) return \"Today\";\n  if (diffDays === 1) return \"1 day ago\";\n  if (diffDays < 7) return `${diffDays} days ago`;\n  if (diffDays < 14) return \"1 week ago\";\n  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;\n  if (diffDays < 60) return \"1 month ago\";\n  return `${Math.floor(diffDays / 30)} months ago`;\n};\n\nconst formatBalance = (balance: number): string => {\n  return balance.toLocaleString(\"en-US\");\n};\n\ntype PointsWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Balance\n  balanceColor?: ColorOptions;\n\n  // History\n  historyEnabled?: boolean;\n  historyTitle?: string;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  borderWidth?: BorderWidthOptions;\n  borderColor?: ColorOptions;\n};\n\nfunction PointsEntryRow({\n  entry,\n  textColor,\n  accentColor,\n}: {\n  entry: PointsEntry;\n  textColor: ColorOptions;\n  accentColor: ColorOptions;\n}) {\n  const sign = entry.amount >= 0 ? \"+\" : \"-\";\n  return (\n    <div className=\"flex w-full items-center gap-3\">\n      <div className=\"min-w-0 flex-1\">\n        <p className={`text-sm text-${textColor} truncate`}>\n          {entry.description}\n        </p>\n        <p className={`text-[10px] text-${textColor} leading-tight opacity-70`}>\n          {formatRelativeTime(entry.createdAt)}\n        </p>\n      </div>\n      <div className={`bg-${accentColor}/20 shrink-0 rounded-md px-1.5`}>\n        <span className={`text-xs font-medium text-${accentColor} opacity-70`}>\n          {sign}\n          {Math.abs(entry.amount).toLocaleString(\"en-US\")}pts\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport function PointsWidget({\n  // Title\n  titleEnabled = true,\n  title = \"Points\",\n  titleFontSize = \"md\",\n  titleColor = \"foreground\",\n\n  // Balance\n  balanceColor = \"primary\",\n\n  // History\n  historyEnabled = true,\n  historyTitle = \"History\",\n\n  // Styling\n  background = { type: \"solid\", color: \"background\" },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n  borderWidth = \"none\",\n  borderColor = \"muted\",\n\n  className,\n  ...props\n}: PointsWidgetProps): React.JSX.Element {\n  const [historyOpen, setHistoryOpen] = useState(false);\n  const historyPanelId = useId();\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  const { data, isLoading, isError } = usePointsLedger();\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2.5`}>\n        {/* Header: Title + Balance */}\n        {titleEnabled && (\n          <h2\n            className={`text-${titleFontSize} font-header font-bold text-${titleColor}`}\n          >\n            {title}\n          </h2>\n        )}\n        {!isLoading && data && (\n          <span\n            className={`text-3xl font-semibold text-${balanceColor} font-header leading-snug`}\n          >\n            {formatBalance(data.balance)}\n          </span>\n        )}\n\n        {/* Loading */}\n        {isLoading ? (\n          <div className=\"flex min-h-[60px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          <ErrorState />\n        ) : historyEnabled && (!data || data.entries.length === 0) ? (\n          /* Empty state — only shown when history is enabled but no entries */\n          <div className=\"flex min-h-[60px] flex-col items-center justify-center gap-2\">\n            <Coins className={`size-10 text-${textColor} opacity-30`} />\n            <p className={`text-sm font-semibold text-${textColor} opacity-50`}>\n              No Points Activity\n            </p>\n          </div>\n        ) : historyEnabled && data && data.entries.length > 0 ? (\n          /* History dropdown */\n          <div className=\"flex flex-col gap-2\">\n            {/* Dropdown toggle */}\n            <button\n              type=\"button\"\n              aria-expanded={historyOpen}\n              aria-controls={historyPanelId}\n              onClick={() => setHistoryOpen((prev) => !prev)}\n              className={`flex w-full items-center text-xs font-semibold text-${textColor} cursor-pointer`}\n            >\n              <span className=\"flex-1 text-left\">{historyTitle}</span>\n              <ChevronDown\n                className={`size-4 transition-transform duration-200 ${historyOpen ? \"rotate-180\" : \"\"}`}\n              />\n            </button>\n            <div className={`bg-${textColor}/20 h-px w-full`} />\n\n            {/* Collapsible entries */}\n            <div\n              id={historyPanelId}\n              className={`flex flex-col gap-3 ${!historyOpen ? \"hidden\" : \"\"}`}\n            >\n              {data.entries.map((entry) => (\n                <PointsEntryRow\n                  key={entry.id}\n                  entry={entry}\n                  textColor={textColor}\n                  accentColor={accentColor}\n                />\n              ))}\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport const pointsWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"PointsWidget\",\n  displayName: \"Points\",\n  fields: [\n    // Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Show Title\",\n      type: \"boolean\",\n      description: \"Toggle title visibility\",\n      defaultValue: true,\n\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the balance\",\n      defaultValue: \"Points\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"md\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the title\",\n      defaultValue: \"foreground\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Balance group\n    getColorField({\n      key: \"balanceColor\",\n      label: \"Balance Color\",\n      description: \"Color for the points balance number\",\n      defaultValue: \"primary\",\n\n      group: \"Balance\",\n    }),\n\n    // History group\n    {\n      key: \"historyEnabled\",\n      label: \"Show History\",\n      type: \"boolean\",\n      description: \"Show a collapsible history dropdown below the balance\",\n      defaultValue: true,\n\n      group: \"History\",\n    },\n    {\n      key: \"historyTitle\",\n      label: \"History Title\",\n      type: \"text\",\n      description: \"Title for the history dropdown\",\n      defaultValue: \"History\",\n\n      group: \"History\",\n      requiresKeyToBeTrue: \"historyEnabled\",\n    },\n\n    // Design group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget\",\n      defaultValue: \"background\",\n\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color\",\n      defaultValue: \"foreground\",\n\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color for points badges and highlights\",\n      defaultValue: \"primary\",\n\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Widget padding\",\n      defaultValue: 4,\n\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Widget border radius\",\n      defaultValue: \"md\",\n\n      group: \"Design\",\n    }),\n    getBorderWidthField({\n      key: \"borderWidth\",\n      label: \"Border Width\",\n      description: \"Widget border width\",\n      defaultValue: \"none\",\n\n      group: \"Design\",\n    }),\n    getBorderColorField({\n      key: \"borderColor\",\n      label: \"Border Color\",\n      description: \"Widget border color\",\n      defaultValue: \"muted\",\n\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
+{"version":3,"file":"PointsWidget-D0TPHzoh.mjs","names":[],"sources":["../../widgets/src/hooks/use-points-ledger.preview.ts","../../widgets/src/hooks/use-points-ledger.ts","../../widgets/src/widgets/PointsWidget.tsx"],"sourcesContent":["import type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nconst now = new Date();\n\nfunction daysAgo(days: number): string {\n  return new Date(now.getTime() - days * 86_400_000).toISOString();\n}\n\nexport const PREVIEW_DATA: PointsData = {\n  balance: 25,\n  entries: [\n    {\n      id: 1,\n      description: \"Purchase March 3rd\",\n      amount: 20,\n      createdAt: daysAgo(3),\n    },\n    {\n      id: 2,\n      description: \"Referral Bonus\",\n      amount: 50,\n      createdAt: daysAgo(14),\n    },\n    {\n      id: 3,\n      description: \"Points Redemption\",\n      amount: -75,\n      createdAt: daysAgo(60),\n    },\n    {\n      id: 4,\n      description: \"Welcome Reward\",\n      amount: 30,\n      createdAt: daysAgo(90),\n    },\n  ],\n};\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useWidgetsApi } from \"@fluid-app/portal-core/widgets-api-context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-react/data-sources/preview-context\";\nimport { useDataSourceRegistryConfig } from \"@fluid-app/portal-react/data-sources/registry-context\";\nimport { PREVIEW_DATA } from \"./use-points-ledger.preview\";\nimport type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport type {\n  PointsData,\n  PointsEntry,\n} from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport const POINTS_LEDGER_QUERY_KEY = \"points-ledger\" as const;\n\nexport function usePointsLedger(): UseQueryResult<PointsData, Error> {\n  const widgetsApi = useWidgetsApi();\n  const { isPreview } = useWidgetPreviewContext();\n  const registryConfig = useDataSourceRegistryConfig();\n  const { baseUrl } = registryConfig;\n  const customerId = registryConfig.variables?.customer_id;\n\n  // Contract: the BFF adapter (portal app, composite factory spreads BFF over\n  // legacy) ignores customerId and infers the customer from the JWT, so the\n  // portal renders this widget with no registry-variable plumbing. The legacy\n  // adapter (fluid-admin) builds /v202506/customers/{customerId}/points_ledgers\n  // and MUST receive a real id; that consumer always supplies one via registry\n  // variables, so empty string never reaches the legacy URL in practice. If a\n  // future caller wires this hook to a legacy-only adapter, configure\n  // registry variables.customer_id at the provider — otherwise the request\n  // would 404 on /customers//points_ledgers.\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      POINTS_LEDGER_QUERY_KEY,\n      isPreview ? \"preview\" : baseUrl,\n      customerId ?? null,\n    ] as const,\n    queryFn: ({ signal }) =>\n      widgetsApi.fetchPointsLedger(customerId ?? \"\", signal),\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import { useId, useState, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  BorderWidthOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getBorderWidthField,\n  getBorderColorField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n  borderWidthClasses,\n  borderColorClasses,\n} from \"../core/fields\";\nimport { usePointsLedger, type PointsEntry } from \"../hooks/use-points-ledger\";\nimport { ErrorState } from \"../components/error-state\";\nimport { ChevronDown, Coins } from \"lucide-react\";\n\nconst formatRelativeTime = (dateString: string): string => {\n  const now = new Date();\n  const date = new Date(dateString);\n  const diffMs = now.getTime() - date.getTime();\n  const diffDays = Math.floor(diffMs / 86_400_000);\n\n  if (diffDays < 1) return \"Today\";\n  if (diffDays === 1) return \"1 day ago\";\n  if (diffDays < 7) return `${diffDays} days ago`;\n  if (diffDays < 14) return \"1 week ago\";\n  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;\n  if (diffDays < 60) return \"1 month ago\";\n  return `${Math.floor(diffDays / 30)} months ago`;\n};\n\nconst formatBalance = (balance: number): string => {\n  return balance.toLocaleString(\"en-US\");\n};\n\ntype PointsWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Balance\n  balanceColor?: ColorOptions;\n\n  // History\n  historyEnabled?: boolean;\n  historyTitle?: string;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  borderWidth?: BorderWidthOptions;\n  borderColor?: ColorOptions;\n};\n\nfunction PointsEntryRow({\n  entry,\n  textColor,\n  accentColor,\n}: {\n  entry: PointsEntry;\n  textColor: ColorOptions;\n  accentColor: ColorOptions;\n}) {\n  const sign = entry.amount >= 0 ? \"+\" : \"-\";\n  return (\n    <div className=\"flex w-full items-center gap-3\">\n      <div className=\"min-w-0 flex-1\">\n        <p className={`text-sm text-${textColor} truncate`}>\n          {entry.description}\n        </p>\n        <p className={`text-[10px] text-${textColor} leading-tight opacity-70`}>\n          {formatRelativeTime(entry.createdAt)}\n        </p>\n      </div>\n      <div className={`bg-${accentColor}/20 shrink-0 rounded-md px-1.5`}>\n        <span className={`text-xs font-medium text-${accentColor} opacity-70`}>\n          {sign}\n          {Math.abs(entry.amount).toLocaleString(\"en-US\")}pts\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport function PointsWidget({\n  // Title\n  titleEnabled = true,\n  title = \"Points\",\n  titleFontSize = \"md\",\n  titleColor = \"foreground\",\n\n  // Balance\n  balanceColor = \"primary\",\n\n  // History\n  historyEnabled = true,\n  historyTitle = \"History\",\n\n  // Styling\n  background = { type: \"solid\", color: \"background\" },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n  borderWidth = \"none\",\n  borderColor = \"muted\",\n\n  className,\n  ...props\n}: PointsWidgetProps): React.JSX.Element {\n  const [historyOpen, setHistoryOpen] = useState(false);\n  const historyPanelId = useId();\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  const { data, isLoading, isError } = usePointsLedger();\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2.5`}>\n        {/* Header: Title + Balance */}\n        {titleEnabled && (\n          <h2\n            className={`text-${titleFontSize} font-header font-bold text-${titleColor}`}\n          >\n            {title}\n          </h2>\n        )}\n        {!isLoading && data && (\n          <span\n            className={`text-3xl font-semibold text-${balanceColor} font-header leading-snug`}\n          >\n            {formatBalance(data.balance)}\n          </span>\n        )}\n\n        {/* Loading */}\n        {isLoading ? (\n          <div className=\"flex min-h-[60px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          <ErrorState />\n        ) : historyEnabled && (!data || data.entries.length === 0) ? (\n          /* Empty state — only shown when history is enabled but no entries */\n          <div className=\"flex min-h-[60px] flex-col items-center justify-center gap-2\">\n            <Coins className={`size-10 text-${textColor} opacity-30`} />\n            <p className={`text-sm font-semibold text-${textColor} opacity-50`}>\n              No Points Activity\n            </p>\n          </div>\n        ) : historyEnabled && data && data.entries.length > 0 ? (\n          /* History dropdown */\n          <div className=\"flex flex-col gap-2\">\n            {/* Dropdown toggle */}\n            <button\n              type=\"button\"\n              aria-expanded={historyOpen}\n              aria-controls={historyPanelId}\n              onClick={() => setHistoryOpen((prev) => !prev)}\n              className={`flex w-full items-center text-xs font-semibold text-${textColor} cursor-pointer`}\n            >\n              <span className=\"flex-1 text-left\">{historyTitle}</span>\n              <ChevronDown\n                className={`size-4 transition-transform duration-200 ${historyOpen ? \"rotate-180\" : \"\"}`}\n              />\n            </button>\n            <div className={`bg-${textColor}/20 h-px w-full`} />\n\n            {/* Collapsible entries */}\n            <div\n              id={historyPanelId}\n              className={`flex flex-col gap-3 ${!historyOpen ? \"hidden\" : \"\"}`}\n            >\n              {data.entries.map((entry) => (\n                <PointsEntryRow\n                  key={entry.id}\n                  entry={entry}\n                  textColor={textColor}\n                  accentColor={accentColor}\n                />\n              ))}\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport const pointsWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"PointsWidget\",\n  displayName: \"Points\",\n  fields: [\n    // Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Show Title\",\n      type: \"boolean\",\n      description: \"Toggle title visibility\",\n      defaultValue: true,\n\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the balance\",\n      defaultValue: \"Points\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"md\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the title\",\n      defaultValue: \"foreground\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Balance group\n    getColorField({\n      key: \"balanceColor\",\n      label: \"Balance Color\",\n      description: \"Color for the points balance number\",\n      defaultValue: \"primary\",\n\n      group: \"Balance\",\n    }),\n\n    // History group\n    {\n      key: \"historyEnabled\",\n      label: \"Show History\",\n      type: \"boolean\",\n      description: \"Show a collapsible history dropdown below the balance\",\n      defaultValue: true,\n\n      group: \"History\",\n    },\n    {\n      key: \"historyTitle\",\n      label: \"History Title\",\n      type: \"text\",\n      description: \"Title for the history dropdown\",\n      defaultValue: \"History\",\n\n      group: \"History\",\n      requiresKeyToBeTrue: \"historyEnabled\",\n    },\n\n    // Design group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget\",\n      defaultValue: \"background\",\n\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color\",\n      defaultValue: \"foreground\",\n\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color for points badges and highlights\",\n      defaultValue: \"primary\",\n\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Widget padding\",\n      defaultValue: 4,\n\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Widget border radius\",\n      defaultValue: \"md\",\n\n      group: \"Design\",\n    }),\n    getBorderWidthField({\n      key: \"borderWidth\",\n      label: \"Border Width\",\n      description: \"Widget border width\",\n      defaultValue: \"none\",\n\n      group: \"Design\",\n    }),\n    getBorderColorField({\n      key: \"borderColor\",\n      label: \"Border Color\",\n      description: \"Widget border color\",\n      defaultValue: \"muted\",\n\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/{ProfileScreen-CefqZr-Q.mjs → ProfileScreen-8hi-vFLY.mjs}

@@ -1,4 +1,4 @@
-import { R as useLanguagesApi, n as useFluidContext } from "./FluidProvider-BBxURUBq.mjs";
+import { R as useLanguagesApi, n as useFluidContext } from "./FluidProvider-C00Px_ej.mjs";
 import { j as useAccountApi } from "./portal_tenant-l4a-eX2B.mjs";
 import { i as usePayApi } from "./api-context-3GmfqvIB.mjs";
 import { n as useCountriesApi } from "./countries-api-context-CMh13cfX.mjs";
@@ -35,39 +35,39 @@ function ProfileLayout(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "relative",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "max-w-profile-container relative mx-auto px-5 pt-8 pb-20 md:px-8",
+			className: "relative mx-auto max-w-4xl px-5 pt-8 pb-20 md:px-8",
 			children: [
 				/* @__PURE__ */ jsxs("section", {
 					className: "flex items-center gap-3.5",
 					children: [
 						/* @__PURE__ */ jsx("div", {
-							className: "size-profile-avatar-sm md:size-profile-avatar relative shrink-0 overflow-hidden rounded-full ring-1 ring-black/5",
+							className: "relative size-12 shrink-0 overflow-hidden rounded-full ring-1 ring-black/5 md:size-13",
 							children: account.avatar_url ? /* @__PURE__ */ jsx("img", {
 								src: account.avatar_url,
 								alt: "",
 								className: "h-full w-full object-cover"
 							}) : /* @__PURE__ */ jsx("div", {
-								className: "bg-profile-dark text-profile-dark-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
+								className: "bg-primary text-primary-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
 								children: heroDisplay.charAt(0).toUpperCase()
 							})
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ jsx("h1", {
-								className: "text-profile-hero tracking-profile-hero text-profile-text md:text-profile-hero-lg truncate font-bold",
+								className: "text-foreground truncate text-xl font-bold tracking-tight md:text-2xl",
 								children: heroDisplay
 							}), /* @__PURE__ */ jsx("p", {
-								className: "text-profile-sm-plus text-profile-text-muted mt-0.5 truncate",
+								className: "text-muted-foreground mt-0.5 truncate text-sm",
 								children: account.email
 							})]
 						}),
 						/* @__PURE__ */ jsx("div", {
 							className: "flex shrink-0 items-center gap-2",
 							children: rewardsEnabled && /* @__PURE__ */ jsxs("div", {
-								className: "ring-profile-border bg-profile-card text-profile-xs-plus text-profile-text inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-semibold ring-1",
+								className: "ring-border text-foreground inline-flex items-center gap-1.5 rounded-md bg-transparent px-2.5 py-1 text-xs font-semibold ring-1",
 								children: [
 									/* @__PURE__ */ jsx(Sparkles, {
-										className: "text-profile-accent size-3",
+										className: "text-primary size-3",
 										strokeWidth: 2.25
 									}),
 									(pointsBalance ?? 0).toLocaleString(),
@@ -87,7 +87,7 @@ function ProfileLayout(props) {
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
 					children: [
 						/* @__PURE__ */ jsx(FieldRow, {
 							icon: User,
@@ -126,33 +126,33 @@ function ProfileLayout(props) {
 				rewardsEnabled && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SectionHeader, {
 					title: t("points_history"),
 					action: /* @__PURE__ */ jsx("span", {
-						className: "text-profile-xs text-profile-text-faint",
+						className: "text-muted-foreground/75 text-xs",
 						children: t("pts_available", { count: String((pointsBalance ?? 0).toLocaleString()) })
 					})
 				}), ledger.length > 0 ? /* @__PURE__ */ jsxs("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
 					children: [ledgerPreview.map((entry, i) => /* @__PURE__ */ jsx(PointsLedgerRow, {
 						entry,
 						isLast: !hasMoreLedger && i === ledgerPreview.length - 1
 					}, entry.id)), hasMoreLedger && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setIsPointsHistoryOpen(true),
-						className: "text-profile-xs text-profile-text hover:bg-profile-pill-hover flex w-full items-center justify-center gap-1 px-4 py-3 font-bold transition-colors",
+						className: "text-foreground hover:bg-muted flex w-full items-center justify-center gap-1 px-4 py-3 text-xs font-bold transition-colors",
 						children: t("see_all_transactions", { count: ledger.length })
 					})]
 				}) : /* @__PURE__ */ jsxs("div", {
-					className: "ring-dashed ring-profile-dashed-border bg-profile-card mt-2.5 flex flex-col items-center justify-center gap-1 rounded-2xl px-4 py-8 text-center ring-1",
+					className: "ring-dashed ring-border mt-2.5 flex flex-col items-center justify-center gap-1 rounded-2xl bg-transparent px-4 py-8 text-center ring-1",
 					children: [
 						/* @__PURE__ */ jsx(Sparkles, {
-							className: "text-profile-text-faint size-5",
+							className: "text-muted-foreground/75 size-5",
 							strokeWidth: 1.75
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "text-profile-base text-profile-text font-bold",
+							className: "text-foreground text-sm font-bold",
 							children: t("no_points_yet")
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "text-profile-xs text-profile-text-muted",
+							className: "text-muted-foreground text-xs",
 							children: t("earn_points_hint")
 						})
 					]
@@ -166,10 +166,10 @@ function ProfileLayout(props) {
 					}) : void 0
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 flex items-center gap-3 rounded-2xl p-3.5 ring-1",
+					className: "ring-border mt-2.5 flex items-center gap-3 rounded-2xl bg-transparent p-3.5 ring-1",
 					children: [
 						/* @__PURE__ */ jsx("div", {
-							className: "size-profile-mysite-icon bg-profile-icon-bg text-profile-text flex shrink-0 items-center justify-center rounded-full",
+							className: "bg-muted text-foreground flex size-11 shrink-0 items-center justify-center rounded-full",
 							children: /* @__PURE__ */ jsx(Link2, {
 								className: "size-[18px]",
 								strokeWidth: 2
@@ -178,10 +178,10 @@ function ProfileLayout(props) {
 						/* @__PURE__ */ jsxs("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ jsx("div", {
-								className: "text-profile-2xs tracking-profile-uppercase-1 text-profile-text-faint font-bold uppercase",
+								className: "text-muted-foreground/75 text-xs font-bold tracking-widest uppercase",
 								children: t("public_link")
 							}), /* @__PURE__ */ jsx("div", {
-								className: "text-profile-base text-profile-text mt-0.5 truncate font-mono font-semibold",
+								className: "text-foreground mt-0.5 truncate font-mono text-sm font-semibold",
 								children: mySiteDisplayUrl || t("set_your_mysite_link")
 							})]
 						}),
@@ -189,7 +189,7 @@ function ProfileLayout(props) {
 							type: "button",
 							onClick: onCopyMySiteLink,
 							disabled: !mySiteDisplayUrl,
-							className: "ring-profile-border bg-profile-card text-profile-xs text-profile-text hover:bg-profile-pill-hover inline-flex items-center gap-1 rounded-md px-3 py-1.5 font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+							className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
 							children: [/* @__PURE__ */ jsx(Copy, {
 								className: "size-3",
 								strokeWidth: 2.25
@@ -209,12 +209,12 @@ function ProfileLayout(props) {
 				/* @__PURE__ */ jsx(SectionHeader, {
 					title: t("social_media"),
 					action: /* @__PURE__ */ jsx("span", {
-						className: "text-profile-xs text-profile-text-faint",
+						className: "text-muted-foreground/75 text-xs",
 						children: t("connected_count", { count: connectedSocialCount })
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
 					children: SOCIAL_ENTRIES.map((entry, i) => /* @__PURE__ */ jsx(SocialRow, {
 						entry,
 						handle: socialLinks[entry.key] ?? "",
@@ -228,7 +228,7 @@ function ProfileLayout(props) {
 					children: /* @__PURE__ */ jsxs(DialogContent, {
 						className: "max-w-md md:max-w-lg",
 						children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("points_history") }) }), /* @__PURE__ */ jsx("div", {
-							className: "ring-profile-border bg-profile-card max-h-[60vh] overflow-y-auto rounded-2xl ring-1",
+							className: "ring-border max-h-[60vh] overflow-y-auto rounded-2xl bg-transparent ring-1",
 							children: ledger.map((entry, i) => /* @__PURE__ */ jsx(PointsLedgerRow, {
 								entry,
 								isLast: i === ledger.length - 1
@@ -237,26 +237,26 @@ function ProfileLayout(props) {
 					})
 				}),
 				onSignOut && /* @__PURE__ */ jsxs("div", {
-					className: "ring-profile-border bg-profile-card mt-8 flex flex-wrap items-center justify-between gap-3 rounded-2xl p-3.5 ring-1",
+					className: "ring-border mt-8 flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-transparent p-3.5 ring-1",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "bg-profile-danger-bg flex size-9 items-center justify-center rounded-md",
+							className: "bg-destructive/10 flex size-9 items-center justify-center rounded-md",
 							children: /* @__PURE__ */ jsx(LogOut, {
-								className: "text-profile-danger-icon size-4",
+								className: "text-destructive size-4",
 								strokeWidth: 2.25
 							})
 						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-							className: "text-profile-base text-profile-text font-bold",
+							className: "text-foreground text-sm font-bold",
 							children: t("sign_out")
 						}), /* @__PURE__ */ jsx("div", {
-							className: "text-profile-xs-plus text-profile-text-muted",
+							className: "text-muted-foreground text-xs",
 							children: t("sign_out_description")
 						})] })]
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onSignOut,
-						className: "bg-profile-danger-button-bg text-profile-sm text-profile-danger-button-text hover:bg-profile-danger-button-hover rounded-md px-4 py-2 font-bold transition-colors",
+						className: "bg-destructive/15 text-destructive hover:bg-destructive/25 rounded-md px-4 py-2 text-xs font-bold transition-colors",
 						children: t("sign_out")
 					})]
 				})
@@ -268,7 +268,7 @@ function SectionHeader({ title, action }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mt-8 flex items-end justify-between",
 		children: [/* @__PURE__ */ jsx("h2", {
-			className: "text-profile-lg tracking-profile-heading text-profile-text font-bold",
+			className: "text-foreground text-base font-bold tracking-tight",
 			children: title
 		}), action ?? null]
 	});
@@ -278,7 +278,7 @@ function PillButton({ onClick, icon: Icon, label, disabled }) {
 		type: "button",
 		onClick,
 		disabled,
-		className: "ring-profile-border bg-profile-card text-profile-xs text-profile-text hover:bg-profile-pill-hover inline-flex items-center gap-1 rounded-md px-3 py-1.5 font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+		className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
 		children: [/* @__PURE__ */ jsx(Icon, {
 			className: "size-3",
 			strokeWidth: 2.25
@@ -290,33 +290,33 @@ function PointsLedgerRow({ entry, isLast }) {
 	const isCredit = entry.amount >= 0;
 	const sign = isCredit ? "+" : "−";
 	const magnitude = Math.abs(entry.amount).toLocaleString();
-	const amountColor = isCredit ? "text-emerald-600" : "text-profile-danger-icon";
+	const amountColor = isCredit ? "text-emerald-600" : "text-destructive";
 	const sourceName = entry.metadata?.source?.name?.trim();
 	const transactionType = entry.metadata?.transaction_type;
 	const label = sourceName || (transactionType ? transactionType.charAt(0).toUpperCase() + transactionType.slice(1) : isCredit ? t("points_awarded") : t("points_redeemed"));
 	const dateLabel = formatLedgerDate(entry.created_at);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-profile-divider border-b"}`,
+		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-border border-b"}`,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "bg-profile-icon-bg flex size-9 shrink-0 items-center justify-center rounded-full",
+				className: "bg-muted flex size-9 shrink-0 items-center justify-center rounded-full",
 				children: /* @__PURE__ */ jsx(Sparkles, {
-					className: `size-4 ${isCredit ? "text-profile-accent" : "text-profile-text-muted"}`,
+					className: `size-4 ${isCredit ? "text-primary" : "text-muted-foreground"}`,
 					strokeWidth: 2
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-profile-md text-profile-text truncate font-medium",
+					className: "text-foreground truncate text-sm font-medium",
 					children: label
 				}), /* @__PURE__ */ jsx("div", {
-					className: "text-profile-xs text-profile-text-muted",
+					className: "text-muted-foreground text-xs",
 					children: dateLabel
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: `text-profile-md shrink-0 font-mono font-bold tabular-nums ${amountColor}`,
+				className: `shrink-0 font-mono text-sm font-bold tabular-nums ${amountColor}`,
 				children: [sign, magnitude]
 			})
 		]
@@ -336,9 +336,9 @@ function formatLedgerDate(iso) {
 function FieldRow({ icon: Icon, label, value, placeholder, isLast, multiline }) {
 	const display = value || placeholder || "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: `flex gap-3 px-4 py-3.5 ${multiline ? "items-start" : "items-center"} ${isLast ? "" : "border-profile-divider border-b"}`,
+		className: `flex gap-3 px-4 py-3.5 ${multiline ? "items-start" : "items-center"} ${isLast ? "" : "border-border border-b"}`,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "bg-profile-icon-bg text-profile-text-muted flex size-9 shrink-0 items-center justify-center rounded-full",
+			className: "bg-muted text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-full",
 			children: /* @__PURE__ */ jsx(Icon, {
 				className: "size-4",
 				strokeWidth: 2
@@ -346,10 +346,10 @@ function FieldRow({ icon: Icon, label, value, placeholder, isLast, multiline })
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "text-profile-2xs tracking-profile-uppercase-1 text-profile-text-faint font-bold uppercase",
+				className: "text-muted-foreground/75 text-xs font-bold tracking-widest uppercase",
 				children: label
 			}), /* @__PURE__ */ jsx("div", {
-				className: `mt-0.5 ${multiline ? "whitespace-pre-line" : "truncate"} text-profile-md font-medium ${!value && Boolean(placeholder) ? "text-profile-text-placeholder" : "text-profile-text"}`,
+				className: `mt-0.5 ${multiline ? "whitespace-pre-line" : "truncate"} text-sm font-medium ${!value && Boolean(placeholder) ? "text-muted-foreground/55" : "text-foreground"}`,
 				children: display
 			})]
 		})]
@@ -396,13 +396,13 @@ function PaymentCardVisual({ method, onClick }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative flex items-start justify-between",
 				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					className: "text-profile-micro tracking-profile-uppercase-2 text-background/50 font-semibold uppercase",
+					className: "text-background/50 text-xs font-semibold tracking-widest uppercase",
 					children: brandLabel
 				}), /* @__PURE__ */ jsx("div", {
-					className: "text-profile-hero tracking-profile-mono text-background mt-1 font-mono font-bold",
+					className: "text-background mt-1 font-mono text-xl font-bold tracking-wider",
 					children: last4
 				})] }), method.default && /* @__PURE__ */ jsx("span", {
-					className: "text-profile-micro bg-background/10 text-background/80 rounded-md px-2 py-0.5 font-bold tracking-wider uppercase",
+					className: "bg-background/10 text-background/80 rounded-md px-2 py-0.5 text-xs font-bold tracking-wider uppercase",
 					children: t("default")
 				})]
 			}),
@@ -412,22 +412,22 @@ function PaymentCardVisual({ method, onClick }) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-profile-nano tracking-profile-uppercase-2 text-background/40 font-semibold uppercase",
+							className: "text-background/40 text-xs font-semibold tracking-widest uppercase",
 							children: t("cardholder")
 						}), /* @__PURE__ */ jsx("div", {
-							className: "text-profile-xs-plus text-background truncate font-semibold",
+							className: "text-background truncate text-xs font-semibold",
 							children: holder || " "
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-						className: "text-profile-nano tracking-profile-uppercase-2 text-background/40 font-semibold uppercase",
+						className: "text-background/40 text-xs font-semibold tracking-widest uppercase",
 						children: t("card_expires")
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-profile-xs-plus text-background font-mono font-semibold",
+						className: "text-background font-mono text-xs font-semibold",
 						children: exp
 					})] }),
 					/* @__PURE__ */ jsx("div", {
-						className: `text-profile-micro shrink-0 rounded px-1.5 py-0.5 font-bold tracking-wider text-white ${badgeBg}`,
+						className: `shrink-0 rounded px-1.5 py-0.5 text-xs font-bold tracking-wider text-white ${badgeBg}`,
 						children: badge
 					})
 				]
@@ -440,21 +440,21 @@ function AddPaymentTile({ onClick }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick,
-		className: "group ring-dashed ring-profile-dashed-border bg-profile-card text-profile-text-muted hover:bg-profile-canvas hover:text-profile-text flex aspect-[1.586/1] flex-col items-center justify-center gap-1.5 rounded-xl ring-1 transition-colors",
+		className: "group ring-dashed ring-border text-muted-foreground hover:bg-background hover:text-foreground flex aspect-[1.586/1] flex-col items-center justify-center gap-1.5 rounded-xl bg-transparent ring-1 transition-colors",
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "ring-profile-border bg-profile-card flex size-9 items-center justify-center rounded-full ring-1",
+				className: "ring-border flex size-9 items-center justify-center rounded-full bg-transparent ring-1",
 				children: /* @__PURE__ */ jsx(Plus, {
 					className: "size-4",
 					strokeWidth: 2.25
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "text-profile-sm text-profile-text font-bold",
+				className: "text-foreground text-xs font-bold",
 				children: t("add_payment_method")
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "text-profile-2xs-plus text-profile-text-faint",
+				className: "text-muted-foreground/75 text-xs",
 				children: t("accepted_cards")
 			})
 		]
@@ -469,7 +469,7 @@ function AddressCard({ address, onEdit, onDelete }) {
 		address.postal_code
 	].filter(Boolean).join(", ");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "ring-profile-border bg-profile-card hover:bg-profile-pill-hover focus-within:ring-profile-text/40 relative flex flex-col rounded-2xl ring-1 transition-all duration-200 focus-within:ring-2 hover:ring-2",
+		className: "ring-border hover:bg-muted focus-within:ring-foreground/40 relative flex flex-col rounded-2xl bg-transparent ring-1 transition-all duration-200 focus-within:ring-2 hover:ring-2",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: onEdit,
@@ -479,27 +479,27 @@ function AddressCard({ address, onEdit, onDelete }) {
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "bg-profile-icon-bg flex size-8 items-center justify-center rounded-full",
+						className: "bg-muted flex size-8 items-center justify-center rounded-full",
 						children: /* @__PURE__ */ jsx(MapPin, {
-							className: "text-profile-text-muted size-4",
+							className: "text-muted-foreground size-4",
 							strokeWidth: 2
 						})
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-profile-md text-profile-text font-bold",
+						className: "text-foreground text-sm font-bold",
 						children: label
 					})]
 				}), address.default && /* @__PURE__ */ jsx("span", {
-					className: "bg-profile-dark text-profile-micro text-profile-dark-foreground rounded-md px-2 py-0.5 font-bold tracking-wider uppercase",
+					className: "bg-primary text-primary-foreground rounded-md px-2 py-0.5 text-xs font-bold tracking-wider uppercase",
 					children: t("default")
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-profile-sm-plus text-profile-text mt-3 space-y-0.5 leading-snug",
+				className: "text-foreground mt-3 space-y-0.5 text-sm leading-snug",
 				children: [
 					address.address1 && /* @__PURE__ */ jsx("div", { children: address.address1 }),
 					address.address2 && /* @__PURE__ */ jsx("div", { children: address.address2 }),
 					cityLine && /* @__PURE__ */ jsx("div", { children: cityLine }),
 					address.country_code && /* @__PURE__ */ jsx("div", {
-						className: "text-profile-text-muted",
+						className: "text-muted-foreground",
 						children: address.country_code
 					})
 				]
@@ -520,15 +520,15 @@ function AddAddressTile({ onClick }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick,
-		className: "group ring-dashed ring-profile-dashed-border min-h-profile-tile-min-h bg-profile-card text-profile-text-muted hover:bg-profile-canvas hover:text-profile-text flex flex-col items-center justify-center gap-1.5 rounded-2xl ring-1 transition-colors",
+		className: "group ring-dashed ring-border text-muted-foreground hover:bg-background hover:text-foreground flex min-h-37 flex-col items-center justify-center gap-1.5 rounded-2xl bg-transparent ring-1 transition-colors",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "ring-profile-border bg-profile-card flex size-9 items-center justify-center rounded-full ring-1",
+			className: "ring-border flex size-9 items-center justify-center rounded-full bg-transparent ring-1",
 			children: /* @__PURE__ */ jsx(Plus, {
 				className: "size-4",
 				strokeWidth: 2.25
 			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "text-profile-base text-profile-text font-bold",
+			className: "text-foreground text-sm font-bold",
 			children: t("add_an_address")
 		})]
 	});
@@ -581,10 +581,10 @@ function SocialRow({ entry, handle, isLast, onConnect }) {
 	const { t } = useProfileTranslation();
 	const Icon = entry.icon;
 	return /* @__PURE__ */ jsxs("div", {
-		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-profile-divider border-b"}`,
+		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-border border-b"}`,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "bg-profile-icon-bg text-profile-text flex size-9 shrink-0 items-center justify-center rounded-full",
+				className: "bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-full",
 				children: /* @__PURE__ */ jsx(Icon, {
 					className: "size-4",
 					strokeWidth: 2
@@ -593,10 +593,10 @@ function SocialRow({ entry, handle, isLast, onConnect }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-profile-base text-profile-text font-bold",
+					className: "text-foreground text-sm font-bold",
 					children: entry.label
 				}), /* @__PURE__ */ jsx("div", {
-					className: `text-profile-sm truncate ${handle ? "text-profile-text-muted" : "text-profile-text-placeholder"}`,
+					className: `truncate text-xs ${handle ? "text-muted-foreground" : "text-muted-foreground/55"}`,
 					children: handle || entry.placeholder
 				})]
 			}),
@@ -1253,4 +1253,4 @@ const profileScreenPropertySchema = {
 //#endregion
 export { profileScreenPropertySchema as n, ProfileScreen as t };
 
-//# sourceMappingURL=ProfileScreen-CefqZr-Q.mjs.map
+//# sourceMappingURL=ProfileScreen-8hi-vFLY.mjs.map