diff --git a/package.json b/package.json index 16a61a3e6..9bc5c4a55 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "dependencies": { "@babel/runtime": "^7.0.0", "@momentum-design/animations": "^0.0.4", - "@momentum-design/components": "0.33.2", + "@momentum-design/components": "0.39.1", "@momentum-design/fonts": "0.0.8", "@momentum-design/icons": "0.10.0", "@momentum-design/tokens": "0.5.0", diff --git a/src/components/Coachmark/Coachmark.constants.ts b/src/components/Coachmark/Coachmark.constants.ts deleted file mode 100644 index cbaa8bdc7..000000000 --- a/src/components/Coachmark/Coachmark.constants.ts +++ /dev/null @@ -1,15 +0,0 @@ -const CLASS_PREFIX = 'md-coachmark'; - -const DEFAULTS = {}; - -const STYLE = { - container: `${CLASS_PREFIX}-container`, - content: `${CLASS_PREFIX}-content`, - controls: `${CLASS_PREFIX}-controls`, - header: `${CLASS_PREFIX}-header`, - image: `${CLASS_PREFIX}-image`, - title: `${CLASS_PREFIX}-title`, - wrapper: `${CLASS_PREFIX}-wrapper`, -}; - -export { CLASS_PREFIX, DEFAULTS, STYLE }; diff --git a/src/components/Coachmark/Coachmark.stories.args.ts b/src/components/Coachmark/Coachmark.stories.args.ts index d952c331b..06141743c 100644 --- a/src/components/Coachmark/Coachmark.stories.args.ts +++ b/src/components/Coachmark/Coachmark.stories.args.ts @@ -1,101 +1,66 @@ -import { commonStyles, extendArgTypes } from '../../storybook/helper.stories.argtypes'; - -import { popoverArgTypes } from '../Popover/Popover.stories.args'; +import { commonStyles } from '../../storybook/helper.stories.argtypes'; const coachmarkArgTypes = { - actions: { - description: 'Action buttons to use with this component.', - control: { type: 'none' }, - table: { - type: { - summary: 'ReactElement | Array>', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, children: { - description: 'Content of this component.', + description: 'Content of the coachmark.', control: { type: 'text' }, table: { type: { summary: 'ReactNode', }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - onDismiss: { - description: 'Event handler that is triggered when the user dismisses this component.', - control: { type: 'none' }, - table: { - type: { - summary: '() => void', - }, - defaultValue: { - summary: 'undefined', - }, }, }, - icon: { - description: 'Icon to display to the left of the title.', + triggerID: { + description: 'ID of the element that triggers the coachmark.', control: { type: 'text' }, table: { type: { summary: 'string', }, - defaultValue: { - summary: 'undefined', - }, }, }, - image: { - description: 'Image to display on this component.', - control: { type: 'none' }, + 'close-button': { + description: 'Whether the close button should be shown.', + control: { type: 'boolean' }, table: { type: { - summary: 'HTMLImageElement', + summary: 'boolean', }, defaultValue: { - summary: 'undefined', + summary: true, }, }, }, - isVisible: { - description: 'Whether or not this component should be visible.', - control: { type: 'boolean' }, + 'close-button-aria-label': { + description: 'Arial label for the close button.', + control: { type: 'text' }, table: { type: { - summary: 'boolean', - }, - defaultValue: { - summary: 'undefined', + summary: 'string', }, }, }, - target: { - description: 'The element this component should target when rendering its location.', - control: { type: 'none' }, + placement: { + description: 'Placement of the coachmark.', + control: { type: 'text' }, table: { type: { - summary: 'ReactElement', + summary: 'string', }, defaultValue: { - summary: 'undefined', + summary: 'bottom', }, }, }, - title: { - description: 'Title to display on this component.', - control: { type: 'text' }, + 'focus-back-to-trigger': { + description: 'Whether the focus should shift to trigger on hide.', + control: { type: 'boolean' }, table: { type: { - summary: 'string', + summary: 'boolean', }, defaultValue: { - summary: 'undefined', + summary: false, }, }, }, @@ -105,6 +70,5 @@ export { coachmarkArgTypes }; export default { ...commonStyles, - ...extendArgTypes('Popover', popoverArgTypes, ['interactive', 'trigger']), ...coachmarkArgTypes, }; diff --git a/src/components/Coachmark/Coachmark.stories.docs.mdx b/src/components/Coachmark/Coachmark.stories.docs.mdx index 32fd14ffa..33577637e 100644 --- a/src/components/Coachmark/Coachmark.stories.docs.mdx +++ b/src/components/Coachmark/Coachmark.stories.docs.mdx @@ -1,6 +1 @@ -The `` component. - -This component should be used with experience-driven flows, such as the "First Time Experience" -[FTE] for a feature. The visibility of each `` must be controlled by the `isVisible` -prop, and can be dismissed by changing this prop to `false` or if the user clicks the `dismiss` -button. The `dismiss` button triggers the `onDismiss()` event handler. +The `` component. \ No newline at end of file diff --git a/src/components/Coachmark/Coachmark.stories.tsx b/src/components/Coachmark/Coachmark.stories.tsx index c84696e8d..be4090db3 100644 --- a/src/components/Coachmark/Coachmark.stories.tsx +++ b/src/components/Coachmark/Coachmark.stories.tsx @@ -1,15 +1,13 @@ -import React, { useState } from 'react'; -import { Story } from '@storybook/react'; - import { DocumentationPage } from '../../storybook/helper.stories.docs'; import StyleDocs from '../../storybook/docs.stories.style.mdx'; +import { Story } from '@storybook/react'; import Coachmark, { CoachmarkProps } from './'; -import ButtonSimple from '../ButtonSimple'; -import ButtonHyperlink from '../ButtonHyperlink'; -import ButtonPill from '../ButtonPill'; import argTypes from './Coachmark.stories.args'; import Documentation from './Coachmark.stories.docs.mdx'; +import ButtonPill from '../ButtonPill'; +import React from 'react'; +import Text from '../Text'; export default { title: 'Momentum UI/Coachmark', @@ -22,115 +20,30 @@ export default { }, }; -const Template: Story = (args: CoachmarkProps) => { - return ( - Target Element} - {...args} - /> - ); -}; - -const Example = Template.bind({}); +const Example: Story = (args: CoachmarkProps) => ( +
+ document.getElementById(args.id)?.showPopover()}>open + document.getElementById(args.id)?.hidePopover()}>close + Trigger (dummy) + +
+); Example.argTypes = { ...argTypes }; - Example.args = { - children: 'Example', -}; - -const TemplateCommon: Story = () => { - const [index, setIndex] = useState(); - - const next = () => { - setIndex(index + 1); - }; - - const start = () => { - setIndex(1); - }; - - const reset = () => { - setIndex(0); - }; - - interface LocalProps { - targetIndex: number; - content?: boolean; - icon?: boolean; - image?: boolean; - title?: boolean; - trigger: string; - } - - const CommonCoachmark = ({ content, icon, image, targetIndex, title, trigger }: LocalProps) => ( - - Button - , - - Button - , - Hyperlink, - ]} - icon={icon ? 'placeholder' : undefined} - image={ - image && ( - example - ) - } - isVisible={index === targetIndex} - title={title && 'Example Title'} - triggerComponent={
{trigger}
} - onDismiss={next} - > - {content && ( -
Example Coachmark {targetIndex}. Close this Coachmark to continue the experience.
- )} - - ); - - return ( -
- - - - - - - - - - Start Experience - Reset Experience + id: 'coachmark', + triggerID: 'trigger', + 'close-button-aria-label': 'Close', + children: ( +
+ + Coachmark title + + + Some content in here, blah blah. +
- ); + ), }; -const Common = TemplateCommon.bind({}); - -Common.argTypes = Object.entries({ ...argTypes }).reduce((types, entry) => { - const [key, value] = entry; - const mutable = { ...types }; - - mutable[key] = { ...value }; - - mutable[key].control = { type: 'none' }; - - return mutable; -}, {}); - -Common.args = {}; - -export { Example, Common }; +export { Example }; diff --git a/src/components/Coachmark/Coachmark.style.scss b/src/components/Coachmark/Coachmark.style.scss deleted file mode 100644 index 9cb0b514c..000000000 --- a/src/components/Coachmark/Coachmark.style.scss +++ /dev/null @@ -1,60 +0,0 @@ -.md-coachmark-wrapper { - display: block; - width: 19.125rem; - - > .md-coachmark-container { - margin: 0.25rem; - - &[data-header='true'] { - > :not(:first-child) { - margin-top: 0.75rem; - } - - > .md-coachmark-header { - align-items: center; - display: flex; - width: 100%; - - > .md-icon-wrapper { - height: 2rem; - width: 2rem; - } - - > .md-icon-wrapper::part(icon) { - width: 1.125rem; - height: 1.125rem; - } - - > .md-coachmark-title { - flex-grow: 1; - } - } - - img { - border-radius: 0.5rem; - min-height: 4rem; - width: 17.625rem; - } - } - - &[data-header='false'] { - > div:first-child { - flex-grow: 1; - overflow-wrap: break-word; - - > .md-coachmark-content { - margin-bottom: 0.5rem; - overflow-wrap: break-word; - } - } - - display: flex; - flex-grow: 1; - - > .md-coachmark-controls { - justify-self: flex-end; - flex-shrink: 0; - } - } - } -} diff --git a/src/components/Coachmark/Coachmark.tsx b/src/components/Coachmark/Coachmark.tsx index 5d201124e..5a9d72b4a 100644 --- a/src/components/Coachmark/Coachmark.tsx +++ b/src/components/Coachmark/Coachmark.tsx @@ -1,55 +1,13 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; -import classnames from 'classnames'; +import React, { FC } from 'react'; -import Popover, { PopoverInstance } from '../Popover'; - -import WithHeader from './WithHeader'; -import WithoutHeader from './WithoutHeader'; -import { STYLE } from './Coachmark.constants'; import { Props } from './Coachmark.types'; -import './Coachmark.style.scss'; +import { Coachmark as MdcCoachmark } from '@momentum-design/components/dist/react'; /** * The Coachmark component. */ const Coachmark: FC = (props: Props) => { - const { actions, className, children, icon, image, onDismiss, isVisible, title, ...otherProps } = - props; - - const [instance, setInstance] = useState(undefined); - - const handleDismiss = useCallback(() => { - if (instance?.state?.isVisible) { - instance.hide(); - onDismiss?.(); - } - }, [instance]); - - useEffect(() => { - if (instance?.show && isVisible) { - instance.show(); - } - - if (instance?.state?.isVisible && !isVisible) { - instance.hide(); - } - }, [instance, isVisible]); - - return ( - - {title || image || icon ? ( - - ) : ( - - )} - - ); + return ; }; export default Coachmark; diff --git a/src/components/Coachmark/Coachmark.types.ts b/src/components/Coachmark/Coachmark.types.ts index a5b081514..f6db2cf13 100644 --- a/src/components/Coachmark/Coachmark.types.ts +++ b/src/components/Coachmark/Coachmark.types.ts @@ -1,47 +1,50 @@ -import type { ReactElement, ReactNode } from 'react'; +import { PopoverPlacement } from '@momentum-design/components'; +import { CSSProperties, ReactNode } from 'react'; +import { AriaLabelRequired } from '../../utils/a11y'; -import { ButtonSimpleProps } from '../ButtonSimple'; -import { PopoverProps } from '../Popover'; -import { InferredIconName } from '../Icon/Icon.types'; +export type Props = { + /** + * Child components of this Coachmark. + */ + children: ReactNode; -export interface CoachmarkWithoutHeaderProps { /** - * Actions associated with this Coachmark. + * Custom class for overriding this component's CSS. */ - actions?: ReactElement | Array>; + className?: string; /** - * Content to display on this Coachmark. + * Custom style for overriding this component's CSS. */ - children: ReactNode; + style?: CSSProperties; /** - * Event handler to handle dismissing the Coachmark. + * ID of the coachmark. */ - onDismiss?: () => void; -} + id: string; -export interface CoachmarkWithHeaderProps extends CoachmarkWithoutHeaderProps { /** - * Icon to display to the left of the title. + * ID of the element that triggers the coachmark. */ - icon?: InferredIconName; + triggerID: string; /** - * Image associated with this Coachmark. + * Whether the close button should be shown. */ - image?: ReactElement; + 'close-button'?: boolean; /** - * Title of this Coachmark. + * Arial label for the close button. */ - title?: string; -} + 'close-button-aria-label'?: string; -export type Props = PopoverProps & - CoachmarkWithHeaderProps & { - /** - * Whether or not this Coachmark is to be visible. - */ - isVisible?: boolean; - }; + /** + * Placement of the coachmark. + */ + placement?: PopoverPlacement; + + /** + * Focus back to trigger on hide. + */ + 'focus-back-to-trigger'?: boolean; +} & AriaLabelRequired; diff --git a/src/components/Coachmark/Coachmark.unit.test.tsx b/src/components/Coachmark/Coachmark.unit.test.tsx index b02377a71..1c3b6b1d9 100644 --- a/src/components/Coachmark/Coachmark.unit.test.tsx +++ b/src/components/Coachmark/Coachmark.unit.test.tsx @@ -1,242 +1,70 @@ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import '@testing-library/jest-dom'; +import { mount } from 'enzyme'; -import ButtonPill from '../ButtonPill'; +import Coachmark, { CoachmarkProps } from './'; -import Coachmark from './'; - -jest.mock('uuid', () => { - return { - v4: () => '1', - }; -}); +const defaultProps = { + children: 'This is a coachmark', + 'close-button-aria-label': 'Close', + id: 'coachmark', + triggerID: 'trigger', + 'aria-label': 'Coachmark', +}; describe('', () => { - const iconName = 'placeholder'; - const children = 'Children'; + const setup = (props: CoachmarkProps) => { + return mount( +
+
trigger
+ +
+ ); + }; describe('snapshot', () => { - it('should match snapshot without header', async () => { + it('should match snapshot', () => { expect.assertions(1); - const { container } = render( - Button A, - Button B, - ]} - isVisible - triggerComponent={
} - > - {children} - - ); - - await screen.findByText(children); + const container = setup(defaultProps); expect(container).toMatchSnapshot(); }); - it('should match snapshot with header', async () => { + it('should match snapshot with className', () => { expect.assertions(1); - const { container } = render( - Button A, - Button B, - ]} - icon={iconName} - image={ - example - } - isVisible - title="Title" - triggerComponent={
} - > - {children} - - ); - - await screen.findByText(children); + const className = 'example-class'; + + const container = setup({ ...defaultProps, className }); expect(container).toMatchSnapshot(); }); }); describe('attributes', () => { - it('should allow actions', async () => { - expect.assertions(2); - const user = userEvent.setup(); - - const onPressMock = jest.fn(); - - render( - - Button A - , - ]} - isVisible - triggerComponent={
} - > - {children} - - ); - - await screen.findByText(children); - - const button = screen.getByRole('button', { name: 'Button A' }); - - expect(button).toBeVisible(); - - await user.click(button); - - expect(onPressMock).toHaveBeenCalledTimes(1); - }); - - it('should allow icon', async () => { + it('should have provided class when className is provided', () => { expect.assertions(1); - render( - }> - {children} - - ); + const className = 'example-class'; - await screen.findByText(children); + const element = setup({ ...defaultProps, className }) + .find(Coachmark) + .getDOMNode(); - const icon = screen.getByTestId(iconName); - - expect(icon).toBeVisible(); + expect(element.classList.contains(className)).toBe(true); }); - it('should allow image', async () => { - expect.assertions(2); - - const alt = 'example'; - const src = - 'https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder-1024x1024.png'; - - render( - } triggerComponent={
}> - {children} - - ); - - await screen.findByText(children); - - const image = screen.getByAltText(alt); - - expect(image).toBeVisible(); - expect(image.src).toBe(src); - }); - - it('should allow dismiss via keypress', async () => { - expect.assertions(3); - const user = userEvent.setup(); - - const mockDismiss = jest.fn(); - - render( - }> - {children} - - ); - - await screen.findByText(children); - - const dismissButton = screen.getByRole('button', { name: 'dismiss' }); - - expect(dismissButton).toBeVisible(); - - await user.tab(); - await user.keyboard('{enter}'); - - await waitFor(() => { - expect(screen.queryByText(children)).not.toBeInTheDocument(); - }); - - expect(mockDismiss).toHaveBeenCalledTimes(1); - }); - - it('should allow dismiss via click', async () => { - expect.assertions(3); - const user = userEvent.setup(); - - const mockDismiss = jest.fn(); - - render( - }> - {children} - - ); - - await screen.findByText(children); - - const dismissButton = screen.getByRole('button', { name: 'dismiss' }); - - expect(dismissButton).toBeVisible(); - - await user.click(dismissButton); - - await waitFor(() => { - expect(screen.queryByText(children)).not.toBeInTheDocument(); - }); - - expect(mockDismiss).toHaveBeenCalledTimes(1); - }); - - it('should respond to isVisible prop', async () => { - expect.assertions(3); - - const { rerender } = render( - }> - {children} - - ); - - await screen.findByText(children); - - expect(screen.getByText(children)).toBeVisible(); - - rerender(}>{children}); - - await waitFor(() => { - expect(screen.queryByText(children)).not.toBeInTheDocument(); - }); - - rerender( - }> - {children} - - ); - - await screen.findByText(children); - - expect(screen.getByText(children)).toBeVisible(); - }); - - it('should allow title', async () => { + it('should have provided style when style is provided', () => { expect.assertions(1); - const title = 'Title'; - - render( - }> - {children} - - ); + const style = { color: 'pink' }; + const styleString = 'color: pink;'; - await screen.findByText(children); + const element = setup({ ...defaultProps, style }) + .find(Coachmark) + .getDOMNode(); - expect(screen.getByText(title)).toBeVisible(); + expect(element.getAttribute('style')).toBe(styleString); }); }); }); diff --git a/src/components/Coachmark/Coachmark.unit.test.tsx.snap b/src/components/Coachmark/Coachmark.unit.test.tsx.snap index a11c88af7..eb7500afc 100644 --- a/src/components/Coachmark/Coachmark.unit.test.tsx.snap +++ b/src/components/Coachmark/Coachmark.unit.test.tsx.snap @@ -1,328 +1,66 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` snapshot should match snapshot with header 1`] = ` +exports[` snapshot should match snapshot 1`] = `
-
+ trigger +
+ -
- `; -exports[` snapshot should match snapshot without header 1`] = ` +exports[` snapshot should match snapshot with className 1`] = `
-
+ trigger +
+ -
- `; diff --git a/src/components/Coachmark/WithHeader.tsx b/src/components/Coachmark/WithHeader.tsx deleted file mode 100644 index 2f410e26d..000000000 --- a/src/components/Coachmark/WithHeader.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { FC } from 'react'; - -import ButtonControl, { BUTTON_CONTROL_CONSTANTS } from '../ButtonControl'; -import ButtonGroup from '../ButtonGroup'; -import Icon, { ICON_CONSTANTS } from '../Icon'; -import Text, { TEXT_CONSTANTS } from '../Text'; - -import { STYLE } from './Coachmark.constants'; -import { CoachmarkWithHeaderProps } from './Coachmark.types'; -import './Coachmark.style.scss'; - -/** - * The Coachmark content component when displayed with a header. - */ -const CoachmarkWithHeader: FC = (props: CoachmarkWithHeaderProps) => { - const { actions, children, icon, image, onDismiss, title } = props; - - return ( -
-
- {icon && ( - - )} - - {title} - - - - -
- {image &&
{image}
} - {children &&
{children}
} - {actions && ( - - {actions} - - )} -
- ); -}; - -export default CoachmarkWithHeader; diff --git a/src/components/Coachmark/WithoutHeader.tsx b/src/components/Coachmark/WithoutHeader.tsx deleted file mode 100644 index 65e9af4aa..000000000 --- a/src/components/Coachmark/WithoutHeader.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { FC } from 'react'; - -import ButtonControl, { BUTTON_CONTROL_CONSTANTS } from '../ButtonControl'; -import ButtonGroup from '../ButtonGroup'; - -import { STYLE } from './Coachmark.constants'; -import { CoachmarkWithoutHeaderProps } from './Coachmark.types'; -import './Coachmark.style.scss'; - -/** - * The Coachmark container component when displayed without a header. - */ -const CoarchmarkWithoutHeader: FC = ( - props: CoachmarkWithoutHeaderProps -) => { - const { actions, children, onDismiss } = props; - - return ( - <> -
-
- {children &&
{children}
} - {actions && ( - - {actions} - - )} -
- - - -
- - ); -}; - -export default CoarchmarkWithoutHeader; diff --git a/src/components/Coachmark/index.ts b/src/components/Coachmark/index.ts index 7040cc9ea..9854b1292 100644 --- a/src/components/Coachmark/index.ts +++ b/src/components/Coachmark/index.ts @@ -1,9 +1,6 @@ import { default as Coachmark } from './Coachmark'; -import * as CONSTANTS from './Coachmark.constants'; import { Props } from './Coachmark.types'; -export { CONSTANTS as COACHMARK_CONSTANTS }; - export type CoachmarkProps = Props; export default Coachmark; diff --git a/src/components/ThemeProvider/ThemeProvider.constants.ts b/src/components/ThemeProvider/ThemeProvider.constants.ts index 7a29fc6f5..bd34adc17 100644 --- a/src/components/ThemeProvider/ThemeProvider.constants.ts +++ b/src/components/ThemeProvider/ThemeProvider.constants.ts @@ -7,6 +7,7 @@ const STYLE = { globals: `${CLASS_PREFIX}-globals`, // momentum-design typography class to be set typography: 'mds-typography', + elevation: 'mds-elevation', }; // Some themes are disabled until tokens are properly imported. diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx index 8ec275a15..73523eb33 100644 --- a/src/components/ThemeProvider/ThemeProvider.tsx +++ b/src/components/ThemeProvider/ThemeProvider.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import '@momentum-ui/design-tokens/dist/index.css'; // TODO: we should not use core colors, only theme colors - to be removed: import '@momentum-design/tokens/dist/css/core/complete.css'; +import '@momentum-design/tokens/dist/css/elevation/complete.css'; // import Momentum fonts and typography defaults: import '@momentum-design/fonts/dist/css/fonts.css'; @@ -49,7 +50,7 @@ const ThemeProvider: FC = ({ children, id, style, theme }: Props) => { return (
diff --git a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap index d82d08347..90ab4a9f7 100644 --- a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap +++ b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap @@ -5,11 +5,11 @@ exports[` snapshot should match snapshot 1`] = ` theme="darkBronzeWebex" > @@ -35,11 +35,11 @@ exports[` snapshot should match snapshot with style 1`] = ` } > diff --git a/src/legacy/Lightbox/tests/index.spec.js.snap b/src/legacy/Lightbox/tests/index.spec.js.snap index 4822323f6..346f520df 100644 --- a/src/legacy/Lightbox/tests/index.spec.js.snap +++ b/src/legacy/Lightbox/tests/index.spec.js.snap @@ -70,7 +70,7 @@ exports[`tests for should match SnapShot 1`] = ` tabindex="-1" >
should match SnapShot 1`] = ` theme="darkWebex" > diff --git a/yarn.lock b/yarn.lock index 5f2c55db7..73c1c8a5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2902,9 +2902,9 @@ __metadata: languageName: node linkType: hard -"@momentum-design/components@npm:0.33.2": - version: 0.33.2 - resolution: "@momentum-design/components@npm:0.33.2" +"@momentum-design/components@npm:0.39.1": + version: 0.39.1 + resolution: "@momentum-design/components@npm:0.39.1" dependencies: "@floating-ui/dom": ^1.6.12 "@lit/context": ^1.1.2 @@ -2915,7 +2915,7 @@ __metadata: "@tanstack/lit-virtual": ^3.11.3 lit: ^3.2.0 uuid: ^11.0.5 - checksum: f1e4ccff59c3d95b22326da21fe3b767fc9fed54ced89dea817ac4eaec59a3f750e83ff9f0e6993740b900ee6cbcf9af72af4f1fa0b2963edc67aef413049157 + checksum: 697a1839c6488f631b0e889824ebf09dcdf97ee8ef58b80789c0bf5a529ff205aa6cf700a5990a76f7cfa0825ef02ad7b679b896d33b86dafe2f2b045751f5b7 languageName: node linkType: hard @@ -2984,7 +2984,7 @@ __metadata: "@commitlint/config-conventional": ^12.0.1 "@hot-loader/react-dom": ~16.8.0 "@momentum-design/animations": ^0.0.4 - "@momentum-design/components": 0.33.2 + "@momentum-design/components": 0.39.1 "@momentum-design/fonts": 0.0.8 "@momentum-design/icons": 0.10.0 "@momentum-design/tokens": 0.5.0