@axos-web-dev/shared-components 0.0.67 → 0.0.69

package/dist/SetContainer/SetContainer.css.d.ts

@@ -8,11 +8,46 @@ export declare const set_container: import('@vanilla-extract/recipes').RuntimeFn
         };
         tertiary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const inline_container: string;
+export declare const heading: string;
 export declare const imageLinkContainer: string;
+export declare const set_logo: string;
+export declare const setcontainer_section_text: string;
+export declare const isolate_container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    };
+}>;

package/dist/SetContainer/SetContainer.css.js

@@ -4,9 +4,17 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var set_container = createRuntimeFn({ defaultClassName: "_18ygy9m0", variantClassNames: { variant: { primary: "_18ygy9m1", secondary: "_18ygy9m2", tertiary: "_18ygy9m3", quaternary: "_18ygy9m4" } }, defaultVariants: {}, compoundVariants: [] });
 var inline_container = "_18ygy9m5";
-var imageLinkContainer = "_18ygy9m6";
+var heading = "_18ygy9m6";
+var imageLinkContainer = "_18ygy9m7";
+var set_logo = "_18ygy9m8";
+var setcontainer_section_text = "_18ygy9m9";
+var isolate_container = createRuntimeFn({ defaultClassName: "_18ygy9ma", variantClassNames: { variant: { primary: "_18ygy9mb", secondary: "_18ygy9mc", tertiary: "_18ygy9md", quaternary: "_18ygy9me" } }, defaultVariants: {}, compoundVariants: [] });
 export {
+  heading,
   imageLinkContainer,
   inline_container,
-  set_container
+  isolate_container,
+  set_container,
+  set_logo,
+  setcontainer_section_text
 };

package/dist/SetContainer/SetContainer.d.ts

@@ -1,7 +1,11 @@
 import { ImageBillboardSetProps } from '../ImageBillboard/ImageBillboard.interface';
-import { PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 
 export interface SetContainerProps extends Omit<ImageBillboardSetProps, "imageBillboards">, PropsWithChildren {
     internalName?: string;
+    icon?: boolean;
+    eyebrow?: ReactNode | string;
+    style?: CSSProperties;
+    isolate?: boolean;
 }
-export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, internalName, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, internalName, icon, eyebrow, style, isolate, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/SetContainer/SetContainer.js

@@ -1,27 +1,29 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { section_text, header_section } from "../IconBillboard/IconBillboard.css.js";
+import "../Modal/contextApi/store.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import "react";
+import "../Button/Button.css.js";
+import "react-use";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                                    */
 /* empty css                                                */
-/* empty css                                          */
-/* empty css                                          */
-import { getVariant } from "../utils/getVariant.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
-import "../Modal/contextApi/store.js";
-import clsx from "clsx";
-import "react";
-import "../Button/Button.css.js";
-import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                          */
+import { header_section } from "../IconBillboard/IconBillboard.css.js";
+/* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -34,20 +36,24 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
+import "../Comparison/Comparison.css.js";
+import { set_container, isolate_container, heading, inline_container, setcontainer_section_text } from "./SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
+import { heroSupertag } from "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import "../HeroBanner/SelectionBanner.css.js";
-import { set_container, inline_container } from "./SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
@@ -67,6 +73,7 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+import "../HeroBanner/SelectionBanner.css.js";
 const SetContainer = ({
   id,
   variant,
@@ -74,27 +81,43 @@ const SetContainer = ({
   bodyCopy,
   additionalDetails,
   children,
-  internalName
+  internalName,
+  icon,
+  eyebrow,
+  style,
+  isolate
 }) => {
-  const billboard_variant = getVariant(variant);
+  const container_variant = getVariant(variant);
   return /* @__PURE__ */ jsx(
     "section",
     {
       id: internalName ? internalName?.replace(/ /g, "-") : "",
-      className: clsx(set_container({ variant: getVariant(variant) })),
+      className: clsx(
+        set_container({ variant: container_variant }),
+        isolate ? isolate_container({ variant: container_variant }) : ""
+      ),
+      style: { ...style },
       children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
-        (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
+        (headline || bodyCopy || icon) && /* @__PURE__ */ jsxs("div", { className: heading, children: [
+          icon && /* @__PURE__ */ jsx("div", { className: "mb_16", children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+          eyebrow && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `mb_32 ${heroSupertag({ variant: container_variant })}`,
+              children: eyebrow
+            }
+          ),
           headline && /* @__PURE__ */ jsx(
             "h2",
             {
-              className: `header_2 ${header_section({ variant: billboard_variant })}`,
+              className: `header_2 mb_16 ${header_section({ variant: container_variant })}`,
               children: headline
             }
           ),
-          bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+          bodyCopy && /* @__PURE__ */ jsx("div", { className: "push_up", children: bodyCopy })
         ] }),
         /* @__PURE__ */ jsx("div", { className: inline_container, children }),
-        additionalDetails && /* @__PURE__ */ jsx("div", { className: clsx(section_text), children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
+        additionalDetails && /* @__PURE__ */ jsx("div", { className: clsx(setcontainer_section_text), children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
       ] })
     },
     id

package/dist/SetContainer/index.js

@@ -1,8 +1,12 @@
 import { SetContainer } from "./SetContainer.js";
-import { imageLinkContainer, inline_container, set_container } from "./SetContainer.css.js";
+import { heading, imageLinkContainer, inline_container, isolate_container, set_container, set_logo, setcontainer_section_text } from "./SetContainer.css.js";
 export {
   SetContainer,
+  heading,
   imageLinkContainer,
   inline_container,
-  set_container
+  isolate_container,
+  set_container,
+  set_logo,
+  setcontainer_section_text
 };

package/dist/Tab/Tab.css.d.ts

@@ -0,0 +1,37 @@
+export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const active_tab: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const active_content: string;

package/dist/Tab/Tab.css.js

@@ -0,0 +1,13 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                       */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var tab = createRuntimeFn({ defaultClassName: "lhhm340", variantClassNames: { variant: { primary: "lhhm341", secondary: "lhhm342", tertiary: "lhhm343", quaternary: "lhhm344" } }, defaultVariants: {}, compoundVariants: [] });
+var active_tab = createRuntimeFn({ defaultClassName: "lhhm345", variantClassNames: { variant: { primary: "lhhm346", secondary: "lhhm347", tertiary: "lhhm348", quaternary: "lhhm349" } }, defaultVariants: {}, compoundVariants: [] });
+var active_content = "lhhm34a";
+export {
+  active_content,
+  active_tab,
+  tab
+};

package/dist/Tab/Tab.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+export interface TabProps {
+    headline: ReactNode | string;
+    id?: string;
+    className?: string;
+    onClick: () => void;
+    variant: string;
+}
+export declare const Tab: ({ id, headline, className, onClick, variant, }: TabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tab/Tab.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { tab } from "./Tab.css.js";
+const Tab = ({
+  id,
+  headline,
+  className,
+  onClick,
+  variant
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx(tab({ variant: getVariant(variant) }), className),
+      id,
+      onClick: () => onClick(),
+      children: headline
+    },
+    id
+  );
+};
+export {
+  Tab
+};

package/dist/Tab/TabContainer.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export declare const TabContainer: ({ className, children, }: {
+    className?: string;
+} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/Tab/TabContainer.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+const TabContainer = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+export {
+  TabContainer
+};

package/dist/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './TabContainer';

package/dist/Tab/index.js

@@ -0,0 +1,6 @@
+import { Tab } from "./Tab.js";
+import { TabContainer } from "./TabContainer.js";
+export {
+  Tab,
+  TabContainer
+};

package/dist/TopicalNavItem/TopicalNavItem.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { ImageInterface } from '../IconBillboard';
+import { FC } from 'react';
 
 export interface TopicalItemProps {
     id: string;

package/dist/TopicalNavItem/TopicalNavItem.js

@@ -6,40 +6,49 @@ const TopicalNavItem = ({
   displayText,
   targetUrl
 }) => {
-  return /* @__PURE__ */ jsxs("a", { className: picker_navItem, href: targetUrl, id: `id_${id}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: picker_itemContent, children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: icon?.src,
-          alt: "",
-          className: picker_navIcon,
-          width: 24,
-          height: 24,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx("p", { className: picker_itemProduct, children: displayText })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: picker_arrow,
-        width: "12",
-        height: "20",
-        viewBox: "0 0 12 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
-          "path",
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      className: picker_navItem,
+      href: targetUrl,
+      id: `id_${id}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: picker_itemContent, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: icon?.src,
+              alt: "",
+              className: picker_navIcon,
+              width: 24,
+              height: 24,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: picker_itemProduct, children: displayText })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "svg",
           {
-            d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
-            fill: "#4A5560"
+            className: picker_arrow,
+            width: "12",
+            height: "20",
+            viewBox: "0 0 12 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
+                fill: "#4A5560"
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    },
+    `id_${id}`
+  );
 };
 export {
   TopicalNavItem

package/dist/TopicalNavSet/TopicalNavSet.js

@@ -1,11 +1,11 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { picker_section, picker_container, picker_orient } from "./TopicalNavSet.css.js";
+import { jsx } from "react/jsx-runtime";
 import { TopicalNavItem } from "../TopicalNavItem/TopicalNavItem.js";
+import { picker_section, picker_container, picker_orient } from "./TopicalNavSet.css.js";
 const TopicalNavSet = ({
   id,
   topicalNavigationItems
 }) => {
-  return /* @__PURE__ */ jsx("nav", { className: picker_section, children: /* @__PURE__ */ jsx("div", { className: picker_container, children: /* @__PURE__ */ jsx("div", { className: `${picker_orient} flex`, children: topicalNavigationItems?.map((nav, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("nav", { className: picker_section, children: /* @__PURE__ */ jsx("div", { className: picker_container, children: /* @__PURE__ */ jsx("div", { className: `${picker_orient} flex`, children: topicalNavigationItems?.map((nav) => /* @__PURE__ */ jsx(
     TopicalNavItem,
     {
       id: `id_${id}`,
@@ -13,8 +13,8 @@ const TopicalNavSet = ({
       displayText: nav?.displayText,
       targetUrl: nav?.targetUrl
     },
-    index
-  ) })) }) }) });
+    `id_${id}`
+  )) }) }) });
 };
 export {
   TopicalNavSet

package/dist/VideoTile/VideoTile.interface.d.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface VideoTileInterface {
     id: string;
     title: string;
@@ -7,4 +9,5 @@ export interface VideoTileInterface {
     maxWidth: string | number;
     videoPlayer: string;
     transcript: string;
+    description?: string | ReactNode;
 }

package/dist/VideoTile/VideoTile.js

@@ -21,7 +21,8 @@ const VideoTile = ({
   maxWidth = "588px",
   videoPlayer,
   transcript,
-  id
+  id,
+  description
 }) => {
   const [on, toggle] = useToggle(false);
   const handleToggleClick = (event) => {
@@ -32,6 +33,7 @@ const VideoTile = ({
     /* @__PURE__ */ jsx(VideoInit, {}),
     /* @__PURE__ */ jsxs("div", { className: `containment ${video_container} flex_col`, children: [
       title && /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: "push_up", children: description }),
       /* @__PURE__ */ jsx(
         "div",
         {

package/dist/assets/CallToActionBar/CallToActionBar.css

@@ -10,69 +10,78 @@
   align-items: center;
 }
 ._1tdyl741 {
-  height: -webkit-fit-content;
+  height: 100%;
 }
 ._1tdyl742 {
+  height: -webkit-fit-content;
+}
+._1tdyl743 {
   width: 256px;
   height: 256px;
 }
-._1tdyl743 {
+._1tdyl744 {
   width: 491px;
   height: 256px;
 }
-._1tdyl744 {
+._1tdyl745 {
   width: 160px;
   height: 160px;
 }
-._1tdyl745 {
+._1tdyl746 {
   width: 306px;
   height: 160px;
 }
-._1tdyl746 {
+._1tdyl747 {
   height: 256px;
 }
-._1tdyl747 {
+._1tdyl748 {
   height: 216px;
 }
-._1tdyl748 {
+._1tdyl749 {
   height: 160px;
 }
-._1tdyl749 {
+._1tdyl74a {
   height: 120px;
 }
-._1tdyl74a {
+._1tdyl74b {
   height: 88px;
 }
-._1tdyl74b {
+._1tdyl74c {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 24px;
 }
-._1tdyl74c {
+._1tdyl74d {
   position: relative;
   top: -20px;
+  max-height: 200px;
 }
-._1tdyl74e {
+._1tdyl74f {
   filter: drop-shadow(0 1px 3px rgb(255 255 255/0.4));
 }
-._1tdyl74e .containment .promo_wrapper {
+._1tdyl74f .containment .promo_wrapper {
   min-height: 0;
 }
-._1tdyl74f {
+._1tdyl74g {
   position: fixed;
   top: 10px;
   z-index: 999;
   animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
   margin: -10px 0;
 }
-._1tdyl74g {
+._1tdyl741 > img {
+  flex: 0 0 316px;
+  max-width: fit-content;
+  height: 100%;
+}
+._1tdyl74h {
   gap: 24px;
 }
-._1tdyl74g .sc__btn {
+._1tdyl74h .sc__btn {
   margin-left: 0;
 }
-._1tdyl746 ._1tdyl74g, ._1tdyl747 ._1tdyl74g {
+._1tdyl747 ._1tdyl74h, ._1tdyl748 ._1tdyl74h {
   margin-top: 24px;
 }
 @media screen and (max-width:1127px) {
@@ -95,14 +104,14 @@
   ._1tdyl740 .flex {
     flex-direction: column;
   }
-  ._1tdyl74d {
+  ._1tdyl74e {
     text-align: center;
     flex-direction: column;
   }
-  ._1tdyl74d p {
+  ._1tdyl74e p {
     margin-top: 8px;
   }
-  ._1tdyl74f {
+  ._1tdyl74g {
     position: fixed;
     top: 10px;
     z-index: 999;
@@ -113,15 +122,14 @@
   ._1tdyl741 > img {
     position: unset;
     margin-top: 32px;
-    width: 375px !important;
-    height: 196px !important;
+    max-height: 200px;
     object-fit: cover;
   }
-  ._1tdyl74g {
+  ._1tdyl74h {
     justify-content: center;
     padding: 24px;
   }
-  ._1tdyl74h {
+  ._1tdyl74i {
     margin-top: 1rem;
   }
 }
@@ -129,19 +137,19 @@
   ._1tdyl740 .flex {
     gap: 24px;
   }
-  ._1tdyl74d {
+  ._1tdyl74e {
     gap: 24px;
   }
 }
 @media screen and (max-width:510px) {
-  ._1tdyl74g {
+  ._1tdyl74h {
     gap: 24px;
     flex-direction: column;
     margin-right: 0;
   }
 }
 @media screen and (max-width: 1023px) {
-  ._1tdyl746 ._1tdyl74g, ._1tdyl747 ._1tdyl74g {
+  ._1tdyl747 ._1tdyl74h, ._1tdyl748 ._1tdyl74h {
     margin-top: 0;
   }
 }

package/dist/assets/Carousel/Carousel.css

@@ -76,6 +76,7 @@
   gap: 10px;
   text-align: center;
   justify-content: center;
+  font-style: normal;
 }
 .jgs3fsh {
   font-size: 18px;
@@ -120,6 +121,7 @@
 }
 .jgs3fsq {
   display: flex;
+  justify-content: center;
 }
 .jgs3fsr {
   display: flex;