@opensite/ui 2.7.1 → 2.7.2

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.
@@ -845,7 +845,6 @@ function BlogTechInsights({
845
845
  secondaryPosts,
846
846
  secondaryPostsSlot,
847
847
  className,
848
- containerClassName,
849
848
  headerClassName,
850
849
  headingClassName,
851
850
  descriptionClassName,
@@ -857,7 +856,8 @@ function BlogTechInsights({
857
856
  secondaryPostItemClassName,
858
857
  optixFlowConfig,
859
858
  background,
860
- spacing,
859
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
860
+ spacing = "lg",
861
861
  pattern,
862
862
  patternOpacity
863
863
  }) {
@@ -876,11 +876,7 @@ function BlogTechInsights({
876
876
  Pressable,
877
877
  {
878
878
  asButton: true,
879
- className: cn(
880
- "ml-auto rounded-full border-foreground",
881
- actionClassName,
882
- readMoreClassName
883
- ),
879
+ className: cn("ml-auto", actionClassName, readMoreClassName),
884
880
  ...pressableProps,
885
881
  children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
886
882
  icon,
@@ -911,7 +907,7 @@ function BlogTechInsights({
911
907
  /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 rounded-md md:h-12 md:w-12", children: featuredPost.authorAvatar && /* @__PURE__ */ jsx(AvatarImage, { src: featuredPost.authorAvatar }) }),
912
908
  /* @__PURE__ */ jsxs("span", { className: "text-sm md:text-base", children: [
913
909
  featuredPost.author && /* @__PURE__ */ jsx("span", { className: "block", children: featuredPost.author }),
914
- featuredPost.authorRole && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground md:text-sm", children: featuredPost.authorRole })
910
+ featuredPost.authorRole && /* @__PURE__ */ jsx("span", { className: "text-xs md:text-sm", children: featuredPost.authorRole })
915
911
  ] })
916
912
  ] })
917
913
  ] });
@@ -959,7 +955,7 @@ function BlogTechInsights({
959
955
  ) }),
960
956
  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
961
957
  post.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-md line-clamp-2", children: post.title }),
962
- truncatedDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug text-muted-foreground md:text-base line-clamp-2", children: truncatedDescription })
958
+ truncatedDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug md:text-base line-clamp-2", children: truncatedDescription })
963
959
  ] })
964
960
  ]
965
961
  }
@@ -991,64 +987,53 @@ function BlogTechInsights({
991
987
  className: cn("dark relative", className),
992
988
  pattern,
993
989
  patternOpacity,
994
- children: /* @__PURE__ */ jsxs(
995
- "div",
996
- {
997
- className: cn(
998
- "flex flex-col items-center gap-8 md:gap-14",
999
- containerClassName
1000
- ),
1001
- children: [
1002
- /* @__PURE__ */ jsxs("div", { className: cn("w-full", headerClassName), children: [
1003
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
1004
- "h1",
1005
- {
1006
- className: cn(
1007
- "text-3xl font-bold md:text-4xl lg:text-5xl",
1008
- headingClassName
1009
- ),
1010
- children: heading
1011
- }
1012
- ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
1013
- /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-start", children: [
1014
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
1015
- "span",
1016
- {
1017
- className: cn(
1018
- "mt-2 block text-sm text-muted-foreground md:text-base",
1019
- descriptionClassName
1020
- ),
1021
- children: description
1022
- }
1023
- ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
1024
- readMoreActionContent
1025
- ] })
1026
- ] }),
1027
- /* @__PURE__ */ jsxs(
1028
- "div",
990
+ containerClassName,
991
+ children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8 md:gap-14"), children: [
992
+ /* @__PURE__ */ jsxs("div", { className: cn("w-full", headerClassName), children: [
993
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
994
+ "h1",
995
+ {
996
+ className: cn(
997
+ "text-3xl font-bold md:text-4xl lg:text-5xl",
998
+ headingClassName
999
+ ),
1000
+ children: heading
1001
+ }
1002
+ ) : heading),
1003
+ /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-start", children: [
1004
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
1005
+ "span",
1029
1006
  {
1030
1007
  className: cn(
1031
- "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
1032
- contentClassName
1008
+ "mt-2 block text-sm md:text-base",
1009
+ descriptionClassName
1033
1010
  ),
1034
- children: [
1035
- featuredPostContent,
1036
- /* @__PURE__ */ jsx(
1037
- "div",
1038
- {
1039
- className: cn(
1040
- "space-y-6 md:space-y-8",
1041
- secondaryPostsClassName
1042
- ),
1043
- children: secondaryPostsContent
1044
- }
1045
- )
1046
- ]
1011
+ children: description
1047
1012
  }
1048
- )
1049
- ]
1050
- }
1051
- )
1013
+ ) : description),
1014
+ readMoreActionContent
1015
+ ] })
1016
+ ] }),
1017
+ /* @__PURE__ */ jsxs(
1018
+ "div",
1019
+ {
1020
+ className: cn(
1021
+ "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
1022
+ contentClassName
1023
+ ),
1024
+ children: [
1025
+ featuredPostContent,
1026
+ /* @__PURE__ */ jsx(
1027
+ "div",
1028
+ {
1029
+ className: cn("space-y-6 md:space-y-8", secondaryPostsClassName),
1030
+ children: secondaryPostsContent
1031
+ }
1032
+ )
1033
+ ]
1034
+ }
1035
+ )
1036
+ ] })
1052
1037
  }
1053
1038
  );
1054
1039
  }
@@ -501,7 +501,7 @@ function CarouselScrollingFeatureShowcase({
501
501
  "div",
502
502
  {
503
503
  className: cn(
504
- "aspect-square overflow-hidden rounded-xl",
504
+ "aspect-square overflow-hidden rounded-xl shadow-xl",
505
505
  imageClassName
506
506
  ),
507
507
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
@@ -540,7 +540,7 @@ function CarouselScrollingFeatureShowcase({
540
540
  feature.className
541
541
  ),
542
542
  children: [
543
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
543
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-xl shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
544
544
  img.Img,
545
545
  {
546
546
  src: feature.image,
@@ -565,7 +565,7 @@ function CarouselScrollingFeatureShowcase({
565
565
  ),
566
566
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
567
567
  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl md:text-2xl font-semibold", children: feature.title }) : feature.title),
568
- feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg", children: feature.description }) : feature.description)
568
+ feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-base md:text-lg", children: feature.description }) : feature.description)
569
569
  ] })
570
570
  ] })
571
571
  ]
@@ -480,7 +480,7 @@ function CarouselScrollingFeatureShowcase({
480
480
  "div",
481
481
  {
482
482
  className: cn(
483
- "aspect-square overflow-hidden rounded-xl",
483
+ "aspect-square overflow-hidden rounded-xl shadow-xl",
484
484
  imageClassName
485
485
  ),
486
486
  children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsx(
@@ -519,7 +519,7 @@ function CarouselScrollingFeatureShowcase({
519
519
  feature.className
520
520
  ),
521
521
  children: [
522
- /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(
522
+ /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-xl shadow-xl", children: /* @__PURE__ */ jsx(
523
523
  Img,
524
524
  {
525
525
  src: feature.image,
@@ -544,7 +544,7 @@ function CarouselScrollingFeatureShowcase({
544
544
  ),
545
545
  /* @__PURE__ */ jsxs("div", { children: [
546
546
  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl md:text-2xl font-semibold", children: feature.title }) : feature.title),
547
- feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg", children: feature.description }) : feature.description)
547
+ feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-base md:text-lg", children: feature.description }) : feature.description)
548
548
  ] })
549
549
  ] })
550
550
  ]
@@ -34,36 +34,6 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
34
34
  function cn(...inputs) {
35
35
  return tailwindMerge.twMerge(clsx.clsx(inputs));
36
36
  }
37
- function getNestedCardBg(parentBg, variant = "muted", options) {
38
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
39
- if (isDark) {
40
- switch (variant) {
41
- case "muted":
42
- return "bg-background";
43
- case "card":
44
- return "bg-card";
45
- case "accent":
46
- return "bg-accent";
47
- case "subtle":
48
- return "bg-background/50";
49
- }
50
- } else {
51
- switch (variant) {
52
- case "muted":
53
- return "bg-muted";
54
- case "card":
55
- return "bg-card";
56
- case "accent":
57
- return "bg-accent";
58
- case "subtle":
59
- return "bg-muted/50";
60
- }
61
- }
62
- }
63
- function getNestedCardTextColor(parentBg, options) {
64
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
65
- return isDark ? "text-foreground" : "";
66
- }
67
37
  var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
68
38
  function DynamicIcon({ apiKey, ...props }) {
69
39
  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -932,12 +902,12 @@ function FaqSplitHelp({
932
902
  helpAction,
933
903
  helpSlot,
934
904
  background,
935
- spacing = "py-6 md:py-32",
905
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
906
+ spacing = "lg",
936
907
  pattern,
937
908
  patternOpacity,
938
909
  patternClassName,
939
910
  className,
940
- containerClassName,
941
911
  leftColumnClassName,
942
912
  headingClassName,
943
913
  descriptionClassName,
@@ -969,14 +939,14 @@ function FaqSplitHelp({
969
939
  "transition-opacity duration-200 hover:no-underline hover:opacity-60",
970
940
  accordionTriggerClassName
971
941
  ),
972
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
942
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium py-1 md:py-2 text-lg", children: item.question })
973
943
  }
974
944
  ),
975
945
  /* @__PURE__ */ jsxRuntime.jsx(
976
946
  AccordionContent,
977
947
  {
978
- className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
979
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: " lg:text-lg", children: item.answer })
948
+ className: cn("mb-1 md:mb-2", accordionContentClassName),
949
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg", children: item.answer })
980
950
  }
981
951
  )
982
952
  ]
@@ -999,9 +969,12 @@ function FaqSplitHelp({
999
969
  "div",
1000
970
  {
1001
971
  className: cn(
1002
- "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
1003
- getNestedCardBg(background),
1004
- getNestedCardTextColor(background),
972
+ "flex flex-col items-center",
973
+ "md:flex-row md:justify-between",
974
+ "mt-8 md:mt-16 p-6 lg:p-8",
975
+ "gap-4 text-center md:text-left",
976
+ "rounded-lg shadow-lg",
977
+ "bg-card text-card-foreground",
1005
978
  helpSectionClassName
1006
979
  ),
1007
980
  children: [
@@ -1045,20 +1018,22 @@ function FaqSplitHelp({
1045
1018
  patternOpacity,
1046
1019
  patternClassName,
1047
1020
  className,
1048
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
1021
+ containerClassName,
1022
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
1049
1023
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10 lg:flex-row lg:gap-20", children: [
1050
1024
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:w-1/3", leftColumnClassName), children: [
1051
1025
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1052
1026
  "h2",
1053
1027
  {
1054
1028
  className: cn(
1055
- "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
1029
+ "text-3xl lg:text-4xl font-semibold",
1030
+ "mb-3 md:mb-4 lg:mb-6",
1056
1031
  headingClassName
1057
1032
  ),
1058
1033
  children: heading
1059
1034
  }
1060
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
1061
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
1035
+ ) : heading),
1036
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base md:text-lg", descriptionClassName), children: description }) : description)
1062
1037
  ] }),
1063
1038
  itemsContent
1064
1039
  ] }),
@@ -106,6 +106,6 @@ interface FaqSplitHelpProps {
106
106
  */
107
107
  helpSectionClassName?: string;
108
108
  }
109
- declare function FaqSplitHelp({ heading, description, items, itemsSlot, helpHeading, helpDescription, helpAction, helpSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, leftColumnClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, helpSectionClassName, }: FaqSplitHelpProps): react_jsx_runtime.JSX.Element;
109
+ declare function FaqSplitHelp({ heading, description, items, itemsSlot, helpHeading, helpDescription, helpAction, helpSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, leftColumnClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, helpSectionClassName, }: FaqSplitHelpProps): react_jsx_runtime.JSX.Element;
110
110
 
111
111
  export { type FaqItem, FaqSplitHelp, type FaqSplitHelpProps };
@@ -106,6 +106,6 @@ interface FaqSplitHelpProps {
106
106
  */
107
107
  helpSectionClassName?: string;
108
108
  }
109
- declare function FaqSplitHelp({ heading, description, items, itemsSlot, helpHeading, helpDescription, helpAction, helpSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, leftColumnClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, helpSectionClassName, }: FaqSplitHelpProps): react_jsx_runtime.JSX.Element;
109
+ declare function FaqSplitHelp({ heading, description, items, itemsSlot, helpHeading, helpDescription, helpAction, helpSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, leftColumnClassName, headingClassName, descriptionClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, helpSectionClassName, }: FaqSplitHelpProps): react_jsx_runtime.JSX.Element;
110
110
 
111
111
  export { type FaqItem, FaqSplitHelp, type FaqSplitHelpProps };
@@ -12,36 +12,6 @@ import { cva } from 'class-variance-authority';
12
12
  function cn(...inputs) {
13
13
  return twMerge(clsx(inputs));
14
14
  }
15
- function getNestedCardBg(parentBg, variant = "muted", options) {
16
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
17
- if (isDark) {
18
- switch (variant) {
19
- case "muted":
20
- return "bg-background";
21
- case "card":
22
- return "bg-card";
23
- case "accent":
24
- return "bg-accent";
25
- case "subtle":
26
- return "bg-background/50";
27
- }
28
- } else {
29
- switch (variant) {
30
- case "muted":
31
- return "bg-muted";
32
- case "card":
33
- return "bg-card";
34
- case "accent":
35
- return "bg-accent";
36
- case "subtle":
37
- return "bg-muted/50";
38
- }
39
- }
40
- }
41
- function getNestedCardTextColor(parentBg, options) {
42
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
43
- return isDark ? "text-foreground" : "";
44
- }
45
15
  var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
46
16
  function DynamicIcon({ apiKey, ...props }) {
47
17
  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -910,12 +880,12 @@ function FaqSplitHelp({
910
880
  helpAction,
911
881
  helpSlot,
912
882
  background,
913
- spacing = "py-6 md:py-32",
883
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
884
+ spacing = "lg",
914
885
  pattern,
915
886
  patternOpacity,
916
887
  patternClassName,
917
888
  className,
918
- containerClassName,
919
889
  leftColumnClassName,
920
890
  headingClassName,
921
891
  descriptionClassName,
@@ -947,14 +917,14 @@ function FaqSplitHelp({
947
917
  "transition-opacity duration-200 hover:no-underline hover:opacity-60",
948
918
  accordionTriggerClassName
949
919
  ),
950
- children: /* @__PURE__ */ jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
920
+ children: /* @__PURE__ */ jsx("div", { className: "font-medium py-1 md:py-2 text-lg", children: item.question })
951
921
  }
952
922
  ),
953
923
  /* @__PURE__ */ jsx(
954
924
  AccordionContent,
955
925
  {
956
- className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
957
- children: /* @__PURE__ */ jsx("div", { className: " lg:text-lg", children: item.answer })
926
+ className: cn("mb-1 md:mb-2", accordionContentClassName),
927
+ children: /* @__PURE__ */ jsx("div", { className: "text-base md:text-lg", children: item.answer })
958
928
  }
959
929
  )
960
930
  ]
@@ -977,9 +947,12 @@ function FaqSplitHelp({
977
947
  "div",
978
948
  {
979
949
  className: cn(
980
- "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
981
- getNestedCardBg(background),
982
- getNestedCardTextColor(background),
950
+ "flex flex-col items-center",
951
+ "md:flex-row md:justify-between",
952
+ "mt-8 md:mt-16 p-6 lg:p-8",
953
+ "gap-4 text-center md:text-left",
954
+ "rounded-lg shadow-lg",
955
+ "bg-card text-card-foreground",
983
956
  helpSectionClassName
984
957
  ),
985
958
  children: [
@@ -1023,20 +996,22 @@ function FaqSplitHelp({
1023
996
  patternOpacity,
1024
997
  patternClassName,
1025
998
  className,
1026
- children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
999
+ containerClassName,
1000
+ children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
1027
1001
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10 lg:flex-row lg:gap-20", children: [
1028
1002
  /* @__PURE__ */ jsxs("div", { className: cn("lg:w-1/3", leftColumnClassName), children: [
1029
1003
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
1030
1004
  "h2",
1031
1005
  {
1032
1006
  className: cn(
1033
- "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
1007
+ "text-3xl lg:text-4xl font-semibold",
1008
+ "mb-3 md:mb-4 lg:mb-6",
1034
1009
  headingClassName
1035
1010
  ),
1036
1011
  children: heading
1037
1012
  }
1038
- ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
1039
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
1013
+ ) : heading),
1014
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base md:text-lg", descriptionClassName), children: description }) : description)
1040
1015
  ] }),
1041
1016
  itemsContent
1042
1017
  ] }),