@coveord/plasma-mantine 55.7.3 → 55.8.2

package/src/components/header/Header.tsx

@@ -11,16 +11,21 @@ import {
     useProps,
     useStyles,
 } from '@mantine/core';
-import {Children, ReactElement, ReactNode} from 'react';
+import {Children, ElementType, ReactElement, ReactNode} from 'react';
 import {HeaderProvider} from './Header.context';
 import classes from './Header.module.css';
-import {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';
+import {
+    HeaderBreadcrumbAnchor,
+    type HeaderBreadcrumbAnchorStyleNames,
+} from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor';
 import {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import {HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbText';
 import {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';
+import {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight';
 
-export type {HeaderActionsProps} from './HeaderActions/HeaderActions';
 export type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';
+export type {HeaderRightProps} from './HeaderRight/HeaderRight';
 
 export type HeaderVariant = 'primary' | 'secondary';
 export type HeaderStyleNames =
@@ -28,11 +33,17 @@ export type HeaderStyleNames =
     | 'title'
     | 'description'
     | 'divider'
+    | 'body'
     | HeaderDocAnchorStyleNames
     | HeaderBreadcrumbsStyleNames
-    | HeaderActionsStyleNames;
+    | HeaderBreadcrumbAnchorStyleNames
+    | HeaderBreadcrumbTextStyleNames
+    | HeaderBreadcrumbsStyleNames
+    | HeaderRightStyleNames;
 
-export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {
+export interface HeaderProps
+    extends StylesApiProps<HeaderFactory>,
+        Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant'> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -51,6 +62,13 @@ export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupPr
      * The title of the header.
      */
     children: ReactNode;
+    /**
+     * The component used to render the title.
+     *
+     * @default Title
+     * @example 'h2'
+     */
+    titleComponent?: ElementType;
 }
 
 export type HeaderFactory = Factory<{
@@ -60,7 +78,9 @@ export type HeaderFactory = Factory<{
     stylesNames: HeaderStyleNames;
     staticComponents: {
         Breadcrumbs: typeof HeaderBreadcrumbs;
-        Actions: typeof HeaderActions;
+        BreadcrumbAnchor: typeof HeaderBreadcrumbAnchor;
+        BreadcrumbText: typeof HeaderBreadcrumbText;
+        Right: typeof HeaderRight;
         DocAnchor: typeof HeaderDocAnchor;
     };
 }>;
@@ -71,6 +91,8 @@ const defaultProps: Partial<HeaderProps> = {
     wrap: 'nowrap',
 };
 
+const getSpacing = (variant: HeaderVariant) => (variant === 'secondary' ? 'xxs' : 'xs');
+
 export const Header = factory<HeaderFactory>((_props, ref) => {
     const props = useProps('PlasmaHeader', defaultProps, _props);
     const {
@@ -84,6 +106,7 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
         unstyled,
         vars,
         styles,
+        titleComponent: TitleComponent,
         ...others
     } = props;
     const getStyles = useStyles<HeaderFactory>({
@@ -101,18 +124,19 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
 
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);
-    const actions = convertedChildren.find((child) => child.type === HeaderActions);
+    const right = convertedChildren.find((child) => child.type === HeaderRight);
     const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);
     const otherChildren = convertedChildren.filter(
-        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,
+        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor,
     );
     return (
         <HeaderProvider value={{getStyles}}>
             <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>
-                <Stack gap={0}>
+                <Stack gap={getSpacing(variant)}>
                     {breadcrumbs}
                     <Title
                         variant={variant}
+                        component={TitleComponent}
                         order={variant === 'primary' ? 1 : 3}
                         {...getStyles('title', stylesApiProps)}
                     >
@@ -123,7 +147,7 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
                         {description}
                     </Text>
                 </Stack>
-                {actions}
+                {right}
             </Group>
             {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size="xs" /> : null}
         </HeaderProvider>
@@ -131,5 +155,7 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
 });
 
 Header.Breadcrumbs = HeaderBreadcrumbs;
-Header.Actions = HeaderActions;
+Header.BreadcrumbAnchor = HeaderBreadcrumbAnchor;
+Header.BreadcrumbText = HeaderBreadcrumbText;
+Header.Right = HeaderRight;
 Header.DocAnchor = HeaderDocAnchor;

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbAnchor.tsx

@@ -0,0 +1,28 @@
+import {Anchor, type AnchorProps, type PolymorphicFactory, polymorphicFactory} from '@mantine/core';
+import {useHeaderContext} from '../Header.context';
+
+export type HeaderBreadcrumbAnchorStyleNames = 'breadcrumbAnchor';
+
+export type HeaderBreadcrumbAnchorFactory = PolymorphicFactory<{
+    props: AnchorProps;
+    ref: HTMLAnchorElement;
+    stylesNames: HeaderBreadcrumbAnchorStyleNames;
+    compound: true;
+    defaultComponent: 'a';
+    defaultRef: HTMLAnchorElement;
+}>;
+
+export const HeaderBreadcrumbAnchor = polymorphicFactory<HeaderBreadcrumbAnchorFactory>((props, ref) => {
+    const {className, classNames, styles, style, ...others} = props;
+    const ctx = useHeaderContext();
+
+    return (
+        <Anchor
+            ref={ref}
+            inherit
+            {...ctx.getStyles('breadcrumbAnchor', {className, classNames, styles, style, props})}
+            {...others}
+        />
+    );
+});
+HeaderBreadcrumbAnchor.displayName = '@coveo/plasma-mantine/HeaderBreadcrumbAnchor';

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbText.tsx

@@ -0,0 +1,28 @@
+import {type PolymorphicFactory, polymorphicFactory, Text, type TextProps} from '@mantine/core';
+import {useHeaderContext} from '../Header.context';
+
+export type HeaderBreadcrumbTextStyleNames = 'breadcrumbText';
+
+export type HeaderBreadcrumbTextFactory = PolymorphicFactory<{
+    props: TextProps;
+    ref: HTMLParagraphElement;
+    stylesNames: HeaderBreadcrumbTextStyleNames;
+    compound: true;
+    defaultComponent: 'p';
+    defaultRef: HTMLParagraphElement;
+}>;
+
+export const HeaderBreadcrumbText = polymorphicFactory<HeaderBreadcrumbTextFactory>((props, ref) => {
+    const {className, classNames, styles, style, ...others} = props;
+    const ctx = useHeaderContext();
+
+    return (
+        <Text
+            ref={ref}
+            inherit
+            {...ctx.getStyles('breadcrumbText', {className, classNames, styles, style, props})}
+            {...others}
+        />
+    );
+});
+HeaderBreadcrumbText.displayName = '@coveo/plasma-mantine/HeaderBreadcrumbText';

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -1,4 +1,3 @@
-import {QuestionSize16Px} from '@coveord/plasma-react-icons';
 import {
     Anchor,
     AnchorProps,
@@ -11,6 +10,7 @@ import {
 } from '@mantine/core';
 import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context';
+import {InfoToken} from '../../info-token';
 
 export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
 
@@ -42,7 +42,7 @@ export type HeaderDocAnchorFactory = Factory<{
 
 const defaultProps: Partial<HeaderDocAnchorProps> = {
     position: 'right',
-    children: <QuestionSize16Px height={16} />,
+    children: <InfoToken variant="question" />,
 };
 
 export const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {

package/src/components/header/{HeaderActions/HeaderActions.tsx → HeaderRight/HeaderRight.tsx}

@@ -2,27 +2,27 @@ import {CompoundStylesApiProps, Factory, Group, GroupProps, factory, useProps} f
 import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context';
 
-export type HeaderActionsStyleNames = 'actions';
+export type HeaderRightStyleNames = 'right';
 
-export interface HeaderActionsProps
+export interface HeaderRightProps
     extends Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'children'>,
-        CompoundStylesApiProps<HeaderActionsFactory> {
+        CompoundStylesApiProps<HeaderRightFactory> {
     children: ReactNode;
 }
 
-export type HeaderActionsFactory = Factory<{
-    props: HeaderActionsProps;
+export type HeaderRightFactory = Factory<{
+    props: HeaderRightProps;
     ref: HTMLDivElement;
-    stylesNames: HeaderActionsStyleNames;
+    stylesNames: HeaderRightStyleNames;
     compound: true;
 }>;
 
-const defaultProps: Partial<HeaderActionsProps> = {
+const defaultProps: Partial<HeaderRightProps> = {
     gap: 'sm',
 };
 
-export const HeaderActions = factory<HeaderActionsFactory>((_props, ref) => {
-    const props = useProps('HeaderActions', defaultProps, _props);
+export const HeaderRight = factory<HeaderRightFactory>((_props, ref) => {
+    const props = useProps('HeaderRight', defaultProps, _props);
     const {gap, className, classNames, styles, style, children, vars, ...others} = props;
     const ctx = useHeaderContext();
 
@@ -30,7 +30,7 @@ export const HeaderActions = factory<HeaderActionsFactory>((_props, ref) => {
         <Group
             ref={ref}
             gap={gap}
-            {...ctx.getStyles('actions', {className, style, classNames, styles, props})}
+            {...ctx.getStyles('right', {className, style, classNames, styles, props})}
             {...others}
         >
             {children}

package/src/components/header/__tests__/Header.spec.tsx

@@ -11,7 +11,20 @@ describe('Header', () => {
             </Header>,
         );
 
-        const header = screen.getByRole('heading');
+        const header = screen.getByRole('heading', {level: 1});
+        expect(header.tagName).toBe('H1');
+        expect(within(header).getByTestId('child')).toBeVisible();
+    });
+
+    it('renders a heading of level 3 when the variant is secondary', () => {
+        render(
+            <Header variant="secondary">
+                <div data-testid="child" />
+            </Header>,
+        );
+
+        const header = screen.getByRole('heading', {level: 3});
+        expect(header.tagName).toBe('H3');
         expect(within(header).getByTestId('child')).toBeVisible();
     });
 
@@ -71,14 +84,14 @@ describe('Header', () => {
         expect(screen.getByText('description')).toBeInTheDocument();
     });
 
-    it('renders provided actions in the header', () => {
+    it('renders provided components in Header.Right', () => {
         render(
             <Header>
                 title
-                <Header.Actions>
+                <Header.Right>
                     <span>action 1</span>
                     <span>action 2</span>
-                </Header.Actions>
+                </Header.Right>
             </Header>,
         );
 

package/src/components/index.ts

@@ -1,18 +1,27 @@
+export * from './accordion';
 export * from './action-icon';
+export * from './alert';
+export * from './badge';
 export * from './blank-slate';
 export * from './browser-preview';
 export * from './button';
+export * from './checkbox';
+export * from './child-form';
+export * from './chip';
 export * from './code-editor';
 export * from './collection';
 export * from './copyToClipboard';
 export * from './date-range-picker';
+export * from './date-time-range-picker';
 export * from './ellipsis-text';
 export * from './header';
+export * from './info-token';
 export * from './inline-confirm';
+export * from './last-updated';
+export * from './loader';
 export * from './menu';
 export * from './modal';
 export * from './prompt';
 export * from './read-only';
 export * from './sticky-footer';
 export * from './table';
-export * from './child-form';

package/src/components/info-token/InfoToken.module.css

@@ -0,0 +1,8 @@
+.root {
+    --info-token-color: var(--mantine-color-primary);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--info-token-color);
+}

package/src/components/info-token/InfoToken.tsx

@@ -0,0 +1,177 @@
+import {
+    IconAlertSquareFilled,
+    IconAlertTriangleFilled,
+    IconBulbFilled,
+    IconHelpCircle,
+    IconInfoCircle,
+    IconInfoCircleFilled,
+    TablerIcon,
+} from '@coveord/plasma-react-icons';
+import {
+    Box,
+    BoxProps,
+    createVarsResolver,
+    Factory,
+    MantineSize,
+    polymorphicFactory,
+    StylesApiProps,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import classes from './InfoToken.module.css';
+
+export type InfoTokenFactory = Factory<{
+    props: InfoTokenProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: InfoTokenComponentStylesNames;
+    vars: InfoTokenCssVariables;
+    variant: InfoTokenVariant;
+    staticComponents: {
+        Information: typeof TokenInformation;
+        InformationOutline: typeof TokenInformationOutline;
+        Advice: typeof TokenAdvice;
+        Warning: typeof TokenWarning;
+        Error: typeof TokenError;
+        Question: typeof TokenQuestion;
+    };
+}>;
+export type InfoTokenComponentStylesNames = 'root';
+export type InfoTokenVariant = 'information' | 'information-outline' | 'advice' | 'warning' | 'error' | 'question';
+export type InfoTokenCssVariables = {
+    root: '--info-token-color';
+};
+
+export interface InfoTokenProps extends BoxProps, StylesApiProps<InfoTokenFactory> {
+    /**
+     * The variant of the token.
+     *
+     * @default 'information'
+     */
+    variant?: InfoTokenVariant;
+    /**
+     * The size of the info token.
+     *
+     * @default 'sm'
+     */
+    size?: MantineSize;
+}
+
+const defaultProps: Partial<InfoTokenProps> = {variant: 'information', size: 'xs'};
+
+const colorResolver = (variant: InfoTokenVariant): string => {
+    switch (variant) {
+        case 'error':
+            return 'var(--mantine-color-error)';
+        case 'advice':
+            return 'var(--mantine-primary-color-filled)';
+        case 'question':
+            return 'var(--mantine-primary-color-filled)';
+        case 'warning':
+            return 'var(--mantine-color-yellow-4)';
+        case 'information':
+        default:
+            return 'var(--mantine-color-gray-3)';
+    }
+};
+
+const sizeResolver = (size: MantineSize): number => {
+    if (typeof size === 'number') {
+        return size;
+    }
+    switch (size) {
+        case 'sm':
+            return 20;
+        case 'md':
+            return 24;
+        case 'lg':
+            return 32;
+        case 'xl':
+            return 40;
+        case 'xs':
+        default:
+            return 16;
+    }
+};
+
+const iconResolver = (variant: InfoTokenVariant): TablerIcon => {
+    switch (variant) {
+        case 'error':
+            return IconAlertSquareFilled;
+        case 'information':
+            return IconInfoCircleFilled;
+        case 'information-outline':
+            return IconInfoCircle;
+        case 'question':
+            return IconHelpCircle;
+        case 'warning':
+            return IconAlertTriangleFilled;
+        case 'advice':
+        default:
+            return IconBulbFilled;
+    }
+};
+
+const varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {variant}) => {
+    const color = colorResolver(variant);
+    return {
+        root: {
+            '--info-token-color': color,
+        },
+    };
+});
+
+export const InfoToken: ReturnType<typeof polymorphicFactory<InfoTokenFactory>> = polymorphicFactory<InfoTokenFactory>(
+    (_props, ref) => {
+        const props = useProps('InfoToken', defaultProps, _props);
+        const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;
+        const getStyles = useStyles<InfoTokenFactory>({
+            name: 'InfoToken',
+            classes,
+            className,
+            props,
+            style,
+            styles,
+            unstyled,
+            vars,
+            varsResolver,
+        });
+        const IconComponent = iconResolver(variant);
+        return (
+            <Box
+                ref={ref}
+                variant={variant}
+                role="img"
+                aria-label={variant}
+                size={size}
+                {...getStyles('root', {
+                    className,
+                    style,
+                    styles,
+                    classNames,
+                })}
+                {...others}
+            >
+                <IconComponent size={sizeResolver(size)} />
+            </Box>
+        );
+    },
+);
+
+const TokenInformation = InfoToken.withProps({
+    variant: 'information',
+});
+const TokenInformationOutline = InfoToken.withProps({
+    variant: 'information-outline',
+});
+const TokenAdvice = InfoToken.withProps({variant: 'advice'});
+const TokenWarning = InfoToken.withProps({variant: 'warning'});
+const TokenError = InfoToken.withProps({variant: 'error'});
+const TokenQuestion = InfoToken.withProps({variant: 'question'});
+
+InfoToken.Information = TokenInformation;
+InfoToken.InformationOutline = TokenInformationOutline;
+InfoToken.Advice = TokenAdvice;
+InfoToken.Warning = TokenWarning;
+InfoToken.Error = TokenError;
+InfoToken.Question = TokenQuestion;

package/src/components/info-token/index.ts

@@ -0,0 +1 @@
+export * from './InfoToken';

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -15,13 +15,13 @@ interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineC
     /**
      * Confirm button element
      *
-     * @default <Button color="red">Delete</Button>
+     * @default <Button.DestructivePrimary>Delete</Button.DestructivePrimary>
      */
     confirm?: ReactElement;
     /**
      * Cancel button element
      *
-     * @default <Button variant="outline">Cancel</Button>
+     * @default <Button.Tertiary>Cancel</Button.Tertiary>
      */
     cancel?: ReactElement;
     /**
@@ -42,8 +42,8 @@ export type InlineConfirmPromptFactory = Factory<{
 
 const defaultProps: Partial<InlineConfirmPromptProps> = {
     label: 'Are you sure?',
-    confirm: <Button color="red">Delete</Button>,
-    cancel: <Button variant="outline">Cancel</Button>,
+    confirm: <Button.DestructivePrimary>Delete</Button.DestructivePrimary>,
+    cancel: <Button.Tertiary>Cancel</Button.Tertiary>,
     gap: 'xs',
     wrap: 'nowrap',
 };

package/src/components/last-updated/LastUpdated.tsx

@@ -0,0 +1,75 @@
+import {BoxProps, factory, Factory, Group, GroupProps, StylesApiProps, Text, useProps, useStyles} from '@mantine/core';
+import dayjs from 'dayjs';
+import React from 'react';
+
+export type LastUpdatedStylesNames = 'root' | 'label';
+
+export interface LastUpdatedProps extends BoxProps, Pick<GroupProps, 'justify'>, StylesApiProps<LastUpdatedFactory> {
+    /**
+     * Optional formatter function to format the time value.
+     * Receives the time prop and should return a string.
+     * @default (time) => dayjs(time).format('h:mm:ss A')
+     */
+    formatter?: (time: dayjs.ConfigType) => string;
+    /**
+     * The unformatted time to display that can be parsed by dayjs.
+     * @default The current time via dayjs().valueOf()
+     */
+    time?: dayjs.ConfigType;
+    /**
+     * Label to contextualize the time.
+     *
+     * @default "Last update:"
+     */
+    label?: string;
+}
+
+export type LastUpdatedFactory = Factory<{
+    props: LastUpdatedProps;
+    ref: HTMLDivElement;
+    stylesNames: LastUpdatedStylesNames;
+}>;
+
+const defaultProps: Partial<LastUpdatedProps> = {
+    label: 'Last update:',
+    formatter: (time) => dayjs(time).format('h:mm:ss A'),
+};
+
+export const LastUpdated = factory<LastUpdatedFactory>(
+    (props: LastUpdatedProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+        const {formatter, label, time, classNames, className, styles, style, vars, unstyled, ...others} = useProps(
+            'PlasmaLastUpdated',
+            defaultProps as Partial<LastUpdatedProps>,
+            props,
+        );
+
+        const resolvedTime = time ?? dayjs().valueOf();
+
+        const getStyles = useStyles<LastUpdatedFactory>({
+            name: 'LastUpdated',
+            classes: {},
+            props,
+            className,
+            style,
+            classNames,
+            styles,
+            unstyled,
+            vars,
+        });
+        const stylesApiProps = {classNames, styles};
+
+        return (
+            <Group
+                justify={props.justify}
+                ref={ref}
+                {...getStyles('root', {className, style, ...stylesApiProps})}
+                {...others}
+            >
+                <Text size="xs" {...getStyles('label', {className, style, ...stylesApiProps})}>
+                    {label}
+                    <span role="timer">{formatter(resolvedTime)}</span>
+                </Text>
+            </Group>
+        );
+    },
+);

package/src/components/last-updated/__tests__/LastUpdated.spec.tsx

@@ -0,0 +1,37 @@
+import {render, screen} from '@test-utils';
+import dayjs from 'dayjs';
+import {LastUpdated} from '../LastUpdated';
+
+describe('LastUpdated', () => {
+    it('renders with default label, time and formatter', () => {
+        vi.useFakeTimers().setSystemTime(new Date('2023-01-01T13:33:33'));
+        render(<LastUpdated />);
+        expect(screen.getByText('Last update:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('1:33:33 PM');
+        vi.useRealTimers();
+    });
+    it('renders with date object and custom label', () => {
+        const time = new Date('2023-01-01T12:34:56');
+        render(<LastUpdated time={time} label="Updated at:" />);
+        expect(screen.getByText('Updated at:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('12:34:56 PM');
+    });
+    it('renders with string time', () => {
+        const time = '2023-01-01T01:02:03';
+        render(<LastUpdated time={time} />);
+        expect(screen.getByText('Last update:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('1:02:03 AM');
+    });
+    it('renders with number time (timestamp)', () => {
+        const time = dayjs('2023-01-01T12:34:56').valueOf();
+        render(<LastUpdated time={time} />);
+        expect(screen.getByText('Last update:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('12:34:56 PM');
+    });
+    it('renders with custom formatter', () => {
+        const time = dayjs('2023-01-01T12:34:56').valueOf();
+        render(<LastUpdated time={time} formatter={(t) => dayjs(t).format('YYYY-MM-DD HH:mm:ss')} />);
+        expect(screen.getByText('Last update:')).toBeVisible();
+        expect(screen.getByRole('timer')).toHaveTextContent('2023-01-01 12:34:56');
+    });
+});

package/src/components/last-updated/index.ts

@@ -0,0 +1 @@
+export * from './LastUpdated';