@deriv-web-design/ui 0.0.14 → 0.0.17

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 (10) hide show
  1. package/dist/index.css +384 -161
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +65 -11
  4. package/dist/index.d.ts +65 -11
  5. package/dist/index.js +849 -345
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +793 -292
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +5 -4
  10. package/tokens.css +67 -19
package/dist/index.d.mts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
3
+ import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
4
+ import { DotLottieReact } from '@lottiefiles/dotlottie-react';
4
5
 
5
6
  type ButtonColorScheme = "coral" | "black" | "white";
6
7
  type ButtonVariant = "primary" | "secondary";
@@ -516,8 +517,8 @@ interface StatsProps extends HTMLAttributes<HTMLElement> {
516
517
 
517
518
  declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
518
519
 
519
- interface ScrollytellingItem {
520
- /** Short market name, e.g. "Forex" */
520
+ interface FeatureScrollItem {
521
+ /** Short feature name, e.g. "Forex" */
521
522
  title: string;
522
523
  /** Body copy below the title */
523
524
  description: string;
@@ -535,14 +536,14 @@ interface ScrollytellingItem {
535
536
  /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
536
537
  mediaUrl: string;
537
538
  }
538
- interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
539
+ interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
539
540
  /** Section heading rendered as an H2 */
540
541
  header: string;
541
542
  /**
542
- * Ordered list of market items.
543
- * Drives both the desktop scrollytelling and the mobile stacked layout.
543
+ * Ordered list of feature items.
544
+ * Drives both the desktop scroll-driven layout and the mobile stacked layout.
544
545
  */
545
- items: ScrollytellingItem[];
546
+ items: FeatureScrollItem[];
546
547
  /**
547
548
  * Controls which side the sticky media column sits on.
548
549
  * @default "media-right"
@@ -550,8 +551,24 @@ interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
550
551
  variant?: "media-left" | "media-right";
551
552
  }
552
553
 
553
- declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
554
- declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => react_jsx_runtime.JSX.Element;
554
+ declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
555
+ declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
556
+
557
+ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autoplay" | "loop" | "dotLottieRefCallback"> & {
558
+ /**
559
+ * When false, playback is stopped (e.g. inactive slide in a stacked player).
560
+ * When true, plays once whenever the instance is both enabled and intersecting.
561
+ */
562
+ enabled?: boolean;
563
+ rootMargin?: string;
564
+ threshold?: number | number[];
565
+ };
566
+ /**
567
+ * Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
568
+ * When it enters view again, it plays once more. Set `enabled={false}` to force stop
569
+ * (e.g. hidden slides) without relying on geometry alone.
570
+ */
571
+ declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
555
572
 
556
573
  /** Visual colour theme for each card — matches the Figma palette. */
557
574
  type StickyCardTheme = "light" | "coral" | "dark";
@@ -737,9 +754,37 @@ interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
737
754
  ctaLabel?: string;
738
755
  /** href for the CTA button */
739
756
  ctaHref?: string;
757
+ /** When true, the CTA button is omitted (e.g. hero blocks that end on copy only). */
758
+ hideCta?: boolean;
759
+ /** Headline typography scale — maps to global `--typography-h1-*` or `--typography-h2-*` tokens. */
760
+ headlineLevel?: "h1" | "h2";
761
+ /** Description typography scale — maps to `--typography-body-md-*` or `--typography-body-lg-*` tokens. */
762
+ descriptionLevel?: "body-md" | "body-lg";
763
+ /**
764
+ * Webflow-style headline: fixed `prefix` plus `dayWord` / `nightWord` overlaid and scroll-crossfaded
765
+ * (same pattern as `DayNightTransitionV2` HTML: “Trade all ” + day + night).
766
+ */
767
+ inlineDayNightHeadline?: {
768
+ prefix: string;
769
+ dayWord: string;
770
+ nightWord: string;
771
+ };
772
+ /**
773
+ * `"webflow-day-night-v2"` replays IX2 scroll curves from Webflow export `DayNightTransitionV2`
774
+ * (`SCROLLING_IN_VIEW` + `SCROLL_PROGRESS` actionLists `a` / `a-2` in `js/webflow.js`).
775
+ */
776
+ scrollPreset?: "default" | "webflow-day-night-v2";
740
777
  }
741
778
 
742
- declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
779
+ declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, hideCta, headlineLevel, descriptionLevel, inlineDayNightHeadline, scrollPreset, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
780
+
781
+ /**
782
+ * **DayNightTransitionV2** Storybook preset: same headlines, body copy, CTA, and
783
+ * typography defaults (h2 + body-md) as the **Default** story; Webflow IX2 scroll
784
+ * timing via `scrollPreset: "webflow-day-night-v2"` plus `dnt--layout-v2` /
785
+ * `dnt--webflow-v2` for layout and backgrounds.
786
+ */
787
+ declare const dayNightTransitionV2Preset: Pick<DayNightTransitionProps, "className" | "dayImageUrl" | "nightImageUrl" | "dayHeadline" | "nightHeadline" | "dayDescription" | "nightDescription" | "ctaLabel" | "ctaHref" | "scrollPreset">;
743
788
 
744
789
  interface LogoItem {
745
790
  name: string;
@@ -846,4 +891,13 @@ interface DownloadBannerProps {
846
891
 
847
892
  declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
848
893
 
849
- export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
894
+ interface TextScrollProps {
895
+ /** The large body copy that animates word-by-word on scroll */
896
+ text: string;
897
+ /** Additional class names forwarded to the section root */
898
+ className?: string;
899
+ }
900
+
901
+ declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
902
+
903
+ export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
3
+ import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
4
+ import { DotLottieReact } from '@lottiefiles/dotlottie-react';
4
5
 
5
6
  type ButtonColorScheme = "coral" | "black" | "white";
6
7
  type ButtonVariant = "primary" | "secondary";
@@ -516,8 +517,8 @@ interface StatsProps extends HTMLAttributes<HTMLElement> {
516
517
 
517
518
  declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
518
519
 
519
- interface ScrollytellingItem {
520
- /** Short market name, e.g. "Forex" */
520
+ interface FeatureScrollItem {
521
+ /** Short feature name, e.g. "Forex" */
521
522
  title: string;
522
523
  /** Body copy below the title */
523
524
  description: string;
@@ -535,14 +536,14 @@ interface ScrollytellingItem {
535
536
  /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
536
537
  mediaUrl: string;
537
538
  }
538
- interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
539
+ interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
539
540
  /** Section heading rendered as an H2 */
540
541
  header: string;
541
542
  /**
542
- * Ordered list of market items.
543
- * Drives both the desktop scrollytelling and the mobile stacked layout.
543
+ * Ordered list of feature items.
544
+ * Drives both the desktop scroll-driven layout and the mobile stacked layout.
544
545
  */
545
- items: ScrollytellingItem[];
546
+ items: FeatureScrollItem[];
546
547
  /**
547
548
  * Controls which side the sticky media column sits on.
548
549
  * @default "media-right"
@@ -550,8 +551,24 @@ interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
550
551
  variant?: "media-left" | "media-right";
551
552
  }
552
553
 
553
- declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
554
- declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => react_jsx_runtime.JSX.Element;
554
+ declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
555
+ declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
556
+
557
+ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autoplay" | "loop" | "dotLottieRefCallback"> & {
558
+ /**
559
+ * When false, playback is stopped (e.g. inactive slide in a stacked player).
560
+ * When true, plays once whenever the instance is both enabled and intersecting.
561
+ */
562
+ enabled?: boolean;
563
+ rootMargin?: string;
564
+ threshold?: number | number[];
565
+ };
566
+ /**
567
+ * Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
568
+ * When it enters view again, it plays once more. Set `enabled={false}` to force stop
569
+ * (e.g. hidden slides) without relying on geometry alone.
570
+ */
571
+ declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
555
572
 
556
573
  /** Visual colour theme for each card — matches the Figma palette. */
557
574
  type StickyCardTheme = "light" | "coral" | "dark";
@@ -737,9 +754,37 @@ interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
737
754
  ctaLabel?: string;
738
755
  /** href for the CTA button */
739
756
  ctaHref?: string;
757
+ /** When true, the CTA button is omitted (e.g. hero blocks that end on copy only). */
758
+ hideCta?: boolean;
759
+ /** Headline typography scale — maps to global `--typography-h1-*` or `--typography-h2-*` tokens. */
760
+ headlineLevel?: "h1" | "h2";
761
+ /** Description typography scale — maps to `--typography-body-md-*` or `--typography-body-lg-*` tokens. */
762
+ descriptionLevel?: "body-md" | "body-lg";
763
+ /**
764
+ * Webflow-style headline: fixed `prefix` plus `dayWord` / `nightWord` overlaid and scroll-crossfaded
765
+ * (same pattern as `DayNightTransitionV2` HTML: “Trade all ” + day + night).
766
+ */
767
+ inlineDayNightHeadline?: {
768
+ prefix: string;
769
+ dayWord: string;
770
+ nightWord: string;
771
+ };
772
+ /**
773
+ * `"webflow-day-night-v2"` replays IX2 scroll curves from Webflow export `DayNightTransitionV2`
774
+ * (`SCROLLING_IN_VIEW` + `SCROLL_PROGRESS` actionLists `a` / `a-2` in `js/webflow.js`).
775
+ */
776
+ scrollPreset?: "default" | "webflow-day-night-v2";
740
777
  }
741
778
 
742
- declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
779
+ declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, hideCta, headlineLevel, descriptionLevel, inlineDayNightHeadline, scrollPreset, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
780
+
781
+ /**
782
+ * **DayNightTransitionV2** Storybook preset: same headlines, body copy, CTA, and
783
+ * typography defaults (h2 + body-md) as the **Default** story; Webflow IX2 scroll
784
+ * timing via `scrollPreset: "webflow-day-night-v2"` plus `dnt--layout-v2` /
785
+ * `dnt--webflow-v2` for layout and backgrounds.
786
+ */
787
+ declare const dayNightTransitionV2Preset: Pick<DayNightTransitionProps, "className" | "dayImageUrl" | "nightImageUrl" | "dayHeadline" | "nightHeadline" | "dayDescription" | "nightDescription" | "ctaLabel" | "ctaHref" | "scrollPreset">;
743
788
 
744
789
  interface LogoItem {
745
790
  name: string;
@@ -846,4 +891,13 @@ interface DownloadBannerProps {
846
891
 
847
892
  declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
848
893
 
849
- export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
894
+ interface TextScrollProps {
895
+ /** The large body copy that animates word-by-word on scroll */
896
+ text: string;
897
+ /** Additional class names forwarded to the section root */
898
+ className?: string;
899
+ }
900
+
901
+ declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
902
+
903
+ export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };