@opensite/ui 3.0.7 → 3.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +80 -0
  2. package/dist/aspect-ratio.cjs +33 -0
  3. package/dist/aspect-ratio.d.cts +6 -0
  4. package/dist/aspect-ratio.d.ts +6 -0
  5. package/dist/aspect-ratio.js +11 -0
  6. package/dist/badge.d.cts +1 -1
  7. package/dist/badge.d.ts +1 -1
  8. package/dist/components.cjs +172 -1
  9. package/dist/components.d.cts +1 -0
  10. package/dist/components.d.ts +1 -0
  11. package/dist/components.js +171 -2
  12. package/dist/hero-ad-campaign-expert.cjs +181 -73
  13. package/dist/hero-ad-campaign-expert.d.cts +2 -5
  14. package/dist/hero-ad-campaign-expert.d.ts +2 -5
  15. package/dist/hero-ad-campaign-expert.js +181 -73
  16. package/dist/hero-digital-agency-fullscreen.cjs +1 -1
  17. package/dist/hero-digital-agency-fullscreen.js +1 -1
  18. package/dist/hero-image-slider.cjs +1 -1
  19. package/dist/hero-image-slider.js +1 -1
  20. package/dist/hero-premium-split-avatars.cjs +231 -33
  21. package/dist/hero-premium-split-avatars.d.cts +15 -3
  22. package/dist/hero-premium-split-avatars.d.ts +15 -3
  23. package/dist/hero-premium-split-avatars.js +230 -33
  24. package/dist/image-slider.cjs +1 -1
  25. package/dist/image-slider.js +1 -1
  26. package/dist/index.cjs +172 -1
  27. package/dist/index.d.cts +1 -0
  28. package/dist/index.d.ts +1 -0
  29. package/dist/index.js +171 -2
  30. package/dist/media-aspect-ratio.cjs +203 -0
  31. package/dist/media-aspect-ratio.d.cts +75 -0
  32. package/dist/media-aspect-ratio.d.ts +75 -0
  33. package/dist/media-aspect-ratio.js +180 -0
  34. package/dist/registry.cjs +246 -110
  35. package/dist/registry.js +245 -109
  36. package/dist/social-link-icon.d.cts +1 -1
  37. package/dist/social-link-icon.d.ts +1 -1
  38. package/package.json +8 -3
package/README.md CHANGED
@@ -53,6 +53,86 @@ This library requires React 16.8.0 or higher:
53
53
  pnpm add react react-dom
54
54
  ```
55
55
 
56
+ ## Setup Requirements
57
+
58
+ ### 1. Tailwind CSS Configuration
59
+
60
+ **CRITICAL**: Add both `@opensite/ui` and `@page-speed/pressable` to your Tailwind content paths:
61
+
62
+ ```ts
63
+ // tailwind.config.ts
64
+ import type { Config } from "tailwindcss";
65
+
66
+ const config: Config = {
67
+ content: [
68
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
69
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
70
+ // Add these lines to scan component classes:
71
+ "./node_modules/@opensite/ui/dist/**/*.{js,mjs}",
72
+ "./node_modules/@page-speed/pressable/dist/**/*.{js,mjs}",
73
+ ],
74
+ // ...rest of config
75
+ };
76
+ ```
77
+
78
+ Without this, button styles from Pressable and other components won't be applied.
79
+
80
+ ### 2. Router Setup (For Pressable Navigation)
81
+
82
+ The `Pressable` component (used for links/buttons) requires `RouterProvider` from `@page-speed/router`.
83
+
84
+ **For Next.js App Router** (requires client component wrapper):
85
+
86
+ ```tsx
87
+ // components/providers/RouterWrapper.tsx
88
+ "use client";
89
+
90
+ import { RouterProvider } from "@page-speed/router";
91
+ import { ReactNode } from "react";
92
+
93
+ export function RouterWrapper({ children }: { children: ReactNode }) {
94
+ return <RouterProvider>{children}</RouterProvider>;
95
+ }
96
+ ```
97
+
98
+ ```tsx
99
+ // app/layout.tsx
100
+ import { RouterWrapper } from "@/components/providers/RouterWrapper";
101
+
102
+ export default function RootLayout({ children }) {
103
+ return (
104
+ <html>
105
+ <body>
106
+ <RouterWrapper>
107
+ {children}
108
+ </RouterWrapper>
109
+ </body>
110
+ </html>
111
+ );
112
+ }
113
+ ```
114
+
115
+ **For standard React apps** (Create React App, Vite, etc.):
116
+
117
+ ```tsx
118
+ // App.tsx
119
+ import { RouterProvider } from "@page-speed/router";
120
+
121
+ function App() {
122
+ return (
123
+ <RouterProvider>
124
+ {/* your app */}
125
+ </RouterProvider>
126
+ );
127
+ }
128
+ ```
129
+
130
+ Install the router package:
131
+
132
+ ```bash
133
+ pnpm add @page-speed/router
134
+ ```
135
+
56
136
  ## Usage
57
137
 
58
138
  ### Tree-Shakable Imports (Recommended)
package/dist/aspect-ratio.cjs ADDED
@@ -0,0 +1,33 @@
1
+ 'use strict';
2
+
3
+ var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+
6
+ function _interopNamespace(e) {
7
+ if (e && e.__esModule) return e;
8
+ var n = Object.create(null);
9
+ if (e) {
10
+ Object.keys(e).forEach(function (k) {
11
+ if (k !== 'default') {
12
+ var d = Object.getOwnPropertyDescriptor(e, k);
13
+ Object.defineProperty(n, k, d.get ? d : {
14
+ enumerable: true,
15
+ get: function () { return e[k]; }
16
+ });
17
+ }
18
+ });
19
+ }
20
+ n.default = e;
21
+ return Object.freeze(n);
22
+ }
23
+
24
+ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
25
+
26
+ // components/ui/aspect-ratio.tsx
27
+ function AspectRatio({
28
+ ...props
29
+ }) {
30
+ return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
31
+ }
32
+
33
+ exports.AspectRatio = AspectRatio;
package/dist/aspect-ratio.d.cts ADDED
@@ -0,0 +1,6 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
3
+
4
+ declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): react_jsx_runtime.JSX.Element;
5
+
6
+ export { AspectRatio };
package/dist/aspect-ratio.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
3
+
4
+ declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): react_jsx_runtime.JSX.Element;
5
+
6
+ export { AspectRatio };
package/dist/aspect-ratio.js ADDED
@@ -0,0 +1,11 @@
1
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
2
+ import { jsx } from 'react/jsx-runtime';
3
+
4
+ // components/ui/aspect-ratio.tsx
5
+ function AspectRatio({
6
+ ...props
7
+ }) {
8
+ return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
9
+ }
10
+
11
+ export { AspectRatio };
package/dist/badge.d.cts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
package/dist/badge.d.ts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
package/dist/components.cjs CHANGED
@@ -9,6 +9,7 @@ var framerMotion = require('framer-motion');
9
9
  var useOnClickOutside = require('@opensite/hooks/useOnClickOutside');
10
10
  var react = require('motion/react');
11
11
  var img = require('@page-speed/img');
12
+ var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
12
13
  var reactSlot = require('@radix-ui/react-slot');
13
14
  var pressable = require('@page-speed/pressable');
14
15
  var classVarianceAuthority = require('class-variance-authority');
@@ -37,6 +38,7 @@ function _interopNamespace(e) {
37
38
  }
38
39
 
39
40
  var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
41
+ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
40
42
  var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
41
43
  var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
42
44
 
@@ -894,7 +896,7 @@ var ImageSlider = ({
894
896
  activeImage.className
895
897
  ),
896
898
  optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
897
- eager: true
899
+ loading: "eager"
898
900
  }
899
901
  )
900
902
  },
@@ -917,6 +919,174 @@ var ImageSlider = ({
917
919
  }
918
920
  );
919
921
  };
922
+ function AspectRatio({
923
+ ...props
924
+ }) {
925
+ return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
926
+ }
927
+ var DEFAULT_DEVICE_ASPECT_RATIOS = {
928
+ desktop: "square",
929
+ mobile: "square"
930
+ };
931
+ var DEFAULT_MEDIA_CLASS_NAME = "size-full object-cover";
932
+ var DEFAULT_FRAME_CLASS_NAME = "overflow-hidden";
933
+ var DEFAULT_BREAKPOINT = "lg";
934
+ var BREAKPOINT_VISIBILITY_CLASSES = {
935
+ sm: {
936
+ desktop: "hidden sm:block",
937
+ mobile: "sm:hidden"
938
+ },
939
+ md: {
940
+ desktop: "hidden md:block",
941
+ mobile: "md:hidden"
942
+ },
943
+ lg: {
944
+ desktop: "hidden lg:block",
945
+ mobile: "lg:hidden"
946
+ },
947
+ xl: {
948
+ desktop: "hidden xl:block",
949
+ mobile: "xl:hidden"
950
+ },
951
+ "2xl": {
952
+ desktop: "hidden 2xl:block",
953
+ mobile: "2xl:hidden"
954
+ }
955
+ };
956
+ var MEDIA_ASPECT_RATIOS = {
957
+ square: 1,
958
+ horizontal: 16 / 9,
959
+ vertical: 355 / 520
960
+ };
961
+ function resolveAspectRatio(ratio, fallback) {
962
+ const resolvedRatio = ratio ?? fallback;
963
+ if (typeof resolvedRatio === "number" && Number.isFinite(resolvedRatio) && resolvedRatio > 0) {
964
+ return resolvedRatio;
965
+ }
966
+ return MEDIA_ASPECT_RATIOS[resolvedRatio];
967
+ }
968
+ function hasRenderableMedia(mediaItem) {
969
+ return Boolean(mediaItem?.image?.src || mediaItem?.video?.src);
970
+ }
971
+ function renderMediaElement({
972
+ mediaItem,
973
+ optixFlowConfig,
974
+ mediaClassName,
975
+ imageClassName,
976
+ videoClassName
977
+ }) {
978
+ if (!hasRenderableMedia(mediaItem)) {
979
+ return null;
980
+ }
981
+ if (mediaItem.video?.src) {
982
+ const { className: inlineVideoClassName, poster, ...videoProps } = mediaItem.video;
983
+ const posterFallback = poster ?? (typeof mediaItem.image?.src === "string" ? mediaItem.image.src : void 0);
984
+ return /* @__PURE__ */ jsxRuntime.jsx(
985
+ "video",
986
+ {
987
+ ...videoProps,
988
+ poster: posterFallback,
989
+ className: cn(
990
+ DEFAULT_MEDIA_CLASS_NAME,
991
+ mediaClassName,
992
+ videoClassName,
993
+ inlineVideoClassName
994
+ )
995
+ }
996
+ );
997
+ }
998
+ if (mediaItem.image?.src) {
999
+ const { className: inlineImageClassName, alt, src, ...imageProps } = mediaItem.image;
1000
+ return /* @__PURE__ */ jsxRuntime.jsx(
1001
+ img.Img,
1002
+ {
1003
+ ...imageProps,
1004
+ src,
1005
+ alt: alt ?? "",
1006
+ className: cn(
1007
+ DEFAULT_MEDIA_CLASS_NAME,
1008
+ mediaClassName,
1009
+ imageClassName,
1010
+ inlineImageClassName
1011
+ ),
1012
+ optixFlowConfig
1013
+ }
1014
+ );
1015
+ }
1016
+ return null;
1017
+ }
1018
+ function MediaAspectRatio({
1019
+ containerClassName,
1020
+ mobileClassName,
1021
+ desktopClassName,
1022
+ frameClassName,
1023
+ mobileFrameClassName,
1024
+ desktopFrameClassName,
1025
+ mediaClassName,
1026
+ imageClassName,
1027
+ videoClassName,
1028
+ mediaItem,
1029
+ optixFlowConfig,
1030
+ deviceAspectRatios = DEFAULT_DEVICE_ASPECT_RATIOS,
1031
+ breakpoint = DEFAULT_BREAKPOINT
1032
+ }) {
1033
+ if (!hasRenderableMedia(mediaItem)) {
1034
+ return null;
1035
+ }
1036
+ const ratios = {
1037
+ desktop: resolveAspectRatio(
1038
+ deviceAspectRatios.desktop,
1039
+ DEFAULT_DEVICE_ASPECT_RATIOS.desktop
1040
+ ),
1041
+ mobile: resolveAspectRatio(
1042
+ deviceAspectRatios.mobile,
1043
+ DEFAULT_DEVICE_ASPECT_RATIOS.mobile
1044
+ )
1045
+ };
1046
+ const sharedFrameClassName = cn(
1047
+ DEFAULT_FRAME_CLASS_NAME,
1048
+ frameClassName,
1049
+ mediaItem.containerClassName
1050
+ );
1051
+ const visibilityClasses = BREAKPOINT_VISIBILITY_CLASSES[breakpoint];
1052
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, "data-slot": "media-aspect-ratio", children: [
1053
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", visibilityClasses.mobile, mobileClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
1054
+ AspectRatio,
1055
+ {
1056
+ ratio: ratios.mobile,
1057
+ className: cn(sharedFrameClassName, mobileFrameClassName),
1058
+ children: renderMediaElement({
1059
+ mediaItem,
1060
+ optixFlowConfig,
1061
+ mediaClassName,
1062
+ imageClassName,
1063
+ videoClassName
1064
+ })
1065
+ }
1066
+ ) }),
1067
+ /* @__PURE__ */ jsxRuntime.jsx(
1068
+ "div",
1069
+ {
1070
+ className: cn(visibilityClasses.desktop, desktopClassName),
1071
+ style: { aspectRatio: String(ratios.desktop) },
1072
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1073
+ "div",
1074
+ {
1075
+ className: cn("size-full", sharedFrameClassName, desktopFrameClassName),
1076
+ "data-slot": "media-aspect-ratio-frame",
1077
+ children: renderMediaElement({
1078
+ mediaItem,
1079
+ optixFlowConfig,
1080
+ mediaClassName,
1081
+ imageClassName,
1082
+ videoClassName
1083
+ })
1084
+ }
1085
+ )
1086
+ }
1087
+ )
1088
+ ] });
1089
+ }
920
1090
  function Button({
921
1091
  className,
922
1092
  variant = "default",
@@ -6649,6 +6819,7 @@ exports.FooterSimpleCentered = FooterSimpleCentered;
6649
6819
  exports.FooterSocialApps = FooterSocialApps;
6650
6820
  exports.FooterSocialNewsletter = FooterSocialNewsletter;
6651
6821
  exports.ImageSlider = ImageSlider;
6822
+ exports.MediaAspectRatio = MediaAspectRatio;
6652
6823
  exports.MediaHoverCtas = MediaHoverCtas;
6653
6824
  exports.PageHeroBanner = PageHeroBanner;
6654
6825
  exports.PaymentPlatformIcon = PaymentPlatformIcon;
package/dist/components.d.cts CHANGED
@@ -3,6 +3,7 @@ export { Section } from './section.cjs';
3
3
  export { AnimatedDialog } from './animated-dialog.cjs';
4
4
  export { PageHeroBanner } from './page-hero-banner.cjs';
5
5
  export { ImageSlider } from './image-slider.cjs';
6
+ export { MediaAspectRatio, MediaAspectRatioBreakpoint, MediaAspectRatioProps, MediaAspectRatioVariant, ResponsiveMediaAspectRatioProps } from './media-aspect-ratio.cjs';
6
7
  export { Button } from './button.cjs';
7
8
  export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.cjs';
8
9
  export { Badge } from './badge.cjs';
package/dist/components.d.ts CHANGED
@@ -3,6 +3,7 @@ export { Section } from './section.js';
3
3
  export { AnimatedDialog } from './animated-dialog.js';
4
4
  export { PageHeroBanner } from './page-hero-banner.js';
5
5
  export { ImageSlider } from './image-slider.js';
6
+ export { MediaAspectRatio, MediaAspectRatioBreakpoint, MediaAspectRatioProps, MediaAspectRatioVariant, ResponsiveMediaAspectRatioProps } from './media-aspect-ratio.js';
6
7
  export { Button } from './button.js';
7
8
  export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
8
9
  export { Badge } from './badge.js';
package/dist/components.js CHANGED
@@ -8,6 +8,7 @@ import { AnimatePresence, motion } from 'framer-motion';
8
8
  import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
9
9
  import { AnimatePresence as AnimatePresence$1, motion as motion$1 } from 'motion/react';
10
10
  import { Img } from '@page-speed/img';
11
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
11
12
  import { Slot } from '@radix-ui/react-slot';
12
13
  import { Pressable, buttonVariants } from '@page-speed/pressable';
13
14
  export { Pressable } from '@page-speed/pressable';
@@ -872,7 +873,7 @@ var ImageSlider = ({
872
873
  activeImage.className
873
874
  ),
874
875
  optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
875
- eager: true
876
+ loading: "eager"
876
877
  }
877
878
  )
878
879
  },
@@ -895,6 +896,174 @@ var ImageSlider = ({
895
896
  }
896
897
  );
897
898
  };
899
+ function AspectRatio({
900
+ ...props
901
+ }) {
902
+ return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
903
+ }
904
+ var DEFAULT_DEVICE_ASPECT_RATIOS = {
905
+ desktop: "square",
906
+ mobile: "square"
907
+ };
908
+ var DEFAULT_MEDIA_CLASS_NAME = "size-full object-cover";
909
+ var DEFAULT_FRAME_CLASS_NAME = "overflow-hidden";
910
+ var DEFAULT_BREAKPOINT = "lg";
911
+ var BREAKPOINT_VISIBILITY_CLASSES = {
912
+ sm: {
913
+ desktop: "hidden sm:block",
914
+ mobile: "sm:hidden"
915
+ },
916
+ md: {
917
+ desktop: "hidden md:block",
918
+ mobile: "md:hidden"
919
+ },
920
+ lg: {
921
+ desktop: "hidden lg:block",
922
+ mobile: "lg:hidden"
923
+ },
924
+ xl: {
925
+ desktop: "hidden xl:block",
926
+ mobile: "xl:hidden"
927
+ },
928
+ "2xl": {
929
+ desktop: "hidden 2xl:block",
930
+ mobile: "2xl:hidden"
931
+ }
932
+ };
933
+ var MEDIA_ASPECT_RATIOS = {
934
+ square: 1,
935
+ horizontal: 16 / 9,
936
+ vertical: 355 / 520
937
+ };
938
+ function resolveAspectRatio(ratio, fallback) {
939
+ const resolvedRatio = ratio ?? fallback;
940
+ if (typeof resolvedRatio === "number" && Number.isFinite(resolvedRatio) && resolvedRatio > 0) {
941
+ return resolvedRatio;
942
+ }
943
+ return MEDIA_ASPECT_RATIOS[resolvedRatio];
944
+ }
945
+ function hasRenderableMedia(mediaItem) {
946
+ return Boolean(mediaItem?.image?.src || mediaItem?.video?.src);
947
+ }
948
+ function renderMediaElement({
949
+ mediaItem,
950
+ optixFlowConfig,
951
+ mediaClassName,
952
+ imageClassName,
953
+ videoClassName
954
+ }) {
955
+ if (!hasRenderableMedia(mediaItem)) {
956
+ return null;
957
+ }
958
+ if (mediaItem.video?.src) {
959
+ const { className: inlineVideoClassName, poster, ...videoProps } = mediaItem.video;
960
+ const posterFallback = poster ?? (typeof mediaItem.image?.src === "string" ? mediaItem.image.src : void 0);
961
+ return /* @__PURE__ */ jsx(
962
+ "video",
963
+ {
964
+ ...videoProps,
965
+ poster: posterFallback,
966
+ className: cn(
967
+ DEFAULT_MEDIA_CLASS_NAME,
968
+ mediaClassName,
969
+ videoClassName,
970
+ inlineVideoClassName
971
+ )
972
+ }
973
+ );
974
+ }
975
+ if (mediaItem.image?.src) {
976
+ const { className: inlineImageClassName, alt, src, ...imageProps } = mediaItem.image;
977
+ return /* @__PURE__ */ jsx(
978
+ Img,
979
+ {
980
+ ...imageProps,
981
+ src,
982
+ alt: alt ?? "",
983
+ className: cn(
984
+ DEFAULT_MEDIA_CLASS_NAME,
985
+ mediaClassName,
986
+ imageClassName,
987
+ inlineImageClassName
988
+ ),
989
+ optixFlowConfig
990
+ }
991
+ );
992
+ }
993
+ return null;
994
+ }
995
+ function MediaAspectRatio({
996
+ containerClassName,
997
+ mobileClassName,
998
+ desktopClassName,
999
+ frameClassName,
1000
+ mobileFrameClassName,
1001
+ desktopFrameClassName,
1002
+ mediaClassName,
1003
+ imageClassName,
1004
+ videoClassName,
1005
+ mediaItem,
1006
+ optixFlowConfig,
1007
+ deviceAspectRatios = DEFAULT_DEVICE_ASPECT_RATIOS,
1008
+ breakpoint = DEFAULT_BREAKPOINT
1009
+ }) {
1010
+ if (!hasRenderableMedia(mediaItem)) {
1011
+ return null;
1012
+ }
1013
+ const ratios = {
1014
+ desktop: resolveAspectRatio(
1015
+ deviceAspectRatios.desktop,
1016
+ DEFAULT_DEVICE_ASPECT_RATIOS.desktop
1017
+ ),
1018
+ mobile: resolveAspectRatio(
1019
+ deviceAspectRatios.mobile,
1020
+ DEFAULT_DEVICE_ASPECT_RATIOS.mobile
1021
+ )
1022
+ };
1023
+ const sharedFrameClassName = cn(
1024
+ DEFAULT_FRAME_CLASS_NAME,
1025
+ frameClassName,
1026
+ mediaItem.containerClassName
1027
+ );
1028
+ const visibilityClasses = BREAKPOINT_VISIBILITY_CLASSES[breakpoint];
1029
+ return /* @__PURE__ */ jsxs("div", { className: containerClassName, "data-slot": "media-aspect-ratio", children: [
1030
+ /* @__PURE__ */ jsx("div", { className: cn("relative", visibilityClasses.mobile, mobileClassName), children: /* @__PURE__ */ jsx(
1031
+ AspectRatio,
1032
+ {
1033
+ ratio: ratios.mobile,
1034
+ className: cn(sharedFrameClassName, mobileFrameClassName),
1035
+ children: renderMediaElement({
1036
+ mediaItem,
1037
+ optixFlowConfig,
1038
+ mediaClassName,
1039
+ imageClassName,
1040
+ videoClassName
1041
+ })
1042
+ }
1043
+ ) }),
1044
+ /* @__PURE__ */ jsx(
1045
+ "div",
1046
+ {
1047
+ className: cn(visibilityClasses.desktop, desktopClassName),
1048
+ style: { aspectRatio: String(ratios.desktop) },
1049
+ children: /* @__PURE__ */ jsx(
1050
+ "div",
1051
+ {
1052
+ className: cn("size-full", sharedFrameClassName, desktopFrameClassName),
1053
+ "data-slot": "media-aspect-ratio-frame",
1054
+ children: renderMediaElement({
1055
+ mediaItem,
1056
+ optixFlowConfig,
1057
+ mediaClassName,
1058
+ imageClassName,
1059
+ videoClassName
1060
+ })
1061
+ }
1062
+ )
1063
+ }
1064
+ )
1065
+ ] });
1066
+ }
898
1067
  function Button({
899
1068
  className,
900
1069
  variant = "default",
@@ -6581,4 +6750,4 @@ function FooterNavSocial({
6581
6750
  );
6582
6751
  }
6583
6752
 
6584
- export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, BannerAnnouncementDismissible, BannerCountdownSale, BannerDeliveryCountdown, BannerEventPromo, BannerFloatingOffer, BannerGdprRights, BannerPrivacyNotice, BannerPromoCta, BannerSocialFollow, BannerSurveyIncentive, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, ImageSlider, MediaHoverCtas, PageHeroBanner, PaymentPlatformIcon, Popover, PopoverContent, PopoverTrigger, Section, SocialLinkIcon, StarRating };
6753
+ export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, BannerAnnouncementDismissible, BannerCountdownSale, BannerDeliveryCountdown, BannerEventPromo, BannerFloatingOffer, BannerGdprRights, BannerPrivacyNotice, BannerPromoCta, BannerSocialFollow, BannerSurveyIncentive, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, ImageSlider, MediaAspectRatio, MediaHoverCtas, PageHeroBanner, PaymentPlatformIcon, Popover, PopoverContent, PopoverTrigger, Section, SocialLinkIcon, StarRating };