uikit-react-public 0.17.4 → 0.21.9

package/README.md

@@ -1,5 +1,3 @@
-# UIKit-React public
+# uikit-react-public
 
-```bash
-npm install uikit-react-public
-```
+Public npm distribution of the UCL React UI kit for external consumers who do not have access to the private internal registry.

package/dist/components/Accordion/Accordion.Heading.d.ts

@@ -1,5 +1,6 @@
 import { default as React, HTMLAttributes } from 'react';
 export declare const NAME = "ucl-uikit-accordion__heading";
+export declare const ICON_NAME = "ucl-uikit-accordion__heading__icon";
 export interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
     as?: keyof HTMLElementTagNameMap;
     testId?: string;

package/dist/components/AppHeader/AppHeader.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import { default as AppHeaderTop } from './AppHeaderTop';
 import { default as AppHeaderBottom } from './AppHeaderBottom';
 import { default as AppHeaderNav } from './AppHeaderNav';
-export declare const NAME = "ucl-timetable-app-header";
+export declare const NAME = "ucl-uikit-app-header";
 export declare const Z_INDEX = 3;
 export declare const HEIGHT: number;
 export interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/AppHeader/AppHeaderBottom.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare const NAME = "ucl-timetable-app-header__bottom";
+export declare const NAME = "ucl-uikit-app-header__bottom";
 export declare const HEIGHT = 48;
 export interface AppHeaderBottomProps extends HTMLAttributes<HTMLDivElement> {
     testId?: string;

package/dist/components/AppHeader/AppHeaderNav.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare const NAME = "ucl-timetable-app-header__nav";
+export declare const NAME = "ucl-uikit-app-header__nav";
 export interface AppHeaderNavProps extends HTMLAttributes<HTMLDivElement> {
     testId?: string;
 }

package/dist/components/AppHeader/AppHeaderTop.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare const NAME = "ucl-timetable-app-header__top";
+export declare const NAME = "ucl-uikit-app-header__top";
 export declare const HEIGHT = 56;
 export interface AppHeaderTopProps extends HTMLAttributes<HTMLDivElement> {
     uclLogo?: boolean;

package/dist/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,8 +1,7 @@
-import { LinkProps } from '../';
-export interface BreadcrumbProps extends LinkProps {
-    testId?: string;
+import { LinkProps } from '../Link';
+export interface BreadcrumbProps extends Omit<LinkProps<any>, 'href' | 'to'> {
     uri: string;
     isActive?: boolean;
 }
-declare const _default: import('react').MemoExoticComponent<({ testId, uri, className, children, isActive, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ testId, uri, className, children, isActive, component, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -4,6 +4,6 @@ export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
 }
 declare const Breadcrumbs: {
     ({ testId, className, children, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
-    Breadcrumb: React.MemoExoticComponent<({ testId, uri, className, children, isActive, ...props }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
+    Breadcrumb: React.MemoExoticComponent<({ testId, uri, className, children, isActive, component, ...props }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
 };
 export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -3,7 +3,7 @@ declare const meta: {
     title: string;
     component: {
         ({ testId, className, children, ...props }: import('./Breadcrumbs').BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
-        Breadcrumb: import('react').MemoExoticComponent<({ testId, uri, className, children, isActive, ...props }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
+        Breadcrumb: import('react').MemoExoticComponent<({ testId, uri, className, children, isActive, component, ...props }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
     };
     parameters: {
         layout: string;

package/dist/components/Button/Button.d.ts

@@ -2,10 +2,14 @@ import { ReactElement, ElementType, ComponentPropsWithRef } from 'react';
 import { MarginProps } from '../common/marginsStyle';
 export declare const NAME = "ucl-uikit-button";
 type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+export type ButtonVariant = 'accent' | 'primary' | 'secondary' | 'tertiary' | 'primary-subtle' | 'secondary-subtle' | 'tertiary-no-padding' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'primary-warning';
+type LegacySize = 'default';
 export interface ButtonBaseProps {
-    variant?: 'primary' | 'secondary' | 'tertiary';
+    variant?: ButtonVariant;
+    /** @deprecated Use variant="primary-destructive" / "secondary-destructive" instead */
     destructive?: boolean;
-    size?: 'large' | 'default' | 'small';
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | LegacySize;
+    selected?: boolean;
     disabled?: boolean;
     icon?: ReactElement;
     iconPosition?: 'left' | 'right';
@@ -19,6 +23,6 @@ export type ButtonProps<C extends ElementType = 'button'> = {
     ref?: PolymorphicRef<C>;
     className?: string;
 } & ButtonBaseProps & MarginProps & Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
-declare const Button: <C extends ElementType = "button">({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
+declare const Button: <C extends ElementType = "button">({ as, variant, destructive, size, selected, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
 declare const MemoizedButton: typeof Button;
 export default MemoizedButton;

package/dist/components/Button/Button.stories.d.ts

@@ -1,13 +1,13 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: <C extends import('react').ElementType = "button">({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button').ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
+    component: <C extends import('react').ElementType = "button">({ as, variant, destructive, size, selected, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button').ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
     argTypes: {
         variant: {
-            options: string[];
+            options: readonly ["accent", "primary", "secondary", "tertiary", "primary-subtle", "secondary-subtle", "tertiary-no-padding", "primary-destructive", "secondary-destructive", "tertiary-destructive", "primary-warning"];
             control: {
                 type: "select";
             };
@@ -19,6 +19,12 @@ declare const meta: {
                 type: "select";
             };
             type: "string";
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
         };
         as: {
             options: string[];
@@ -38,6 +44,13 @@ declare const meta: {
                 type: "boolean";
             };
             type: "boolean";
+            description: string;
+        };
+        selected: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
         };
         disabled: {
             control: {
@@ -222,15 +235,12 @@ export declare const Default: Story;
 export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Tertiary: Story;
+export declare const Accent: Story;
 export declare const Destructive: Story;
-export declare const DestructiveSecondary: Story;
+export declare const PrimarySubtle: Story;
 export declare const Small: Story;
 export declare const Large: Story;
-export declare const SmallSecondary: Story;
-export declare const LargeSecondary: Story;
 export declare const Disabled: Story;
-export declare const DisabledSecondary: Story;
-export declare const DisabledTertiary: Story;
 export declare const WithIcon: Story & {
     argTypes: {
         iconName: {

package/dist/components/Button/style/buttonAccentStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonAccentStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonAccentStyle;

package/dist/components/Button/style/buttonPrimaryDestructiveStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonPrimaryDestructiveStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonPrimaryDestructiveStyle;

package/dist/components/Button/style/buttonPrimaryStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonPrimaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonPrimaryStyle;

package/dist/components/Button/style/buttonPrimarySubtleStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonPrimarySubtleStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+export default buttonPrimarySubtleStyle;

package/dist/components/Button/style/buttonPrimaryWarningStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonPrimaryWarningStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonPrimaryWarningStyle;

package/dist/components/Button/style/buttonSecondaryDestructiveStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonSecondaryDestructiveStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonSecondaryDestructiveStyle;

package/dist/components/Button/style/buttonSecondaryStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonSecondaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonSecondaryStyle;

package/dist/components/Button/style/buttonSecondarySubtleStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonSecondarySubtleStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+export default buttonSecondarySubtleStyle;

package/dist/components/Button/style/buttonTertiaryDestructiveStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonTertiaryDestructiveStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+export default buttonTertiaryDestructiveStyle;

package/dist/components/Button/style/buttonTertiaryNoPaddingStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonTertiaryNoPaddingStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+export default buttonTertiaryNoPaddingStyle;

package/dist/components/Button/style/buttonTertiaryStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonTertiaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+export default buttonTertiaryStyle;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -4,6 +4,7 @@ export declare const NAME = "ucl-uikit-checkbox";
 export interface CheckboxBaseProps extends InputHTMLAttributes<HTMLInputElement> {
     indeterminate?: boolean;
     testId?: string;
+    ariaLabel?: string;
 }
 export type CheckboxProps = CheckboxBaseProps & MarginProps;
 export type Ref = HTMLInputElement;

package/dist/components/FooterNew/BackToTop.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-footer__back-to-top";
+export interface BackToTopProps extends HTMLAttributes<HTMLDivElement> {
+    compact?: boolean;
+    testId?: string;
+}
+declare const BackToTop: ({ compact, testId, className, ...props }: BackToTopProps) => import("react/jsx-runtime").JSX.Element;
+export default BackToTop;

package/dist/components/FooterNew/Footer.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { default as FooterColumn } from './FooterColumn';
+import { default as FooterNavLink } from './FooterNavLink';
+export declare const NAME = "ucl-uikit-footer";
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
+    testId?: string;
+    addressFormat?: 'compact' | 'full';
+    showSocialLinks?: boolean;
+    disclaimer?: string;
+    freedomOfInformation?: string;
+    accessibility?: string;
+    cookies?: string;
+    privacy?: string;
+    slaveryStatement?: string;
+    login?: string;
+}
+declare const MemoFooter: import('react').MemoExoticComponent<({ testId, className, addressFormat, showSocialLinks, disclaimer, freedomOfInformation, accessibility, cookies, privacy, slaveryStatement, login, children, ...props }: FooterProps) => import("react/jsx-runtime").JSX.Element>;
+export interface IFooterSubComponents {
+    Column: typeof FooterColumn;
+    NavLink: typeof FooterNavLink;
+}
+declare const FooterWithSubComponents: typeof MemoFooter & IFooterSubComponents;
+export default FooterWithSubComponents;

package/dist/components/FooterNew/FooterColumn.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-footer__column";
+export interface FooterColumnProps extends HTMLAttributes<HTMLDivElement> {
+    heading: string;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ heading, testId, className, children, ...props }: FooterColumnProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/FooterNew/FooterLinks.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-footer__links";
+export interface FooterLinksProps extends HTMLAttributes<HTMLElement> {
+    testId?: string;
+}
+declare const FooterLinks: ({ testId, className, children, ...props }: FooterLinksProps) => import("react/jsx-runtime").JSX.Element;
+export default FooterLinks;

package/dist/components/FooterNew/FooterNavLink.d.ts

@@ -0,0 +1,8 @@
+import { LinkProps } from '../..';
+export declare const NAME = "ucl-uikit-footer__nav-link";
+export interface FooterNavLinkProps extends LinkProps {
+    href: string;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ href, testId, className, children, ...props }: FooterNavLinkProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/FooterNew/LegalAndCopyright.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-footer__legal-and-copyright";
+export interface LegalAndCopyrightProps extends HTMLAttributes<HTMLDivElement> {
+    disclaimer: string;
+    freedomOfInformation: string;
+    accessibility: string;
+    cookies: string;
+    privacy: string;
+    slaveryStatement: string;
+    login?: string;
+    testId?: string;
+}
+declare const LegalAndCopyright: ({ disclaimer, freedomOfInformation, accessibility, cookies, privacy, slaveryStatement, login, testId, className, ...props }: LegalAndCopyrightProps) => import("react/jsx-runtime").JSX.Element;
+export default LegalAndCopyright;

package/dist/components/FooterNew/LogoAddressAndSocial.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-footer__logo-address-social";
+export interface LogoAddressAndSocialProps extends HTMLAttributes<HTMLDivElement> {
+    compact?: boolean;
+    addressFormat: 'compact' | 'full';
+    showSocialLinks?: boolean;
+    testId?: string;
+}
+declare const LogoAddressAndSocial: ({ compact, addressFormat, showSocialLinks, testId, className, ...props }: LogoAddressAndSocialProps) => import("react/jsx-runtime").JSX.Element;
+export default LogoAddressAndSocial;

package/dist/components/FooterNew/SocialLink.d.ts

@@ -0,0 +1,8 @@
+import { LinkProps } from '../..';
+export declare const NAME = "ucl-uikit-footer__social-link";
+export interface SocialLinkProps extends LinkProps {
+    socialNetwork: 'bluesky' | 'instagram' | 'linkedin' | 'youtube' | 'tiktok' | 'facebook' | 'threads' | 'soundcloud';
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ socialNetwork, testId, className, ...props }: SocialLinkProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/FooterNew/__tests__/Footer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FooterNew/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Footer';
+export type { FooterProps } from './Footer';

package/dist/components/HeaderNew/Header.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { default as HeaderMenuContainer } from './HeaderMenuContainer';
+export declare const NAME = "ucl-uikit-header";
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+    titleClassName?: string;
+    titleProps?: Record<string, unknown>;
+    homeLinkHref?: string;
+    homeLinkProps?: Record<string, unknown>;
+    testId?: string;
+}
+declare const MemoAppHeader: import('react').MemoExoticComponent<({ title, titleAs, titleClassName, titleProps, homeLinkHref, homeLinkProps, testId, className, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export interface IHeaderSubComponents {
+    MenuContainer: typeof HeaderMenuContainer;
+}
+declare const HeaderWithSubComponents: typeof MemoAppHeader & IHeaderSubComponents;
+export default HeaderWithSubComponents;

package/dist/components/HeaderNew/HeaderBorder.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-header__border";
+export interface HeaderBorderProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+}
+declare const HeaderBorder: ({ testId, className, ...props }: HeaderBorderProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderBorder;

package/dist/components/HeaderNew/HeaderLogo.d.ts

@@ -0,0 +1,9 @@
+import { UclLogoProps } from '../..';
+export declare const NAME = "ucl-uikit-header__logo";
+export interface HeaderLogoProps extends UclLogoProps {
+    linkHref?: string;
+    linkProps?: Record<string, unknown>;
+    testId?: string;
+}
+declare const HeaderLogo: ({ linkHref, linkProps, testId, className, ...props }: HeaderLogoProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderLogo;

package/dist/components/HeaderNew/HeaderMenuContainer.d.ts

@@ -0,0 +1,7 @@
+import { default as React, HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-header__menu-container";
+export interface HeaderMenuContainerProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+}
+declare const HeaderMenuContainer: React.FC<HeaderMenuContainerProps>;
+export default HeaderMenuContainer;

package/dist/components/HeaderNew/HeaderTitle.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-header__title";
+export interface HeaderTitleProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+    testId?: string;
+}
+declare const HeaderTitle: ({ title, as, testId, className, ...props }: HeaderTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderTitle;

package/dist/components/HeaderNew/__tests__/Header.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/HeaderNew/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const HEADER_TABLET_HEIGHT_PX = 78;
+export declare const HEADER_MOBILE_HEIGHT_PX = 48;
+export declare const DEFAULT_Z_INDEX = 3;

package/dist/components/HeaderNew/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Header';
+export { HEADER_TABLET_HEIGHT_PX, HEADER_MOBILE_HEIGHT_PX, DEFAULT_Z_INDEX, } from './constants';
+export type { HeaderProps } from './Header';

package/dist/components/Heading/Heading.d.ts

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from 'react';
 import { MarginProps } from '../common/marginsStyle';
 export declare const NAME = "ucl-uikit-heading";
+export type HeadingLevel = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export interface HeadingBaseProps extends HTMLAttributes<HTMLHeadingElement> {
-    level?: 1 | 2 | 3 | 4;
+    level?: HeadingLevel | 1 | 2 | 3 | 4;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
     margins?: boolean;
     testId?: string;
+    ref?: React.Ref<HTMLHeadingElement>;
 }
 export type HeadingProps = HeadingBaseProps & MarginProps;
-export type Ref = HTMLHeadingElement;
-declare const _default: import('react').NamedExoticComponent<HeadingBaseProps & MarginProps & import('react').RefAttributes<HTMLHeadingElement>>;
-export default _default;
+declare const Heading: import('react').MemoExoticComponent<({ level, as, margins, testId, className, ref, noMargins, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element>;
+export default Heading;

package/dist/components/Heading/Heading.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import('react').NamedExoticComponent<import('./Heading').HeadingBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLHeadingElement>>;
+    component: import('react').MemoExoticComponent<({ level, as, margins, testId, className, ref, noMargins, ...props }: import('./Heading').HeadingProps) => import("react/jsx-runtime").JSX.Element>;
     parameters: {
         layout: string;
     };
@@ -10,9 +10,11 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Level1: Story;
-export declare const Level2: Story;
-export declare const Level3: Story;
-export declare const Level4: Story;
-export declare const Margins: Story;
+export declare const LevelXxl: Story;
+export declare const LevelXl: Story;
+export declare const LevelLg: Story;
+export declare const LevelMd: Story;
+export declare const LevelSm: Story;
+export declare const LevelXs: Story;
+export declare const AsSpan: Story;
 export declare const NoMargins: Story;