andoncloud-sdk 1.7.32 → 1.7.34

package/dist/index.d.ts

@@ -5,10 +5,6 @@ import { SxProps, Theme } from '@mui/material/styles';
 import * as Sentry from '@sentry/react';
 import { InitOptions } from 'i18next';
 
-import { CheckboxProps } from './core/ui/Checkbox';
-import { RadioProps } from './core/ui/Radio';
-import { RadioGroupProps } from './core/ui/RadioGroup';
-
 declare module '@mui/material/styles' {
   interface Palette {
     gray: Palette['primary'];
@@ -321,6 +317,7 @@ declare module 'andoncloud-sdk' {
     features?: string[];
     extraPermissions?: string[];
     workplaceId?: string;
+    backgroundImage?: string;
     onTrialRequest: (featureKey: string) => Promise<boolean>;
     onFeatureRequest: (payload: FeatureRequestPayload) => Promise<boolean>;
     children: React.ReactNode;
@@ -338,6 +335,7 @@ declare module 'andoncloud-sdk' {
     featureKey: string;
     daysSinceExpiry?: number;
     workplaceId?: string;
+    backgroundImage?: string;
     cooldownInfo?: CooldownInfo;
     onTrialRequest: (featureKey: string) => Promise<boolean>;
     onFeatureRequest: (payload: FeatureRequestPayload) => Promise<boolean>;
@@ -440,11 +438,17 @@ declare module 'andoncloud-sdk' {
 
   export const captureException: typeof Sentry.captureException;
 
-  export const Checkbox: React.FC<CheckboxProps>;
+  // NOTE: Checkbox/Radio/RadioGroup types loosened to `any` because their
+  // source declarations live in src/core/ui/* which is not bundled into
+  // published dist (only dist/index.js + dist/index.d.ts ship). Restoring
+  // proper types requires either bundling .d.ts (via tsdown --dts or
+  // rollup-plugin-dts) or migrating SDK to TypeScript (tech-debt #4).
+  // Downstream consumers will see these as React.FC<any> until then.
+  export const Checkbox: React.FC<any>;
 
-  export const Radio: React.FC<RadioProps>;
+  export const Radio: React.FC<any>;
 
-  export const RadioGroup: React.FC<RadioGroupProps>;
+  export const RadioGroup: React.FC<any>;
 
   export const sidePanelDefaultProps: SidePanelProps;
 }

package/dist/index.js

@@ -52,10 +52,11 @@ const ACCESS_STATE_COLORS = {
 	expired: "error.main",
 	not_purchased: "primary.main"
 };
-const makeStyles$1 = (accessState) => {
+const makeStyles$1 = (accessState, backgroundImage) => {
 	const accentColor = ACCESS_STATE_COLORS[accessState] || "primary.main";
 	return {
 		container: {
+			position: "relative",
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
@@ -65,7 +66,25 @@ const makeStyles$1 = (accessState) => {
 			height: "100%",
 			padding: 4,
 			textAlign: "center",
-			background: (theme) => theme.palette.gradient.dark.main
+			background: (theme) => theme.palette.gradient.dark.main,
+			...backgroundImage && {
+				"&::before": {
+					content: "\"\"",
+					position: "absolute",
+					inset: 0,
+					backgroundImage: `url(${backgroundImage})`,
+					backgroundSize: "cover",
+					backgroundPosition: "center",
+					backgroundRepeat: "no-repeat",
+					filter: "blur(12px) brightness(0.35) saturate(0.7)",
+					pointerEvents: "none",
+					zIndex: 0
+				},
+				"& > *": {
+					position: "relative",
+					zIndex: 1
+				}
+			}
 		},
 		icon: {
 			fontSize: 48,
@@ -244,13 +263,13 @@ const ICONS = {
 	expired: HourglassEmptyIcon,
 	not_purchased: ShoppingCartIcon
 };
-const AccessBlocker = ({ accessState, buttons = [], daysSinceExpiry, featureKey, workplaceId, cooldownInfo = {}, onTrialRequest, onFeatureRequest }) => {
+const AccessBlocker = ({ accessState, buttons = [], daysSinceExpiry, featureKey, workplaceId, backgroundImage, cooldownInfo = {}, onTrialRequest, onFeatureRequest }) => {
 	const { t } = useTranslation();
 	const [modalOpen, setModalOpen] = useState(false);
 	const [cooldownModalOpen, setCooldownModalOpen] = useState(false);
 	const [cooldownDays, setCooldownDays] = useState(0);
 	const [pendingAction, setPendingAction] = useState(null);
-	const styles = makeStyles$1(accessState);
+	const styles = makeStyles$1(accessState, backgroundImage);
 	const Icon = ICONS[accessState] || LockIcon;
 	const handleOpenModal = (button) => {
 		if (button.requestType && cooldownInfo[button.requestType]?.isInCooldown) {
@@ -686,7 +705,7 @@ const useAccess = (features = [], options = {}) => {
 };
 //#endregion
 //#region src/components/access/AccessGuard.js
-const AccessGuard = ({ features: featuresProp = [], extraPermissions = [], workplaceId, onTrialRequest, onFeatureRequest, children }) => {
+const AccessGuard = ({ features: featuresProp = [], extraPermissions = [], workplaceId, backgroundImage, onTrialRequest, onFeatureRequest, children }) => {
 	const { hasAccess, accessState, buttons, cooldownInfo, features } = useAccess(featuresProp, {
 		extraPermissions,
 		workplaceId
@@ -701,6 +720,7 @@ const AccessGuard = ({ features: featuresProp = [], extraPermissions = [], workp
 		daysSinceExpiry,
 		featureKey,
 		workplaceId,
+		backgroundImage,
 		cooldownInfo,
 		onTrialRequest,
 		onFeatureRequest