npm - @dxc-technology/halstack-react - Versions diffs - 0.0.0-e4ccd42 → 0.0.0-e690193 - Mend

@dxc-technology/halstack-react 0.0.0-e4ccd42 → 0.0.0-e690193

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (368) hide show

package/README.md +1 -2
package/dist/index.d.mts +3923 -0
package/dist/index.d.ts +3923 -0
package/dist/index.js +14133 -0
package/dist/index.mjs +14045 -0
package/package.json +83 -67
package/BackgroundColorContext.d.ts +0 -1
package/BackgroundColorContext.js +0 -30
package/HalstackContext.d.ts +0 -1249
package/HalstackContext.js +0 -310
package/accordion/Accordion.d.ts +0 -4
package/accordion/Accordion.js +0 -182
package/accordion/Accordion.stories.tsx +0 -283
package/accordion/Accordion.test.js +0 -56
package/accordion/types.d.ts +0 -57
package/accordion/types.js +0 -5
package/accordion-group/AccordionGroup.d.ts +0 -8
package/accordion-group/AccordionGroup.js +0 -101
package/accordion-group/AccordionGroup.stories.tsx +0 -252
package/accordion-group/AccordionGroup.test.js +0 -98
package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
package/accordion-group/AccordionGroupAccordion.js +0 -31
package/accordion-group/types.d.ts +0 -67
package/accordion-group/types.js +0 -5
package/action-icon/ActionIcon.d.ts +0 -4
package/action-icon/ActionIcon.js +0 -47
package/action-icon/ActionIcon.stories.tsx +0 -41
package/action-icon/ActionIcon.test.js +0 -64
package/action-icon/types.d.ts +0 -26
package/action-icon/types.js +0 -5
package/alert/Alert.d.ts +0 -4
package/alert/Alert.js +0 -254
package/alert/Alert.stories.tsx +0 -198
package/alert/Alert.test.js +0 -75
package/alert/types.d.ts +0 -49
package/alert/types.js +0 -5
package/badge/Badge.d.ts +0 -4
package/badge/Badge.js +0 -159
package/badge/Badge.stories.tsx +0 -210
package/badge/Badge.test.js +0 -30
package/badge/types.d.ts +0 -54
package/badge/types.js +0 -5
package/bleed/Bleed.d.ts +0 -3
package/bleed/Bleed.js +0 -43
package/bleed/Bleed.stories.tsx +0 -342
package/bleed/types.d.ts +0 -37
package/bleed/types.js +0 -5
package/box/Box.d.ts +0 -4
package/box/Box.js +0 -75
package/box/Box.stories.tsx +0 -119
package/box/Box.test.js +0 -13
package/box/types.d.ts +0 -32
package/box/types.js +0 -5
package/bulleted-list/BulletedList.d.ts +0 -7
package/bulleted-list/BulletedList.js +0 -89
package/bulleted-list/BulletedList.stories.tsx +0 -115
package/bulleted-list/types.d.ts +0 -38
package/bulleted-list/types.js +0 -5
package/button/Button.d.ts +0 -4
package/button/Button.js +0 -120
package/button/Button.stories.tsx +0 -344
package/button/Button.test.js +0 -38
package/button/types.d.ts +0 -57
package/button/types.js +0 -5
package/card/Card.d.ts +0 -4
package/card/Card.js +0 -120
package/card/Card.stories.tsx +0 -171
package/card/Card.test.js +0 -39
package/card/types.d.ts +0 -62
package/card/types.js +0 -5
package/checkbox/Checkbox.d.ts +0 -4
package/checkbox/Checkbox.js +0 -215
package/checkbox/Checkbox.stories.tsx +0 -222
package/checkbox/Checkbox.test.js +0 -199
package/checkbox/types.d.ts +0 -72
package/checkbox/types.js +0 -5
package/chip/Chip.d.ts +0 -4
package/chip/Chip.js +0 -121
package/chip/Chip.stories.tsx +0 -214
package/chip/Chip.test.js +0 -41
package/chip/types.d.ts +0 -45
package/chip/types.js +0 -5
package/common/OpenSans.css +0 -69
package/common/coreTokens.d.ts +0 -237
package/common/coreTokens.js +0 -184
package/common/fonts/OpenSans-Bold.ttf +0 -0
package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
package/common/fonts/OpenSans-Italic.ttf +0 -0
package/common/fonts/OpenSans-Light.ttf +0 -0
package/common/fonts/OpenSans-LightItalic.ttf +0 -0
package/common/fonts/OpenSans-Regular.ttf +0 -0
package/common/fonts/OpenSans-SemiBold.ttf +0 -0
package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
package/common/utils.d.ts +0 -1
package/common/utils.js +0 -16
package/common/variables.d.ts +0 -1395
package/common/variables.js +0 -1267
package/container/Container.d.ts +0 -4
package/container/Container.js +0 -194
package/container/Container.stories.tsx +0 -214
package/container/types.d.ts +0 -74
package/container/types.js +0 -5
package/date-input/Calendar.d.ts +0 -4
package/date-input/Calendar.js +0 -214
package/date-input/DateInput.d.ts +0 -4
package/date-input/DateInput.js +0 -223
package/date-input/DateInput.stories.tsx +0 -285
package/date-input/DateInput.test.js +0 -808
package/date-input/DatePicker.d.ts +0 -4
package/date-input/DatePicker.js +0 -115
package/date-input/Icons.d.ts +0 -6
package/date-input/Icons.js +0 -58
package/date-input/YearPicker.d.ts +0 -4
package/date-input/YearPicker.js +0 -100
package/date-input/types.d.ts +0 -164
package/date-input/types.js +0 -5
package/dialog/Dialog.d.ts +0 -4
package/dialog/Dialog.js +0 -104
package/dialog/Dialog.stories.tsx +0 -365
package/dialog/Dialog.test.js +0 -307
package/dialog/types.d.ts +0 -36
package/dialog/types.js +0 -5
package/dropdown/Dropdown.d.ts +0 -4
package/dropdown/Dropdown.js +0 -336
package/dropdown/Dropdown.stories.tsx +0 -438
package/dropdown/Dropdown.test.js +0 -599
package/dropdown/DropdownMenu.d.ts +0 -4
package/dropdown/DropdownMenu.js +0 -63
package/dropdown/DropdownMenuItem.d.ts +0 -4
package/dropdown/DropdownMenuItem.js +0 -67
package/dropdown/types.d.ts +0 -98
package/dropdown/types.js +0 -5
package/file-input/FileInput.d.ts +0 -4
package/file-input/FileInput.js +0 -479
package/file-input/FileInput.stories.tsx +0 -618
package/file-input/FileInput.test.js +0 -459
package/file-input/FileItem.d.ts +0 -4
package/file-input/FileItem.js +0 -135
package/file-input/types.d.ts +0 -129
package/file-input/types.js +0 -5
package/flex/Flex.d.ts +0 -4
package/flex/Flex.js +0 -57
package/flex/Flex.stories.tsx +0 -112
package/flex/types.d.ts +0 -97
package/flex/types.js +0 -5
package/footer/Footer.d.ts +0 -4
package/footer/Footer.js +0 -138
package/footer/Footer.stories.tsx +0 -171
package/footer/Footer.test.js +0 -85
package/footer/Icons.d.ts +0 -3
package/footer/Icons.js +0 -136
package/footer/types.d.ts +0 -64
package/footer/types.js +0 -5
package/grid/Grid.d.ts +0 -7
package/grid/Grid.js +0 -76
package/grid/Grid.stories.tsx +0 -219
package/grid/types.d.ts +0 -115
package/grid/types.js +0 -5
package/header/Header.d.ts +0 -8
package/header/Header.js +0 -220
package/header/Header.stories.tsx +0 -251
package/header/Header.test.js +0 -66
package/header/Icons.d.ts +0 -2
package/header/Icons.js +0 -29
package/header/types.d.ts +0 -33
package/header/types.js +0 -5
package/heading/Heading.d.ts +0 -4
package/heading/Heading.js +0 -137
package/heading/Heading.stories.tsx +0 -54
package/heading/Heading.test.js +0 -169
package/heading/types.d.ts +0 -33
package/heading/types.js +0 -5
package/image/Image.d.ts +0 -4
package/image/Image.js +0 -70
package/image/Image.stories.tsx +0 -129
package/image/types.d.ts +0 -72
package/image/types.js +0 -5
package/inset/Inset.d.ts +0 -3
package/inset/Inset.js +0 -43
package/inset/Inset.stories.tsx +0 -230
package/inset/types.d.ts +0 -37
package/inset/types.js +0 -5
package/layout/ApplicationLayout.d.ts +0 -20
package/layout/ApplicationLayout.js +0 -134
package/layout/ApplicationLayout.stories.tsx +0 -162
package/layout/Icons.d.ts +0 -8
package/layout/Icons.js +0 -58
package/layout/SidenavContext.d.ts +0 -5
package/layout/SidenavContext.js +0 -13
package/layout/types.d.ts +0 -41
package/layout/types.js +0 -5
package/link/Link.d.ts +0 -4
package/link/Link.js +0 -115
package/link/Link.stories.tsx +0 -253
package/link/Link.test.js +0 -63
package/link/types.d.ts +0 -54
package/link/types.js +0 -5
package/main.d.ts +0 -47
package/main.js +0 -343
package/nav-tabs/NavTabs.d.ts +0 -8
package/nav-tabs/NavTabs.js +0 -93
package/nav-tabs/NavTabs.stories.tsx +0 -276
package/nav-tabs/NavTabs.test.js +0 -76
package/nav-tabs/Tab.d.ts +0 -4
package/nav-tabs/Tab.js +0 -118
package/nav-tabs/types.d.ts +0 -52
package/nav-tabs/types.js +0 -5
package/number-input/NumberInput.d.ts +0 -11
package/number-input/NumberInput.js +0 -86
package/number-input/NumberInput.stories.tsx +0 -131
package/number-input/NumberInput.test.js +0 -989
package/number-input/types.d.ts +0 -130
package/number-input/types.js +0 -5
package/paginator/Icons.d.ts +0 -5
package/paginator/Icons.js +0 -40
package/paginator/Paginator.d.ts +0 -4
package/paginator/Paginator.js +0 -135
package/paginator/Paginator.stories.tsx +0 -87
package/paginator/Paginator.test.js +0 -335
package/paginator/types.d.ts +0 -38
package/paginator/types.js +0 -5
package/paragraph/Paragraph.d.ts +0 -5
package/paragraph/Paragraph.js +0 -22
package/paragraph/Paragraph.stories.tsx +0 -27
package/password-input/Icons.d.ts +0 -6
package/password-input/Icons.js +0 -35
package/password-input/PasswordInput.d.ts +0 -4
package/password-input/PasswordInput.js +0 -97
package/password-input/PasswordInput.stories.tsx +0 -99
package/password-input/PasswordInput.test.js +0 -198
package/password-input/types.d.ts +0 -111
package/password-input/types.js +0 -5
package/progress-bar/ProgressBar.d.ts +0 -4
package/progress-bar/ProgressBar.js +0 -144
package/progress-bar/ProgressBar.stories.tsx +0 -93
package/progress-bar/ProgressBar.test.js +0 -93
package/progress-bar/types.d.ts +0 -37
package/progress-bar/types.js +0 -5
package/quick-nav/QuickNav.d.ts +0 -4
package/quick-nav/QuickNav.js +0 -94
package/quick-nav/QuickNav.stories.tsx +0 -356
package/quick-nav/types.d.ts +0 -21
package/quick-nav/types.js +0 -5
package/radio-group/Radio.d.ts +0 -4
package/radio-group/Radio.js +0 -124
package/radio-group/RadioGroup.d.ts +0 -4
package/radio-group/RadioGroup.js +0 -235
package/radio-group/RadioGroup.stories.tsx +0 -214
package/radio-group/RadioGroup.test.js +0 -756
package/radio-group/types.d.ts +0 -114
package/radio-group/types.js +0 -5
package/resultset-table/Icons.d.ts +0 -7
package/resultset-table/Icons.js +0 -47
package/resultset-table/ResultsetTable.d.ts +0 -7
package/resultset-table/ResultsetTable.js +0 -166
package/resultset-table/ResultsetTable.stories.tsx +0 -397
package/resultset-table/ResultsetTable.test.js +0 -371
package/resultset-table/types.d.ts +0 -73
package/resultset-table/types.js +0 -5
package/select/Icons.d.ts +0 -10
package/select/Icons.js +0 -89
package/select/Listbox.d.ts +0 -4
package/select/Listbox.js +0 -143
package/select/Option.d.ts +0 -4
package/select/Option.js +0 -87
package/select/Select.d.ts +0 -4
package/select/Select.js +0 -590
package/select/Select.stories.tsx +0 -971
package/select/Select.test.js +0 -2370
package/select/types.d.ts +0 -209
package/select/types.js +0 -5
package/sidenav/Icons.d.ts +0 -7
package/sidenav/Icons.js +0 -47
package/sidenav/Sidenav.d.ts +0 -10
package/sidenav/Sidenav.js +0 -196
package/sidenav/Sidenav.stories.tsx +0 -282
package/sidenav/Sidenav.test.js +0 -37
package/sidenav/types.d.ts +0 -76
package/sidenav/types.js +0 -5
package/slider/Slider.d.ts +0 -4
package/slider/Slider.js +0 -285
package/slider/Slider.test.js +0 -254
package/slider/types.d.ts +0 -86
package/slider/types.js +0 -5
package/spinner/Spinner.d.ts +0 -4
package/spinner/Spinner.js +0 -206
package/spinner/Spinner.stories.tsx +0 -129
package/spinner/Spinner.test.js +0 -55
package/spinner/types.d.ts +0 -32
package/spinner/types.js +0 -5
package/status-light/StatusLight.d.ts +0 -4
package/status-light/StatusLight.js +0 -51
package/status-light/StatusLight.stories.tsx +0 -74
package/status-light/StatusLight.test.js +0 -25
package/status-light/types.d.ts +0 -17
package/status-light/types.js +0 -5
package/switch/Switch.d.ts +0 -4
package/switch/Switch.js +0 -214
package/switch/Switch.stories.tsx +0 -137
package/switch/Switch.test.js +0 -180
package/switch/types.d.ts +0 -66
package/switch/types.js +0 -5
package/table/DropdownTheme.js +0 -62
package/table/Table.d.ts +0 -8
package/table/Table.js +0 -170
package/table/Table.stories.tsx +0 -658
package/table/Table.test.js +0 -113
package/table/types.d.ts +0 -63
package/table/types.js +0 -5
package/tabs/Tab.d.ts +0 -4
package/tabs/Tab.js +0 -116
package/tabs/Tabs.d.ts +0 -4
package/tabs/Tabs.js +0 -384
package/tabs/Tabs.stories.tsx +0 -226
package/tabs/Tabs.test.js +0 -294
package/tabs/types.d.ts +0 -92
package/tabs/types.js +0 -5
package/tag/Tag.d.ts +0 -4
package/tag/Tag.js +0 -151
package/tag/Tag.stories.tsx +0 -155
package/tag/Tag.test.js +0 -49
package/tag/types.d.ts +0 -69
package/tag/types.js +0 -5
package/text-input/Icons.d.ts +0 -8
package/text-input/Icons.js +0 -56
package/text-input/Suggestion.d.ts +0 -4
package/text-input/Suggestion.js +0 -67
package/text-input/Suggestions.d.ts +0 -4
package/text-input/Suggestions.js +0 -84
package/text-input/TextInput.d.ts +0 -4
package/text-input/TextInput.js +0 -565
package/text-input/TextInput.stories.tsx +0 -465
package/text-input/TextInput.test.js +0 -1756
package/text-input/types.d.ts +0 -205
package/text-input/types.js +0 -5
package/textarea/Textarea.d.ts +0 -4
package/textarea/Textarea.js +0 -234
package/textarea/Textarea.stories.tsx +0 -174
package/textarea/Textarea.test.js +0 -406
package/textarea/types.d.ts +0 -141
package/textarea/types.js +0 -5
package/toggle-group/ToggleGroup.d.ts +0 -4
package/toggle-group/ToggleGroup.js +0 -201
package/toggle-group/ToggleGroup.stories.tsx +0 -218
package/toggle-group/ToggleGroup.test.js +0 -137
package/toggle-group/types.d.ts +0 -114
package/toggle-group/types.js +0 -5
package/typography/Typography.d.ts +0 -4
package/typography/Typography.js +0 -23
package/typography/Typography.stories.tsx +0 -198
package/typography/types.d.ts +0 -18
package/typography/types.js +0 -5
package/useTheme.d.ts +0 -1148
package/useTheme.js +0 -15
package/useTranslatedLabels.d.ts +0 -85
package/useTranslatedLabels.js +0 -14
package/utils/BaseTypography.d.ts +0 -21
package/utils/BaseTypography.js +0 -94
package/utils/FocusLock.d.ts +0 -13
package/utils/FocusLock.js +0 -124
package/wizard/Wizard.d.ts +0 -4
package/wizard/Wizard.js +0 -250
package/wizard/Wizard.stories.tsx +0 -253
package/wizard/Wizard.test.js +0 -114
package/wizard/types.d.ts +0 -64
package/wizard/types.js +0 -5

package/dialog/Dialog.stories.tsx DELETED Viewed

@@ -1,365 +0,0 @@
-import React from "react";
-import DxcDialog from "./Dialog";
-import DxcTextInput from "../text-input/TextInput";
-import DxcButton from "../button/Button";
-import DxcFlex from "../flex/Flex";
-import DxcInset from "../inset/Inset";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { HalstackProvider } from "../HalstackContext";
-import DxcHeading from "../heading/Heading";
-import DxcParagraph from "../paragraph/Paragraph";
-import DxcAlert from "../alert/Alert";
-import { userEvent, within } from "@storybook/testing-library";
-export default {
-  title: "Dialog",
-  component: DxcDialog,
-};
-const opinionatedTheme = {
-  dialog: {
-    baseColor: "#ffffff",
-    closeIconColor: "#000000",
-    overlayColor: "#000000b3",
-  },
-};
-export const DefaultDialog = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Default dialog" theme="light" level={4} />
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex direction="column" gap="1rem">
-          <DxcHeading level={4} text="Example title" />
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
-            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
-            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
-            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-          </DxcParagraph>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-export const DefaultDialogOpinionated = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Default dialog" theme="light" level={4} />
-    <HalstackProvider theme={opinionatedTheme}>
-      <DxcDialog>
-        <DxcInset space="1.5rem">
-          <DxcFlex direction="column" gap="1rem">
-            <DxcHeading level={4} text="Example title" />
-            <DxcParagraph>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa
-              magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo
-              sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis
-              Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor
-              ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit
-              ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit
-              amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum
-              blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-            </DxcParagraph>
-          </DxcFlex>
-        </DxcInset>
-      </DxcDialog>
-    </HalstackProvider>
-  </ExampleContainer>
-);
-const ScrollingDialog = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Default dialog" theme="light" level={4} />
-    <>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </DxcParagraph>
-    </>
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex direction="column" gap="1rem">
-          <DxcHeading level={4} text="Example title" />
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
-            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
-            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
-            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-          </DxcParagraph>
-          <DxcButton label="Test" />
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-export const DialogWithInputs = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Dialog with inputs" theme="light" level={4} />
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex gap="2rem" direction="column">
-          <DxcHeading level={4} text="Example form" />
-          <DxcFlex gap="1rem" direction="column">
-            <DxcTextInput size="fillParent" label="Name" />
-            <DxcTextInput size="fillParent" label="Surname" />
-          </DxcFlex>
-          <DxcAlert
-            type="error"
-            inlineText="User: arn:aws:xxx::xxxxxxxxxxxx:assumed-role/assure-sandbox-xxxx-xxxxxxxxxxxxxxxxxxxxxxxxxx/sandbox-xxxx-xxxxxxxxxxxxxxxxxx is not authorized to perform: lambda:xxxxxxxxxxxxxx on resource: arn:aws:lambda:us-east-1:xxxxxxxxxxxx:function:sandbox-xxxx-xx-xxxxxxx-xxxxxxx-lambda because no identity-based policy allows the lambda:xxxxxxxxxxxxxx action"
-            size="fillParent"
-            margin={{ bottom: "xsmall" }}
-          />
-          <DxcFlex justifyContent="flex-end" gap="0.5rem">
-            <DxcButton label="Cancel" mode="text" />
-            <DxcButton label="Save" />
-          </DxcFlex>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-const RespDialog = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Responsive dialog" theme="light" level={4} />
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex gap="2rem" direction="column">
-          <DxcHeading level={4} text="Example form" />
-          <DxcFlex gap="1rem" direction="column">
-            <DxcTextInput size="fillParent" label="Name" />
-            <DxcTextInput size="fillParent" label="Surname" />
-          </DxcFlex>
-          <DxcFlex justifyContent="flex-end" gap="0.5rem">
-            <DxcButton label="Cancel" mode="text" />
-            <DxcButton label="Save" />
-          </DxcFlex>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-export const DialogWithoutOverlay = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Dialog Without Overlay" theme="light" level={4} />
-    <DxcDialog overlay={false}>
-      <DxcInset space="1.5rem">
-        <DxcFlex direction="column" gap="1rem">
-          <DxcHeading level={4} text="Example title" />
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
-            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
-            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
-            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-          </DxcParagraph>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-export const DialogCloseVisibleFalse = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Dialog Close Visible" theme="dark" level={4} />
-    <DxcDialog isCloseVisible={false}>
-      <DxcInset space="1.5rem">
-        <DxcParagraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-          placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-          elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-          tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-          eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
-          enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
-          fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
-          augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
-          dignissim, pharetra neque molestie, molestie lectus.
-        </DxcParagraph>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-const customViewports = {
-  resizedScreen: {
-    name: "Custom viewport",
-    styles: {
-      width: "720px",
-      height: "900px",
-    },
-  },
-};
-export const ResponsiveDialog = DefaultDialog.bind({});
-ResponsiveDialog.parameters = {
-  viewport: {
-    viewports: customViewports,
-    defaultViewport: "resizedScreen",
-  },
-  chromatic: { viewports: [720] },
-};
-export const MobileResponsiveDialog = RespDialog.bind({});
-MobileResponsiveDialog.parameters = {
-  viewport: {
-    defaultViewport: "iphonex",
-  },
-  chromatic: { viewports: [375] },
-};
-export const ScrollDialog = ScrollingDialog.bind({});
-ScrollDialog.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.tab();
-  await userEvent.tab();
-  await userEvent.tab();
-};