acinguiux-ds-react-framework 0.0.1

package/build/esm/components/FormField/components/Label/Label.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import { render } from '../../../../utils/viTestUtils';
+import { PeopleCircle } from '../../../Icon/components';
+import Label from './Label';
+const icon = _jsx(PeopleCircle, { width: 24, height: 24 });
+const label = 'Test label';
+const description = 'This is a test description';
+describe('FormField component', () => {
+    it('should render the label component', () => {
+        const { container } = render(_jsx(Label, { size: Sizes.Medium, id: "test-id" }));
+        expect(container.firstChild).toBeInTheDocument();
+    });
+    it('should render icon on the right', () => {
+        const { container } = render(_jsx(Label, { size: Sizes.Medium, id: "test-id", iconPosition: Positions.Right, icon: icon, label: label, description: description, mandatory: true }));
+        expect(container.querySelector('svg')).not.toBeNull();
+        expect(container.querySelector('label')).not.toBeNull();
+    });
+    it('should render icon, title, mandatory flag and description in label component', () => {
+        const { container } = render(_jsx(Label, { size: Sizes.Medium, id: "test-id", icon: icon, label: label, description: description, mandatory: true }));
+        expect(container.querySelector('svg')).not.toBeNull();
+        expect(screen.getByText(label)).toBeInTheDocument();
+        expect(screen.getByText(description)).toBeInTheDocument();
+        expect(screen.getByText('*')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Label.test.js.map

package/build/esm/components/FormField/components/Label/Label.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.test.js","sourceRoot":"","sources":["../../../../../../src/components/FormField/components/Label/Label.test.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,MAAM,IAAI,GAAG,KAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAC;AACrD,MAAM,KAAK,GAAG,YAAY,CAAC;AAC3B,MAAM,WAAW,GAAG,4BAA4B,CAAC;AAEjD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAC,SAAS,GAAG,CAAC,CAAC;QAEzE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,KAAK,IACJ,IAAI,EAAE,KAAK,CAAC,MAAM,EAClB,EAAE,EAAC,SAAS,EACZ,YAAY,EAAE,SAAS,CAAC,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,SACT,CACH,CAAC;QAEF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACtD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8EAA8E,EAAE,GAAG,EAAE;QACtF,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,SAAG,CACzG,CAAC;QAEF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { screen } from '@testing-library/react';\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport { render } from '../../../../utils/viTestUtils';\nimport { PeopleCircle } from '../../../Icon/components';\nimport Label from './Label';\n\nconst icon = <PeopleCircle width={24} height={24} />;\nconst label = 'Test label';\nconst description = 'This is a test description';\n\ndescribe('FormField component', () => {\n  it('should render the label component', () => {\n    const { container } = render(<Label size={Sizes.Medium} id=\"test-id\" />);\n\n    expect(container.firstChild).toBeInTheDocument();\n  });\n\n  it('should render icon on the right', () => {\n    const { container } = render(\n      <Label\n        size={Sizes.Medium}\n        id=\"test-id\"\n        iconPosition={Positions.Right}\n        icon={icon}\n        label={label}\n        description={description}\n        mandatory\n      />,\n    );\n\n    expect(container.querySelector('svg')).not.toBeNull();\n    expect(container.querySelector('label')).not.toBeNull();\n  });\n\n  it('should render icon, title, mandatory flag and description in label component', () => {\n    const { container } = render(\n      <Label size={Sizes.Medium} id=\"test-id\" icon={icon} label={label} description={description} mandatory />,\n    );\n\n    expect(container.querySelector('svg')).not.toBeNull();\n    expect(screen.getByText(label)).toBeInTheDocument();\n    expect(screen.getByText(description)).toBeInTheDocument();\n    expect(screen.getByText('*')).toBeInTheDocument();\n  });\n});\n"]}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ICellProps, IGridProps } from './Grid.types';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<IGridProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Cell: import("react").ForwardRefExoticComponent<ICellProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;AAkBtD,wBAA6C"}

package/build/esm/components/Grid/Grid.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as Styled from './Grid.styles';
+const Cell = forwardRef(({ children, height, width, ...rest }, ref) => (_jsx(Styled.Cell, { ref: ref, "$height": height, "$width": width, ...rest, children: children })));
+const Grid = forwardRef(({ children, height, width, ...rest }, ref) => (_jsx(Styled.Grid, { ref: ref, "$height": height, "$width": width, ...rest, children: children })));
+export default Object.assign(Grid, { Cell });
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgB,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAGxC,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAgB,EAAE,CAAC,CAC3D,KAAC,MAAM,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aAAW,MAAM,YAAU,KAAK,KAAM,IAAI,YAC5D,QAAQ,GACG,CACf,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAgB,EAAE,CAAC,CAC3D,KAAC,MAAM,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aAAW,MAAM,YAAU,KAAK,KAAM,IAAI,YAC5D,QAAQ,GACG,CACf,CACF,CAAC;AAEF,eAAe,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC","sourcesContent":["import { forwardRef, ReactElement } from 'react';\n\nimport * as Styled from './Grid.styles';\nimport { ICellProps, IGridProps } from './Grid.types';\n\nconst Cell = forwardRef<HTMLDivElement, ICellProps>(\n  ({ children, height, width, ...rest }, ref): ReactElement => (\n    <Styled.Cell ref={ref} $height={height} $width={width} {...rest}>\n      {children}\n    </Styled.Cell>\n  ),\n);\n\nconst Grid = forwardRef<HTMLDivElement, IGridProps>(\n  ({ children, height, width, ...rest }, ref): ReactElement => (\n    <Styled.Grid ref={ref} $height={height} $width={width} {...rest}>\n      {children}\n    </Styled.Grid>\n  ),\n);\n\nexport default Object.assign(Grid, { Cell });\n"]}

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

@@ -0,0 +1,11 @@
+import { ICellProps, IGridProps } from './Grid.types';
+declare const Grid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<IGridProps, "height" | "width"> & {
+    $height?: string | undefined;
+    $width?: string | undefined;
+}, never>;
+declare const Cell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<ICellProps, "height" | "width"> & {
+    $height?: number | undefined;
+    $width?: number | undefined;
+}, never>;
+export { Grid, Cell };
+//# sourceMappingURL=Grid.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOjE,QAAA,MAAM,IAAI;;;SAgCT,CAAC;AAEF,QAAA,MAAM,IAAI;;;SAsBT,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}

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

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+const autoRows = ({ minRowHeight = '32px' }) => `minmax(${minRowHeight}, auto)`;
+const getFr = (value) => String(typeof value === 'number' ? `repeat(${value}, 1fr)` : value);
+const gridGap = ({ gap = '12px' }) => gap;
+const formatAreas = (areas) => areas.map((area) => `"${area}"`).join(' ');
+const Grid = styled.div `
+  display: grid;
+  grid-auto-rows: ${autoRows};
+  grid-gap: ${gridGap};
+
+  ${({ $width, $height, flow, rows, columns, columnGap, rowGap, areas, justifyContent, alignContent, justifyItems, alignItems, }) => css `
+    width: ${$width || '100%'};
+    height: ${$height || 'auto'};
+    grid-auto-flow: ${flow || 'row'};
+    grid-template-columns: ${columns && getFr(columns)};
+    ${rows && `grid-template-rows: ${getFr(rows)}`};
+    ${columnGap && `column-gap: ${columnGap}`};
+    ${rowGap && `row-gap: ${rowGap}`};
+    ${areas && `grid-template-areas: ${formatAreas(areas)}`};
+    ${justifyContent && `justify-content: ${justifyContent}`};
+    ${alignContent && `align-content: ${alignContent}`};
+    ${justifyItems && `justify-items: ${justifyItems}`};
+    ${alignItems && `align-items: ${alignItems}`};
+  `}
+`;
+const Cell = styled.div `
+  height: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+
+  ${({ $width, $height, area, columnStart, rowStart, centerContent, columnEnd, rowEnd }) => css `
+    /* Avoids breaking change as column-end and row-end previously used width and height */
+    ${!columnEnd && $width && `grid-column-end: span ${$width}`};
+    ${!rowEnd && $height && `grid-row-end: span ${rowEnd}`};
+
+    ${columnStart && `grid-column-start: ${columnStart}`};
+    ${columnEnd && `grid-column-end: ${columnEnd}`};
+    ${rowStart && `grid-row-start: ${rowStart}`};
+    ${rowEnd && `grid-row-end: ${rowEnd}`};
+    ${area && `grid-area: ${area}`};
+    ${centerContent &&
+    `
+      display: inline-flex;
+      flex-flow: column wrap;
+      justify-content: center;
+    `};
+  `}
+`;
+export { Grid, Cell };
+//# sourceMappingURL=Grid.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.styles.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,EAAU,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC;AACxF,MAAM,KAAK,GAAG,CAAC,KAAsB,EAAU,EAAE,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACtH,MAAM,OAAO,GAAG,CAAC,EAAE,GAAG,GAAG,MAAM,EAAE,EAAU,EAAE,CAAC,GAAG,CAAC;AAClD,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAU,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE7F,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAA2C;;oBAE9C,QAAQ;cACd,OAAO;;IAEjB,CAAC,EACD,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,UAAU,GACX,EAAE,EAAE,CAAC,GAAG,CAAA;aACE,MAAM,IAAI,MAAM;cACf,OAAO,IAAI,MAAM;sBACT,IAAI,IAAI,KAAK;6BACN,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;MAChD,IAAI,IAAI,uBAAuB,KAAK,CAAC,IAAI,CAAC,EAAE;MAC5C,SAAS,IAAI,eAAe,SAAS,EAAE;MACvC,MAAM,IAAI,YAAY,MAAM,EAAE;MAC9B,KAAK,IAAI,wBAAwB,WAAW,CAAC,KAAK,CAAC,EAAE;MACrD,cAAc,IAAI,oBAAoB,cAAc,EAAE;MACtD,YAAY,IAAI,kBAAkB,YAAY,EAAE;MAChD,YAAY,IAAI,kBAAkB,YAAY,EAAE;MAChD,UAAU,IAAI,gBAAgB,UAAU,EAAE;GAC7C;CACF,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAA2C;;;;;IAK9D,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;MAEzF,CAAC,SAAS,IAAI,MAAM,IAAI,yBAAyB,MAAM,EAAE;MACzD,CAAC,MAAM,IAAI,OAAO,IAAI,sBAAsB,MAAM,EAAE;;MAEpD,WAAW,IAAI,sBAAsB,WAAW,EAAE;MAClD,SAAS,IAAI,oBAAoB,SAAS,EAAE;MAC5C,QAAQ,IAAI,mBAAmB,QAAQ,EAAE;MACzC,MAAM,IAAI,iBAAiB,MAAM,EAAE;MACnC,IAAI,IAAI,cAAc,IAAI,EAAE;MAC5B,aAAa;IACf;;;;KAIC;GACF;CACF,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Transient } from 'acinguiux-ds-react-base';\n\nimport { GridAreas, ICellProps, IGridProps } from './Grid.types';\n\nconst autoRows = ({ minRowHeight = '32px' }): string => `minmax(${minRowHeight}, auto)`;\nconst getFr = (value: string | number): string => String(typeof value === 'number' ? `repeat(${value}, 1fr)` : value);\nconst gridGap = ({ gap = '12px' }): string => gap;\nconst formatAreas = (areas: GridAreas): string => areas.map((area) => `\"${area}\"`).join(' ');\n\nconst Grid = styled.div<Transient<IGridProps, 'height' | 'width'>>`\n  display: grid;\n  grid-auto-rows: ${autoRows};\n  grid-gap: ${gridGap};\n\n  ${({\n    $width,\n    $height,\n    flow,\n    rows,\n    columns,\n    columnGap,\n    rowGap,\n    areas,\n    justifyContent,\n    alignContent,\n    justifyItems,\n    alignItems,\n  }) => css`\n    width: ${$width || '100%'};\n    height: ${$height || 'auto'};\n    grid-auto-flow: ${flow || 'row'};\n    grid-template-columns: ${columns && getFr(columns)};\n    ${rows && `grid-template-rows: ${getFr(rows)}`};\n    ${columnGap && `column-gap: ${columnGap}`};\n    ${rowGap && `row-gap: ${rowGap}`};\n    ${areas && `grid-template-areas: ${formatAreas(areas)}`};\n    ${justifyContent && `justify-content: ${justifyContent}`};\n    ${alignContent && `align-content: ${alignContent}`};\n    ${justifyItems && `justify-items: ${justifyItems}`};\n    ${alignItems && `align-items: ${alignItems}`};\n  `}\n`;\n\nconst Cell = styled.div<Transient<ICellProps, 'height' | 'width'>>`\n  height: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n\n  ${({ $width, $height, area, columnStart, rowStart, centerContent, columnEnd, rowEnd }) => css`\n    /* Avoids breaking change as column-end and row-end previously used width and height */\n    ${!columnEnd && $width && `grid-column-end: span ${$width}`};\n    ${!rowEnd && $height && `grid-row-end: span ${rowEnd}`};\n\n    ${columnStart && `grid-column-start: ${columnStart}`};\n    ${columnEnd && `grid-column-end: ${columnEnd}`};\n    ${rowStart && `grid-row-start: ${rowStart}`};\n    ${rowEnd && `grid-row-end: ${rowEnd}`};\n    ${area && `grid-area: ${area}`};\n    ${centerContent &&\n    `\n      display: inline-flex;\n      flex-flow: column wrap;\n      justify-content: center;\n    `};\n  `}\n`;\n\nexport { Grid, Cell };\n"]}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, describe, it, expect } from '../../utils/viTestUtils';
+import Grid from './Grid';
+describe('Grid component', () => {
+    it('should render the grid with its children', () => {
+        render(_jsx(Grid, { "data-testid": "grid-element", children: _jsx(Grid.Cell, { children: "Cell example" }) }));
+        const gridElement = screen.getByTestId('grid-element');
+        const gridElementStyle = window.getComputedStyle(gridElement);
+        expect(screen.getByText('Cell example')).toBeInTheDocument();
+        expect(gridElement).toBeInTheDocument();
+        expect(gridElementStyle.display).toBe('grid');
+    });
+});
+//# sourceMappingURL=Grid.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.test.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,CACJ,KAAC,IAAI,mBAAa,cAAc,YAC9B,KAAC,IAAI,CAAC,IAAI,+BAAyB,GAC9B,CACR,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QACvD,MAAM,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAE9D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7D,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACxC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { render, screen, describe, it, expect } from '../../utils/viTestUtils';\nimport Grid from './Grid';\n\ndescribe('Grid component', () => {\n  it('should render the grid with its children', () => {\n    render(\n      <Grid data-testid=\"grid-element\">\n        <Grid.Cell>Cell example</Grid.Cell>\n      </Grid>,\n    );\n\n    const gridElement = screen.getByTestId('grid-element');\n    const gridElementStyle = window.getComputedStyle(gridElement);\n\n    expect(screen.getByText('Cell example')).toBeInTheDocument();\n    expect(gridElement).toBeInTheDocument();\n    expect(gridElementStyle.display).toBe('grid');\n  });\n});\n"]}

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

@@ -0,0 +1,34 @@
+import { ReactNode, ComponentPropsWithRef } from 'react';
+export type GridAreas = string[];
+export type GridAlignItems = 'start' | 'end' | 'center' | 'stretch';
+export type GridAlignContent = GridAlignItems | 'space-around' | 'space-between' | 'space-evenly';
+export type GridFlow = 'row' | 'column' | 'row dense' | 'column dense';
+export interface IGridProps extends ComponentPropsWithRef<'div'> {
+    columns?: string | number;
+    gap?: string;
+    columnGap?: string;
+    rowGap?: string;
+    width?: string;
+    height?: string;
+    minRowHeight?: string;
+    flow?: GridFlow;
+    rows?: string | number;
+    areas?: GridAreas;
+    justifyItems?: GridAlignItems;
+    alignItems?: GridAlignItems;
+    justifyContent?: GridAlignContent;
+    alignContent?: GridAlignContent;
+}
+export interface ICellProps {
+    children?: ReactNode;
+    className?: string;
+    width?: number;
+    height?: number;
+    rowStart?: number | string;
+    rowEnd?: number | string;
+    columnStart?: number | string;
+    columnEnd?: number | string;
+    centerContent?: boolean;
+    area?: string;
+}
+//# sourceMappingURL=Grid.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;AACjC,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AACpE,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,GAAG,cAAc,CAAC;AAClG,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;AAEvE,MAAM,WAAW,UAAW,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC9D,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.types.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, ComponentPropsWithRef } from 'react';\n\nexport type GridAreas = string[];\nexport type GridAlignItems = 'start' | 'end' | 'center' | 'stretch';\nexport type GridAlignContent = GridAlignItems | 'space-around' | 'space-between' | 'space-evenly';\nexport type GridFlow = 'row' | 'column' | 'row dense' | 'column dense';\n\nexport interface IGridProps extends ComponentPropsWithRef<'div'> {\n  columns?: string | number;\n  gap?: string;\n  columnGap?: string;\n  rowGap?: string;\n  width?: string;\n  height?: string;\n  minRowHeight?: string;\n  flow?: GridFlow;\n  rows?: string | number;\n  areas?: GridAreas;\n  justifyItems?: GridAlignItems;\n  alignItems?: GridAlignItems;\n  justifyContent?: GridAlignContent;\n  alignContent?: GridAlignContent;\n}\n\nexport interface ICellProps {\n  children?: ReactNode;\n  className?: string;\n  width?: number;\n  height?: number;\n  rowStart?: number | string;\n  rowEnd?: number | string;\n  columnStart?: number | string;\n  columnEnd?: number | string;\n  centerContent?: boolean;\n  area?: string;\n}\n"]}

package/build/esm/components/Grid/GridChildren.stories.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { ICellProps } from './Grid.types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("./Grid.types").IGridProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+        Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    subcomponents: {
+        Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        storyLink: string;
+    };
+    argTypes: {
+        area: {
+            control: string;
+        };
+        centerContent: {
+            control: string;
+        };
+        className: {
+            control: string;
+        };
+        columnEnd: {
+            control: string;
+        };
+        columnStart: {
+            control: string;
+        };
+        height: {
+            control: string;
+        };
+        rowEnd: {
+            control: string;
+        };
+        rowStart: {
+            control: string;
+        };
+        width: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const RowStart: StoryFn<ICellProps>;
+export declare const ColumnStart: StoryFn<ICellProps>;
+export declare const CenterContent: StoryFn<ICellProps>;
+export declare const Areas: StoryFn<ICellProps>;
+//# sourceMappingURL=GridChildren.stories.d.ts.map

package/build/esm/components/Grid/GridChildren.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridChildren.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/GridChildren.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1C,wBAkBE;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,UAAU,CAoBxC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,UAAU,CAoB3C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,UAAU,CAmB7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,UAAU,CAwBrC,CAAC"}

package/build/esm/components/Grid/GridChildren.stories.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from 'styled-components';
+import Text from '../Text/components/Text/Text';
+import Grid from './Grid';
+import { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';
+const { Cell } = Grid;
+export default {
+    title: 'Layout/Grid/Children',
+    component: Grid,
+    subcomponents: { Cell },
+    parameters: {
+        storyLink: `${GITHUB_COMPONENT_BASE_URL}/Grid/GridChildren.stories.tsx`,
+    },
+    argTypes: {
+        area: { control: 'text' },
+        centerContent: { control: 'boolean' },
+        className: { control: 'text' },
+        columnEnd: { control: 'number' },
+        columnStart: { control: 'number' },
+        height: { control: 'number' },
+        rowEnd: { control: 'number' },
+        rowStart: { control: 'number' },
+        width: { control: 'number' },
+    },
+};
+export const RowStart = ({ rowStart, ...args }) => {
+    const theme = useTheme();
+    const gridProps = {
+        rows: 4,
+        style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },
+    };
+    const cellProps = {
+        rowStart: rowStart || 2,
+        style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },
+    };
+    return (_jsx(Grid, { ...gridProps, children: _jsx(Grid.Cell, { ...cellProps, ...args, children: _jsx(Text, { children: "Cell" }) }) }));
+};
+export const ColumnStart = ({ columnStart, ...args }) => {
+    const theme = useTheme();
+    const gridProps = {
+        columns: 4,
+        style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },
+    };
+    const cellProps = {
+        columnStart: columnStart || 2,
+        style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },
+    };
+    return (_jsx(Grid, { ...gridProps, children: _jsx(Grid.Cell, { ...cellProps, ...args, children: _jsx(Text, { children: "Cell" }) }) }));
+};
+export const CenterContent = ({ centerContent = true, ...args }) => {
+    const theme = useTheme();
+    const gridProps = {
+        style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },
+    };
+    const cellProps = {
+        centerContent,
+        style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },
+    };
+    return (_jsx(Grid, { ...gridProps, children: _jsx(Grid.Cell, { ...cellProps, ...args, children: _jsx("span", { children: "Cell" }) }) }));
+};
+export const Areas = ({ area, ...args }) => {
+    const theme = useTheme();
+    const gridProps = {
+        areas: ['header header header header', 'main main . sidebar', 'footer footer footer footer'],
+        columns: 4,
+        style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },
+    };
+    const cellProps = {
+        area: area || 'main',
+        style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { ...gridProps, children: _jsx(Grid.Cell, { ...cellProps, ...args, children: _jsx(Text, { children: "Cell" }) }) }), _jsx(Text, { children: "Areas available: header, main, sidebar, footer" })] }));
+};
+//# sourceMappingURL=GridChildren.stories.js.map

package/build/esm/components/Grid/GridChildren.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridChildren.stories.js","sourceRoot":"","sources":["../../../../src/components/Grid/GridChildren.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { StoryFn } from '@storybook/react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../Text/components/Text/Text';\nimport Grid from './Grid';\nimport { ICellProps } from './Grid.types';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\n\nconst { Cell } = Grid;\n\nexport default {\n  title: 'Layout/Grid/Children',\n  component: Grid,\n  subcomponents: { Cell },\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/Grid/GridChildren.stories.tsx`,\n  },\n  argTypes: {\n    area: { control: 'text' },\n    centerContent: { control: 'boolean' },\n    className: { control: 'text' },\n    columnEnd: { control: 'number' },\n    columnStart: { control: 'number' },\n    height: { control: 'number' },\n    rowEnd: { control: 'number' },\n    rowStart: { control: 'number' },\n    width: { control: 'number' },\n  },\n};\n\nexport const RowStart: StoryFn<ICellProps> = ({ rowStart, ...args }) => {\n  const theme = useTheme();\n\n  const gridProps = {\n    rows: 4,\n    style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },\n  };\n\n  const cellProps = {\n    rowStart: rowStart || 2,\n    style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },\n  };\n\n  return (\n    <Grid {...gridProps}>\n      <Grid.Cell {...cellProps} {...args}>\n        <Text>Cell</Text>\n      </Grid.Cell>\n    </Grid>\n  );\n};\n\nexport const ColumnStart: StoryFn<ICellProps> = ({ columnStart, ...args }) => {\n  const theme = useTheme();\n\n  const gridProps = {\n    columns: 4,\n    style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },\n  };\n\n  const cellProps = {\n    columnStart: columnStart || 2,\n    style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },\n  };\n\n  return (\n    <Grid {...gridProps}>\n      <Grid.Cell {...cellProps} {...args}>\n        <Text>Cell</Text>\n      </Grid.Cell>\n    </Grid>\n  );\n};\n\nexport const CenterContent: StoryFn<ICellProps> = ({ centerContent = true, ...args }) => {\n  const theme = useTheme();\n\n  const gridProps = {\n    style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },\n  };\n\n  const cellProps = {\n    centerContent,\n    style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },\n  };\n\n  return (\n    <Grid {...gridProps}>\n      <Grid.Cell {...cellProps} {...args}>\n        <span>Cell</span>\n      </Grid.Cell>\n    </Grid>\n  );\n};\n\nexport const Areas: StoryFn<ICellProps> = ({ area, ...args }) => {\n  const theme = useTheme();\n\n  const gridProps = {\n    areas: ['header header header header', 'main main . sidebar', 'footer footer footer footer'],\n    columns: 4,\n    style: { padding: '4px', borderRadius: '4px', background: theme.background.inverted },\n  };\n\n  const cellProps = {\n    area: area || 'main',\n    style: { padding: '4px 8px', borderRadius: '4px', background: theme.background.raised },\n  };\n\n  return (\n    <>\n      <Grid {...gridProps}>\n        <Grid.Cell {...cellProps} {...args}>\n          <Text>Cell</Text>\n        </Grid.Cell>\n      </Grid>\n      <Text>Areas available: header, main, sidebar, footer</Text>\n    </>\n  );\n};\n"]}

package/build/esm/components/Grid/GridContainer.stories.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { IGridProps } from './Grid.types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<IGridProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+        Cell: React.ForwardRefExoticComponent<import("./Grid.types").ICellProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    subcomponents: {
+        Cell: React.ForwardRefExoticComponent<import("./Grid.types").ICellProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        storyLink: string;
+    };
+    argTypes: {
+        areas: {
+            control: string;
+        };
+        columns: {
+            control: string;
+        };
+        gap: {
+            control: string;
+        };
+        columnGap: {
+            control: string;
+        };
+        rowGap: {
+            control: string;
+        };
+        height: {
+            control: string;
+        };
+        width: {
+            control: string;
+        };
+        minRowHeight: {
+            control: string;
+        };
+        flow: {
+            control: string;
+            options: string[];
+        };
+        rows: {
+            control: string;
+        };
+        justifyItems: {
+            control: string;
+            options: string[];
+        };
+        alignItems: {
+            control: string;
+            options: string[];
+        };
+        justifyContent: {
+            control: string;
+            options: string[];
+        };
+        alignContent: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const ColumnsFixed: StoryFn<IGridProps>;
+export declare const Columns: StoryFn<IGridProps>;
+export declare const Gap: StoryFn<IGridProps>;
+export declare const ColumnGap: StoryFn<IGridProps>;
+export declare const RowGap: StoryFn<IGridProps>;
+export declare const Width: StoryFn<IGridProps>;
+export declare const Height: StoryFn<IGridProps>;
+export declare const Flow: StoryFn<IGridProps>;
+export declare const RowsFixed: StoryFn<IGridProps>;
+export declare const Rows: StoryFn<IGridProps>;
+export declare const Areas: StoryFn<IGridProps>;
+export declare const JustifyItems: StoryFn<IGridProps>;
+export declare const AlignItems: StoryFn<IGridProps>;
+export declare const JustifyContent: StoryFn<IGridProps>;
+export declare const AlignContent: StoryFn<IGridProps>;
+//# sourceMappingURL=GridContainer.stories.d.ts.map

package/build/esm/components/Grid/GridContainer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1C,wBA6BE;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,UAAU,CA+B5C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,UAAU,CA+BvC,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,OAAO,CAAC,UAAU,CAgCnC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,UAAU,CAgCzC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,UAAU,CAgCtC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,UAAU,CAgCrC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,UAAU,CAgCtC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,UAAU,CAiCpC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,UAAU,CAgCzC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,UAAU,CAgCpC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,UAAU,CA4BrC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,UAAU,CAgC5C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,UAAU,CAiC1C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,UAAU,CAgC9C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,UAAU,CAiC5C,CAAC"}