@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/build/components/types/src/components/Megamenu/Megamenu.static.d.ts

@@ -8,21 +8,37 @@ export default class Megamenu {
     config: Required<MegamenuConfig>;
     toggleButtons: NodeListOf<HTMLButtonElement>;
     dropdowns: NodeListOf<HTMLElement>;
-    mobileMenuButton: HTMLButtonElement | null;
-    mobileMenu: HTMLElement | null;
-    mobileOverlay: HTMLElement | null;
-    mobileCloseButton: HTMLButtonElement | null;
+    mobileMenuButtons: HTMLButtonElement[];
+    mobilePanels: HTMLElement[];
+    mobileCloseButtons: HTMLButtonElement[];
+    activeMobilePanel: HTMLElement | null;
+    activeMobileTarget: string | null;
     desktopOverlay: HTMLButtonElement | null;
     accordionButtons: NodeListOf<HTMLButtonElement>;
+    desktopOverlayClickHandler: (event: Event) => void;
+    mobileCloseHandler: (event: Event) => void;
     focusTrapHandler: (event: KeyboardEvent) => void;
+    focusTrapElement: HTMLElement | null;
     lastFocusedElement: HTMLElement | null;
     isKeyboardUser: boolean;
     keydownHandler: (e: KeyboardEvent) => void;
     mousedownHandler: () => void;
     touchstartHandler: () => void;
+    instanceName: string;
+    private isModalOpen;
+    private getLockedScrollTop;
+    private getEffectiveScrollY;
     constructor(element: HTMLElement, config?: MegamenuConfig);
     static getInstance(el: HTMLElement): Megamenu | null;
     init(): void;
+    shouldUseMobileTrigger(button: HTMLButtonElement): boolean;
+    getDefaultMobileTarget(): string;
+    getTargetFromElement(control: HTMLElement | null): string;
+    getPanelByTarget(target: string): HTMLElement | null;
+    syncMobileButtonState(): void;
+    isInMobilePanel(element: HTMLElement | null): boolean;
+    getFocusRestoreTarget(): HTMLElement | null;
+    setMobilePanelState(panel: HTMLElement, isOpen: boolean): void;
     handleToggleClick(event: Event): void;
     handleKeyPress(event: KeyboardEvent): void;
     handleAccordionClick(event: Event): void;
@@ -31,7 +47,7 @@ export default class Megamenu {
     closeDropdown(button: HTMLButtonElement): void;
     closeAllDropdowns(): void;
     handleMobileMenuToggle(event: Event): void;
-    openMobileMenu(): void;
+    openMobileMenu(target?: string, source?: HTMLElement): void;
     closeMobileMenu(): void;
     showDesktopOverlay(): void;
     hideDesktopOverlay(): void;

package/build/components/types/src/components/Megamenu/MegamenuBlog.d.ts

@@ -1 +1,2 @@
-export declare const MegamenuBlog: ({ className }: any) => import("react").JSX.Element;
+import { MegamenuProps } from "./Megamenu";
+export declare const MegamenuBlog: ({ className, title, isSticky, searchEmpty, searchFilled, compactLogoOnly, }: MegamenuProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/types/src/components/Megamenu/MegamenuSearchContent.d.ts

@@ -0,0 +1,10 @@
+type MegamenuSearchContentProps = {
+    inputId: string;
+    inputLabel: string;
+    searchValue: string;
+    hasSearchEmpty: boolean;
+    hasSearchFilled: boolean;
+    emptyStateLinkHref?: string;
+};
+export declare const MegamenuSearchContent: ({ inputId, inputLabel, searchValue, hasSearchEmpty, hasSearchFilled, emptyStateLinkHref, }: MegamenuSearchContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/types/src/components/Megamenu/MyOrangeMobilePanel.d.ts

@@ -0,0 +1,6 @@
+type MyOrangeMobilePanelProps = {
+    titleId: string;
+    panelId?: string;
+};
+export declare const MyOrangeMobilePanel: ({ titleId, panelId, }: MyOrangeMobilePanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/types/src/components/Megamenu/constants.d.ts

@@ -8,12 +8,17 @@ export declare const CLASS_CARD = "megamenu__card";
 export declare const CLASS_NAV = "megamenu__nav";
 export declare const CLASS_NAV_VERTICAL = "megamenu__nav--vertical";
 export declare const CLASS_NAV_SPACE_SMALL = "megamenu__nav--space-small";
+export declare const CLASS_NAV_MOBILE_LOCALE = "megamenu__nav--mobile-locale";
 export declare const CLASS_NAV_ITEM = "megamenu__nav-item";
+export declare const CLASS_NAV_ITEM_LEAD = "megamenu__nav-item--lead";
 export declare const CLASS_NAV_ITEM_MAIN = "megamenu__nav-item--main";
 export declare const CLASS_NAV_LINK = "megamenu__nav-link";
+export declare const CLASS_NAV_LINK_LOCALE = "megamenu__nav-link--locale";
+export declare const CLASS_NAV_LINK_NO_LINE = "megamenu__nav-link--no-line";
 export declare const CLASS_NAV_CART_ICON = "megamenu__nav-cart-icon";
 export declare const CLASS_NAV_SPACER = "megamenu__nav-spacer";
 export declare const CLASS_NAV_ICON = "megamenu__nav-icon";
+export declare const CLASS_NAV_ICON_NO_GAP_MD_DOWN = "megamenu__nav-icon--no-gap-md-down";
 export declare const CLASS_NAV_LOGO = "megamenu__nav-logo";
 export declare const CLASS_NAV_BUTTON = "megamenu__nav-button";
 export declare const CLASS_NAV_BUTTON_INDICATOR = "megamenu__nav-button--indicator";
@@ -24,6 +29,8 @@ export declare const CLASS_OVERLAY = "megamenu__overlay";
 export declare const CLASS_SPACER = "megamenu-spacer";
 export declare const CLASS_SPACER_SMALL = "megamenu-spacer--small";
 export declare const CLASS_TEXT_LARGE = "megamenu__text--large";
+export declare const CLASS_CAPTION = "megamenu__caption";
+export declare const CLASS_CAPTION_LARGE = "megamenu__caption--large";
 export declare const CLASS_HIDE_MD_DOWN = "megamenu--hide-md-down";
 export declare const CLASS_HIDE_LG_UP = "megamenu--hide-lg-up";
 export declare const CLASS_ALIGN_CENTER = "megamenu--align-center";
@@ -32,6 +39,14 @@ export declare const CLASS_MOBILE_OVERLAY = "megamenu__mobile-overlay";
 export declare const CLASS_MOBILE_WRAPPER = "megamenu__mobile-wrapper";
 export declare const CLASS_MOBILE_HEADER = "megamenu__mobile-header";
 export declare const CLASS_MOBILE_BODY = "megamenu__mobile-body";
+export declare const CLASS_MOBILE_ACCOUNT = "megamenu__mobile-account";
+export declare const CLASS_MOBILE_ACCOUNT_AVATAR = "megamenu__mobile-account-avatar";
+export declare const CLASS_MOBILE_ACCOUNT_NAME = "megamenu__mobile-account-name";
+export declare const CLASS_MOBILE_ACCOUNT_PHONE = "megamenu__mobile-account-phone";
+export declare const CLASS_MOBILE_ACCOUNT_LOGOUT = "megamenu__mobile-account-logout";
+export declare const CLASS_MOBILE_ACCOUNT_CTA = "megamenu__mobile-account-cta";
+export declare const CLASS_MOBILE_ACCOUNT_LINKS = "megamenu__mobile-account-links";
+export declare const CLASS_MOBILE_ACCOUNT_LINK = "megamenu__mobile-account-link";
 export declare const CLASS_ACCORDION = "megamenu__accordion";
 export declare const CLASS_ACCORDION_ITEM = "megamenu__accordion-item";
 export declare const CLASS_ACCORDION_HEADER = "megamenu__accordion-header";
@@ -40,8 +55,14 @@ export declare const CLASS_ACCORDION_TITLE = "megamenu__accordion-title";
 export declare const CLASS_ACCORDION_ICON = "megamenu__accordion-icon";
 export declare const CLASS_ACCORDION_BODY = "megamenu__accordion-body";
 export declare const CLASS_INPUT = "megamenu__input";
+export declare const CLASS_INPUT_WRAPPER = "megamenu__input-wrapper";
+export declare const CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER = "megamenu__input-wrapper--search-icon-with-placeholder";
+export declare const CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE = "megamenu__input-wrapper--search-responsive";
 export declare const CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER = "megamenu__input--search-icon-with-placeholder";
+export declare const CLASS_INPUT_SEARCH_RESPONSIVE = "megamenu__input--search-responsive";
 export declare const CLASS_TAG = "megamenu__tag";
+export declare const CLASS_TAG_ORANGE = "megamenu__tag--orange";
+export declare const CLASS_TAG_SMALL = "megamenu__tag--small";
 export declare const CLASS_TAG_TRANSPARENT = "megamenu__tag--transparent";
 export declare const CLASS_TAG_LARGE = "megamenu__tag--large";
 export declare const CLASS_LIST_INLINE = "megamenu__list--inline";

package/build/components/types/src/components/Megamenu/data.d.ts

@@ -0,0 +1,21 @@
+export type MenuItem = {
+    label: string;
+    href?: string;
+    isLarge?: boolean;
+    tag?: string;
+};
+type MenuGroup = {
+    id: string;
+    heading: string;
+    items: MenuItem[];
+};
+export type MenuSection = {
+    id: string;
+    label: string;
+    featured: MenuGroup;
+    columns: MenuGroup[][];
+};
+export declare const menuSections: MenuSection[];
+export declare const searchTerms: string[];
+export declare const searchResultItems: string[];
+export {};

package/build/components/types/src/components/Megamenu/ids.d.ts

@@ -0,0 +1,11 @@
+export type MegamenuVariant = "main" | "blog";
+export type MegamenuIds = {
+    searchDropdownId: string;
+    searchInputDesktopId: string;
+    searchInputMobileId: string;
+    mobileMainPanelId: string;
+    mobileMainTitleId: string;
+    myOrangePanelId: string;
+    myOrangeTitleId: string;
+};
+export declare const getMegamenuIds: (variant: MegamenuVariant) => MegamenuIds;

package/build/components/types/src/components/Megamenu/index.d.ts

@@ -1,3 +1,3 @@
+export { MegamenuIcon } from "./MegaMenuIcon";
 export { Megamenu } from "./Megamenu";
 export { MegamenuBlog } from "./MegamenuBlog";
-export { MegamenuIcon } from "./MegaMenuIcon";

package/build/components/types/src/components/Megamenu/static.d.ts

@@ -1,5 +1,4 @@
 import Megamenu from "./Megamenu.static";
-import { initModulesWithin, destroyModulesWithin } from "../../scripts/lib/moduleFactory";
 import "./styles/style.scss";
 export declare const customMegamenuModuleSelectorPairs: {
     Module: typeof Megamenu;
@@ -13,8 +12,8 @@ declare global {
             instances: Megamenu[];
             init: () => void;
             destroy: () => void;
-            initModulesWithin: typeof initModulesWithin;
-            destroyModulesWithin: typeof destroyModulesWithin;
+            initModulesWithin: (container: any) => {};
+            destroyModulesWithin: (container: any, removeOrphanedNodes?: boolean | undefined) => {};
         };
     }
 }

package/build/components/types/src/components/Modal/Modal.d.ts

@@ -12,8 +12,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     id: string;
     /** isActive controls if modal is opened or closed */
     isActive?: boolean;
-    /** Disable plugin initialization. */
-    noInit?: boolean;
+    /** Callback fired when modal is closed */
+    onHide?: () => void;
     /** Custom header renderer. Receives id as function param. Returned element(s) must contain a header with close button. */
     renderHeader?: (id: string) => React.ReactNode;
     /** Custom body renderer. Receives title as function param. Returned element(s) must contain a title. */
@@ -30,12 +30,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Color scheme for the modal */
-    colorScheme?: "dark" | "light";
     /** Disables header paddings */
     disableHeaderSpacing?: boolean;
-    /** Disables body paddings */
-    disableBodySpacing?: boolean;
     /** Disables footer paddings */
     disableFooterSpacing?: boolean;
 }

package/build/components/types/src/components/Modal/Modal.static.d.ts

@@ -8,6 +8,8 @@ interface ModalConfig {
     root: string;
     /** Move modal into this element selector (must be unique in DOM) */
     modalsRoot: string;
+    /** Disable moving modal to #root-modals (for React controlled mode) */
+    disablePortal?: boolean;
 }
 interface HTMLElementWithModal extends HTMLElement {
     ODS_Modal?: Modal;
@@ -27,6 +29,8 @@ export default class Modal {
     destroy(): void;
     update(): void;
     static moveToModalRoot(el: HTMLElement, container: Element | null): void;
+    private static isLocked;
+    private static resolveBodyLockClassName;
     static lockBody(className?: string, root?: string): void;
     static unlockBody(className?: string, root?: string): void;
 }

package/build/components/types/src/components/Modal/ModalBody.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-export declare const colors: readonly ["white", "gray", "orange", "orange-dark", "black", "blue", "green", "pink", "violet", "yellow"];
-export type BodyColor = (typeof colors)[number];
+export declare const modalBodyColors: readonly ["background-primary", "background-secondary", "background-contrast", "background-accent", "background-accent1-blog", "background-accent2-blog", "surface-primary", "surface-secondary", "surface-tertiary", "surface-subtle", "surface-moderate", "surface-contrast", "surface-accent", "fill-subtle", "fill-accent1", "fill-accent2", "fill-accent3", "fill-accent4", "fill-accent5"];
+export type ModalBodyColor = (typeof modalBodyColors)[number];
 interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    color?: BodyColor;
+    color?: ModalBodyColor;
     className?: string;
     children?: React.ReactNode;
     withTopPadding?: boolean;

package/build/components/types/src/components/Modal/ModalCloseButton.d.ts

@@ -1,5 +1,5 @@
-import { IconButtonProps } from "../Button/IconButton";
 import { ButtonType } from "../Button/Button";
+import { IconButtonProps } from "../Button/IconButton";
 interface ExtendedIconButtonProps extends IconButtonProps {
     type?: ButtonType;
 }

package/build/components/types/src/components/Modal/ModalProductHeader.d.ts

@@ -3,6 +3,8 @@ interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     image?: React.ReactNode;
     /** Use small spacing */
     space?: "small";
+    /** Optional id for accessibility (e.g., for aria-labelledby) */
+    titleId?: string;
 }
 export declare const CLASS_ROOT = "modal__product";
 declare const ModalProductHeader: React.ForwardRefExoticComponent<ModalProductHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/types/src/components/Modal/index.d.ts

@@ -1,7 +1,6 @@
 export { Modal } from "./Modal";
 export { ModalBody } from "./ModalBody";
-export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
-export { ModalProductHeader } from "./ModalProductHeader";
 export { ModalProductFooter } from "./ModalProductFooter";
-export { ModalProductBody } from "./ModalProductBody";
+export { ModalProductHeader } from "./ModalProductHeader";
+export { ModalTitle } from "./ModalTitle";

package/build/components/types/src/components/Pagination/Pagination.d.ts

@@ -12,8 +12,6 @@ interface PaginationItemProps {
 interface PaginationProps {
     /** Collapsed version */
     isCompact?: boolean;
-    /** Dark theme */
-    colorScheme?: "light" | "dark";
     /** All pagination items - buttons & numbers */
     items: PaginationItemProps[];
     /** Accessibility label */

package/build/components/types/src/components/Pagination/Separator.d.ts

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 declare const Separator: {
-    (props: HTMLAttributes<HTMLLIElement>): React.JSX.Element;
+    (props: HTMLAttributes<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Separator;

package/build/components/types/src/components/Pagination/helpers.d.ts

@@ -19,5 +19,5 @@ interface ItemState {
     hasIcon: boolean;
     showSeparator: boolean;
 }
-export declare function getItemState({ activeIndex, items, isCompact, index }: GetItemStateParams): ItemState;
+export declare function getItemState({ activeIndex, items, isCompact, index, }: GetItemStateParams): ItemState;
 export {};

package/build/components/types/src/components/Pill/Pill.d.ts

@@ -1,12 +1,11 @@
-import React, { ReactNode, HTMLAttributes } from "react";
-export declare const pillColors: readonly ["white", "gray", "transparent"];
+import React, { HTMLAttributes, ReactNode } from "react";
+export declare const pillColors: readonly ["surface-primary", "surface-secondary", "surface-tertiary", "surface-subtle", "surface-moderate", "surface-contrast", "surface-accent", "fill-moderate", "fill-disabled", "transparent"];
 export type PillColor = (typeof pillColors)[number];
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
     children?: ReactNode;
     color?: PillColor;
     size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
-    colorScheme?: "light" | "dark";
 }
 declare const Pill: React.FC<PillProps>;
 export { Pill };

package/build/components/types/src/components/Preview/CodeExample.d.ts

@@ -3,6 +3,7 @@ interface CodeExampleProps {
     codeJSXOptions?: Record<string, any>;
     codeTypes?: string[];
     children?: ReactNode;
+    htmlThemeClass?: string;
     jsxCode?: string;
     htmlCode?: ReactNode;
     [key: string]: any;

package/build/components/types/src/components/Preview/Preview.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
 import type { ReactNode } from "react";
+import React from "react";
 import { PreviewGenerator } from "./PreviewGenerator";
 type PreviewProps = React.ComponentProps<typeof PreviewGenerator> & {
     codeJSXOptions?: Record<string, any>;
     children: ReactNode;
 };
-export declare function Preview({ children, codeJSXOptions, codeTypes, ...rest }: PreviewProps): React.JSX.Element;
+export declare function Preview({ children, codeJSXOptions, codeTypes, ...rest }: PreviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/types/src/components/Preview/PreviewGenerator.d.ts

@@ -1,24 +1,28 @@
-import { ReactNode, FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 import "./styles/style.scss";
+interface PreviewRenderContext {
+    bgTheme: string;
+    bgThemeValue: string;
+    themeClass: string;
+    isDarkMode: boolean;
+}
 interface PreviewProps {
+    isDark?: boolean;
     bgTheme?: string | boolean;
     bgThemeColors?: Record<string, string>;
     bgThemeExcludedColors?: string[];
-    children?: ReactNode | ((context: {
-        bgTheme: string;
-        bgThemeValue: string;
-    }) => ReactNode);
+    children?: ReactNode | ((context: PreviewRenderContext) => ReactNode);
     className?: string;
-    code?: ReactNode | string | ((context: {
-        bgTheme: string;
-        bgThemeValue: string;
-    }) => ReactNode);
+    code?: ReactNode | string | ((context: PreviewRenderContext) => ReactNode);
     codeJSXOptions?: Record<string, any>;
     codeTypes?: string[];
     enableFullscreen?: boolean;
     hasCodePreview?: boolean;
+    hasMultipleCodeRoots?: boolean;
     html?: string;
     jsxCode?: string;
+    disableBreakpoints?: boolean;
+    showBreakpointControls?: boolean;
     [key: string]: any;
 }
 declare const PreviewGenerator: FunctionComponent<PreviewProps>;

package/build/components/types/src/components/Preview/getElementDisplayName.d.ts

@@ -0,0 +1 @@
+export declare const getElementDisplayName: (element: any) => string;

package/build/components/types/src/components/Preview/index.d.ts

@@ -5,5 +5,5 @@ interface ThemedPreviewProps {
     [key: string]: any;
 }
 declare const ThemedPreview: React.FC<ThemedPreviewProps>;
-export declare const PreviewSpacing: ({ children, spacePreviewConfig }: any) => React.JSX.Element;
+export declare const PreviewSpacing: ({ children, spacePreviewConfig }: any) => import("react/jsx-runtime").JSX.Element;
 export { ThemedPreview as Preview };

package/build/components/types/src/components/Progress/Progress.d.ts

@@ -10,6 +10,5 @@ export interface ProgressProps {
     width?: number;
     className?: string;
     children?: React.ReactNode;
-    colorMode?: "light" | "dark";
 }
 export declare const Progress: React.FC<ProgressProps>;

package/build/components/types/src/components/PromoBanner/PromoBanner.d.ts

@@ -1,12 +1,19 @@
 import React from "react";
 interface PromoBannerProps {
-    colorScheme?: "light" | "dark";
     className?: string;
-    title: string;
-    secondaryTitle?: string;
-    description: string;
-    buttonText: string;
     image?: string;
+    alignImage?: "bottom" | "top";
+    /** Remove top padding from item on sm and smaller breakpoints */
+    flushTopSmDown?: boolean;
+    /** Remove bottom padding from item on sm and smaller breakpoints */
+    flushBottomSmDown?: boolean;
+    imageFullWidth?: boolean;
+    /** Make image extend to the edge of viewport even when inside container */
+    bleedImage?: boolean;
+    children?: React.ReactNode;
+    itemClassName?: string;
+    imageClassName?: string;
+    variant?: "vertical" | "reverse";
 }
-export declare const PromoBanner: ({ title, secondaryTitle, description, buttonText, image, colorScheme, className, }: PromoBannerProps) => React.JSX.Element;
+export declare const PromoBanner: ({ image, className, alignImage, flushTopSmDown, flushBottomSmDown, bleedImage, children, itemClassName, imageClassName, variant, imageFullWidth, }: PromoBannerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/types/src/components/PromotionCard/PromotionCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
+import { CardColor } from "../Card";
 export interface PromotionCardProps {
-    /** Inverse colors */
-    colorScheme?: 'light' | 'dark';
     className?: string;
     children?: React.ReactNode;
+    color?: CardColor;
     [key: string]: any;
 }
 export declare const PromotionCard: React.FC<PromotionCardProps>;

package/build/components/types/src/components/PromotionCard/PromotionCardContent.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface PromotionCardContentProps {
     className?: string;
     children?: React.ReactNode;

package/build/components/types/src/components/PromotionCard/PromotionCardImageWrapper.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface PromotionCardImageWrapperProps {
     className?: string;
     children?: React.ReactNode;

package/build/components/types/src/components/PromotionCard/PromotionCardTitle.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface PromotionCardTitleProps {
     className?: string;
     children: React.ReactElement;

package/build/components/types/src/components/Section/Section.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export type SectionColor = "white" | "gray" | "black" | "orange" | "accent1-blog" | "accent2-blog";
+export declare const sectionColors: readonly ["background-secondary", "background-contrast", "background-accent", "background-accent1-blog", "background-accent2-blog", "background-none", "surface-subtle"];
+export type SectionColor = (typeof sectionColors)[number];
 export type SectionSpacing = "default" | "small" | "xsmall";
 export interface SectionProps {
     /** Background color of section */
@@ -19,5 +20,7 @@ export interface SectionProps {
     className?: string;
     /** Section content */
     children?: React.ReactNode;
+    /** Additional classes passed to the container */
+    containerClassName?: string;
 }
 export declare const Section: React.FC<SectionProps>;

package/build/components/types/src/components/SocialButton/SocialButton.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export type SocialName = "x" | "facebook-2" | "linkedin-2" | "instagram" | "pinterest" | "snapchat" | "tiktok" | "whatsapp" | "youtube" | "email";
+type CommonProps = {
+    name: SocialName;
+    className?: string;
+};
+type ButtonProps = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | keyof CommonProps>;
+type LinkProps = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    href: string;
+};
+export type SocialButtonProps = ButtonProps | LinkProps;
+export declare const SocialButton: React.ForwardRefExoticComponent<SocialButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/build/components/types/src/components/SocialButton/index.d.ts

@@ -0,0 +1 @@
+export { SocialButton } from "./SocialButton";

package/build/components/types/src/components/Stepbar/Stepbar.d.ts

@@ -14,8 +14,6 @@ export interface StepbarProps extends React.HTMLAttributes<HTMLElement> {
     showTitlesFrom?: ShowTitlesFrom;
     /** Array of step objects */
     steps: StepbarStep[];
-    /** Visual variant of the stepbar */
-    colorScheme?: "dark" | "light";
 }
 declare const Stepbar: React.FC<StepbarProps>;
 export { Stepbar };

package/build/components/types/src/components/Sticker/Sticker.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 interface StickerProps {
-    color?: 'black' | 'orange';
-    size?: 'small';
+    color?: "black" | "orange";
+    size?: "small";
     children?: React.ReactNode;
     className?: string;
     [key: string]: any;

package/build/components/types/src/components/Table/Row.d.ts

@@ -1,10 +1,9 @@
-import React from "react";
 import { TableRow } from "./types";
 interface RowProps {
     row: TableRow;
 }
 declare const Row: {
-    ({ row }: RowProps): React.JSX.Element[];
+    ({ row }: RowProps): import("react/jsx-runtime").JSX.Element[];
     displayName: string;
 };
 export { Row };

package/build/components/types/src/components/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TableHeader, TableRow, ExpandableRowsCaptions } from "./types";
+import { ExpandableRowsCaptions, TableHeader, TableRow } from "./types";
 interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /** Caption helps users with screen readers to find a table and understand what it's about and decide if they want to read it. */
     caption?: React.ReactNode;
@@ -10,6 +10,8 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     headers: TableHeader[];
     /** Compact table only takes spaced needed to display its content */
     isCompact?: boolean;
+    /** Enable responsive card layout below md breakpoint for better accessibility */
+    isResponsive?: boolean;
     /** If table has horizontal scrollbar */
     isScrollable?: boolean;
     /** Different colors for even and odd rows. */
@@ -17,8 +19,6 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /** rows to print out in the table. */
     rows: TableRow[];
     className?: string;
-    /** Sets color scheme */
-    colorScheme?: "dark" | "light";
 }
 declare const Table: React.FC<TableProps>;
 export { Table };

package/build/components/types/src/components/Table/docsData.d.ts

@@ -36,4 +36,6 @@ export declare const shrinkHeaders: TableHeader[];
 export declare const shrinkRows: TableRow[];
 export declare const fillHeaders: TableHeader[];
 export declare const fillRows: TableRow[];
+export declare const responsiveHeaders: TableHeader[];
+export declare const responsiveRows: TableRow[];
 export {};

package/build/components/types/src/components/Table/index.d.ts

@@ -1,2 +1,2 @@
-export { Table } from "./Table";
 export { Footer } from "./Footer";
+export { Table } from "./Table";

package/build/components/types/src/components/Table/types.d.ts

@@ -31,4 +31,5 @@ export interface TableContextType {
     rows: TableRow[];
     footers?: TableRow[];
     expandableRows?: ExpandableRows;
+    isResponsive?: boolean;
 }

package/build/components/types/src/components/Tabs/Tabs.d.ts

@@ -1,22 +1,16 @@
 import React from "react";
 import type { TabPanelProps } from "./TabPanel";
-export declare const variants: readonly ["standard", "light"];
-export type TabsVariant = (typeof variants)[number];
 interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
     /** Active Tab index */
     activeTabIndex?: number;
     /** Additional classes for tabs header. */
     classesTabNav?: string;
-    /** Color theme for the tabs */
-    colorScheme?: "dark" | "light";
     /** All tabs have equal width inside a full-width container */
     hasEqualTabWidth?: boolean;
     /** Fullwidth container */
     isFullWidth?: boolean;
     /** Tabs behave as links rather than tabs */
     isLink?: boolean;
-    /** Visual variant of the tabs */
-    variant?: TabsVariant;
     /** Tab panels as children */
     children: React.ReactElement<TabPanelProps>[];
 }