acinguiux-ds-react-framework 0.0.1

package/build/esm/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Variants, Positions, Sizes, ZIndexes } from 'acinguiux-ds-react-base';
+import Button from '../Button/Button';
+import Grid from '../Grid/Grid';
+import { ChevronDown } from '../Icon/components';
+import MenuItem from '../Menu/components/MenuItem';
+import Menu from '../Menu/Menu';
+import Text from '../Text/components/Text/Text';
+import Dropdown from './Dropdown';
+import { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';
+import { TRIGGER_OVERFLOW } from '../../utils/constants';
+export default {
+    title: 'Layout/Dropdown',
+    component: Dropdown,
+    parameters: {
+        storyLink: `${GITHUB_COMPONENT_BASE_URL}/Dropdown/Dropdown.stories.tsx`,
+    },
+    argTypes: {
+        arrow: { control: { type: 'boolean' }, defaultValue: false },
+        className: {
+            control: { type: 'text' },
+        },
+        placement: {
+            defaultValue: 'bottomLeft',
+            options: ['topCenter', 'bottomCenter', 'bottomLeft', 'bottomRight', 'topLeft', 'topRight'],
+            control: 'radio',
+        },
+        trigger: {
+            description: 'Insert DropdownTrigger string or object of DropdownTrigger strings, like: "click" or ["click", "hover"]',
+            control: { type: 'object' },
+        },
+        visible: { control: { type: 'boolean' } },
+    },
+};
+const StickyDiv = styled.div `
+  position: sticky;
+  top: 0;
+  z-index: ${ZIndexes.POPOVER + 1};
+`;
+const MovedDiv = styled.div `
+  margin-left: 40px;
+`;
+const overlay = (_jsxs(Menu, { children: [_jsx(MenuItem, { children: "Option 1" }), _jsx(MenuItem, { children: "Option 2" }), _jsx(MenuItem, { children: "Option 3" }), _jsx(MenuItem, { children: "Option 4" })] }));
+export const Default = (args) => (_jsx(Dropdown, { ...args, overlay: overlay, children: _jsx(Button, { variant: Variants.Transparent, icon: _jsx(ChevronDown, {}), iconPosition: Positions.Right, children: "Menu Option" }) }));
+Default.args = {
+    trigger: ['click'],
+    onOverlayClick: (e) => {
+        e.stopPropagation();
+    },
+};
+export const WithArrow = (args) => (_jsx(Dropdown, { ...args, overlay: overlay, children: _jsx(Button, { variant: Variants.Transparent, icon: _jsx(ChevronDown, {}), iconPosition: Positions.Right, children: "Menu Option" }) }));
+WithArrow.args = {
+    arrow: true,
+    trigger: ['click'],
+};
+export const Placement = (args) => (_jsxs(Grid, { flow: "row", rowGap: "48px", children: [_jsxs(Grid, { flow: "column", rowGap: "24px", children: [_jsx(Dropdown, { ...args, overlay: overlay, placement: "bottomLeft", children: _jsx(Button, { variant: Variants.Outlined, children: _jsx(Text, { size: Sizes.Small, children: "Placement: Bottom - Left" }) }) }), _jsx(Dropdown, { ...args, overlay: overlay, placement: "bottomCenter", children: _jsx(Button, { variant: Variants.Outlined, children: _jsx(Text, { size: Sizes.Small, children: "Placement: Bottom - Center" }) }) }), _jsx(Dropdown, { ...args, overlay: overlay, placement: "bottomRight", children: _jsx(Button, { variant: Variants.Outlined, children: _jsx(Text, { size: Sizes.Small, children: "Placement: Bottom - Right" }) }) })] }), _jsxs(Grid, { flow: "column", rowGap: "24px", children: [_jsx(Dropdown, { ...args, overlay: overlay, placement: "topLeft", children: _jsx(Button, { variant: Variants.Outlined, children: _jsx(Text, { size: Sizes.Small, children: "Placement: Top - Left" }) }) }), _jsx(Dropdown, { ...args, overlay: overlay, placement: "topCenter", children: _jsx(Button, { variant: Variants.Outlined, children: _jsx(Text, { size: Sizes.Small, children: "Placement: Top - Center" }) }) }), _jsx(Dropdown, { ...args, overlay: overlay, placement: "topRight", children: _jsx(Button, { variant: Variants.Outlined, children: _jsx(Text, { size: Sizes.Small, children: "Placement: Top - Right" }) }) })] })] }));
+Placement.args = {
+    trigger: ['click'],
+    arrow: true,
+};
+Placement.argTypes = {
+    placement: { table: { disable: true } },
+};
+export const Triggers = (args) => (_jsxs(Grid, { gap: "12px", children: [_jsx(Dropdown, { ...args, trigger: ['hover'], overlay: overlay, children: _jsx(Button, { variant: Variants.Outlined, children: "Hover" }) }), _jsx(Dropdown, { ...args, trigger: ['click'], overlay: overlay, children: _jsx(Button, { variant: Variants.Outlined, children: "Click" }) }), _jsx(Dropdown, { ...args, trigger: ['contextMenu'], overlay: overlay, children: _jsx(Button, { variant: Variants.Outlined, children: "Right click" }) })] }));
+Triggers.argTypes = {
+    placement: { table: { disable: true } },
+    trigger: { table: { disable: true } },
+};
+export const Sticky = (args) => (_jsxs(Grid, { flow: "row", children: [_jsx(StickyDiv, { children: _jsx(Dropdown, { ...args, overlay: overlay, children: _jsxs(Button, { children: [_jsx(Text, { size: Sizes.Small, children: "Click here" }), _jsx(ChevronDown, { width: 20 })] }) }) }), _jsx(MovedDiv, { children: _jsx(Dropdown, { ...args, overlay: overlay, children: _jsxs(Button, { children: [_jsx(Text, { size: Sizes.Small, children: "Click here" }), _jsx(ChevronDown, { width: 20 })] }) }) }), _jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit lobortis orci at laoreet. Donec vulputate lorem vitae dui mattis pulvinar. Sed quis accumsan diam. Aenean laoreet nisi quis ligula volutpat, auctor efficitur purus cursus. Vivamus vitae lacus et tellus bibendum vehicula nec dapibus nisi. In tincidunt venenatis commodo. Nam et diam luctus, consequat leo et, ultrices sem. Sed et ullamcorper arcu, eu aliquet augue. Suspendisse fringilla felis et dui luctus rhoncus." })] }));
+Sticky.args = {
+    trigger: ['click'],
+};
+Sticky.argTypes = {
+    placement: { table: { disable: true } },
+    trigger: { table: { disable: true } },
+};
+export const Align = (args) => (_jsx(Dropdown, { ...args, overlay: overlay, children: _jsx(Button, { variant: Variants.Transparent, icon: _jsx(ChevronDown, {}), iconPosition: Positions.Right, children: "Menu Option" }) }));
+Align.args = {
+    trigger: ['click'],
+    onOverlayClick: (e) => {
+        e.stopPropagation();
+    },
+    align: {
+        overflow: TRIGGER_OVERFLOW,
+    },
+};
+//# sourceMappingURL=Dropdown.stories.js.map

package/build/esm/components/Dropdown/Dropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { StoryFn, Meta } from '@storybook/react';\nimport styled from 'styled-components';\nimport { Variants, Positions, Sizes, ZIndexes } from 'acinguiux-ds-react-base';\n\nimport Button from '../Button/Button';\nimport Grid from '../Grid/Grid';\nimport { ChevronDown } from '../Icon/components';\nimport MenuItem from '../Menu/components/MenuItem';\nimport Menu from '../Menu/Menu';\nimport Text from '../Text/components/Text/Text';\nimport Dropdown from './Dropdown';\nimport { IDropdownProps } from './Dropdown.types';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\nimport { TRIGGER_OVERFLOW } from '../../utils/constants';\n\nexport default {\n  title: 'Layout/Dropdown',\n  component: Dropdown,\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/Dropdown/Dropdown.stories.tsx`,\n  },\n  argTypes: {\n    arrow: { control: { type: 'boolean' }, defaultValue: false },\n    className: {\n      control: { type: 'text' },\n    },\n    placement: {\n      defaultValue: 'bottomLeft',\n      options: ['topCenter', 'bottomCenter', 'bottomLeft', 'bottomRight', 'topLeft', 'topRight'],\n      control: 'radio',\n    },\n    trigger: {\n      description:\n        'Insert DropdownTrigger string or object of DropdownTrigger strings, like: \"click\" or [\"click\", \"hover\"]',\n      control: { type: 'object' },\n    },\n    visible: { control: { type: 'boolean' } },\n  },\n} as Meta;\n\nconst StickyDiv = styled.div`\n  position: sticky;\n  top: 0;\n  z-index: ${ZIndexes.POPOVER + 1};\n`;\n\nconst MovedDiv = styled.div`\n  margin-left: 40px;\n`;\n\nconst overlay = (\n  <Menu>\n    <MenuItem>Option 1</MenuItem>\n    <MenuItem>Option 2</MenuItem>\n    <MenuItem>Option 3</MenuItem>\n    <MenuItem>Option 4</MenuItem>\n  </Menu>\n);\n\nexport const Default: StoryFn<IDropdownProps> = (args) => (\n  <Dropdown {...args} overlay={overlay}>\n    <Button variant={Variants.Transparent} icon={<ChevronDown />} iconPosition={Positions.Right}>\n      Menu Option\n    </Button>\n  </Dropdown>\n);\nDefault.args = {\n  trigger: ['click'],\n  onOverlayClick: (e) => {\n    e.stopPropagation();\n  },\n};\n\nexport const WithArrow: StoryFn<IDropdownProps> = (args) => (\n  <Dropdown {...args} overlay={overlay}>\n    <Button variant={Variants.Transparent} icon={<ChevronDown />} iconPosition={Positions.Right}>\n      Menu Option\n    </Button>\n  </Dropdown>\n);\nWithArrow.args = {\n  arrow: true,\n  trigger: ['click'],\n};\n\nexport const Placement: StoryFn<IDropdownProps> = (args) => (\n  <Grid flow=\"row\" rowGap=\"48px\">\n    <Grid flow=\"column\" rowGap=\"24px\">\n      <Dropdown {...args} overlay={overlay} placement=\"bottomLeft\">\n        <Button variant={Variants.Outlined}>\n          <Text size={Sizes.Small}>Placement: Bottom - Left</Text>\n        </Button>\n      </Dropdown>\n      <Dropdown {...args} overlay={overlay} placement=\"bottomCenter\">\n        <Button variant={Variants.Outlined}>\n          <Text size={Sizes.Small}>Placement: Bottom - Center</Text>\n        </Button>\n      </Dropdown>\n      <Dropdown {...args} overlay={overlay} placement=\"bottomRight\">\n        <Button variant={Variants.Outlined}>\n          <Text size={Sizes.Small}>Placement: Bottom - Right</Text>\n        </Button>\n      </Dropdown>\n    </Grid>\n    <Grid flow=\"column\" rowGap=\"24px\">\n      <Dropdown {...args} overlay={overlay} placement=\"topLeft\">\n        <Button variant={Variants.Outlined}>\n          <Text size={Sizes.Small}>Placement: Top - Left</Text>\n        </Button>\n      </Dropdown>\n      <Dropdown {...args} overlay={overlay} placement=\"topCenter\">\n        <Button variant={Variants.Outlined}>\n          <Text size={Sizes.Small}>Placement: Top - Center</Text>\n        </Button>\n      </Dropdown>\n      <Dropdown {...args} overlay={overlay} placement=\"topRight\">\n        <Button variant={Variants.Outlined}>\n          <Text size={Sizes.Small}>Placement: Top - Right</Text>\n        </Button>\n      </Dropdown>\n    </Grid>\n  </Grid>\n);\nPlacement.args = {\n  trigger: ['click'],\n  arrow: true,\n};\nPlacement.argTypes = {\n  placement: { table: { disable: true } },\n};\n\nexport const Triggers: StoryFn<IDropdownProps> = (args) => (\n  <Grid gap=\"12px\">\n    <Dropdown {...args} trigger={['hover']} overlay={overlay}>\n      <Button variant={Variants.Outlined}>Hover</Button>\n    </Dropdown>\n    <Dropdown {...args} trigger={['click']} overlay={overlay}>\n      <Button variant={Variants.Outlined}>Click</Button>\n    </Dropdown>\n    <Dropdown {...args} trigger={['contextMenu']} overlay={overlay}>\n      <Button variant={Variants.Outlined}>Right click</Button>\n    </Dropdown>\n  </Grid>\n);\nTriggers.argTypes = {\n  placement: { table: { disable: true } },\n  trigger: { table: { disable: true } },\n};\n\nexport const Sticky: StoryFn<IDropdownProps> = (args) => (\n  <Grid flow=\"row\">\n    <StickyDiv>\n      <Dropdown {...args} overlay={overlay}>\n        <Button>\n          <Text size={Sizes.Small}>Click here</Text>\n          <ChevronDown width={20} />\n        </Button>\n      </Dropdown>\n    </StickyDiv>\n    <MovedDiv>\n      <Dropdown {...args} overlay={overlay}>\n        <Button>\n          <Text size={Sizes.Small}>Click here</Text>\n          <ChevronDown width={20} />\n        </Button>\n      </Dropdown>\n    </MovedDiv>\n    <Text>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit lobortis orci at laoreet. Donec\n      vulputate lorem vitae dui mattis pulvinar. Sed quis accumsan diam. Aenean laoreet nisi quis ligula volutpat,\n      auctor efficitur purus cursus. Vivamus vitae lacus et tellus bibendum vehicula nec dapibus nisi. In tincidunt\n      venenatis commodo. Nam et diam luctus, consequat leo et, ultrices sem. Sed et ullamcorper arcu, eu aliquet augue.\n      Suspendisse fringilla felis et dui luctus rhoncus.\n    </Text>\n  </Grid>\n);\nSticky.args = {\n  trigger: ['click'],\n};\nSticky.argTypes = {\n  placement: { table: { disable: true } },\n  trigger: { table: { disable: true } },\n};\n\nexport const Align: StoryFn<IDropdownProps> = (args) => (\n  <Dropdown {...args} overlay={overlay}>\n    <Button variant={Variants.Transparent} icon={<ChevronDown />} iconPosition={Positions.Right}>\n      Menu Option\n    </Button>\n  </Dropdown>\n);\nAlign.args = {\n  trigger: ['click'],\n  onOverlayClick: (e) => {\n    e.stopPropagation();\n  },\n  align: {\n    overflow: TRIGGER_OVERFLOW,\n  },\n};\n"]}

package/build/esm/components/Dropdown/Dropdown.styles.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { IDropdownProps } from './Dropdown.types';
+declare const Dropdown: (Component: ({ className, trigger, children, arrow, placement, ...rest }: IDropdownProps) => ReactElement, prefixCls: string, overlayClassName: string) => import("styled-components").StyledComponent<({ className, trigger, children, arrow, placement, ...rest }: IDropdownProps) => ReactElement, import("styled-components").DefaultTheme, {}, never>;
+declare const DropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export { Dropdown, DropdownContainer };
+//# sourceMappingURL=Dropdown.styles.d.ts.map

package/build/esm/components/Dropdown/Dropdown.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,QAAQ,4EAC6D,cAAc,KAAK,YAAY,aAC7F,MAAM,oBACC,MAAM,+GAFiD,cAAc,KAAK,YAAY,sDAsEvG,CAAC;AAEJ,QAAA,MAAM,iBAAiB,yGAMtB,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}

package/build/esm/components/Dropdown/Dropdown.styles.js

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+import { ZIndexes } from 'acinguiux-ds-react-base';
+const Dropdown = (Component, prefixCls, overlayClassName) => styled(Component) `
+    ${({ theme }) => css `
+      &.${prefixCls} {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        color: ${theme.text.onSurface.strong};
+
+        &-hidden {
+          display: none !important;
+        }
+
+        .${prefixCls}-arrow {
+          width: 24px;
+          height: 12px;
+          margin: 0 16px;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            display: block;
+            width: 12px;
+            height: 12px;
+            background: ${theme.background.raised};
+            box-shadow: rgb(0 0 0 / 2%) 0 0 4px 0, rgb(0 0 0 / 4%) 0 0 0 1px;
+            transform: translateX(50%) translateY(50%) rotate(45deg);
+          }
+        }
+
+        &-placement-topLeft,
+        &-placement-bottomLeft {
+          .${prefixCls}-arrow {
+            margin-right: auto;
+          }
+        }
+
+        &-placement-topCenter,
+        &-placement-bottomCenter {
+          .${prefixCls}-arrow {
+            margin: auto;
+          }
+        }
+
+        &-placement-topRight,
+        &-placement-bottomRight {
+          .${prefixCls}-arrow {
+            margin-left: auto;
+          }
+        }
+
+        &-placement-topLeft,
+        &-placement-topCenter,
+        &-placement-topRight {
+          flex-direction: column-reverse;
+          .${prefixCls}-arrow {
+            &::before {
+              transform: translateX(50%) translateY(-50%) rotate(45deg);
+            }
+          }
+        }
+      }
+
+      &.${overlayClassName} {
+        z-index: ${ZIndexes.POPOVER};
+      }
+    `}
+  `;
+const DropdownContainer = styled.div `
+  ${({ theme }) => css `
+    border-radius: 2px;
+    background: ${theme.background.raised};
+    box-shadow: ${theme.elevation.level2};
+  `}
+`;
+export { Dropdown, DropdownContainer };
+//# sourceMappingURL=Dropdown.styles.js.map

package/build/esm/components/Dropdown/Dropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.styles.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.styles.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAInD,MAAM,QAAQ,GAAG,CACf,SAAwG,EACxG,SAAiB,EACjB,gBAAwB,EACxB,EAAE,CACF,MAAM,CAAC,SAAS,CAAC,CAAA;MACb,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;UACd,SAAS;;;;iBAIF,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;;;;;;WAMjC,SAAS;;;;;;;;;;;0BAWM,KAAK,CAAC,UAAU,CAAC,MAAM;;;;;;;;aAQpC,SAAS;;;;;;;aAOT,SAAS;;;;;;;aAOT,SAAS;;;;;;;;;aAST,SAAS;;;;;;;;UAQZ,gBAAgB;mBACP,QAAQ,CAAC,OAAO;;KAE9B;GACF,CAAC;AAEJ,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;IAChC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;kBAEJ,KAAK,CAAC,UAAU,CAAC,MAAM;kBACvB,KAAK,CAAC,SAAS,CAAC,MAAM;GACrC;CACF,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import { ReactElement } from 'react';\n\nimport styled, { css } from 'styled-components';\nimport { ZIndexes } from 'acinguiux-ds-react-base';\n\nimport { IDropdownProps } from './Dropdown.types';\n\nconst Dropdown = (\n  Component: ({ className, trigger, children, arrow, placement, ...rest }: IDropdownProps) => ReactElement,\n  prefixCls: string,\n  overlayClassName: string,\n) =>\n  styled(Component)`\n    ${({ theme }) => css`\n      &.${prefixCls} {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        color: ${theme.text.onSurface.strong};\n\n        &-hidden {\n          display: none !important;\n        }\n\n        .${prefixCls}-arrow {\n          width: 24px;\n          height: 12px;\n          margin: 0 16px;\n          overflow: hidden;\n\n          &::before {\n            content: '';\n            display: block;\n            width: 12px;\n            height: 12px;\n            background: ${theme.background.raised};\n            box-shadow: rgb(0 0 0 / 2%) 0 0 4px 0, rgb(0 0 0 / 4%) 0 0 0 1px;\n            transform: translateX(50%) translateY(50%) rotate(45deg);\n          }\n        }\n\n        &-placement-topLeft,\n        &-placement-bottomLeft {\n          .${prefixCls}-arrow {\n            margin-right: auto;\n          }\n        }\n\n        &-placement-topCenter,\n        &-placement-bottomCenter {\n          .${prefixCls}-arrow {\n            margin: auto;\n          }\n        }\n\n        &-placement-topRight,\n        &-placement-bottomRight {\n          .${prefixCls}-arrow {\n            margin-left: auto;\n          }\n        }\n\n        &-placement-topLeft,\n        &-placement-topCenter,\n        &-placement-topRight {\n          flex-direction: column-reverse;\n          .${prefixCls}-arrow {\n            &::before {\n              transform: translateX(50%) translateY(-50%) rotate(45deg);\n            }\n          }\n        }\n      }\n\n      &.${overlayClassName} {\n        z-index: ${ZIndexes.POPOVER};\n      }\n    `}\n  `;\n\nconst DropdownContainer = styled.div`\n  ${({ theme }) => css`\n    border-radius: 2px;\n    background: ${theme.background.raised};\n    box-shadow: ${theme.elevation.level2};\n  `}\n`;\n\nexport { Dropdown, DropdownContainer };\n"]}

package/build/esm/components/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Dropdown.test.d.ts.map

package/build/esm/components/Dropdown/Dropdown.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/Dropdown/Dropdown.test.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent, describe, it, expect } from '../../utils/viTestUtils';
+import Text from '../Text/components/Text/Text';
+import Dropdown from './Dropdown';
+describe('Dropdown component', () => {
+    it('should render the content after click the dropdown', async () => {
+        render(_jsx(Dropdown, { overlay: _jsx(Text, { children: "Overlay text" }), children: _jsx(Text, { children: "Dropdown text" }) }));
+        const dropdown = screen.getByText('Dropdown text');
+        expect(dropdown).toBeInTheDocument();
+        fireEvent.click(dropdown);
+        const overlayText = await screen.findByText('Overlay text');
+        expect(overlayText).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Dropdown.test.js.map

package/build/esm/components/Dropdown/Dropdown.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.test.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,IAAI,MAAM,8BAA8B,CAAC;AAChD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,CACJ,KAAC,QAAQ,IAAC,OAAO,EAAE,KAAC,IAAI,+BAAoB,YAC1C,KAAC,IAAI,gCAAqB,GACjB,CACZ,CAAC;QACF,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QACnD,MAAM,CAAC,QAAQ,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAErC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAE1B,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;QAC5D,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { render, screen, fireEvent, describe, it, expect } from '../../utils/viTestUtils';\nimport Text from '../Text/components/Text/Text';\nimport Dropdown from './Dropdown';\n\ndescribe('Dropdown component', () => {\n  it('should render the content after click the dropdown', async () => {\n    render(\n      <Dropdown overlay={<Text>Overlay text</Text>}>\n        <Text>Dropdown text</Text>\n      </Dropdown>,\n    );\n    const dropdown = screen.getByText('Dropdown text');\n    expect(dropdown).toBeInTheDocument();\n\n    fireEvent.click(dropdown);\n\n    const overlayText = await screen.findByText('Overlay text');\n    expect(overlayText).toBeInTheDocument();\n  });\n});\n"]}

package/build/esm/components/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef, ReactElement } from 'react';
+import { DropdownProps } from 'rc-dropdown/lib/Dropdown';
+export type DropdownPlacement = 'topCenter' | 'bottomCenter' | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
+export interface IDropdownProps extends Omit<DropdownProps, 'placement' | 'trigger'>, ComponentPropsWithRef<'div'> {
+    children: ReactElement;
+    overlay: ReactElement;
+    trigger?: DropdownTrigger | DropdownTrigger[];
+    onVisibleChange?: (visible: boolean) => void;
+    visible?: boolean;
+    overlayClassName?: string;
+    placement?: DropdownPlacement;
+    arrow?: boolean;
+}
+//# sourceMappingURL=Dropdown.types.d.ts.map

package/build/esm/components/Dropdown/Dropdown.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AACrH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEhE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC;IAChH,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/build/esm/components/Dropdown/Dropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Dropdown.types.js.map

package/build/esm/components/Dropdown/Dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.types.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentPropsWithRef, ReactElement } from 'react';\n\nimport { DropdownProps } from 'rc-dropdown/lib/Dropdown';\n\nexport type DropdownPlacement = 'topCenter' | 'bottomCenter' | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\nexport type DropdownTrigger = 'click' | 'hover' | 'contextMenu';\n\nexport interface IDropdownProps extends Omit<DropdownProps, 'placement' | 'trigger'>, ComponentPropsWithRef<'div'> {\n  children: ReactElement;\n  overlay: ReactElement;\n  trigger?: DropdownTrigger | DropdownTrigger[];\n  onVisibleChange?: (visible: boolean) => void;\n  visible?: boolean;\n  overlayClassName?: string;\n  placement?: DropdownPlacement;\n  arrow?: boolean;\n}\n"]}

package/build/esm/components/Dropdown/__tests__/Dropdown.avt.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Dropdown.avt.test.d.ts.map

package/build/esm/components/Dropdown/__tests__/Dropdown.avt.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.avt.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/__tests__/Dropdown.avt.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/Dropdown/__tests__/Dropdown.avt.test.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Dropdown from '../Dropdown';
+import Text from '../../Text/components/Text/Text';
+import { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';
+const content = 'Dropdown content';
+const overlay = 'Dropdown overlay content';
+describe('AVT', () => {
+    it('should not have Accessibility violations for DEFAULT <Dropdown />', async () => {
+        await runAxeAccessibilityValidationTest(_jsx(Dropdown, { overlay: _jsx(Text, { children: overlay }), children: _jsx(Text, { children: content }) }));
+    });
+});
+//# sourceMappingURL=Dropdown.avt.test.js.map

package/build/esm/components/Dropdown/__tests__/Dropdown.avt.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.avt.test.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/__tests__/Dropdown.avt.test.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAE/E,MAAM,OAAO,GAAG,kBAAkB,CAAC;AACnC,MAAM,OAAO,GAAG,0BAA0B,CAAC;AAE3C,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACnB,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,iCAAiC,CACrC,KAAC,QAAQ,IAAC,OAAO,EAAE,KAAC,IAAI,cAAE,OAAO,GAAQ,YACvC,KAAC,IAAI,cAAE,OAAO,GAAQ,GACb,CACZ,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import Dropdown from '../Dropdown';\nimport Text from '../../Text/components/Text/Text';\nimport { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';\n\nconst content = 'Dropdown content';\nconst overlay = 'Dropdown overlay content';\n\ndescribe('AVT', () => {\n  it('should not have Accessibility violations for DEFAULT <Dropdown />', async () => {\n    await runAxeAccessibilityValidationTest(\n      <Dropdown overlay={<Text>{overlay}</Text>}>\n        <Text>{content}</Text>\n      </Dropdown>,\n    );\n  });\n});\n"]}

package/build/esm/components/EmptyState/EmptyState.consts.d.ts

@@ -0,0 +1,14 @@
+import { EmptyStateSize } from './EmptyState.types';
+type EmptyStateConstsType = {
+    [sizes in EmptyStateSize]: {
+        icon: number;
+        pictogram: number;
+        image: number;
+        gap: number;
+        textGap: number;
+        actionsGap: number;
+    };
+};
+export declare const emptyStateConsts: EmptyStateConstsType;
+export {};
+//# sourceMappingURL=EmptyState.consts.d.ts.map

package/build/esm/components/EmptyState/EmptyState.consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.consts.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,KAAK,oBAAoB,GAAG;KACzB,KAAK,IAAI,cAAc,GAAG;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;KACpB;CACF,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,oBAiC9B,CAAC"}

package/build/esm/components/EmptyState/EmptyState.consts.js

@@ -0,0 +1,36 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+export const emptyStateConsts = {
+    [Sizes.ExtraSmall]: {
+        icon: 32,
+        pictogram: 48,
+        image: 116,
+        gap: 12,
+        textGap: 4,
+        actionsGap: 12,
+    },
+    [Sizes.Small]: {
+        icon: 40,
+        pictogram: 64,
+        image: 132,
+        gap: 20,
+        textGap: 8,
+        actionsGap: 12,
+    },
+    [Sizes.Medium]: {
+        icon: 52,
+        pictogram: 76,
+        image: 164,
+        gap: 24,
+        textGap: 8,
+        actionsGap: 16,
+    },
+    [Sizes.Large]: {
+        icon: 64,
+        pictogram: 96,
+        image: 200,
+        gap: 32,
+        textGap: 12,
+        actionsGap: 16,
+    },
+};
+//# sourceMappingURL=EmptyState.consts.js.map

package/build/esm/components/EmptyState/EmptyState.consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.consts.js","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAehD,MAAM,CAAC,MAAM,gBAAgB,GAAyB;IACpD,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;QAClB,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,EAAE;QACP,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,EAAE;KACf;IACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,EAAE;QACP,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,EAAE;KACf;IACD,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACd,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,EAAE;QACP,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,EAAE;KACf;IACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,EAAE;QACP,OAAO,EAAE,EAAE;QACX,UAAU,EAAE,EAAE;KACf;CACF,CAAC","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\nimport { EmptyStateSize } from './EmptyState.types';\n\ntype EmptyStateConstsType = {\n  [sizes in EmptyStateSize]: {\n    icon: number;\n    pictogram: number;\n    image: number;\n    gap: number;\n    textGap: number;\n    actionsGap: number;\n  };\n};\n\nexport const emptyStateConsts: EmptyStateConstsType = {\n  [Sizes.ExtraSmall]: {\n    icon: 32,\n    pictogram: 48,\n    image: 116,\n    gap: 12,\n    textGap: 4,\n    actionsGap: 12,\n  },\n  [Sizes.Small]: {\n    icon: 40,\n    pictogram: 64,\n    image: 132,\n    gap: 20,\n    textGap: 8,\n    actionsGap: 12,\n  },\n  [Sizes.Medium]: {\n    icon: 52,\n    pictogram: 76,\n    image: 164,\n    gap: 24,\n    textGap: 8,\n    actionsGap: 16,\n  },\n  [Sizes.Large]: {\n    icon: 64,\n    pictogram: 96,\n    image: 200,\n    gap: 32,\n    textGap: 12,\n    actionsGap: 16,\n  },\n};\n"]}

package/build/esm/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { Directions, Alignments } from 'acinguiux-ds-react-base';
+declare const EmptyState: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    className?: string | undefined;
+    size?: import("./EmptyState.types").EmptyStateSize | undefined;
+    title?: string | undefined;
+    description?: import("react").ReactNode;
+    image?: import("./EmptyState.types").EmptyStateImage | undefined;
+    icon?: import("./EmptyState.types").EmptyStateIcon | undefined;
+    pictogram?: import("./EmptyState.types").EmptyStatePictogram | undefined;
+    actions?: import("./EmptyState.types").EmptyStateAction[] | undefined;
+} & {
+    actionsDirection?: "horizontal" | Directions.Horizontal | undefined;
+    actionsFlow?: ("center" | "fill") | undefined;
+    actionsAlignment?: Alignments.Center | Alignments.Fill | ("center" | "fill") | undefined;
+}, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    className?: string | undefined;
+    size?: import("./EmptyState.types").EmptyStateSize | undefined;
+    title?: string | undefined;
+    description?: import("react").ReactNode;
+    image?: import("./EmptyState.types").EmptyStateImage | undefined;
+    icon?: import("./EmptyState.types").EmptyStateIcon | undefined;
+    pictogram?: import("./EmptyState.types").EmptyStatePictogram | undefined;
+    actions?: import("./EmptyState.types").EmptyStateAction[] | undefined;
+} & {
+    actionsDirection: "vertical" | Directions.Vertical;
+    actionsFlow?: "never" | undefined;
+    actionsAlignment?: "never" | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
+export default EmptyState;
+//# sourceMappingURL=EmptyState.d.ts.map

package/build/esm/components/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAS,UAAU,EAAqB,MAAM,yBAAyB,CAAC;AAS3F,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2DAyEf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/esm/components/EmptyState/EmptyState.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { Directions, Sizes, Alignments, EMPTY_STATE_CLASS } from 'acinguiux-ds-react-base';
+import { Sentiments } from 'acinguiux-ds-fabrics';
+import Button from '../Button/Button';
+import * as Styled from './EmptyState.styles';
+import { titleSize, descriptionSize, getVisualPlaceholderType } from './utils/emptyStateUtils';
+import ButtonLink from '../ButtonLink/ButtonLink';
+const EmptyState = forwardRef(({ className, image, icon, pictogram, title, description, size = Sizes.Medium, actions, actionsDirection = Directions.Horizontal, actionsAlignment, actionsFlow, ...rest }, ref) => {
+    const innerAlignment = actionsAlignment || actionsFlow || Alignments.Center;
+    return (_jsxs(Styled.EmptyState, { ref: ref, size: size, className: classNames(EMPTY_STATE_CLASS, className), ...rest, children: [(image || pictogram || icon) && (_jsx(Styled.VisualPlaceholder, { size: size, type: getVisualPlaceholderType(!!image, !!pictogram, !!icon), iconSentiment: (icon === null || icon === void 0 ? void 0 : icon.sentiment) || Sentiments.Neutral, children: image || pictogram || (icon === null || icon === void 0 ? void 0 : icon.component) })), (title || description) && (_jsxs(Styled.TextPlaceholder, { size: size, children: [title && (_jsx(Styled.Title, { size: size, type: titleSize(size), bold: true, gutter: false, children: title })), typeof description === 'string' ? (_jsx(Styled.Description, { size: descriptionSize(size), children: description })) : (description)] })), (actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(Styled.Actions, { size: size, actionsDirection: actionsDirection, actionsAlignment: innerAlignment, children: actions.map((actionButton) => {
+                    if ('href' in actionButton) {
+                        return (_jsx(ButtonLink, { size: size, href: actionButton.href, ...actionButton.props, children: actionButton.label }, actionButton.label));
+                    }
+                    if ('action' in actionButton) {
+                        return (_jsx(Button, { size: size, onClick: actionButton.action, ...actionButton.props, children: actionButton.label }, actionButton.label));
+                    }
+                    return null;
+                }) }))] }));
+});
+export default EmptyState;
+//# sourceMappingURL=EmptyState.js.map

package/build/esm/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Directions, Sizes, Alignments, EMPTY_STATE_CLASS } from 'acinguiux-ds-react-base';\nimport { Sentiments } from 'acinguiux-ds-fabrics';\n\nimport Button from '../Button/Button';\nimport * as Styled from './EmptyState.styles';\nimport { IEmptyStateProps } from './EmptyState.types';\nimport { titleSize, descriptionSize, getVisualPlaceholderType } from './utils/emptyStateUtils';\nimport ButtonLink from '../ButtonLink/ButtonLink';\n\nconst EmptyState = forwardRef(\n  (\n    {\n      className,\n      image,\n      icon,\n      pictogram,\n      title,\n      description,\n      size = Sizes.Medium,\n      actions,\n      actionsDirection = Directions.Horizontal,\n      actionsAlignment,\n      actionsFlow,\n      ...rest\n    }: IEmptyStateProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const innerAlignment = actionsAlignment || actionsFlow || Alignments.Center;\n\n    return (\n      <Styled.EmptyState ref={ref} size={size} className={classNames(EMPTY_STATE_CLASS, className)} {...rest}>\n        {(image || pictogram || icon) && (\n          <Styled.VisualPlaceholder\n            size={size}\n            type={getVisualPlaceholderType(!!image, !!pictogram, !!icon)}\n            iconSentiment={icon?.sentiment || Sentiments.Neutral}\n          >\n            {image || pictogram || icon?.component}\n          </Styled.VisualPlaceholder>\n        )}\n\n        {(title || description) && (\n          <Styled.TextPlaceholder size={size}>\n            {title && (\n              <Styled.Title size={size} type={titleSize(size)} bold gutter={false}>\n                {title}\n              </Styled.Title>\n            )}\n            {typeof description === 'string' ? (\n              <Styled.Description size={descriptionSize(size)}>{description}</Styled.Description>\n            ) : (\n              description\n            )}\n          </Styled.TextPlaceholder>\n        )}\n\n        {actions?.length && (\n          <Styled.Actions size={size} actionsDirection={actionsDirection} actionsAlignment={innerAlignment}>\n            {actions.map((actionButton) => {\n              if ('href' in actionButton) {\n                return (\n                  <ButtonLink key={actionButton.label} size={size} href={actionButton.href} {...actionButton.props}>\n                    {actionButton.label}\n                  </ButtonLink>\n                );\n              }\n\n              if ('action' in actionButton) {\n                return (\n                  <Button key={actionButton.label} size={size} onClick={actionButton.action} {...actionButton.props}>\n                    {actionButton.label}\n                  </Button>\n                );\n              }\n\n              return null;\n            })}\n          </Styled.Actions>\n        )}\n      </Styled.EmptyState>\n    );\n  },\n);\n\nexport default EmptyState;\n"]}

package/build/esm/components/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Directions, Alignments, Sizes } from 'acinguiux-ds-react-base';
+import EmptyState from './EmptyState';
+import { EmptyStateAction } from './EmptyState.types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        className?: string | undefined;
+        size?: import("./EmptyState.types").EmptyStateSize | undefined;
+        title?: string | undefined;
+        description?: React.ReactNode;
+        image?: import("./EmptyState.types").EmptyStateImage | undefined;
+        icon?: import("./EmptyState.types").EmptyStateIcon | undefined;
+        pictogram?: import("./EmptyState.types").EmptyStatePictogram | undefined;
+        actions?: EmptyStateAction[] | undefined;
+    } & {
+        actionsDirection?: "horizontal" | Directions.Horizontal | undefined;
+        actionsFlow?: ("center" | "fill") | undefined;
+        actionsAlignment?: Alignments.Center | Alignments.Fill | ("center" | "fill") | undefined;
+    }, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        className?: string | undefined;
+        size?: import("./EmptyState.types").EmptyStateSize | undefined;
+        title?: string | undefined;
+        description?: React.ReactNode;
+        image?: import("./EmptyState.types").EmptyStateImage | undefined;
+        icon?: import("./EmptyState.types").EmptyStateIcon | undefined;
+        pictogram?: import("./EmptyState.types").EmptyStatePictogram | undefined;
+        actions?: EmptyStateAction[] | undefined;
+    } & {
+        actionsDirection: "vertical" | Directions.Vertical;
+        actionsFlow?: "never" | undefined;
+        actionsAlignment?: "never" | undefined;
+    }, "ref">) & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        storyLink: string;
+    };
+    argTypes: {
+        actions: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        actionsAlignment: {
+            options: string[];
+            control: string;
+        };
+        actionsDirection: {
+            options: Directions[];
+            control: string;
+        };
+        image: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            options: Sizes[];
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: StoryFn<typeof EmptyState>;
+export declare const DifferentSizes: StoryFn<typeof EmptyState>;
+export declare const Actions: StoryFn<typeof EmptyState>;
+export declare const ActionsFilled: StoryFn<typeof EmptyState>;
+export declare const ActionsVertical: StoryFn<typeof EmptyState>;
+export declare const WithLinkButton: StoryFn<typeof EmptyState>;
+export declare const ButtonAndButtonLinkActions: StoryFn<typeof EmptyState>;
+export declare const WithIcon: StoryFn<typeof EmptyState>;
+export declare const WithPictogram: StoryFn<typeof EmptyState>;
+export declare const WithImage: StoryFn<typeof EmptyState>;
+export declare const WithSvgImage: StoryFn<typeof EmptyState>;
+export declare const WithoutTitle: StoryFn<typeof EmptyState>;
+export declare const WithoutDescription: StoryFn<typeof EmptyState>;
+export declare const WithoutActionButtons: StoryFn<typeof EmptyState>;
+export declare const InContainer: StoryFn<typeof EmptyState>;
+export declare const ComponentDescription: StoryFn<typeof EmptyState>;
+//# sourceMappingURL=EmptyState.stories.d.ts.map

package/build/esm/components/EmptyState/EmptyState.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAkB,MAAM,yBAAyB,CAAC;AAKxF,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMtD,wBA4BE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU,CAE9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,OAAO,UAAU,CAmErD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU,CAoB9C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,OAAO,UAAU,CAoBpD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,OAAO,UAAU,CAoBtD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,OAAO,UAAU,CAkBrD,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,OAAO,CAAC,OAAO,UAAU,CAsBjE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAgB/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,OAAO,UAAU,CAapD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,OAAO,UAAU,CAahD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,OAAO,UAAU,CAanD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,OAAO,UAAU,CAYnD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,OAAO,UAAU,CAYzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,OAAO,UAAU,CAO3D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,OAAO,UAAU,CAuBlD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,OAAO,UAAU,CAoB3D,CAAC"}