npm - @dxc-technology/halstack-react - Versions diffs - 0.0.0-c293b72 → 0.0.0-c2aa807 - Mend

@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2aa807

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 (418) hide show

package/README.md +1 -2
package/dist/index.d.mts +6500 -0
package/dist/index.d.ts +6500 -0
package/dist/index.js +13516 -0
package/dist/index.mjs +13459 -0
package/package.json +66 -66
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.accessibility.test.js +0 -71
package/accordion/Accordion.d.ts +0 -4
package/accordion/Accordion.js +0 -169
package/accordion/Accordion.stories.tsx +0 -251
package/accordion/Accordion.test.js +0 -56
package/accordion/types.d.ts +0 -57
package/accordion/types.js +0 -5
package/accordion-group/AccordionGroup.accessibility.test.js +0 -88
package/accordion-group/AccordionGroup.d.ts +0 -7
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/AccordionGroupContext.d.ts +0 -3
package/accordion-group/AccordionGroupContext.js +0 -8
package/accordion-group/types.d.ts +0 -67
package/accordion-group/types.js +0 -5
package/action-icon/ActionIcon.accessibility.test.js +0 -63
package/action-icon/ActionIcon.d.ts +0 -4
package/action-icon/ActionIcon.js +0 -48
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.accessibility.test.js +0 -95
package/alert/Alert.d.ts +0 -4
package/alert/Alert.js +0 -200
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.accessibility.test.js +0 -129
package/badge/Badge.d.ts +0 -4
package/badge/Badge.js +0 -161
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.accessibility.test.js +0 -33
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.accessibility.test.js +0 -107
package/bulleted-list/BulletedList.d.ts +0 -7
package/bulleted-list/BulletedList.js +0 -92
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.accessibility.test.js +0 -127
package/button/Button.d.ts +0 -4
package/button/Button.js +0 -121
package/button/Button.stories.tsx +0 -325
package/button/Button.test.js +0 -38
package/button/types.d.ts +0 -57
package/button/types.js +0 -5
package/card/Card.accessibility.test.js +0 -36
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.accessibility.test.js +0 -87
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.accessibility.test.js +0 -67
package/chip/Chip.d.ts +0 -4
package/chip/Chip.js +0 -124
package/chip/Chip.stories.tsx +0 -195
package/chip/Chip.test.js +0 -41
package/chip/types.d.ts +0 -45
package/chip/types.js +0 -5
package/common/coreTokens.d.ts +0 -237
package/common/coreTokens.js +0 -184
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/contextual-menu/ContextualMenu.accessibility.test.js +0 -86
package/contextual-menu/ContextualMenu.d.ts +0 -7
package/contextual-menu/ContextualMenu.js +0 -71
package/contextual-menu/ContextualMenu.stories.tsx +0 -182
package/contextual-menu/ContextualMenu.test.js +0 -71
package/contextual-menu/MenuItemAction.d.ts +0 -4
package/contextual-menu/MenuItemAction.js +0 -46
package/contextual-menu/types.d.ts +0 -22
package/contextual-menu/types.js +0 -5
package/date-input/Calendar.d.ts +0 -4
package/date-input/Calendar.js +0 -214
package/date-input/DateInput.accessibility.test.js +0 -216
package/date-input/DateInput.d.ts +0 -4
package/date-input/DateInput.js +0 -222
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 -121
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.accessibility.test.js +0 -69
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/divider/Divider.accessibility.test.js +0 -33
package/divider/Divider.d.ts +0 -4
package/divider/Divider.js +0 -36
package/divider/Divider.stories.tsx +0 -223
package/divider/Divider.test.js +0 -38
package/divider/types.d.ts +0 -21
package/divider/types.js +0 -5
package/dropdown/Dropdown.accessibility.test.js +0 -180
package/dropdown/Dropdown.d.ts +0 -4
package/dropdown/Dropdown.js +0 -319
package/dropdown/Dropdown.stories.tsx +0 -427
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 -70
package/dropdown/types.d.ts +0 -96
package/dropdown/types.js +0 -5
package/file-input/FileInput.accessibility.test.js +0 -160
package/file-input/FileInput.d.ts +0 -4
package/file-input/FileInput.js +0 -443
package/file-input/FileInput.stories.tsx +0 -618
package/file-input/FileInput.test.js +0 -382
package/file-input/FileItem.d.ts +0 -4
package/file-input/FileItem.js +0 -121
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.accessibility.test.js +0 -117
package/footer/Footer.d.ts +0 -4
package/footer/Footer.js +0 -140
package/footer/Footer.stories.tsx +0 -196
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.accessibility.test.js +0 -84
package/header/Header.d.ts +0 -8
package/header/Header.js +0 -209
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.accessibility.test.js +0 -33
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/icon/Icon.accessibility.test.js +0 -30
package/icon/Icon.d.ts +0 -4
package/icon/Icon.js +0 -33
package/icon/Icon.stories.tsx +0 -28
package/icon/types.d.ts +0 -4
package/icon/types.js +0 -5
package/image/Image.accessibility.test.js +0 -56
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 -56
package/layout/types.d.ts +0 -41
package/layout/types.js +0 -5
package/link/Link.accessibility.test.js +0 -112
package/link/Link.d.ts +0 -4
package/link/Link.js +0 -117
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 -49
package/main.js +0 -357
package/nav-tabs/NavTabs.accessibility.test.js +0 -44
package/nav-tabs/NavTabs.d.ts +0 -7
package/nav-tabs/NavTabs.js +0 -93
package/nav-tabs/NavTabs.stories.tsx +0 -279
package/nav-tabs/NavTabs.test.js +0 -75
package/nav-tabs/NavTabsContext.d.ts +0 -3
package/nav-tabs/NavTabsContext.js +0 -8
package/nav-tabs/Tab.d.ts +0 -4
package/nav-tabs/Tab.js +0 -117
package/nav-tabs/types.d.ts +0 -52
package/nav-tabs/types.js +0 -5
package/number-input/NumberInput.accessibility.test.js +0 -228
package/number-input/NumberInput.d.ts +0 -4
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/NumberInputContext.d.ts +0 -3
package/number-input/NumberInputContext.js +0 -8
package/number-input/types.d.ts +0 -136
package/number-input/types.js +0 -5
package/paginator/Icons.d.ts +0 -5
package/paginator/Icons.js +0 -40
package/paginator/Paginator.accessibility.test.js +0 -79
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.accessibility.test.js +0 -28
package/paragraph/Paragraph.d.ts +0 -5
package/paragraph/Paragraph.js +0 -22
package/paragraph/Paragraph.stories.tsx +0 -27
package/password-input/PasswordInput.accessibility.test.js +0 -153
package/password-input/PasswordInput.d.ts +0 -4
package/password-input/PasswordInput.js +0 -96
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.accessibility.test.js +0 -35
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.accessibility.test.js +0 -57
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.accessibility.test.js +0 -97
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.accessibility.test.js +0 -274
package/resultset-table/ResultsetTable.d.ts +0 -7
package/resultset-table/ResultsetTable.js +0 -170
package/resultset-table/ResultsetTable.stories.tsx +0 -401
package/resultset-table/ResultsetTable.test.js +0 -381
package/resultset-table/types.d.ts +0 -100
package/resultset-table/types.js +0 -5
package/select/Listbox.d.ts +0 -4
package/select/Listbox.js +0 -145
package/select/Option.d.ts +0 -4
package/select/Option.js +0 -88
package/select/Select.accessibility.test.js +0 -217
package/select/Select.d.ts +0 -4
package/select/Select.js +0 -598
package/select/Select.stories.tsx +0 -907
package/select/Select.test.js +0 -2276
package/select/types.d.ts +0 -209
package/select/types.js +0 -5
package/sidenav/Sidenav.accessibility.test.js +0 -59
package/sidenav/Sidenav.d.ts +0 -10
package/sidenav/Sidenav.js +0 -201
package/sidenav/Sidenav.stories.tsx +0 -277
package/sidenav/Sidenav.test.js +0 -37
package/sidenav/SidenavContext.d.ts +0 -5
package/sidenav/SidenavContext.js +0 -13
package/sidenav/types.d.ts +0 -76
package/sidenav/types.js +0 -5
package/slider/Slider.accessibility.test.js +0 -104
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.accessibility.test.js +0 -96
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.accessibility.test.js +0 -157
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.accessibility.test.js +0 -89
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.accessibility.test.js +0 -82
package/table/Table.d.ts +0 -8
package/table/Table.js +0 -161
package/table/Table.stories.tsx +0 -651
package/table/Table.test.js +0 -113
package/table/types.d.ts +0 -49
package/table/types.js +0 -5
package/tabs/Tab.d.ts +0 -4
package/tabs/Tab.js +0 -117
package/tabs/Tabs.accessibility.test.js +0 -56
package/tabs/Tabs.d.ts +0 -4
package/tabs/Tabs.js +0 -373
package/tabs/Tabs.stories.tsx +0 -224
package/tabs/Tabs.test.js +0 -276
package/tabs/types.d.ts +0 -92
package/tabs/types.js +0 -5
package/tag/Tag.accessibility.test.js +0 -69
package/tag/Tag.d.ts +0 -4
package/tag/Tag.js +0 -151
package/tag/Tag.stories.tsx +0 -152
package/tag/Tag.test.js +0 -41
package/tag/types.d.ts +0 -69
package/tag/types.js +0 -5
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 -86
package/text-input/TextInput.accessibility.test.js +0 -321
package/text-input/TextInput.d.ts +0 -4
package/text-input/TextInput.js +0 -567
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.accessibility.test.js +0 -155
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.accessibility.test.js +0 -107
package/toggle-group/ToggleGroup.d.ts +0 -4
package/toggle-group/ToggleGroup.js +0 -202
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.accessibility.test.js +0 -339
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.accessibility.test.js +0 -55
package/wizard/Wizard.d.ts +0 -4
package/wizard/Wizard.js +0 -247
package/wizard/Wizard.stories.tsx +0 -272
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();
-};