@broxus/react-uikit 0.18.0 → 0.19.0

package/dist/cjs/components/Nav/Sub/SubNavList.js

@@ -40,8 +40,7 @@ exports.SubNavList = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const NavContext_1 = require("../../../components/Nav/context/NavContext");
-exports.SubNavList = React.forwardRef((props, ref) => {
-    const { className, children, ...restProps } = props;
+exports.SubNavList = React.forwardRef(({ children, className, ...restProps }, ref) => {
     const { mode, prefixCls, rtl } = React.useContext(NavContext_1.NavContext);
     return (React.createElement("ul", { className: (0, classnames_1.default)({
             [prefixCls]: mode !== 'inline',

package/dist/cjs/components/Nav/Sub/index.d.ts

@@ -10,7 +10,7 @@ export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'labe
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }
-export declare function Sub(props: SubNavProps): React.JSX.Element;
+export declare function Sub({ children, eventKey, ...restProps }: SubNavProps): React.JSX.Element;
 export declare namespace Sub {
     var displayName: string;
 }

package/dist/cjs/components/Nav/Sub/index.js

@@ -202,8 +202,7 @@ function InternalSubNav(props) {
     return (React.createElement(NavContext_1.NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick }, listNode));
 }
 // eslint-disable-next-line react/no-multi-comp
-function Sub(props) {
-    const { eventKey, children } = props;
+function Sub({ children, eventKey, ...restProps }) {
     const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
     const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
     const measure = (0, PathContext_1.useMeasure)();
@@ -216,7 +215,7 @@ function Sub(props) {
         }
         return js_utils_1.noop;
     }, [connectedKeyPath, eventKey, measure]);
-    return (React.createElement(PathContext_1.PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { ...props }, childList)));
+    return (React.createElement(PathContext_1.PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { eventKey: eventKey, ...restProps }, childList)));
 }
 if (process.env.NODE_ENV !== 'production') {
     Sub.displayName = 'Nav.Sub';

package/dist/cjs/components/Nav/context/IdContext.js

@@ -53,5 +53,5 @@ function useNavId(eventKey) {
     return getNavId(id, eventKey);
 }
 if (process.env.NODE_ENV !== 'production') {
-    exports.IdContext.displayName = 'IdContext';
+    exports.IdContext.displayName = 'Nav.IdContext';
 }

package/dist/cjs/components/Nav/context/NavContext.d.ts

@@ -34,4 +34,4 @@ export interface InheritableContextProps extends Partial<NavContextProps> {
     children?: React.ReactNode;
     locked?: boolean;
 }
-export declare function NavContextProvider(props: InheritableContextProps): React.JSX.Element;
+export declare function NavContextProvider({ children, locked, ...restProps }: InheritableContextProps): React.JSX.Element;

package/dist/cjs/components/Nav/context/NavContext.js

@@ -59,10 +59,9 @@ function mergeProps(origin, target) {
     });
     return clone;
 }
-function NavContextProvider(props) {
+function NavContextProvider({ children, locked, ...restProps }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const context = React.useContext(exports.NavContext);
-    const { children, locked, ...restProps } = props;
     const inheritableContext = (0, useMemo_1.default)(() => mergeProps({
         ...context,
         popupPrefixCls: context.popupPrefixCls ?? `${config.prefixCls}-dropdown`,
@@ -73,5 +72,5 @@ function NavContextProvider(props) {
     return React.createElement(exports.NavContext.Provider, { value: inheritableContext }, children);
 }
 if (process.env.NODE_ENV !== 'production') {
-    exports.NavContext.displayName = 'NavContext';
+    exports.NavContext.displayName = 'Nav.NavContext';
 }

package/dist/cjs/components/Nav/context/PathContext.js

@@ -50,7 +50,7 @@ function useFullPath(eventKey) {
 }
 exports.PathUserContext = React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
-    exports.PathRegisterContext.displayName = 'PathRegisterContext';
-    exports.PathTrackerContext.displayName = 'PathTrackerContext';
-    exports.PathUserContext.displayName = 'PathUserContext';
+    exports.PathRegisterContext.displayName = 'Nav.PathRegisterContext';
+    exports.PathTrackerContext.displayName = 'Nav.PathTrackerContext';
+    exports.PathUserContext.displayName = 'Nav.PathUserContext';
 }

package/dist/cjs/components/Nav/context/PrivateContext.js

@@ -37,3 +37,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrivateContext = void 0;
 const React = __importStar(require("react"));
 exports.PrivateContext = React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+    exports.PrivateContext.displayName = 'Nav.PrivateContext';
+}

package/dist/cjs/components/Nav/index.d.ts

@@ -5,7 +5,6 @@ import { Header } from '../../components/Nav/Header';
 import { Item } from '../../components/Nav/Item';
 import { type NavProps } from '../../components/Nav/Nav';
 import { Sub } from '../../components/Nav/Sub';
-import './index.scss';
 export type { NavProps };
 export interface Nav extends React.ForwardRefExoticComponent<NavProps> {
     Divider: typeof Divider;

package/dist/cjs/components/Nav/index.js

@@ -7,7 +7,6 @@ const Header_1 = require("../../components/Nav/Header");
 const Item_1 = require("../../components/Nav/Item");
 const Nav_1 = require("../../components/Nav/Nav");
 const Sub_1 = require("../../components/Nav/Sub");
-require("./index.scss");
 exports.Nav = Nav_1.Nav;
 exports.Nav.Divider = Divider_1.Divider;
 exports.Nav.Group = Group_1.Group;

package/dist/cjs/components/Navbar/index.d.ts

@@ -7,7 +7,6 @@ import { Nav } from '../../components/Navbar/Nav';
 import { type NavbarProps } from '../../components/Navbar/Navbar';
 import { Right } from '../../components/Navbar/Right';
 import { Toggle } from '../../components/Navbar/Toggle';
-import './index.scss';
 export type { NavbarProps };
 export interface Navbar extends React.FunctionComponent<NavbarProps> {
     Center: typeof Center;

package/dist/cjs/components/Navbar/index.js

@@ -9,7 +9,6 @@ const Nav_1 = require("../../components/Navbar/Nav");
 const Navbar_1 = require("../../components/Navbar/Navbar");
 const Right_1 = require("../../components/Navbar/Right");
 const Toggle_1 = require("../../components/Navbar/Toggle");
-require("./index.scss");
 exports.Navbar = Navbar_1.Navbar;
 exports.Navbar.Center = Center_1.Center;
 exports.Navbar.Container = Container_1.Container;

package/dist/cjs/components/Overlay/index.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
 export interface OverlayOwnProps {
     icon?: boolean;
     overlay?: React.ReactNode;

package/dist/cjs/components/Overlay/index.js

@@ -41,7 +41,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-require("./index.scss");
 const defaultElement = 'div';
 const positions = [
     'top',

package/dist/cjs/components/Progress/index.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './index.scss';
 export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
     prefixCls?: string;
 }

package/dist/cjs/components/Progress/index.js

@@ -40,7 +40,6 @@ exports.Progress = Progress;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-require("./index.scss");
 function Progress(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;

package/dist/cjs/components/Section/index.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
-export type SectionOwnProps = {
+export interface SectionOwnProps {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
-};
+}
 export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<SectionOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, SectionOwnProps>;
 declare const defaultElement = "section";
 export declare function Section<E extends React.ElementType = typeof defaultElement>(props: SectionProps<E>): React.JSX.Element;

package/dist/cjs/components/Section/index.js

@@ -41,7 +41,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-require("./index.scss");
 const defaultElement = 'section';
 function Section(props) {
     const config = (0, ConfigProvider_1.useConfig)();

package/dist/cjs/components/Segmented/index.d.ts

@@ -0,0 +1,19 @@
+import { type SegmentedLabeledOption as RcSegmentedLabeledOption, type SegmentedProps as RcSegmentedProps, type SegmentedValue as RcSegmentedValue, type SegmentedRawOption } from '@rc-component/segmented';
+import * as React from 'react';
+import { type SizeType } from '../../types';
+export { type SegmentedValue } from '@rc-component/segmented';
+interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue> extends RcSegmentedLabeledOption<ValueType> {
+    label: RcSegmentedLabeledOption['label'];
+}
+interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue> extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
+    label?: RcSegmentedLabeledOption['label'];
+    icon: React.ReactNode;
+}
+export type SegmentedLabeledOption<ValueType = RcSegmentedValue> = SegmentedLabeledOptionWithIcon<ValueType> | SegmentedLabeledOptionWithoutIcon<ValueType>;
+export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];
+export interface SegmentedProps<ValueType = RcSegmentedValue> extends Omit<RcSegmentedProps<ValueType>, 'options' | 'size'> {
+    options: SegmentedOptions<ValueType>;
+    size?: SizeType;
+    vertical?: boolean;
+}
+export declare function Segmented<ValueType = RcSegmentedValue>(props: SegmentedProps<ValueType>): React.JSX.Element;

package/dist/cjs/components/Segmented/index.js

@@ -0,0 +1,68 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Segmented = Segmented;
+const segmented_1 = __importDefault(require("@rc-component/segmented"));
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
+function isSegmentedLabeledOptionWithIcon(option) {
+    return typeof option === 'object' && !!option?.icon;
+}
+function Segmented(props) {
+    const config = (0, ConfigProvider_1.useConfig)();
+    const { className, options = [], prefixCls = config.prefixCls, size, vertical, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'segmented'), [config, prefixCls]);
+    const mergedOptions = React.useMemo(() => options.map(option => {
+        // @ts-ignore
+        if (isSegmentedLabeledOptionWithIcon(option)) {
+            const { icon, label, ...restOpts } = option;
+            return {
+                ...restOpts,
+                label: (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: `${rootCls}-item-icon` }, icon),
+                    label && React.createElement("span", null, label))),
+            };
+        }
+        return option;
+    }), [options, rootCls]);
+    return (React.createElement(segmented_1.default, { className: (0, classnames_1.default)(className, {
+            [`${rootCls}-${size}`]: size,
+            [`${rootCls}-vertical`]: vertical,
+        }), options: mergedOptions, prefixCls: rootCls, vertical: vertical, ...restProps }));
+}

package/dist/cjs/components/Spinner/index.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './index.scss';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     ratio?: number;

package/dist/cjs/components/Spinner/index.js

@@ -41,7 +41,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Icon_1 = require("../../components/Icon");
-require("./index.scss");
 function Spinner(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;

package/dist/cjs/components/Subnav/index.d.ts

@@ -1,7 +1,6 @@
 import type * as React from 'react';
 import { Item } from '../../components/Subnav/Item';
 import { type SubnavProps } from '../../components/Subnav/Subnav';
-import './index.scss';
 export type { SubnavProps };
 export interface Subnav extends React.FunctionComponent<SubnavProps> {
     Item: typeof Item;

package/dist/cjs/components/Subnav/index.js

@@ -3,6 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Subnav = void 0;
 const Item_1 = require("../../components/Subnav/Item");
 const Subnav_1 = require("../../components/Subnav/Subnav");
-require("./index.scss");
 exports.Subnav = Subnav_1.Subnav;
 exports.Subnav.Item = Item_1.Item;

package/dist/cjs/components/Switch/index.d.ts

@@ -1,7 +1,6 @@
 import { type SwitchChangeEventHandler, type SwitchClickEventHandler } from '@rc-component/switch';
 import * as React from 'react';
 import { type Direction } from '../../types';
-import './index.scss';
 export type SwitchSize = 'small';
 export type SwitchProps = {
     autoFocus?: boolean;

package/dist/cjs/components/Switch/index.js

@@ -42,7 +42,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Spinner_1 = require("../../components/Spinner");
-require("./index.scss");
 exports.Switch = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
     const { className, direction = config.direction, loading, loadingIcon, prefixCls = config.prefixCls, ...restProps } = props;

package/dist/cjs/components/Tabs/index.d.ts

@@ -1,6 +1,5 @@
 import { type TabsProps as RcTabsProps } from '@rc-component/tabs';
 import * as React from 'react';
-import './index.scss';
 export type TabsPosition = 'left' | 'right' | 'top' | 'bottom';
 export interface Tab {
     active?: boolean;

package/dist/cjs/components/Tabs/index.js

@@ -44,7 +44,6 @@ const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Icon_1 = require("../../components/Icon");
 const hooks_1 = require("../../components/Tabs/hooks");
 const utils_1 = require("../../utils");
-require("./index.scss");
 function Tabs(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { addIcon, animated, centered, className, direction, hideAdd, items, more, prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;

package/dist/cjs/components/Text/index.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
-import './index.scss';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;

package/dist/cjs/components/Text/index.js

@@ -42,7 +42,6 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
-require("./index.scss");
 const defaultElement = 'span';
 function Text(props) {
     const config = (0, ConfigProvider_1.useConfig)();

package/dist/cjs/components/Tile/index.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
 export type TileOwnProps = {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     prefixCls?: string;

package/dist/cjs/components/Tile/index.js

@@ -41,7 +41,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-require("./index.scss");
 const defaultElement = 'div';
 function Tile(props) {
     const config = (0, ConfigProvider_1.useConfig)();

package/dist/cjs/components/Width/Width.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
-import './index.scss';
-export interface WidthOwnProps extends WidthBreakpointsConfig {
+export interface WidthOwnProps extends Omit<WidthBreakpointsConfig, 'default'> {
     prefixCls?: string;
-    size?: WidthSize;
+    size?: WidthSize | WidthBreakpointsConfig;
 }
 export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
 declare const defaultElement = "div";

package/dist/cjs/components/Width/Width.js

@@ -42,15 +42,9 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../components/Width/utils");
-require("./index.scss");
 const defaultElement = 'div';
 function Width(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, size, s, m, l, xl, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getWidthClassname)(size, prefixCls || config.prefixCls), (0, utils_1.getWidthClassname)({
-            l,
-            m,
-            s,
-            xl,
-        }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getWidthClassname)(size, prefixCls || config.prefixCls), (0, utils_1.getWidthClassname)({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
 }

package/dist/cjs/components/Width/utils.d.ts

@@ -1,3 +1,3 @@
 import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../../components/Width';
-export declare function getWidthClassname(valueOrConfig: WidthSize | WidthBreakpointsConfig, prefixCls?: string): string | undefined;
+export declare function getWidthClassname(valueOrConfig?: WidthSize | WidthBreakpointsConfig, prefixCls?: string): string | undefined;
 export declare function getChildWidthClassname(valueOrConfig: ChildWidthSize | ChildWidthBreakpointsConfig | undefined, prefixCls?: string): string | undefined;

package/dist/cjs/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
 export * from './components/Subnav';
+export * from './components/Segmented';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/dist/cjs/index.js

@@ -40,6 +40,7 @@ __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Nav"), exports);
 __exportStar(require("./components/Navbar"), exports);
 __exportStar(require("./components/Subnav"), exports);
+__exportStar(require("./components/Segmented"), exports);
 __exportStar(require("./components/Breadcrumb"), exports);
 __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/Dotnav"), exports);

package/dist/esm/components/Accordion/Item.d.ts

@@ -1,12 +1,13 @@
 import { type CollapsePanelProps } from '@rc-component/collapse';
 import * as React from 'react';
-export interface AccordionItemProps extends React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>> {
+export interface AccordionItemProps extends Omit<CollapsePanelProps, 'expandIcon' | 'prefixCls'> {
+    expandIcon?: (props: AccordionItemProps) => React.ReactNode;
 }
 /**
  * Use Accordion items props instead
  * @deprecated
  */
-export declare function Item(props: AccordionItemProps): React.JSX.Element;
+export declare function Item(props: React.PropsWithChildren<AccordionItemProps>): React.JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/esm/components/Accordion/index.d.ts

@@ -1,7 +1,6 @@
 import type * as React from 'react';
 import { type AccordionProps } from '../../components/Accordion/Accordion';
 import { type AccordionItemProps, Item } from '../../components/Accordion/Item';
-import './index.scss';
 export type { AccordionProps, AccordionItemProps };
 export interface Accordion extends React.FunctionComponent<AccordionProps> {
     Item: typeof Item;

package/dist/esm/components/Accordion/index.js

@@ -1,5 +1,4 @@
 import { Accordion as InternalAccordion } from '../../components/Accordion/Accordion';
 import { Item } from '../../components/Accordion/Item';
-import './index.scss';
 export const Accordion = InternalAccordion;
 Accordion.Item = Item;

package/dist/esm/components/Alert/index.d.ts

@@ -1,6 +1,5 @@
 import { type MotionEndEventHandler } from '@rc-component/motion';
 import * as React from 'react';
-import './index.scss';
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     closable?: boolean;
     closeIcon?: React.ReactNode;

package/dist/esm/components/Alert/index.js

@@ -3,10 +3,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { Close } from '../../components/Close';
 import { useConfig } from '../../components/ConfigProvider';
-import './index.scss';
 export const Alert = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, className, closable = true, closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
+    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
     const close = React.useCallback(() => {
         onClose?.();
@@ -21,12 +20,11 @@ export const Alert = React.forwardRef((props, ref) => {
         }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(rootCls, {
             [`${rootCls}-${severity}`]: severity !== undefined,
         }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
-        closable
-            && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {
-                // @ts-ignore
-                className: `${rootCls}-close`,
-                onClick: close,
-            })) : (React.createElement(Close, { className: `${rootCls}-close`, onClick: close }))),
+        closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {
+            // @ts-ignore
+            className: `${rootCls}-close`,
+            onClick: close,
+        })) : (React.createElement(Close, { className: `${rootCls}-close`, onClick: close }))),
         children))));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/components/Align/Align.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { type AlignBreakpointsConfig, type AlignSide } from '../../components/Align/types';
 import { type PolymorphicProps } from '../../components/Component';
 import { type Direction } from '../../types';
-export interface AlignOwnProps {
+export interface AlignOwnProps extends Omit<AlignBreakpointsConfig, 'default'> {
+    align?: AlignSide | AlignBreakpointsConfig;
     direction?: Direction;
     prefixCls?: string;
-    side?: 'left' | 'right';
 }
 export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
 declare const defaultElement = "div";

package/dist/esm/components/Align/Align.js

@@ -1,17 +1,23 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import { getAlignClassname } from '../../components/Align/utils';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export function Align(props) {
     const config = useConfig();
-    const { className, direction = config.direction, prefixCls = config.prefixCls, side = 'left', ...restProps } = props;
+    const { align = 'left', className, direction = config.direction, prefixCls = config.prefixCls, s, m, l, xl, ...restProps } = props;
     const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
-    const invertedSide = React.useMemo(() => (side === 'left' ? 'right' : 'left'), [side]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'align'), [config, prefixCls]);
-    return (React.createElement(Component, { className: classNames({
-            [`${rootCls}-${isRtl ? invertedSide : side}`]: true,
-        }, className), component: defaultElement, ...restProps }));
+    const mergedAlign = React.useMemo(() => {
+        if (isRtl && align === 'left') {
+            return 'right';
+        }
+        if (isRtl && align === 'right') {
+            return 'left';
+        }
+        return align;
+    }, [align, isRtl]);
+    return (React.createElement(Component, { className: classNames(getAlignClassname(mergedAlign, prefixCls || config.prefixCls), getAlignClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Align.displayName = 'Align';

package/dist/esm/components/Align/Center.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { type AlignProps } from '../../components/Align/Align';
+export declare function Center(props: Omit<AlignProps, 'align'>): React.JSX.Element;
+export declare namespace Center {
+    var displayName: string;
+}

package/dist/esm/components/Align/Center.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Align } from '../../components/Align/Align';
+export function Center(props) {
+    return React.createElement(Align, { ...props, align: "center" });
+}
+if (process.env.NODE_ENV !== 'production') {
+    Center.displayName = 'Align.Center';
+}

package/dist/esm/components/Align/Left.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type AlignProps } from '../../components/Align/Align';
-export declare function Left(props: Omit<AlignProps, 'side'>): React.JSX.Element;
+export declare function Left(props: Omit<AlignProps, 'align'>): React.JSX.Element;
 export declare namespace Left {
     var displayName: string;
 }

package/dist/esm/components/Align/Left.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Align } from '../../components/Align/Align';
 export function Left(props) {
-    return React.createElement(Align, { ...props, side: "left" });
+    return React.createElement(Align, { ...props, align: "left" });
 }
 if (process.env.NODE_ENV !== 'production') {
     Left.displayName = 'Align.Left';

package/dist/esm/components/Align/Right.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type AlignProps } from '../../components/Align/Align';
-export declare function Right(props: Omit<AlignProps, 'side'>): React.JSX.Element;
+export declare function Right(props: Omit<AlignProps, 'align'>): React.JSX.Element;
 export declare namespace Right {
     var displayName: string;
 }