acinguiux-ds-react-framework 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Meta, StoryFn } from '@storybook/react';\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport MenuItem from '../Menu/components/MenuItem';\nimport Menu from '../Menu/Menu';\nimport Avatar from './Avatar';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\nimport Flexbox from '../Flexbox/Flexbox';\nimport Showcase from '../_internalComponents/Showcase/Showcase';\n\nexport default {\n  title: 'Data Display/Avatar',\n  component: Avatar,\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/Avatar/Avatar.stories.tsx`,\n  },\n  argTypes: {\n    abbreviation: { control: 'text' },\n    className: { control: 'text' },\n    label: { control: 'text' },\n    secondaryLabel: { control: 'text' },\n    size: {\n      options: [Sizes.Small, Sizes.Medium, Sizes.Large],\n      control: 'radio',\n    },\n    src: { control: 'text', description: 'Type: \"Pecten.svg\", to use internal image src' },\n  },\n} as Meta;\n\nexport const Icon: StoryFn<typeof Avatar> = (args): ReactElement => <Avatar {...args} />;\n\nexport const Image: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Avatar src=\"Pecten.svg\" alt=\"Custom alt text\" aria-label=\"Avatar aria label text\" {...args} />\n);\n\nexport const Abbreviation: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Avatar abbreviation=\"JB\" aria-label=\"Avatar aria label text\" {...args} />\n);\n\nexport const DifferentSizes: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Flexbox gap=\"48px\">\n    <Showcase label=\"Small\">\n      <Avatar\n        size={Sizes.Small}\n        abbreviation=\"JB\"\n        label=\"John Smith\"\n        secondaryLabel=\"Software Engineer\"\n        aria-label=\"Avatar aria label text\"\n        {...args}\n      />\n    </Showcase>\n    <Showcase label=\"Medium\">\n      <Avatar\n        abbreviation=\"JB\"\n        label=\"John Smith\"\n        secondaryLabel=\"Software Engineer\"\n        aria-label=\"Avatar aria label text\"\n        {...args}\n      />\n    </Showcase>\n    <Showcase label=\"Large\">\n      <Avatar\n        size={Sizes.Large}\n        abbreviation=\"JB\"\n        label=\"John Smith\"\n        secondaryLabel=\"Software Engineer\"\n        aria-label=\"Avatar aria label text\"\n        {...args}\n      />\n    </Showcase>\n  </Flexbox>\n);\n\nexport const AvatarWithText: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Avatar src=\"Pecten.svg\" label=\"ACINGUIUX - Admin\" secondaryLabel=\"test@acinguiux.com\" {...args} />\n);\n\nexport const LabelOnly: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Avatar src=\"Pecten.svg\" label=\"ACINGUIUX - Admin\" {...args} />\n);\n\nexport const WithDropdown: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Avatar\n    src=\"Pecten.svg\"\n    dropdownOverlay={\n      <Menu>\n        <MenuItem>Profile</MenuItem>\n        <MenuItem>Logout</MenuItem>\n      </Menu>\n    }\n    {...args}\n  />\n);\n\nexport const AvatarWithTextWithDropdown: StoryFn<typeof Avatar> = (args): ReactElement => (\n  <Avatar\n    src=\"Pecten.svg\"\n    label=\"ACINGUIUX - Admin\"\n    secondaryLabel=\"test@acinguiux.com\"\n    dropdownOverlay={\n      <Menu>\n        <MenuItem>Profile</MenuItem>\n        <MenuItem>Logout</MenuItem>\n      </Menu>\n    }\n    {...args}\n  />\n);\n"]}

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

@@ -0,0 +1,12 @@
+import { IAvatarProps } from './Avatar.types';
+declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Avatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps, "size">>, never>;
+declare const NoImageCircleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps, "size">>, never>;
+declare const NoImageCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+declare const TextBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<IAvatarProps, "collapsed">, never>;
+declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {} & IAvatarProps, never>;
+declare const AdditionalText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, Required<Pick<IAvatarProps, "size">>, never>;
+declare const AvatarDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export { AvatarWrapper, Avatar, NoImageCircleWrapper, NoImageCircle, Image, TextBox, Label, AdditionalText, AvatarDropdown, };
+//# sourceMappingURL=Avatar.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,aAAa,yGAIlB,CAAC;AAEF,QAAA,MAAM,MAAM,2IAaX,CAAC;AAEF,QAAA,MAAM,oBAAoB,2IAgBzB,CAAC;AAEF,QAAA,MAAM,aAAa,yGAGlB,CAAC;AAEF,QAAA,MAAM,KAAK,yGAIV,CAAC;AAEF,QAAA,MAAM,OAAO,sIAWZ,CAAC;AAEF,QAAA,MAAM,KAAK,sHAuBV,CAAC;AAEF,QAAA,MAAM,cAAc,yIAanB,CAAC;AAEF,QAAA,MAAM,cAAc,yGAInB,CAAC;AAEF,OAAO,EACL,aAAa,EACb,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,KAAK,EACL,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,GACf,CAAC"}

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

@@ -0,0 +1,101 @@
+import styled, { css } from 'styled-components';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { avatarConsts } from './Avatar.consts';
+const AvatarWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const Avatar = styled.div(({ size }) => css `
+    display: flex;
+    align-items: stretch;
+    flex: 0;
+    ${size &&
+    css `
+      min-width: ${avatarConsts[size].avatar}px;
+      min-height: ${avatarConsts[size].avatar}px;
+      width: ${avatarConsts[size].avatar}px;
+      height: ${avatarConsts[size].avatar}px;
+    `}
+  `);
+const NoImageCircleWrapper = styled.div `
+  ${({ size, theme }) => css `
+    ${(size === Sizes.Small || size === Sizes.Medium) && theme.heading[5].bold}
+    ${size === Sizes.Large && theme.heading[3].demi}
+
+    display: flex;
+    flex: 1 0 0;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 100%;
+    text-align: center;
+    white-space: nowrap;
+    color: ${theme.text.onFocus.strong};
+    background-color: ${theme.focus.strong};
+  `}
+`;
+const NoImageCircle = styled.div `
+  display: flex;
+  font-size: 100%;
+`;
+const Image = styled.img `
+  max-width: 100%;
+  border-radius: 100%;
+  object-fit: cover;
+`;
+const TextBox = styled.div(({ collapsed }) => css `
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    transition: opacity 0.2s linear;
+    opacity: ${collapsed ? '0' : '1'};
+  `);
+const Label = styled.p `
+  ${({ theme, size, secondaryLabel }) => css `
+    margin: 0;
+
+    ${secondaryLabel &&
+    secondaryLabel.length > 0 &&
+    css `
+      ${size === Sizes.Large && theme.label.medium.bold}
+      ${(size === Sizes.Small || size === Sizes.Medium) && theme.label.small.bold}
+    `}
+
+    ${(!secondaryLabel || (secondaryLabel && secondaryLabel.length === 0)) &&
+    css `
+      ${(size === Sizes.Large || size === Sizes.Medium) && theme.label.medium.bold}
+      ${size === Sizes.Small && theme.label.small.bold}
+    `}
+    
+    color: ${theme.text.onSurface.strong};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  `}
+`;
+const AdditionalText = styled.p `
+  ${({ size, theme }) => css `
+    margin: ${size === Sizes.Large ? '4px' : '0'} 0 0;
+
+    ${size === Sizes.Large && theme.label.medium.normal}
+    ${(size === Sizes.Small || size === Sizes.Medium) && theme.label.small.normal}
+
+    color: ${theme.text.onSurface.subtle};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  `}
+`;
+const AvatarDropdown = styled.div `
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+`;
+export { AvatarWrapper, Avatar, NoImageCircleWrapper, NoImageCircle, Image, TextBox, Label, AdditionalText, AvatarDropdown, };
+//# sourceMappingURL=Avatar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport { avatarConsts } from './Avatar.consts';\nimport { IAvatarProps } from './Avatar.types';\n\nconst AvatarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n`;\n\nconst Avatar = styled.div<Required<Pick<IAvatarProps, 'size'>>>(\n  ({ size }) => css`\n    display: flex;\n    align-items: stretch;\n    flex: 0;\n    ${size &&\n    css`\n      min-width: ${avatarConsts[size].avatar}px;\n      min-height: ${avatarConsts[size].avatar}px;\n      width: ${avatarConsts[size].avatar}px;\n      height: ${avatarConsts[size].avatar}px;\n    `}\n  `,\n);\n\nconst NoImageCircleWrapper = styled.div<Required<Pick<IAvatarProps, 'size'>>>`\n  ${({ size, theme }) => css`\n    ${(size === Sizes.Small || size === Sizes.Medium) && theme.heading[5].bold}\n    ${size === Sizes.Large && theme.heading[3].demi}\n\n    display: flex;\n    flex: 1 0 0;\n    justify-content: center;\n    align-items: center;\n\n    border-radius: 100%;\n    text-align: center;\n    white-space: nowrap;\n    color: ${theme.text.onFocus.strong};\n    background-color: ${theme.focus.strong};\n  `}\n`;\n\nconst NoImageCircle = styled.div`\n  display: flex;\n  font-size: 100%;\n`;\n\nconst Image = styled.img`\n  max-width: 100%;\n  border-radius: 100%;\n  object-fit: cover;\n`;\n\nconst TextBox = styled.div<Pick<IAvatarProps, 'collapsed'>>(\n  ({ collapsed }) => css`\n    display: flex;\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    align-items: flex-start;\n    flex-direction: column;\n    transition: opacity 0.2s linear;\n    opacity: ${collapsed ? '0' : '1'};\n  `,\n);\n\nconst Label = styled.p<IAvatarProps>`\n  ${({ theme, size, secondaryLabel }) => css`\n    margin: 0;\n\n    ${secondaryLabel &&\n    secondaryLabel.length > 0 &&\n    css`\n      ${size === Sizes.Large && theme.label.medium.bold}\n      ${(size === Sizes.Small || size === Sizes.Medium) && theme.label.small.bold}\n    `}\n\n    ${(!secondaryLabel || (secondaryLabel && secondaryLabel.length === 0)) &&\n    css`\n      ${(size === Sizes.Large || size === Sizes.Medium) && theme.label.medium.bold}\n      ${size === Sizes.Small && theme.label.small.bold}\n    `}\n    \n    color: ${theme.text.onSurface.strong};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n  `}\n`;\n\nconst AdditionalText = styled.p<Required<Pick<IAvatarProps, 'size'>>>`\n  ${({ size, theme }) => css`\n    margin: ${size === Sizes.Large ? '4px' : '0'} 0 0;\n\n    ${size === Sizes.Large && theme.label.medium.normal}\n    ${(size === Sizes.Small || size === Sizes.Medium) && theme.label.small.normal}\n\n    color: ${theme.text.onSurface.subtle};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n  `}\n`;\n\nconst AvatarDropdown = styled.div`\n  display: flex;\n  gap: 4px;\n  cursor: pointer;\n`;\n\nexport {\n  AvatarWrapper,\n  Avatar,\n  NoImageCircleWrapper,\n  NoImageCircle,\n  Image,\n  TextBox,\n  Label,\n  AdditionalText,\n  AvatarDropdown,\n};\n"]}

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sizes } from 'acinguiux-ds-react-base';
+import { render, describe, it, expect, screen } from '../../utils/viTestUtils';
+import Avatar from './Avatar';
+import { altDefaultText } from './Avatar.consts';
+const LABEL = 'Joe Doogs';
+const ADDITIONAL_TEXT = 'test@test.com';
+const CLASS_NAME = 'custom-class-name';
+describe('Avatar component', () => {
+    it('should render with image if src specified', () => {
+        render(_jsx(Avatar, { src: "test-image.jpeg" }));
+        expect(screen.getByAltText(altDefaultText)).toBeInTheDocument();
+    });
+    it('should render with abbreviation instead of image if the abbreviation is specified without src', () => {
+        render(_jsx(Avatar, { abbreviation: "JD" }));
+        expect(screen.getByText('JD')).toBeInTheDocument();
+    });
+    it('should accept a className prop', () => {
+        const { container } = render(_jsx(Avatar, { className: CLASS_NAME }));
+        expect(container.querySelector(`.${CLASS_NAME}`)).toBeInTheDocument();
+    });
+    it('should render dropdown', () => {
+        const { container } = render(_jsx(Avatar, { className: CLASS_NAME, dropdownOverlay: _jsx("div", { children: "Overlay" }) }));
+        expect(container.querySelector(`.${CLASS_NAME}`)).toBeInTheDocument();
+    });
+    describe('AvatarWithText option', () => {
+        it('should render with label and secondaryLabel', () => {
+            render(_jsx(Avatar, { size: Sizes.Small, label: LABEL, secondaryLabel: ADDITIONAL_TEXT }));
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+            expect(screen.getByText(ADDITIONAL_TEXT)).toBeInTheDocument();
+        });
+        it('should render the secondaryLabel, even if the label is not specified', () => {
+            render(_jsx(Avatar, { size: Sizes.Large, secondaryLabel: ADDITIONAL_TEXT }));
+            expect(screen.queryByText(LABEL)).not.toBeInTheDocument();
+            expect(screen.queryByText(ADDITIONAL_TEXT)).toBeInTheDocument();
+        });
+        it('should render without secondaryLabel', () => {
+            render(_jsx(Avatar, { size: Sizes.Small, label: LABEL }));
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+            expect(screen.queryByText(ADDITIONAL_TEXT)).not.toBeInTheDocument();
+        });
+        it('should render with image if src specified', () => {
+            render(_jsx(Avatar, { label: LABEL, secondaryLabel: ADDITIONAL_TEXT, src: "Pecten.svg" }));
+            expect(screen.getByAltText('Avatar')).toBeInTheDocument();
+            expect(screen.queryByText(LABEL)).toBeInTheDocument();
+        });
+        it('should render with abbreviation instead of image if the abbreviation is specified without src', () => {
+            render(_jsx(Avatar, { label: LABEL, secondaryLabel: ADDITIONAL_TEXT, abbreviation: "JD" }));
+            expect(screen.getByText('JD')).toBeInTheDocument();
+        });
+        it('should accept a className prop', () => {
+            const { container } = render(_jsx(Avatar, { className: CLASS_NAME, label: LABEL, secondaryLabel: ADDITIONAL_TEXT }));
+            expect(container.querySelector(`.${CLASS_NAME}`)).toBeInTheDocument();
+        });
+        it('should render with dropdown', () => {
+            render(_jsx(Avatar, { size: Sizes.Small, label: LABEL, secondaryLabel: ADDITIONAL_TEXT, dropdownOverlay: _jsx("div", { children: "Overlay" }) }));
+            expect(screen.getByText(LABEL)).toBeInTheDocument();
+            expect(screen.getByText(ADDITIONAL_TEXT)).toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=Avatar.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\nimport { render, describe, it, expect, screen } from '../../utils/viTestUtils';\nimport Avatar from './Avatar';\nimport { altDefaultText } from './Avatar.consts';\n\nconst LABEL = 'Joe Doogs';\nconst ADDITIONAL_TEXT = 'test@test.com';\nconst CLASS_NAME = 'custom-class-name';\n\ndescribe('Avatar component', () => {\n  it('should render with image if src specified', () => {\n    render(<Avatar src=\"test-image.jpeg\" />);\n    expect(screen.getByAltText(altDefaultText)).toBeInTheDocument();\n  });\n\n  it('should render with abbreviation instead of image if the abbreviation is specified without src', () => {\n    render(<Avatar abbreviation=\"JD\" />);\n    expect(screen.getByText('JD')).toBeInTheDocument();\n  });\n\n  it('should accept a className prop', () => {\n    const { container } = render(<Avatar className={CLASS_NAME} />);\n    expect(container.querySelector(`.${CLASS_NAME}`)).toBeInTheDocument();\n  });\n\n  it('should render dropdown', () => {\n    const { container } = render(<Avatar className={CLASS_NAME} dropdownOverlay={<div>Overlay</div>} />);\n    expect(container.querySelector(`.${CLASS_NAME}`)).toBeInTheDocument();\n  });\n\n  describe('AvatarWithText option', () => {\n    it('should render with label and secondaryLabel', () => {\n      render(<Avatar size={Sizes.Small} label={LABEL} secondaryLabel={ADDITIONAL_TEXT} />);\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n      expect(screen.getByText(ADDITIONAL_TEXT)).toBeInTheDocument();\n    });\n\n    it('should render the secondaryLabel, even if the label is not specified', () => {\n      render(<Avatar size={Sizes.Large} secondaryLabel={ADDITIONAL_TEXT} />);\n      expect(screen.queryByText(LABEL)).not.toBeInTheDocument();\n      expect(screen.queryByText(ADDITIONAL_TEXT)).toBeInTheDocument();\n    });\n\n    it('should render without secondaryLabel', () => {\n      render(<Avatar size={Sizes.Small} label={LABEL} />);\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n      expect(screen.queryByText(ADDITIONAL_TEXT)).not.toBeInTheDocument();\n    });\n\n    it('should render with image if src specified', () => {\n      render(<Avatar label={LABEL} secondaryLabel={ADDITIONAL_TEXT} src=\"Pecten.svg\" />);\n      expect(screen.getByAltText('Avatar')).toBeInTheDocument();\n      expect(screen.queryByText(LABEL)).toBeInTheDocument();\n    });\n\n    it('should render with abbreviation instead of image if the abbreviation is specified without src', () => {\n      render(<Avatar label={LABEL} secondaryLabel={ADDITIONAL_TEXT} abbreviation=\"JD\" />);\n      expect(screen.getByText('JD')).toBeInTheDocument();\n    });\n\n    it('should accept a className prop', () => {\n      const { container } = render(<Avatar className={CLASS_NAME} label={LABEL} secondaryLabel={ADDITIONAL_TEXT} />);\n      expect(container.querySelector(`.${CLASS_NAME}`)).toBeInTheDocument();\n    });\n\n    it('should render with dropdown', () => {\n      render(\n        <Avatar\n          size={Sizes.Small}\n          label={LABEL}\n          secondaryLabel={ADDITIONAL_TEXT}\n          dropdownOverlay={<div>Overlay</div>}\n        />,\n      );\n      expect(screen.getByText(LABEL)).toBeInTheDocument();\n      expect(screen.getByText(ADDITIONAL_TEXT)).toBeInTheDocument();\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { LargeSize, MediumSize, SmallSize } from '../../types/types';
+/**
+ * @deprecated DeprecatedSize prop has been deprecated, please use AvatarSize
+ */
+type DeprecatedSize = SmallSize | MediumSize | LargeSize;
+export type AvatarSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;
+interface IAvatarBaseProps {
+    size: AvatarSize;
+}
+export interface IAvatarNoImageCircle extends IAvatarBaseProps {
+    children: ReactNode;
+    ariaLabel?: string;
+}
+export interface IAvatarAsText extends IAvatarBaseProps {
+    abbreviation: string;
+    ariaLabel?: string;
+}
+export interface IAvatarAsIcon extends IAvatarBaseProps {
+    ariaLabel?: string;
+}
+export interface IAvatarAsImage extends IAvatarBaseProps {
+    src: string;
+    alt: string;
+}
+type IAvatarConditionalProps = {
+    src: string;
+    alt?: string;
+} | {
+    src?: never;
+    alt?: never;
+};
+export type IAvatarProps = ComponentPropsWithoutRef<'div'> & IAvatarConditionalProps & {
+    abbreviation?: string;
+    size?: AvatarSize;
+    label?: string;
+    /**
+     * @deprecated additionalText prop has been deprecated, please use secondaryLabel
+     */
+    additionalText?: string;
+    secondaryLabel?: string;
+    dropdownOverlay?: ReactElement;
+    collapsed?: boolean;
+};
+export {};
+//# sourceMappingURL=Avatar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAErE;;GAEG;AACH,KAAK,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;AAEnF,UAAU,gBAAgB;IACxB,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,uBAAuB,GACxB;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEN,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACxD,uBAAuB,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\n\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport { LargeSize, MediumSize, SmallSize } from '../../types/types';\n\n/**\n * @deprecated DeprecatedSize prop has been deprecated, please use AvatarSize\n */\ntype DeprecatedSize = SmallSize | MediumSize | LargeSize;\nexport type AvatarSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;\n\ninterface IAvatarBaseProps {\n  size: AvatarSize;\n}\n\nexport interface IAvatarNoImageCircle extends IAvatarBaseProps {\n  children: ReactNode;\n  ariaLabel?: string;\n}\n\nexport interface IAvatarAsText extends IAvatarBaseProps {\n  abbreviation: string;\n  ariaLabel?: string;\n}\n\nexport interface IAvatarAsIcon extends IAvatarBaseProps {\n  ariaLabel?: string;\n}\n\nexport interface IAvatarAsImage extends IAvatarBaseProps {\n  src: string;\n  alt: string;\n}\n\ntype IAvatarConditionalProps =\n  | {\n      src: string;\n      alt?: string;\n    }\n  | {\n      src?: never;\n      alt?: never;\n    };\n\nexport type IAvatarProps = ComponentPropsWithoutRef<'div'> &\n  IAvatarConditionalProps & {\n    abbreviation?: string;\n    size?: AvatarSize;\n    label?: string;\n    /**\n     * @deprecated additionalText prop has been deprecated, please use secondaryLabel\n     */\n    additionalText?: string;\n    secondaryLabel?: string;\n    dropdownOverlay?: ReactElement;\n    collapsed?: boolean;\n  };\n"]}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Avatar from '../Avatar';
+import { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';
+describe('AVT', () => {
+    it('should not have Accessibility violations for DEFAULT <Avatar />', async () => {
+        await runAxeAccessibilityValidationTest(_jsx(Avatar, { src: "test-image.jpeg" }));
+    });
+});
+//# sourceMappingURL=Avatar.avt.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.avt.test.js","sourceRoot":"","sources":["../../../../../src/components/Avatar/__tests__/Avatar.avt.test.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAE/E,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACnB,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,iCAAiC,CAAC,KAAC,MAAM,IAAC,GAAG,EAAC,iBAAiB,GAAG,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import Avatar from '../Avatar';\nimport { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';\n\ndescribe('AVT', () => {\n  it('should not have Accessibility violations for DEFAULT <Avatar />', async () => {\n    await runAxeAccessibilityValidationTest(<Avatar src=\"test-image.jpeg\" />);\n  });\n});\n"]}

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IBadgeProps } from './Badge.types';
+declare const Badge: FC<IBadgeProps>;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMlC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,CAgB1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/esm/components/Badge/Badge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useBadgeProps, BADGE_CLASS } from 'acinguiux-ds-react-base';
+import * as Styled from './Badge.styles';
+const Badge = ({ className = '', ...props }) => {
+    const { fontStyles, children, shouldRenderChildren, iconComponent, backgroundColor, color, ...badgeProps } = useBadgeProps(props);
+    return (_jsxs(Styled.Badge, { className: classNames(BADGE_CLASS, className), "$backgroundColor": backgroundColor, "$color": color, ...props, ...badgeProps, children: [iconComponent, shouldRenderChildren && _jsx(Styled.BadgeText, { fontStyles: fontStyles, children: children })] }));
+};
+export default Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAEA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAGzC,MAAM,KAAK,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,oBAAoB,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GACxG,aAAa,CAAC,KAAK,CAAC,CAAC;IAEvB,OAAO,CACL,MAAC,MAAM,CAAC,KAAK,IACX,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,sBAC3B,eAAe,YACzB,KAAK,KACT,KAAK,KACL,UAAU,aAEb,aAAa,EACb,oBAAoB,IAAI,KAAC,MAAM,CAAC,SAAS,IAAC,UAAU,EAAE,UAAU,YAAG,QAAQ,GAAoB,IACnF,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import React, { FC } from 'react';\n\nimport classNames from 'classnames';\nimport { useBadgeProps, BADGE_CLASS } from 'acinguiux-ds-react-base';\n\nimport * as Styled from './Badge.styles';\nimport { IBadgeProps } from './Badge.types';\n\nconst Badge: FC<IBadgeProps> = ({ className = '', ...props }) => {\n  const { fontStyles, children, shouldRenderChildren, iconComponent, backgroundColor, color, ...badgeProps } =\n    useBadgeProps(props);\n\n  return (\n    <Styled.Badge\n      className={classNames(BADGE_CLASS, className)}\n      $backgroundColor={backgroundColor}\n      $color={color}\n      {...props}\n      {...badgeProps}\n    >\n      {iconComponent}\n      {shouldRenderChildren && <Styled.BadgeText fontStyles={fontStyles}>{children}</Styled.BadgeText>}\n    </Styled.Badge>\n  );\n};\n\nexport default Badge;\n"]}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { IBadgeProps } from './Badge.types';
+declare const _default: {
+    title: string;
+    component: React.FC<IBadgeProps>;
+    parameters: {
+        storyLink: string;
+    };
+    argTypes: {
+        className: {
+            control: string;
+        };
+        icon: {
+            options: string[];
+            control: {
+                type: string;
+            };
+            mapping: {
+                Alert: import("react/jsx-runtime").JSX.Element;
+                Barrel: import("react/jsx-runtime").JSX.Element;
+                Check: import("react/jsx-runtime").JSX.Element;
+            };
+        };
+        size: {
+            options: Sizes[];
+        };
+    };
+};
+export default _default;
+export declare const Default: StoryFn<IBadgeProps>;
+export declare const SentimentsAndVariants: StoryFn<IBadgeProps>;
+export declare const DifferentSizes: StoryFn<IBadgeProps>;
+export declare const WithComponent: StoryFn<IBadgeProps>;
+export declare const WithIcon: StoryFn<IBadgeProps>;
+//# sourceMappingURL=Badge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAY,MAAM,yBAAyB,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK5C,wBAeE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,WAAW,CAAsD,CAAC;AAEhG,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,WAAW,CAkEtD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,WAAW,CA4B/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,WAAW,CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAiE,CAAC"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sentiments } from 'acinguiux-ds-fabrics';
+import { Sizes, Variants } from 'acinguiux-ds-react-base';
+import Showcase from '../_internalComponents/Showcase/Showcase';
+import Flexbox from '../Flexbox/Flexbox';
+import Grid from '../Grid/Grid';
+import { Barrel, AlertExclamationMark, BlockRight, Check } from '../Icon/components';
+import Badge from './Badge';
+import { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';
+const icons = { Alert: _jsx(AlertExclamationMark, {}), Barrel: _jsx(Barrel, {}), Check: _jsx(Check, {}) };
+export default {
+    title: 'Data Display/Badge',
+    component: Badge,
+    parameters: {
+        storyLink: `${GITHUB_COMPONENT_BASE_URL}/Badge/Badge.stories.tsx`,
+    },
+    argTypes: {
+        className: { control: 'text' },
+        icon: {
+            options: Object.keys(icons),
+            control: { type: 'select' },
+            mapping: icons,
+        },
+        size: { options: [Sizes.Micro, Sizes.ExtraSmall, Sizes.Small, Sizes.Medium, Sizes.Large] },
+    },
+};
+export const Default = (args) => _jsx(Badge, { ...args, children: "1" });
+export const SentimentsAndVariants = (args) => (_jsxs(Grid, { gap: "44px", children: [_jsxs(Showcase, { label: "Filled (default)", children: [_jsx(Showcase, { label: "Neutral", children: _jsx(Badge, { sentiment: Sentiments.Neutral, variant: Variants.Filled, ...args, children: "?" }) }), _jsx(Showcase, { label: "Information", children: _jsx(Badge, { sentiment: Sentiments.Information, variant: Variants.Filled, ...args, children: "i" }) }), _jsx(Showcase, { label: "Negative", children: _jsx(Badge, { sentiment: Sentiments.Negative, icon: _jsx(BlockRight, {}), variant: Variants.Filled, ...args }) }), _jsx(Showcase, { label: "Warning", children: _jsx(Badge, { icon: _jsx(AlertExclamationMark, {}), sentiment: Sentiments.Warning, variant: Variants.Filled, ...args }) }), _jsx(Showcase, { label: "Positive", children: _jsx(Badge, { sentiment: Sentiments.Positive, icon: _jsx(Check, {}), variant: Variants.Filled, ...args }) })] }), _jsxs(Showcase, { label: "Subtle", children: [_jsx(Showcase, { label: "Neutral", children: _jsx(Badge, { sentiment: Sentiments.Neutral, variant: Variants.Subtle, ...args, children: "?" }) }), _jsx(Showcase, { label: "Information", children: _jsx(Badge, { sentiment: Sentiments.Information, variant: Variants.Subtle, ...args, children: "i" }) }), _jsx(Showcase, { label: "Negative", children: _jsx(Badge, { sentiment: Sentiments.Negative, icon: _jsx(BlockRight, {}), variant: Variants.Subtle, ...args }) }), _jsx(Showcase, { label: "Warning", children: _jsx(Badge, { icon: _jsx(AlertExclamationMark, {}), sentiment: Sentiments.Warning, variant: Variants.Subtle, ...args }) }), _jsx(Showcase, { label: "Positive", children: _jsx(Badge, { sentiment: Sentiments.Positive, icon: _jsx(Check, {}), variant: Variants.Subtle, ...args }) })] }), _jsxs(Showcase, { label: "Outlined", children: [_jsx(Showcase, { label: "Neutral", children: _jsx(Badge, { sentiment: Sentiments.Neutral, variant: Variants.Outlined, ...args, children: "?" }) }), _jsx(Showcase, { label: "Information", children: _jsx(Badge, { sentiment: Sentiments.Information, variant: Variants.Outlined, ...args, children: "i" }) }), _jsx(Showcase, { label: "Negative", children: _jsx(Badge, { sentiment: Sentiments.Negative, icon: _jsx(BlockRight, {}), variant: Variants.Outlined, ...args }) }), _jsx(Showcase, { label: "Warning", children: _jsx(Badge, { icon: _jsx(AlertExclamationMark, {}), sentiment: Sentiments.Warning, variant: Variants.Outlined, ...args }) }), _jsx(Showcase, { label: "Positive", children: _jsx(Badge, { sentiment: Sentiments.Positive, icon: _jsx(Check, {}), variant: Variants.Outlined, ...args }) })] })] }));
+export const DifferentSizes = (args) => (_jsxs(Flexbox, { gap: "44px", flexWrap: "wrap", children: [_jsx(Showcase, { label: "Micro", children: _jsx(Badge, { size: Sizes.Micro, ...args, children: "1" }) }), _jsx(Showcase, { label: "XSmall", children: _jsx(Badge, { size: Sizes.ExtraSmall, ...args, children: "1" }) }), _jsx(Showcase, { label: "Small", children: _jsx(Badge, { size: Sizes.Small, ...args, children: "1" }) }), _jsx(Showcase, { label: "Medium", children: _jsx(Badge, { size: Sizes.Medium, ...args, children: "1" }) }), _jsx(Showcase, { label: "Large", children: _jsx(Badge, { size: Sizes.Large, ...args, children: "1" }) })] }));
+export const WithComponent = (args) => (_jsx(Badge, { ...args, children: _jsx("div", { children: _jsx("span", { children: "This is a component" }) }) }));
+export const WithIcon = (args) => _jsx(Badge, { icon: _jsx(Barrel, {}), ...args });
+//# sourceMappingURL=Badge.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.stories.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,KAAC,oBAAoB,KAAG,EAAE,MAAM,EAAE,KAAC,MAAM,KAAG,EAAE,KAAK,EAAE,KAAC,KAAK,KAAG,EAAE,CAAC;AAExF,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QACV,SAAS,EAAE,GAAG,yBAAyB,0BAA0B;KAClE;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,KAAK;SACf;QACD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;KAC3F;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAyB,CAAC,IAAI,EAAgB,EAAE,CAAC,KAAC,KAAK,OAAK,IAAI,kBAAW,CAAC;AAEhG,MAAM,CAAC,MAAM,qBAAqB,GAAyB,CAAC,IAAI,EAAgB,EAAE,CAAC,CACjF,MAAC,IAAI,IAAC,GAAG,EAAC,MAAM,aACd,MAAC,QAAQ,IAAC,KAAK,EAAC,kBAAkB,aAChC,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,YACvB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,kBAEhE,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,kBAEpE,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAC,UAAU,KAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,GAAI,GAC1F,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,YACvB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAC,oBAAoB,KAAG,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,GAAI,GACnG,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAC,KAAK,KAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,GAAI,GACrF,IACF,EACX,MAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,YACvB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,kBAEhE,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,kBAEpE,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAC,UAAU,KAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,GAAI,GAC1F,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,YACvB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAC,oBAAoB,KAAG,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,GAAI,GACnG,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAC,KAAK,KAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,KAAM,IAAI,GAAI,GACrF,IACF,EACX,MAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,aACxB,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,YACvB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,QAAQ,KAAM,IAAI,kBAElE,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,QAAQ,KAAM,IAAI,kBAEtE,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAC,UAAU,KAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,QAAQ,KAAM,IAAI,GAAI,GAC5F,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,YACvB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAC,oBAAoB,KAAG,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,QAAQ,KAAM,IAAI,GAAI,GACrG,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAC,KAAK,KAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,QAAQ,KAAM,IAAI,GAAI,GACvF,IACF,IACN,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,IAAI,EAAgB,EAAE,CAAC,CAC1E,MAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,aACjC,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,YACrB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,KAAM,IAAI,kBAE1B,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,YACtB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,KAAM,IAAI,kBAE/B,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,YACrB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,KAAM,IAAI,kBAE1B,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,YACtB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,MAAM,KAAM,IAAI,kBAE3B,GACC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,YACrB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,KAAM,IAAI,kBAE1B,GACC,IACH,CACX,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyB,CAAC,IAAI,EAAgB,EAAE,CAAC,CACzE,KAAC,KAAK,OAAK,IAAI,YACb,wBACE,iDAAgC,GAC5B,GACA,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAyB,CAAC,IAAI,EAAgB,EAAE,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,KAAC,MAAM,KAAG,KAAM,IAAI,GAAI,CAAC","sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { StoryFn } from '@storybook/react';\nimport { Sentiments } from 'acinguiux-ds-fabrics';\nimport { Sizes, Variants } from 'acinguiux-ds-react-base';\n\nimport Showcase from '../_internalComponents/Showcase/Showcase';\nimport Flexbox from '../Flexbox/Flexbox';\nimport Grid from '../Grid/Grid';\nimport { Barrel, AlertExclamationMark, BlockRight, Check } from '../Icon/components';\nimport Badge from './Badge';\nimport { IBadgeProps } from './Badge.types';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\n\nconst icons = { Alert: <AlertExclamationMark />, Barrel: <Barrel />, Check: <Check /> };\n\nexport default {\n  title: 'Data Display/Badge',\n  component: Badge,\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/Badge/Badge.stories.tsx`,\n  },\n  argTypes: {\n    className: { control: 'text' },\n    icon: {\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      mapping: icons,\n    },\n    size: { options: [Sizes.Micro, Sizes.ExtraSmall, Sizes.Small, Sizes.Medium, Sizes.Large] },\n  },\n};\n\nexport const Default: StoryFn<IBadgeProps> = (args): ReactElement => <Badge {...args}>1</Badge>;\n\nexport const SentimentsAndVariants: StoryFn<IBadgeProps> = (args): ReactElement => (\n  <Grid gap=\"44px\">\n    <Showcase label=\"Filled (default)\">\n      <Showcase label=\"Neutral\">\n        <Badge sentiment={Sentiments.Neutral} variant={Variants.Filled} {...args}>\n          ?\n        </Badge>\n      </Showcase>\n      <Showcase label=\"Information\">\n        <Badge sentiment={Sentiments.Information} variant={Variants.Filled} {...args}>\n          i\n        </Badge>\n      </Showcase>\n      <Showcase label=\"Negative\">\n        <Badge sentiment={Sentiments.Negative} icon={<BlockRight />} variant={Variants.Filled} {...args} />\n      </Showcase>\n      <Showcase label=\"Warning\">\n        <Badge icon={<AlertExclamationMark />} sentiment={Sentiments.Warning} variant={Variants.Filled} {...args} />\n      </Showcase>\n      <Showcase label=\"Positive\">\n        <Badge sentiment={Sentiments.Positive} icon={<Check />} variant={Variants.Filled} {...args} />\n      </Showcase>\n    </Showcase>\n    <Showcase label=\"Subtle\">\n      <Showcase label=\"Neutral\">\n        <Badge sentiment={Sentiments.Neutral} variant={Variants.Subtle} {...args}>\n          ?\n        </Badge>\n      </Showcase>\n      <Showcase label=\"Information\">\n        <Badge sentiment={Sentiments.Information} variant={Variants.Subtle} {...args}>\n          i\n        </Badge>\n      </Showcase>\n      <Showcase label=\"Negative\">\n        <Badge sentiment={Sentiments.Negative} icon={<BlockRight />} variant={Variants.Subtle} {...args} />\n      </Showcase>\n      <Showcase label=\"Warning\">\n        <Badge icon={<AlertExclamationMark />} sentiment={Sentiments.Warning} variant={Variants.Subtle} {...args} />\n      </Showcase>\n      <Showcase label=\"Positive\">\n        <Badge sentiment={Sentiments.Positive} icon={<Check />} variant={Variants.Subtle} {...args} />\n      </Showcase>\n    </Showcase>\n    <Showcase label=\"Outlined\">\n      <Showcase label=\"Neutral\">\n        <Badge sentiment={Sentiments.Neutral} variant={Variants.Outlined} {...args}>\n          ?\n        </Badge>\n      </Showcase>\n      <Showcase label=\"Information\">\n        <Badge sentiment={Sentiments.Information} variant={Variants.Outlined} {...args}>\n          i\n        </Badge>\n      </Showcase>\n      <Showcase label=\"Negative\">\n        <Badge sentiment={Sentiments.Negative} icon={<BlockRight />} variant={Variants.Outlined} {...args} />\n      </Showcase>\n      <Showcase label=\"Warning\">\n        <Badge icon={<AlertExclamationMark />} sentiment={Sentiments.Warning} variant={Variants.Outlined} {...args} />\n      </Showcase>\n      <Showcase label=\"Positive\">\n        <Badge sentiment={Sentiments.Positive} icon={<Check />} variant={Variants.Outlined} {...args} />\n      </Showcase>\n    </Showcase>\n  </Grid>\n);\n\nexport const DifferentSizes: StoryFn<IBadgeProps> = (args): ReactElement => (\n  <Flexbox gap=\"44px\" flexWrap=\"wrap\">\n    <Showcase label=\"Micro\">\n      <Badge size={Sizes.Micro} {...args}>\n        1\n      </Badge>\n    </Showcase>\n    <Showcase label=\"XSmall\">\n      <Badge size={Sizes.ExtraSmall} {...args}>\n        1\n      </Badge>\n    </Showcase>\n    <Showcase label=\"Small\">\n      <Badge size={Sizes.Small} {...args}>\n        1\n      </Badge>\n    </Showcase>\n    <Showcase label=\"Medium\">\n      <Badge size={Sizes.Medium} {...args}>\n        1\n      </Badge>\n    </Showcase>\n    <Showcase label=\"Large\">\n      <Badge size={Sizes.Large} {...args}>\n        1\n      </Badge>\n    </Showcase>\n  </Flexbox>\n);\n\nexport const WithComponent: StoryFn<IBadgeProps> = (args): ReactElement => (\n  <Badge {...args}>\n    <div>\n      <span>This is a component</span>\n    </div>\n  </Badge>\n);\n\nexport const WithIcon: StoryFn<IBadgeProps> = (args): ReactElement => <Badge icon={<Barrel />} {...args} />;\n"]}

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

@@ -0,0 +1,12 @@
+import { BaseBadgeStylesProps, UseBadgePropsReturnType } from 'acinguiux-ds-react-base';
+declare const Badge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BaseBadgeStylesProps & {
+    $color: UseBadgePropsReturnType['color'];
+    round: UseBadgePropsReturnType['round'];
+    size: UseBadgePropsReturnType['size'];
+}, never>;
+type BadgeTextProps = {
+    fontStyles: UseBadgePropsReturnType['fontStyles'];
+};
+declare const BadgeText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeTextProps, never>;
+export { Badge, BadgeText };
+//# sourceMappingURL=Badge.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAStH,QAAA,MAAM,KAAK;YALD,uBAAuB,CAAC,OAAO,CAAC;WACjC,uBAAuB,CAAC,OAAO,CAAC;UACjC,uBAAuB,CAAC,MAAM,CAAC;SAWtC,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,uBAAuB,CAAC,YAAY,CAAC,CAAC;CACnD,CAAC;AAEF,QAAA,MAAM,SAAS,sHAId,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC"}

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

@@ -0,0 +1,18 @@
+import { badgeConsts, BaseBadgeStyles } from 'acinguiux-ds-react-base';
+import styled, { css } from 'styled-components';
+const Badge = styled.div `
+  ${({ size, $color, round }) => css `
+    ${BaseBadgeStyles}
+    gap: ${badgeConsts[size].gap}px;
+    width: fit-content;
+    border-radius: ${round ? '50%' : '16px'};
+    color: ${$color};
+  `}
+`;
+const BadgeText = styled.span `
+  ${({ fontStyles }) => css `
+    ${fontStyles};
+  `};
+`;
+export { Badge, BadgeText };
+//# sourceMappingURL=Badge.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.js","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAiD,MAAM,yBAAyB,CAAC;AACtH,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQhD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAY;IAChC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAC9B,eAAe;WACV,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG;;qBAEX,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B,MAAM;GAChB;CACF,CAAC;AAMF,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAgB;IACzC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACrB,UAAU;GACb;CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC","sourcesContent":["import { badgeConsts, BaseBadgeStyles, BaseBadgeStylesProps, UseBadgePropsReturnType } from 'acinguiux-ds-react-base';\nimport styled, { css } from 'styled-components';\n\ntype BadgeProps = BaseBadgeStylesProps & {\n  $color: UseBadgePropsReturnType['color'];\n  round: UseBadgePropsReturnType['round'];\n  size: UseBadgePropsReturnType['size'];\n};\n\nconst Badge = styled.div<BadgeProps>`\n  ${({ size, $color, round }) => css`\n    ${BaseBadgeStyles}\n    gap: ${badgeConsts[size].gap}px;\n    width: fit-content;\n    border-radius: ${round ? '50%' : '16px'};\n    color: ${$color};\n  `}\n`;\n\ntype BadgeTextProps = {\n  fontStyles: UseBadgePropsReturnType['fontStyles'];\n};\n\nconst BadgeText = styled.span<BadgeTextProps>`\n  ${({ fontStyles }) => css`\n    ${fontStyles};\n  `};\n`;\n\nexport { Badge, BadgeText };\n"]}

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

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

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

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

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sentiments, LightMode } from 'acinguiux-ds-fabrics';
+import { Sizes, Variants } from 'acinguiux-ds-react-base';
+import { render, describe, it, expect, screen } from '../../utils/viTestUtils';
+import { Barrel } from '../Icon/components';
+import Badge from './Badge';
+describe('Badge component', () => {
+    it('should render with default props', () => {
+        render(_jsx(Badge, { children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render micro size', () => {
+        render(_jsx(Badge, { size: Sizes.Micro, children: "1" }));
+        expect(screen.queryByText('1')).not.toBeInTheDocument();
+    });
+    it('should render xsmall size', () => {
+        render(_jsx(Badge, { size: Sizes.ExtraSmall, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render small size', () => {
+        render(_jsx(Badge, { size: Sizes.Small, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render medium size', () => {
+        render(_jsx(Badge, { size: Sizes.Medium, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render large size', () => {
+        render(_jsx(Badge, { size: Sizes.Large, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render neutral sentiment', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Neutral, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render information sentiment', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Information, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render positive sentiment', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Positive, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render negative sentiment', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Negative, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render warning sentiment', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Warning, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render neutral color', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Neutral, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render information color', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Information, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render positive color', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Positive, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render negative color', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Negative, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render warning color', () => {
+        render(_jsx(Badge, { sentiment: Sentiments.Warning, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+    });
+    it('should render an icon', () => {
+        const { container } = render(_jsx(Badge, { icon: _jsx(Barrel, {}) }));
+        const icon = container.querySelector('svg');
+        expect(icon).not.toBeNull();
+    });
+    it('should render the component', () => {
+        render(_jsx(Badge, { children: _jsx("div", { children: _jsx("span", { children: "This is a component" }) }) }));
+        expect(screen.getByText('This is a component')).toBeInTheDocument();
+    });
+    it('should render in variant subtle', () => {
+        const { container } = render(_jsx(Badge, { variant: Variants.Subtle, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+        expect(container.firstChild).toHaveStyle(`background-color: ${LightMode.system.subtle.neutral}`);
+        expect(container.firstChild).toHaveStyle(`color: ${LightMode.text.onSystem.subtle.neutral}`);
+    });
+    it('should render in variant outlined', () => {
+        const { container } = render(_jsx(Badge, { variant: Variants.Outlined, sentiment: Sentiments.Information, children: "1" }));
+        expect(screen.getByText('1')).toBeInTheDocument();
+        expect(container.firstChild).toHaveStyle(`background-color: rgba(0, 0, 0, 0)`);
+        expect(container.firstChild).toHaveStyle(`color: ${LightMode.text.onSurface.information}`);
+    });
+});
+//# sourceMappingURL=Badge.test.js.map