@astral/ui 4.117.0 → 4.118.0

package/components/Alert/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const StyledIconButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;

package/components/Banner/BannerTemplate/styles.d.ts

@@ -7,12 +7,12 @@ export declare const Image: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const Wrapper: import("../../styled").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const Wrapper: import("../../styled").StyledComponent<Omit<import("../../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../Grid/styles").StyledGridProps, {}, {}>;
-export declare const WrapperTextContent: import("../../styled").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+}, {}, {}>;
+export declare const WrapperTextContent: import("../../styled").StyledComponent<Omit<import("../../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const Footer: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/CollapsableAlert/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const Actions: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const Actions: import("../styled").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;

package/components/DialogActions/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { type GridProps } from '../Grid';
 export declare const StyledDialogActions: import("../styled").StyledComponent<import("@mui/material/DialogActions").DialogActionsProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledGrid: import("../styled").StyledComponent<Omit<GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     component?: import("react").ElementType | undefined;
     children?: import("react").ReactNode;
-}, {}, {}>;
+} & import("../Grid/types").StyledGridProps, {}, {}>;

package/components/FlowButton/styles.d.ts

@@ -20,6 +20,6 @@ export declare const TargetTextWrapper: import("../styled").StyledComponent<impo
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;

package/components/Grid/Grid.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import { type GridComponentProps } from './GridComponent';
-import { type StyledGridProps } from './styles';
-export type GridProps = GridComponentProps & StyledGridProps;
-export declare const Grid: import("@emotion/styled").StyledComponent<Omit<GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & StyledGridProps, {}, {}>;
+import { type GridProps } from './types';
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/Grid/Grid.js

@@ -1,2 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { StyledGrid } from './styles';
-export const Grid = StyledGrid;
+import { useLogic } from './useLogic';
+export const Grid = forwardRef(({ style, ...props }, ref) => {
+    const { gridCssVars } = useLogic(props);
+    return (_jsx(StyledGrid, { ref: ref, ...props, style: { ...gridCssVars, ...style } }));
+});

package/components/Grid/index.d.ts

@@ -1 +1,2 @@
 export * from './Grid';
+export type { GridProps } from './types';

package/components/Grid/styles.d.ts

@@ -1,43 +1,5 @@
 /// <reference types="react" />
-export type StyledGridProps = {
-    /**
-     * Задаёт display: grid; Если задан columns, spacing и тп, то включается автоматически
-     * @default false
-     */
-    container?: boolean;
-    /**
-     * Количество равных колонок,
-     * либо текстовое значение соответствующее grid-template-columns
-     * @default undefined
-     */
-    columns?: number | string;
-    /**
-     * Количество равных рядов,
-     * либо текстовое значение соответствующее grid-template-rows
-     * @default undefined
-     */
-    rows?: number | string;
-    /**
-     * Отступы между колонками
-     * @default undefined
-     */
-    columnSpacing?: number;
-    /**
-     * Отступы между рядами
-     * @default undefined
-     */
-    rowSpacing?: number;
-    /**
-     * Отступы между колонками и рядами. Если передан массив: Первый элемент - отступ между рядами, второй - между колонками
-     * @default undefined
-     */
-    spacing?: number | [number, number];
-    /**
-     * Соответствует grid-autoflow
-     * @default 	'row'
-     */
-    direction?: 'row' | 'column' | 'dense';
-};
+import { type StyledGridProps } from './types';
 export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("./GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyledGridProps, {}, {}>;

package/components/Grid/styles.js

@@ -27,11 +27,16 @@ export const StyledGrid = styled(GridComponent, {
         'spacing',
     ].includes(prop),
 }) `
+  --grid-justify-content: normal;
+  --grid-align-items: normal;
+
   ${({ theme, columnSpacing }) => columnSpacing && `column-gap: ${theme.spacing(columnSpacing)};`};
   ${({ theme, rowSpacing }) => rowSpacing && `row-gap: ${theme.spacing(rowSpacing)};`};
   ${({ theme, spacing }) => spacing && `gap: ${setCss(spacing, theme)};`};
   ${({ container, spacing, rowSpacing, columnSpacing }) => (spacing || rowSpacing || container || columnSpacing) && 'display: grid'};
   grid-template-columns: ${({ columns }) => getTemplateStyle(columns)};
   grid-template-rows: ${({ rows }) => getTemplateStyle(rows)};
-  ${({ direction }) => direction && `grid-auto-flow: ${direction}`};
+  ${({ direction }) => direction && `grid-auto-flow: ${direction};`};
+  align-items: var(--grid-align-items);
+  justify-content: var(--grid-justify-content);
 `;

package/components/Grid/types.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties } from 'react';
+import type { GridComponentProps } from './GridComponent';
+export type StyledGridProps = {
+    /**
+     * Задаёт display: grid; Если задан columns, spacing и тп, то включается автоматически
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Количество равных колонок,
+     * либо текстовое значение соответствующее grid-template-columns
+     * @default undefined
+     */
+    columns?: number | string;
+    /**
+     * Количество равных рядов,
+     * либо текстовое значение соответствующее grid-template-rows
+     * @default undefined
+     */
+    rows?: number | string;
+    /**
+     * Отступы между колонками
+     * @default undefined
+     */
+    columnSpacing?: number;
+    /**
+     * Отступы между рядами
+     * @default undefined
+     */
+    rowSpacing?: number;
+    /**
+     * Отступы между колонками и рядами. Если передан массив: Первый элемент - отступ между рядами, второй - между колонками
+     * @default undefined
+     */
+    spacing?: number | [number, number];
+    /**
+     * Соответствует grid-autoflow
+     * @default 	'row'
+     */
+    direction?: 'row' | 'column' | 'dense';
+    /**
+     * Горизонтальное выравнивание сетки в контейнере.
+     */
+    justifyContent?: CSSProperties['justifyContent'];
+    /**
+     * Вертикальное выравнивание элементов внутри ячеек.
+     */
+    alignItems?: CSSProperties['alignItems'];
+};
+export type GridProps = GridComponentProps & StyledGridProps;

package/components/Grid/types.js

@@ -0,0 +1 @@
+export {};

package/components/Grid/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Grid/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Grid/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import { type CSSProperties } from 'react';
+import type { StyledGridProps } from '../types';
+type UseLogicParams = Pick<StyledGridProps, 'justifyContent' | 'alignItems'>;
+export declare const useLogic: (params: UseLogicParams) => {
+    gridCssVars: CSSProperties;
+};
+export {};

package/components/Grid/useLogic/useLogic.js

@@ -0,0 +1,8 @@
+export const useLogic = (params) => {
+    const { justifyContent, alignItems } = params;
+    const gridCssVars = {
+        '--grid-justify-content': justifyContent,
+        '--grid-align-items': alignItems,
+    };
+    return { gridCssVars };
+};

package/components/MenuOrganization/styles.d.ts

@@ -13,9 +13,9 @@ export declare const OrganizationsWrapper: import("../styled").StyledComponent<{
 } & {
     $isLoading?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OrganizationData: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const OrganizationData: import("../styled").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const StyledTypography: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;

package/components/ProductSwitcher/Content/styles.d.ts

@@ -10,9 +10,9 @@ export declare const Logo: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const TitleErrorContainer: import("../../styled").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const TitleErrorContainer: import("../../styled").StyledComponent<Omit<import("../../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const ProductName: import("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
     variant?: import("../../Typography").TypographyVariant | undefined;

package/components/Tag/styles.d.ts

@@ -15,9 +15,9 @@ export declare const getBadgeColor: ({ tagColor }: {
     tagColor?: TagColor | undefined;
 }) => BadgeColor;
 export declare const getDeleteIconColor: ({ variant, color, theme, }: Omit<StyledTagThemeProps, 'disabled' | 'size'>) => string;
-export declare const LabelContainer: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const LabelContainer: import("../styled").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps & {
+} & {
     $variant: TagVariant;
 }, {}, {}>;
 export declare const Label: import("../styled").StyledComponent<{

package/hook-form/FormFiltersModalGroup/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const Container: import("../../components/styled").StyledComponent<Omit<import("../../components/Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const Container: import("../../components/styled").StyledComponent<Omit<import("../../components/Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../components/Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;

package/node/components/Alert/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const StyledIconButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;

package/node/components/Banner/BannerTemplate/styles.d.ts

@@ -7,12 +7,12 @@ export declare const Image: import("@emotion/styled/dist/declarations/src/types"
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../Grid/styles").StyledGridProps, {}, {}>;
-export declare const WrapperTextContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+}, {}, {}>;
+export declare const WrapperTextContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const Footer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/node/components/CollapsableAlert/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const Actions: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const Actions: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;

package/node/components/DialogActions/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { type GridProps } from '../Grid';
 export declare const StyledDialogActions: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/DialogActions").DialogActionsProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     component?: import("react").ElementType | undefined;
     children?: import("react").ReactNode;
-}, {}, {}>;
+} & import("../Grid/types").StyledGridProps, {}, {}>;

package/node/components/FlowButton/styles.d.ts

@@ -20,6 +20,6 @@ export declare const TargetTextWrapper: import("@emotion/styled/dist/declaration
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;

package/node/components/Grid/Grid.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import { type GridComponentProps } from './GridComponent';
-import { type StyledGridProps } from './styles';
-export type GridProps = GridComponentProps & StyledGridProps;
-export declare const Grid: import("@emotion/styled").StyledComponent<Omit<GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & StyledGridProps, {}, {}>;
+import { type GridProps } from './types';
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/Grid/Grid.js

@@ -1,5 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("./styles");
-exports.Grid = styles_1.StyledGrid;
+const useLogic_1 = require("./useLogic");
+exports.Grid = (0, react_1.forwardRef)(({ style, ...props }, ref) => {
+    const { gridCssVars } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledGrid, { ref: ref, ...props, style: { ...gridCssVars, ...style } }));
+});

package/node/components/Grid/index.d.ts

@@ -1 +1,2 @@
 export * from './Grid';
+export type { GridProps } from './types';

package/node/components/Grid/styles.d.ts

@@ -1,43 +1,5 @@
 /// <reference types="react" />
-export type StyledGridProps = {
-    /**
-     * Задаёт display: grid; Если задан columns, spacing и тп, то включается автоматически
-     * @default false
-     */
-    container?: boolean;
-    /**
-     * Количество равных колонок,
-     * либо текстовое значение соответствующее grid-template-columns
-     * @default undefined
-     */
-    columns?: number | string;
-    /**
-     * Количество равных рядов,
-     * либо текстовое значение соответствующее grid-template-rows
-     * @default undefined
-     */
-    rows?: number | string;
-    /**
-     * Отступы между колонками
-     * @default undefined
-     */
-    columnSpacing?: number;
-    /**
-     * Отступы между рядами
-     * @default undefined
-     */
-    rowSpacing?: number;
-    /**
-     * Отступы между колонками и рядами. Если передан массив: Первый элемент - отступ между рядами, второй - между колонками
-     * @default undefined
-     */
-    spacing?: number | [number, number];
-    /**
-     * Соответствует grid-autoflow
-     * @default 	'row'
-     */
-    direction?: 'row' | 'column' | 'dense';
-};
+import { type StyledGridProps } from './types';
 export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("./GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyledGridProps, {}, {}>;

package/node/components/Grid/styles.js

@@ -30,11 +30,16 @@ exports.StyledGrid = (0, styled_1.styled)(GridComponent_1.GridComponent, {
         'spacing',
     ].includes(prop),
 }) `
+  --grid-justify-content: normal;
+  --grid-align-items: normal;
+
   ${({ theme, columnSpacing }) => columnSpacing && `column-gap: ${theme.spacing(columnSpacing)};`};
   ${({ theme, rowSpacing }) => rowSpacing && `row-gap: ${theme.spacing(rowSpacing)};`};
   ${({ theme, spacing }) => spacing && `gap: ${setCss(spacing, theme)};`};
   ${({ container, spacing, rowSpacing, columnSpacing }) => (spacing || rowSpacing || container || columnSpacing) && 'display: grid'};
   grid-template-columns: ${({ columns }) => getTemplateStyle(columns)};
   grid-template-rows: ${({ rows }) => getTemplateStyle(rows)};
-  ${({ direction }) => direction && `grid-auto-flow: ${direction}`};
+  ${({ direction }) => direction && `grid-auto-flow: ${direction};`};
+  align-items: var(--grid-align-items);
+  justify-content: var(--grid-justify-content);
 `;

package/node/components/Grid/types.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties } from 'react';
+import type { GridComponentProps } from './GridComponent';
+export type StyledGridProps = {
+    /**
+     * Задаёт display: grid; Если задан columns, spacing и тп, то включается автоматически
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Количество равных колонок,
+     * либо текстовое значение соответствующее grid-template-columns
+     * @default undefined
+     */
+    columns?: number | string;
+    /**
+     * Количество равных рядов,
+     * либо текстовое значение соответствующее grid-template-rows
+     * @default undefined
+     */
+    rows?: number | string;
+    /**
+     * Отступы между колонками
+     * @default undefined
+     */
+    columnSpacing?: number;
+    /**
+     * Отступы между рядами
+     * @default undefined
+     */
+    rowSpacing?: number;
+    /**
+     * Отступы между колонками и рядами. Если передан массив: Первый элемент - отступ между рядами, второй - между колонками
+     * @default undefined
+     */
+    spacing?: number | [number, number];
+    /**
+     * Соответствует grid-autoflow
+     * @default 	'row'
+     */
+    direction?: 'row' | 'column' | 'dense';
+    /**
+     * Горизонтальное выравнивание сетки в контейнере.
+     */
+    justifyContent?: CSSProperties['justifyContent'];
+    /**
+     * Вертикальное выравнивание элементов внутри ячеек.
+     */
+    alignItems?: CSSProperties['alignItems'];
+};
+export type GridProps = GridComponentProps & StyledGridProps;

package/node/components/Grid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/Grid/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/Grid/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/Grid/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import { type CSSProperties } from 'react';
+import type { StyledGridProps } from '../types';
+type UseLogicParams = Pick<StyledGridProps, 'justifyContent' | 'alignItems'>;
+export declare const useLogic: (params: UseLogicParams) => {
+    gridCssVars: CSSProperties;
+};
+export {};

package/node/components/Grid/useLogic/useLogic.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const useLogic = (params) => {
+    const { justifyContent, alignItems } = params;
+    const gridCssVars = {
+        '--grid-justify-content': justifyContent,
+        '--grid-align-items': alignItems,
+    };
+    return { gridCssVars };
+};
+exports.useLogic = useLogic;

package/node/components/MenuOrganization/styles.d.ts

@@ -13,9 +13,9 @@ export declare const OrganizationsWrapper: import("@emotion/styled/dist/declarat
 } & {
     $isLoading?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OrganizationData: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const OrganizationData: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;

package/node/components/ProductSwitcher/Content/styles.d.ts

@@ -10,9 +10,9 @@ export declare const Logo: import("@emotion/styled/dist/declarations/src/types")
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const TitleErrorContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const TitleErrorContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;
 export declare const ProductName: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
     variant?: import("../../Typography").TypographyVariant | undefined;

package/node/components/Tag/styles.d.ts

@@ -15,9 +15,9 @@ export declare const getBadgeColor: ({ tagColor }: {
     tagColor?: TagColor | undefined;
 }) => BadgeColor;
 export declare const getDeleteIconColor: ({ variant, color, theme, }: Omit<StyledTagThemeProps, 'disabled' | 'size'>) => string;
-export declare const LabelContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const LabelContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../Grid/styles").StyledGridProps & {
+} & {
     $variant: TagVariant;
 }, {}, {}>;
 export declare const Label: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/hook-form/FormFiltersModalGroup/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const Container: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../components/Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const Container: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../components/Grid").GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("../../components/Grid/styles").StyledGridProps, {}, {}>;
+}, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.117.0",
+  "version": "4.118.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {