@aloudata/aloudata-design 0.3.5 → 0.4.0-beta.10

package/es/Avatar/component/Avatar/index.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { AvatarProps as antdAvatarProps } from 'antd/es/avatar/avatar';
+import Group from 'antd/es/avatar/group';
+export type { GroupProps } from 'antd/es/avatar/group';
+declare type TSize = 'large' | 'middle' | 'small' | number;
+export interface IAvatarProps extends Omit<antdAvatarProps, 'size'> {
+    /**
+     * @description 指定头像的形状
+     * @type 'circle' |'square'
+     * @default circle
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @description 字符类型距离左右两侧边界单位像素
+     * @type number
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * @description 图片头像的资源地址或者图片元素
+     * @type string | ReactNode
+     * @default -
+     */
+    src?: React.ReactNode;
+    /**
+     * @description 设置图片类头像响应式资源地址
+     * @type string
+     * @default -
+     */
+    srcSet?: string;
+    /**
+     * @description 图片是否允许拖动
+     * @type boolean ｜ 'true' | 'false'
+     * @default -
+     */
+    draggable?: boolean;
+    /**
+     * @description 设置头像的自定义图标
+     * @type ReactNode
+     * @default   -
+     */
+    icon?: React.ReactNode;
+    /**
+     * @description 图像无法显示时的替代文本
+     * @type string
+     * @default -
+     */
+    alt?: string;
+    /**
+     * @description CORS属性设置
+     * @type '' | 'anonymous' | 'use-credentials'
+     * @default -
+     */
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    /**
+     * @description 点击事件
+     * @type (e?: React.MouseEvent<HTMLElement>) => void
+     * @default    -
+     */
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * @description 图片加载失败的事件，返回false会关闭组件默认的fallback行为
+     * @type () => boolean
+     * @default -
+     */
+    onError?: () => boolean;
+    /**
+     * @description 头像的大小，可以显示的设置数字或者预设的大小值
+     * @type 'large' | 'middle' | 'small' | number
+     * @default middle
+     */
+    size?: TSize;
+    /**
+     * @description 是否展示完整的children内容，如果children为string则默认截取第一个单词作为头像展示
+     * @type boolean
+     * @default false
+     */
+    showFullValue?: boolean;
+}
+interface ICompoundedComponent extends React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> {
+    Group: typeof Group;
+}
+declare const _default: ICompoundedComponent;
+export default _default;

package/es/Avatar/component/Avatar/index.js

@@ -0,0 +1,42 @@
+var _excluded = ["size", "showFullValue", "children"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import * as React from 'react';
+import InternalAvatar from 'antd/es/avatar/avatar';
+import classNames from 'classnames';
+var ZERO = 0;
+
+var Avatar = function Avatar(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      _props$showFullValue = props.showFullValue,
+      showFullValue = _props$showFullValue === void 0 ? false : _props$showFullValue,
+      children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var getSizeClass = function getSizeClass(avatarSize) {
+    if (['large', 'small', 'mini'].includes("".concat(avatarSize))) {
+      return classNames('ald-avatar', "ald-avatar-".concat(avatarSize));
+    }
+
+    return classNames('ald-avatar', 'ald-avatar-middle');
+  };
+
+  var getChildren = function getChildren() {
+    if (!showFullValue && typeof children === 'string') {
+      return children[ZERO].toLocaleUpperCase();
+    }
+
+    return children;
+  };
+
+  return /*#__PURE__*/React.createElement(InternalAvatar, Object.assign({
+    size: typeof size === 'number' ? size : undefined,
+    className: getSizeClass(size)
+  }, restProps), getChildren());
+};
+
+export default Avatar;

package/es/Avatar/index.d.ts

@@ -1,15 +1,3 @@
-import * as React from 'react';
-import { AvatarProps as antdAvatarProps } from 'antd/es/avatar/avatar';
-import Group from 'antd/es/avatar/group';
-export type { GroupProps } from 'antd/es/avatar/group';
-declare type TSize = 'large' | 'middle' | 'small' | 'mini' | number;
-interface IAvatarProps extends Omit<antdAvatarProps, 'size'> {
-    size?: TSize;
-}
+import Avatar, { IAvatarProps } from './component/Avatar';
 export type { IAvatarProps };
-interface ICompoundedComponent extends React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> {
-    Group: typeof Group;
-}
-declare const Avatar: ICompoundedComponent;
-export { Group };
 export default Avatar;

package/es/Avatar/index.js

@@ -1,33 +1,4 @@
-var _excluded = ["size"];
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from 'react';
-import InternalAvatar from 'antd/es/avatar/avatar';
 import Group from 'antd/es/avatar/group';
-import classNames from 'classnames';
-
-var Avatar = function A(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? 'middle' : _props$size,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  var getSizeClass = function getSizeClass(avatarSize) {
-    if (['large', 'small', 'mini'].includes("".concat(avatarSize))) {
-      return classNames('ald-avatar', "ald-avatar-".concat(avatarSize));
-    }
-
-    return classNames('ald-avatar', 'ald-avatar-middle');
-  };
-
-  return /*#__PURE__*/React.createElement(InternalAvatar, Object.assign({
-    size: typeof size === 'number' ? size : undefined,
-    className: getSizeClass(size)
-  }, restProps));
-};
-
+import Avatar from './component/Avatar';
 Avatar.Group = Group;
-export { Group };
 export default Avatar;

package/es/Avatar/style/index.less

@@ -2,7 +2,7 @@
 
 .ald-avatar.ald-avatar {
   color: @ND0;
-  background-color: @B60;
+  background-color: @B40;
 
   &-large {
     width: 40px;

package/es/Breadcrumb/index.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { BreadcrumbItemProps, BreadcrumbProps } from 'antd';
 export type { BreadcrumbItemProps, BreadcrumbProps };
+interface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
+    __ANT_BREADCRUMB_ITEM: boolean;
+}
 declare const Breadcrumb: {
     (props: BreadcrumbProps): JSX.Element;
-    Item(props: BreadcrumbItemProps): JSX.Element;
+    Item: IBreadcrumbItemInterface;
 };
 export default Breadcrumb;

package/es/Breadcrumb/index.js

@@ -9,28 +9,38 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import classNames from 'classnames';
-var BreadcrumbItem = _Breadcrumb.Item;
 
 var Breadcrumb = function Breadcrumb(props) {
   var className = props.className,
       separator = props.separator,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(_Breadcrumb, Object.assign({}, restProps, {
-    separator: separator || /*#__PURE__*/React.createElement("span", {
+  var getSeparator = function getSeparator() {
+    if (separator === null) {
+      return separator;
+    }
+
+    return separator || /*#__PURE__*/React.createElement("span", {
       className: "default-separator"
-    }),
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(_Breadcrumb, Object.assign({}, restProps, {
+    separator: getSeparator(),
     className: classNames('ald-breadcrumb', className)
   }));
 };
 
-Breadcrumb.Item = function (props) {
+var BreadcrumbItem = function BreadcrumbItem(props) {
   var className = props.className,
       restProps = _objectWithoutProperties(props, _excluded2);
 
-  return /*#__PURE__*/React.createElement(BreadcrumbItem, Object.assign({}, restProps, {
+  return /*#__PURE__*/React.createElement(_Breadcrumb.Item, Object.assign({}, restProps, {
     className: classNames('ald-breadcrumb-item', className)
   }));
-};
+}; // eslint-disable-next-line no-underscore-dangle
+
 
+BreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;
+Breadcrumb.Item = BreadcrumbItem;
 export default Breadcrumb;

package/es/Button/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 export declare type ButtonType = 'primary' | 'secondary' | 'dangerous' | 'text' | 'link';
-export declare type Size = 'mini' | 'small' | 'default' | 'large';
+export declare type Size = 'small' | 'default' | 'large';
 export interface IButtonProps extends Omit<AntdButtonProps, 'type' | 'size' | 'dangerous' | 'shape' | 'icon' | 'href' | 'target' | 'onClick' | 'loading'> {
     /**
      * @description 类型

package/es/Button/index.js

@@ -17,10 +17,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import classNames from 'classnames';
 var iconPrefixCls = 'aldicon';
-var ICON_LARGE = 16;
-var ICON_MIDDLE = 14;
-var ICON_SMALL = 12;
-var ICON_MINI = 12;
+var ICON_LARGE = 24;
+var ICON_MIDDLE = 20;
+var ICON_SMALL = 16;
 
 function Button(props) {
   var prefix = 'ald-btn';
@@ -75,10 +74,6 @@ function Button(props) {
       return ICON_SMALL;
     }
 
-    if (ButtonSize === 'mini') {
-      return ICON_MINI;
-    }
-
     return ICON_MIDDLE;
   }
 

package/es/Button/style/index.less

@@ -15,7 +15,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-weight: 500;
+      font-weight: 600;
       font-size: 12px;
       text-shadow: none;
     }
@@ -51,6 +51,7 @@
         background-color: @button-primary-bg-color-disable;
         border-color: @button-primary-bg-color-disable;
         cursor: default;
+        opacity: 0.5;
 
         &:hover,
         &:focus,
@@ -88,6 +89,7 @@
         background-color: @button-dangerous-bg-color-disable;
         border-color: @button-dangerous-bg-color-disable;
         cursor: default;
+        opacity: 0.5;
 
         &:hover,
         &:focus,
@@ -134,6 +136,7 @@
         background-color: @button-secondary-bg-color-disable;
         border-color: @button-secondary-border-color;
         cursor: default;
+        opacity: 0.5;
 
         &:hover,
         &:focus,
@@ -168,6 +171,7 @@
         color: @button-text-color-disable;
         background-color: @button-text-bg-color-disable;
         cursor: default;
+        opacity: 0.5;
 
         &:hover,
         &:focus,
@@ -208,6 +212,7 @@
         background-color: @button-link-bg-color-disable;
         border-color: @button-link-bg-color-disable;
         cursor: default;
+        opacity: 0.5;
 
         &:hover,
         &:focus,
@@ -231,6 +236,7 @@
       height: @button-height-large;
       padding: @button-border-padding-large;
       font-size: @button-text-size-large;
+      line-height: 24px;
       border-radius: @button-border-radius-large;
 
       &.ant-btn-icon-only {

package/es/Button/style/variables.less

@@ -7,19 +7,19 @@
 @button-height-large: 36px;
 @button-text-size-large: 16px;
 @button-border-radius-large: 8px;
-@button-border-padding-large: 0 11px;
+@button-border-padding-large: 6px 14px;
 @button-left-icon-margin-right-large: 8px;
 
 @button-height-middle: 32px;
 @button-text-size-middle: 14px;
-@button-border-radius-middle: 6px;
-@button-border-padding-middle: 0 11px;
+@button-border-radius-middle: 8px;
+@button-border-padding-middle: 6px 12px;
 @button-left-icon-margin-right-middle: 8px;
 
 @button-height-small: 28px;
 @button-text-size-small: 12px;
-@button-border-radius-small: 4px;
-@button-border-padding-small: 0 7px;
+@button-border-radius-small: 6px;
+@button-border-padding-small: 6px 10px;
 @button-left-icon-margin-right-small: 4px;
 
 @button-height-mini: 24px;
@@ -29,39 +29,39 @@
 @button-left-icon-margin-right-mini: 4px;
 
 /****  type控制  ****/
-@button-primary-bg-color: @B60;
-@button-primary-bg-color-active: @B50;
-@button-primary-bg-color-disable: @B90;
+@button-primary-bg-color: @B40;
+@button-primary-bg-color-active: @B30;
+@button-primary-bg-color-disable: @B40;
 @button-primary-color: @ND0;
 @button-primary-color-active: @ND0;
 @button-primary-color-disable: @ND0;
 
-@button-dangerous-bg-color: @SC60;
-@button-dangerous-bg-color-active: @SC50;
-@button-dangerous-bg-color-disable: @SC90;
+@button-dangerous-bg-color: @SC40;
+@button-dangerous-bg-color-active: @SC30;
+@button-dangerous-bg-color-disable: @SC40;
 @button-dangerous-color: @ND0;
 @button-dangerous-color-active: @ND0;
 @button-dangerous-color-disable: @ND0;
 
-@button-secondary-bg-color: @BG97;
-@button-secondary-bg-color-active: @BG95;
-@button-secondary-bg-color-disable: @BG97;
-@button-secondary-color: @NL30;
-@button-secondary-color-active: @B60;
-@button-secondary-color-disable: @NL80;
-@button-secondary-border-color: @NL90;
-@button-secondary-border-color-active: @B60;
+@button-secondary-bg-color: @BG100;
+@button-secondary-bg-color-active: @BG90;
+@button-secondary-bg-color-disable: @BG100;
+@button-secondary-color: @NL20;
+@button-secondary-color-active: @NL20;
+@button-secondary-color-disable: @NL20;
+@button-secondary-border-color: @BG60;
+@button-secondary-border-color-active: @BG60;
 
 @button-text-bg-color: transparent;
-@button-text-bg-color-active: @NL97;
+@button-text-bg-color-active: @NL90;
 @button-text-bg-color-disable: transparent;
-@button-text-color: @NL30;
-@button-text-color-active: @B60;
-@button-text-color-disable: @NL80;
+@button-text-color: @NL20;
+@button-text-color-active: @NL20;
+@button-text-color-disable: @NL20;
 
 @button-link-bg-color: transparent;
 @button-link-bg-color-active: transparent;
 @button-link-bg-color-disable: transparent;
-@button-link-color: @B60;
-@button-link-color-active: @B50;
-@button-link-color-disable: @B90;
+@button-link-color: @B30;
+@button-link-color-active: @B20;
+@button-link-color-disable: @B30;

package/es/Checkbox/component/CheckboxGroup/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ICheckboxGroupProps } from '../../type';
+declare const CheckboxGroup: (props: ICheckboxGroupProps) => JSX.Element;
+export default CheckboxGroup;

package/es/Checkbox/component/CheckboxGroup/index.js

@@ -0,0 +1,27 @@
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
+var _excluded = ["className", "direction"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import classNames from 'classnames';
+import React from 'react';
+import { EDirection } from '../../type'; // "vertical" | "horizontal"
+
+var AntdCheckboxGroup = _Checkbox.Group;
+
+var CheckboxGroup = function CheckboxGroup(props) {
+  var className = props.className,
+      direction = props.direction,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(AntdCheckboxGroup, Object.assign({
+    className: classNames('ald-checkbox', className, {
+      'ald-checkout-group-vertical': direction === EDirection.VERTICAL
+    })
+  }, otherProps));
+};
+
+export default CheckboxGroup;

package/es/Checkbox/index.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { CheckboxProps } from 'antd';
-import { CheckboxGroupProps } from 'antd/lib/checkbox';
+import { ICheckboxGroupProps, ICheckboxProps } from './type';
 export type { CheckboxValueType, CheckboxOptionType } from 'antd/es/checkbox/Group';
 export type { CheckboxChangeEvent } from 'antd/es/checkbox/Checkbox';
-declare function Checkbox(props: CheckboxProps): JSX.Element;
+declare function Checkbox(props: ICheckboxProps): JSX.Element;
 declare namespace Checkbox {
-    var Group: (props: CheckboxGroupProps) => JSX.Element;
+    var Group: (props: ICheckboxGroupProps) => JSX.Element;
 }
-export type { CheckboxProps };
+export type { ICheckboxProps, ICheckboxGroupProps };
 export default Checkbox;

package/es/Checkbox/index.js

@@ -1,7 +1,6 @@
 import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
-var _excluded = ["className"],
-    _excluded2 = ["className"];
+var _excluded = ["className"];
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -9,7 +8,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import classNames from 'classnames';
-var CheckboxGroup = _Checkbox.Group;
+import CheckboxGroup from './component/CheckboxGroup';
 
 function Checkbox(props) {
   var className = props.className,
@@ -20,13 +19,5 @@ function Checkbox(props) {
   }, otherProps));
 }
 
-Checkbox.Group = function (props) {
-  var className = props.className,
-      otherProps = _objectWithoutProperties(props, _excluded2);
-
-  return /*#__PURE__*/React.createElement(CheckboxGroup, Object.assign({
-    className: classNames('ald-checkbox', className)
-  }, otherProps));
-};
-
+Checkbox.Group = CheckboxGroup;
 export default Checkbox;

package/es/Checkbox/style/index.less

@@ -25,14 +25,14 @@
   .ant-checkbox-checked {
     &::after,
     .ant-checkbox-inner {
-      background-color: @B60;
-      border-color: @B60;
+      background-color: @B95;
+      border-color: @B40;
       border-radius: 4px;
     }
 
     .ant-checkbox-inner {
-      background-color: @B60;
-      border-color: @B60;
+      background-color: @B95;
+      border-color: @B40;
 
       &::after {
         top: 3px;
@@ -40,7 +40,7 @@
         z-index: 10;
         width: 10px;
         height: 8px;
-        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9IndoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNjc1NzMgMC4yNjI4NTJDMTAuMDgyOCAwLjYzNjA0NCAxMC4xMTA0IDEuMjY4NjEgOS43MzcxNiAxLjY3NTczTDQuMjM3MTYgNy42NzU3M0M0LjA0Nzc1IDcuODgyMzYgMy43ODAzMSA4LjAwMDAxIDMuNTAwMDEgOC4wMDAwMUMzLjIxOTcgOC4wMDAwMSAyLjk1MjI2IDcuODgyMzYgMi43NjI4NSA3LjY3NTczTDAuMjYyODUyIDQuOTQ4NDZDLTAuMTEwMzQxIDQuNTQxMzQgLTAuMDgyODM3OCAzLjkwODc3IDAuMzI0MjgxIDMuNTM1NThDMC43MzE0IDMuMTYyMzkgMS4zNjM5NyAzLjE4OTg5IDEuNzM3MTYgMy41OTcwMUwzLjUwMDAxIDUuNTIwMTFMOC4yNjI4NSAwLjMyNDI4MUM4LjYzNjA0IC0wLjA4MjgzNzggOS4yNjg2MSAtMC4xMTAzNDEgOS42NzU3MyAwLjI2Mjg1MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=')
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS42NzU3MyAwLjI2Mjg1MkMxMC4wODI4IDAuNjM2MDQ0IDEwLjExMDQgMS4yNjg2MSA5LjczNzE2IDEuNjc1NzNMNC4yMzcxNiA3LjY3NTczQzQuMDQ3NzUgNy44ODIzNiAzLjc4MDMxIDguMDAwMDEgMy41MDAwMSA4LjAwMDAxQzMuMjE5NyA4LjAwMDAxIDIuOTUyMjYgNy44ODIzNiAyLjc2Mjg1IDcuNjc1NzNMMC4yNjI4NTIgNC45NDg0NkMtMC4xMTAzNDEgNC41NDEzNCAtMC4wODI4Mzc4IDMuOTA4NzcgMC4zMjQyODEgMy41MzU1OEMwLjczMTQgMy4xNjIzOSAxLjM2Mzk3IDMuMTg5ODkgMS43MzcxNiAzLjU5NzAxTDMuNTAwMDEgNS41MjAxMUw4LjI2Mjg1IDAuMzI0MjgxQzguNjM2MDQgLTAuMDgyODM3OCA5LjI2ODYxIC0wLjExMDM0MSA5LjY3NTczIDAuMjYyODUyWiIgZmlsbD0iIzE1NzBFRiIvPgo8L3N2Zz4K')
           no-repeat;
         border-width: 0;
         transform: none;
@@ -50,15 +50,17 @@
 
   .ant-checkbox-disabled {
     cursor: default;
+    opacity: 0.5;
 
     & + span {
       color: @NL0;
       cursor: default;
+      opacity: 0.5;
     }
 
     .ant-checkbox-inner {
-      background-color: @NL90;
-      border-color: @NL90;
+      background-color: @B95;
+      border-color: @B40;
 
       &::after {
         top: 3px;
@@ -66,7 +68,7 @@
         z-index: 10;
         width: 10px;
         height: 8px;
-        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS42NzU3MyAwLjI2Mjg1MkMxMC4wODI4IDAuNjM2MDQ0IDEwLjExMDQgMS4yNjg2MSA5LjczNzE2IDEuNjc1NzNMNC4yMzcxNiA3LjY3NTczQzQuMDQ3NzUgNy44ODIzNiAzLjc4MDMxIDguMDAwMDEgMy41MDAwMSA4LjAwMDAxQzMuMjE5NyA4LjAwMDAxIDIuOTUyMjYgNy44ODIzNiAyLjc2Mjg1IDcuNjc1NzNMMC4yNjI4NTIgNC45NDg0NkMtMC4xMTAzNDEgNC41NDEzNCAtMC4wODI4Mzc4IDMuOTA4NzcgMC4zMjQyODEgMy41MzU1OEMwLjczMTQgMy4xNjIzOSAxLjM2Mzk3IDMuMTg5ODkgMS43MzcxNiAzLjU5NzAxTDMuNTAwMDEgNS41MjAxMUw4LjI2Mjg1IDAuMzI0MjgxQzguNjM2MDQgLTAuMDgyODM3OCA5LjI2ODYxIC0wLjExMDM0MSA5LjY3NTczIDAuMjYyODUyWiIgZmlsbD0iIzAwMUEzMyIgZmlsbC1vcGFjaXR5PSIwLjIiLz4KPC9zdmc+Cg==');
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS42NzU3MyAwLjI2Mjg1MkMxMC4wODI4IDAuNjM2MDQ0IDEwLjExMDQgMS4yNjg2MSA5LjczNzE2IDEuNjc1NzNMNC4yMzcxNiA3LjY3NTczQzQuMDQ3NzUgNy44ODIzNiAzLjc4MDMxIDguMDAwMDEgMy41MDAwMSA4LjAwMDAxQzMuMjE5NyA4LjAwMDAxIDIuOTUyMjYgNy44ODIzNiAyLjc2Mjg1IDcuNjc1NzNMMC4yNjI4NTIgNC45NDg0NkMtMC4xMTAzNDEgNC41NDEzNCAtMC4wODI4Mzc4IDMuOTA4NzcgMC4zMjQyODEgMy41MzU1OEMwLjczMTQgMy4xNjIzOSAxLjM2Mzk3IDMuMTg5ODkgMS43MzcxNiAzLjU5NzAxTDMuNTAwMDEgNS41MjAxMUw4LjI2Mjg1IDAuMzI0MjgxQzguNjM2MDQgLTAuMDgyODM3OCA5LjI2ODYxIC0wLjExMDM0MSA5LjY3NTczIDAuMjYyODUyWiIgZmlsbD0iIzE1NzBFRiIvPgo8L3N2Zz4K');
         border-width: 0;
         transform: none;
       }
@@ -75,12 +77,13 @@
 
   .ant-checkbox-indeterminate {
     .ant-checkbox-inner {
-      background-color: @B60;
-      border-color: @B60;
+      background-color: @B95;
+      border-color: @B40;
 
       &::after {
         width: 10px;
         height: 2px;
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzE1NzBFRiIvPgo8L3N2Zz4K');
         background-color: @ND0;
         border-radius: 2px;
       }
@@ -88,26 +91,43 @@
   }
 
   .ant-checkbox + span {
+    display: flex;
+    align-items: center;
     padding-right: 10px;
     padding-left: 10px;
   }
-}
 
-.ant-checkbox-group.ald-checkbox,
-.ant-checkbox-wrapper.ald-checkbox {
   &:hover .ant-checkbox-inner {
-    border-color: @B60;
+    border-color: @B40;
+  }
+
+  .ant-checkbox-disabled .ant-checkbox-inner:hover {
+    box-shadow: unset;
+  }
+
+  .ant-checkbox:hover .ant-checkbox-inner {
+    border-color: @B40;
+    box-shadow: @shadow-primary;
   }
+}
 
+.ant-checkbox-group.ald-checkbox,
+.ant-checkbox-wrapper.ald-checkbox {
   .ant-checkbox-input:focus + .ant-checkbox-inner {
-    border-color: @NL60;
+    border-color: @B40;
   }
 
   .ant-checkbox:hover .ant-checkbox-inner {
-    border-color: @B60;
+    border-color: @B40;
   }
 }
 
 .ald-checkbox.ant-checkbox-wrapper-disabled {
   cursor: default;
 }
+
+.ald-checkout-group-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}