@broxus/react-uikit 0.7.0 → 0.8.1

package/dist/esm/components/Button/index.scss

@@ -379,6 +379,16 @@
     }
 }
 
+/* OnClick + Active */
+.uk-button-text:active,
+.uk-button-text.uk-active {
+    background-color: var(--button-text-active-background);
+    color: var(--button-text-active-color);
+    @if mixin-exists(hook-button-text-active) {
+        @include hook-button-text-active;
+    }
+}
+
 /*
  * Link
  * 1. Reset
@@ -408,6 +418,15 @@
     text-decoration: none;
 }
 
+/* OnClick + Active */
+.uk-button-link:active,
+.uk-button-link.uk-active {
+    background-color: var(--button-link-active-background);
+    color: var(--button-link-active-color);
+    @if mixin-exists(hook-button-link-active) {
+        @include hook-button-link-active;
+    }
+}
 
 /* Ghost modifiers
  ========================================================================== */

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

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
 import { type BreakpointsConfig, type TooltipOptions } from '../../types';
 export type ColorMode = 'light' | 'dark';
+type PropsWithMouseHandler = {
+    onClick: React.HTMLAttributes<HTMLElement>['onClick'];
+};
 export type ConfigContextConsumedProps = {
     breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     buttonShape?: ButtonProps['shape'];
@@ -9,6 +12,7 @@ export type ConfigContextConsumedProps = {
     cardPrimaryColorMode?: ColorMode;
     cardSecondaryColorMode?: ColorMode;
     cardTertiaryColorMode?: ColorMode;
+    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     direction?: string;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
@@ -20,6 +24,14 @@ export type ConfigContextConsumedProps = {
     sectionPrimaryColorMode?: ColorMode;
     sectionSecondaryColorMode?: ColorMode;
     sectionTertiaryColorMode?: ColorMode;
+    selectAddIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
+    selectArrowIcon?: React.ReactNode | ((props: {
+        isOpen: boolean;
+    } & PropsWithMouseHandler) => React.ReactElement);
+    selectClearIcon?: React.ReactNode | (() => React.ReactElement);
+    selectLoadingIcon?: React.ReactNode | (() => React.ReactElement);
+    selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
+    selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
     tilePrimaryColorMode?: ColorMode;
     tileSecondaryColorMode?: ColorMode;
     tileTertiaryColorMode?: ColorMode;
@@ -28,3 +40,4 @@ export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextCo
 export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
 export declare function useConfig(): ConfigContextConsumedProps;
 export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;
+export {};

package/dist/esm/components/Control/Checkbox/index.scss

@@ -86,20 +86,21 @@
 }
 
 .uk-checkbox-wrapper .uk-checkbox-inner::after {
-    border: var(--checkbox-border-width) solid var(--checkbox-checked-border);
+    border: var(--checkbox-checked-icon-border-width) solid var(--checkbox-checked-icon-color);
     border-left: 0;
     border-top: 0;
+    box-sizing: border-box;
     content: ' ';
     display: block;
-    height: calc(var(--checkbox-size) / 2.5);
-    left: 27.5%;
+    height: calc(var(--checkbox-size) / 2);
+    left: 28.5%;
     opacity: 0;
     position: absolute;
     top: 50%;
     transform: rotate(45deg) scale(0) translate(-50%, -50%);
     transition: all var(--transition-fast-duration) var(--ease-in-back),
         opacity var(--transition-fast-duration);
-    width: calc(var(--checkbox-size) / 6);
+    width: calc(var(--checkbox-size) / 4);
 }
 
 .uk-checkbox-wrapper .uk-checkbox-label {
@@ -314,6 +315,7 @@
     --checkbox-size: #{$checkbox-size};
     --checkbox-checked-background: var(--global-primary-background);
     --checkbox-checked-border: var(--global-primary-border);
+    --checkbox-checked-icon-border-width: #{$checkbox-checked-icon-border-width};
     --checkbox-checked-icon-color: var(--global-inverse-color);
     --checkbox-control-background: #{$checkbox-control-background};
     --checkbox-checked-control-background: #{$checkbox-checked-control-background};

package/dist/esm/components/Control/Input/Input.js

@@ -7,7 +7,7 @@ import { Icon } from '../../../components/Icon';
 import '../index.scss';
 export const Input = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { allowClear, inputRef, prefix, prefixCls = config.prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({
+    const { allowClear, htmlSize, inputRef, prefix, prefixCls = config.prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({
         type: 'text',
         ...props,
     });
@@ -19,6 +19,19 @@ export const Input = React.forwardRef((props, ref) => {
             [`${prefixCls || config.prefixCls}-empty`]: !restProps.value,
         }),
     }, ['dir', 'size']);
+    const clearIcon = React.useMemo(() => {
+        if (typeof config.controlClearIcon === 'function') {
+            return config.controlClearIcon({
+                onClick: (event) => {
+                    onClear?.(event);
+                },
+            });
+        }
+        if (React.isValidElement(config.controlClearIcon)) {
+            return config.controlClearIcon;
+        }
+        return (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear }));
+    }, [config, controlCls, onClear]);
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -33,8 +46,8 @@ export const Input = React.forwardRef((props, ref) => {
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
         prefix && (React.createElement("span", { key: "prefix", className: `${controlCls}-prefix` }, prefix)),
         React.createElement("span", { key: "input", className: `${controlCls}-input` },
-            React.createElement("input", { ref: inputRef, ...inputProps, type: restProps.type })),
-        allowClear && restProps.value && (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear })),
+            React.createElement("input", { ref: inputRef, ...inputProps, size: htmlSize, type: restProps.type })),
+        allowClear && restProps.value && clearIcon,
         suffix && (React.createElement("span", { key: "suffix", className: `${controlCls}-suffix` }, suffix))));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/components/Control/Input/types.d.ts

@@ -11,6 +11,7 @@ export interface InputRef {
 }
 export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'defaultChecked' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
 export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
+    htmlSize?: number | undefined;
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;
 }

package/dist/esm/components/Control/Select/index.js

@@ -10,7 +10,7 @@ const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 /* eslint-disable jsx-a11y/label-has-associated-control */
 function InternalSelect(props, ref) {
     const config = useConfig();
-    const { className, listHeight = 256, listItemHeight = 24, prefixCls = config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    const { allowClear, className, listHeight = 256, listItemHeight = 24, prefixCls = config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
     const inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
@@ -40,8 +40,8 @@ function InternalSelect(props, ref) {
         restProps.onDropdownVisibleChange?.(open);
     }, [restProps]);
     const onClickIcon = React.useCallback(() => {
-        setInternalOpen(true);
-    }, []);
+        setInternalOpen(!internalOpen);
+    }, [internalOpen]);
     React.useEffect(() => {
         setInternalOpen(restProps.defaultOpen || restProps.open || internalOpen);
     }, [restProps.open, restProps.defaultOpen, internalOpen]);
@@ -86,20 +86,48 @@ function InternalSelect(props, ref) {
         // Arrow or loading icon
         let suffixIcon;
         if (restProps.loading) {
-            suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.9 });
+            if (typeof config.selectLoadingIcon === 'function') {
+                suffixIcon = config.selectLoadingIcon();
+            }
+            else if (React.isValidElement(config.selectLoadingIcon)) {
+                suffixIcon = config.selectLoadingIcon;
+            }
+            else {
+                suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.7 });
+            }
         }
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
             if (isMultiple) {
-                suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
+                if (typeof config.selectAddIcon === 'function') {
+                    suffixIcon = config.selectAddIcon({ onClick: onClickIcon });
+                }
+                else if (React.isValidElement(config.selectAddIcon)) {
+                    suffixIcon = config.selectAddIcon;
+                }
+                else {
+                    suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
+                }
             }
             else if (showSearch && internalOpen) {
-                suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
+                if (typeof config.selectSearchIcon === 'function') {
+                    suffixIcon = config.selectSearchIcon();
+                }
+                else if (React.isValidElement(config.selectSearchIcon)) {
+                    suffixIcon = config.selectSearchIcon;
+                }
+                else {
+                    suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
+                }
+            }
+            else if (typeof config.selectArrowIcon === 'function') {
+                suffixIcon = config.selectArrowIcon({ isOpen: internalOpen, onClick: onClickIcon });
+            }
+            else if (React.isValidElement(config.selectArrowIcon)) {
+                suffixIcon = config.selectArrowIcon;
             }
             else {
-                suffixIcon = internalOpen
-                    ? React.createElement(Icon, { key: "expand_less", icon: "expand_less" })
-                    : React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon });
+                suffixIcon = internalOpen ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
             }
         }
         // Not found content
@@ -110,9 +138,22 @@ function InternalSelect(props, ref) {
         else if (mode === 'combobox') {
             mergedNotFound = null;
         }
+        if (typeof config.selectNotFoundContent === 'function') {
+            mergedNotFound = config.selectNotFoundContent();
+        }
+        else if (React.isValidElement(config.selectNotFoundContent)) {
+            mergedNotFound = config.selectNotFoundContent;
+        }
+        let clearIcon = React.createElement(Icon, { icon: "clear" });
+        if (typeof config.selectClearIcon === 'function') {
+            clearIcon = config.selectClearIcon();
+        }
+        else if (React.isValidElement(config.selectClearIcon)) {
+            clearIcon = config.selectClearIcon;
+        }
         return {
-            allowClear: {
-                clearIcon: React.createElement(Icon, { icon: "clear" }),
+            allowClear: (allowClear || allowClear === undefined) && {
+                clearIcon,
             },
             dropdownMatchSelectWidth: true,
             listHeight,
@@ -138,13 +179,14 @@ function InternalSelect(props, ref) {
         restProps,
         showArrow,
         mode,
+        config,
+        allowClear,
         listHeight,
         listItemHeight,
         internalOpen,
         rootCls,
         showSearch,
         prefixCls,
-        config.prefixCls,
         onBlur,
         onDropdownVisibleChange,
         onFocus,
@@ -163,9 +205,9 @@ function InternalSelect(props, ref) {
         },
     }));
     return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
-        React.createElement(RcSelect, { ref: inputRef, ...inputProps, dropdownAlign: {
+        React.createElement(RcSelect, { ref: inputRef, dropdownAlign: {
                 offset: [offsetY, 5],
-            }, mode: mode })));
+            }, ...inputProps, mode: mode })));
 }
 export const Select = React.forwardRef(InternalSelect);
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;

package/dist/esm/components/Control/Select/index.scss

@@ -219,6 +219,7 @@
     flex-wrap: wrap;
     grid-gap: var(--select-gutter);
     height: auto;
+    line-height: normal;
     padding: 0;
     width: 100%;
 }
@@ -347,24 +348,47 @@
     cursor: not-allowed;
 }
 
+.uk-control-select:not(.uk-control-rtl) .uk-select-arrow,
+.uk-control-select:not(.uk-control-rtl) .uk-select-clear {
+    right: 0;
+}
+
+/* Arrow */
 .uk-select-arrow {
     --icon-size: var(--select-arrow-icon-size);
-    right: 0;
     @if mixin-exists(hook-select-arrow) {
         @include hook-select-arrow;
     }
 }
 
+/* Clear */
 .uk-select-clear {
     @if mixin-exists(hook-select-clear) {
         @include hook-select-clear;
     }
 }
 
-.uk-select-arrow + .uk-select-clear {
+.uk-control-select .uk-select-arrow + .uk-select-clear {
+    width: calc(var(--select-height) * 0.6777);
+}
+
+.uk-control-select:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
     right: var(--select-height);
 }
 
+/* Selector */
+.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: var(--select-height);
+}
+
+.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-height);
+    --clear-width: calc(var(--select-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
+}
+
+
 /* Dropdown
  ========================================================================== */
 
@@ -558,8 +582,25 @@
     width: var(--select-small-height);
 }
 
+// Clear
 .uk-control-select.uk-control-small .uk-select-arrow + .uk-select-clear {
-    width: var(--select-small-height);
+    width: calc(var(--select-small-height) * 0.6777);
+}
+
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
+    right: var(--select-small-height);
+}
+
+// Selector
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-small-height);
+    --clear-width: calc(var(--select-small-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
 }
 
 /* Medium */
@@ -576,8 +617,25 @@
     width: var(--select-medium-height);
 }
 
+// Clear
 .uk-control-select.uk-control-medium .uk-select-arrow + .uk-select-clear {
-    width: var(--select-medium-height);
+    width: calc(var(--select-medium-height) * 0.6777);
+}
+
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
+    right: var(--select-medium-height);
+}
+
+// Selector
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-medium-height);
+    --clear-width: calc(var(--select-medium-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
 }
 
 /* Large */
@@ -589,13 +647,30 @@
     padding: 0 var(--select-selector-large-padding-horizontal);
 }
 
-.uk-control-select.uk-control-large .uk-select-arrow,
+.uk-control-select.uk-control-large .uk-select-arrow ,
 .uk-control-select.uk-control-large .uk-select-clear {
-    width: var(--select-large-height);
+    width: calc(var(--select-large-height) * 0.8667);
 }
 
+// Clear
 .uk-control-select.uk-control-large .uk-select-arrow + .uk-select-clear {
-    width: var(--select-large-height);
+    width: calc(var(--select-large-height) * 0.6777);
+}
+
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
+    right: calc(var(--select-large-height) * 0.8667);
+}
+
+// Selector
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: calc(var(--select-large-height) * 0.8667);
+}
+
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: calc(var(--select-large-height) * 0.8667);
+    --clear-width: calc(var(--select-large-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
 }
 
 /* Right to Left Direction
@@ -606,29 +681,74 @@
     direction: rtl;
 }
 
-.uk-control-select.uk-control-rtl .uk-select-arrow {
+.uk-control-select.uk-control-rtl .uk-select-arrow,
+.uk-control-select.uk-control-rtl .uk-select-clear {
     left: 0;
-    right: unset;
 }
 
-.uk-control-select.uk-control-rtl .uk-select-clear {
+.uk-control-select.uk-control-rtl .uk-select-arrow + .uk-select-clear {
     left: var(--select-height);
-    right: unset;
 }
 
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-clear {
+.uk-control-select.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: var(--select-height);
+}
+
+.uk-control-select.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-height);
+    --clear-width: calc(var(--select-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
+}
+
+/* Small */
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-arrow + .uk-select-clear {
     left: var(--select-small-height);
 }
 
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-clear {
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-small-height);
+    --clear-width: calc(var(--select-small-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
+}
+
+/* Medium */
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-arrow .uk-select-clear {
     left: var(--select-medium-height);
 }
 
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-medium-height);
+    --clear-width: calc(var(--select-medium-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
+}
+
+/* Large */
 .uk-control-select.uk-control-large.uk-control-rtl .uk-select-clear {
-    left: var(--select-large-height);
+    left: calc(var(--select-large-height) * 0.8667);
+}
+
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: calc(var(--select-large-height) * 0.8667);
+}
+
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: calc(var(--select-large-height) * 0.8667);
+    --clear-width: calc(var(--select-large-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
 }
 
-// Multiple overwrites
 .uk-control-select.uk-control-rtl .uk-select-selection-item-remove {
     padding-left: var(--select-gutter);
     padding-right: unset;

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

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import './index.scss';
 export type SectionOwnProps = {
+    kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
-    type?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
 };
 export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<SectionOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, SectionOwnProps>;
 declare const defaultElement = "section";

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

@@ -6,11 +6,11 @@ import './index.scss';
 const defaultElement = 'section';
 export function Section(props) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, preserveColor, size, type, ...restProps } = props;
+    const { className, prefixCls = config.prefixCls, preserveColor, size, kind, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${rootCls}-${size}`]: size !== undefined,
-            [`${rootCls}-${type}`]: type !== undefined,
+            [`${rootCls}-${kind}`]: kind !== undefined,
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
 }

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

@@ -2,10 +2,10 @@ 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;
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
-    type?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
 };
 export type TileProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TileOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TileOwnProps>;
 declare const defaultElement = "div";

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

@@ -6,11 +6,11 @@ import './index.scss';
 const defaultElement = 'div';
 export function Tile(props) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, preserveColor, size, type, ...restProps } = props;
+    const { className, prefixCls = config.prefixCls, preserveColor, size, kind, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tile'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${rootCls}-${size}`]: size !== undefined,
-            [`${rootCls}-${type}`]: type !== undefined,
+            [`${rootCls}-${kind}`]: kind !== undefined,
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
 }

package/dist/esm/styles/variables.scss

@@ -881,6 +881,7 @@ $checkbox-checked-control-padding:                              10px !default;
 $checkbox-disabled-background:                                  $control-disabled-background !default;
 $checkbox-disabled-border:                                      $control-disabled-border !default;
 $checkbox-disabled-icon-color:                                  $global-muted-color !default;
+$checkbox-checked-icon-border-width:                            2px !default;
 $checkbox-indeterminate-size:                                   $checkbox-size - 10px !default;
 
 
@@ -920,7 +921,7 @@ $select-small-height:                                           $control-small-h
 $select-medium-height:                                          $control-medium-height !default;
 $select-large-height:                                           $control-large-height !default;
 $select-arrow-icon-size:                                        24px !default;
-$select-gutter:                                                 7px !default;
+$select-gutter:                                                 5px !default;
 $select-small-gutter:                                           5px !default;
 $select-medium-gutter:                                          15px !default;
 $select-large-gutter:                                           12px !default;