@ozen-ui/kit 0.78.0 → 0.80.0

package/__inner__/cjs/components/ChipGroup/ChipGroup.js

@@ -3,50 +3,117 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChipGroup = exports.cnChipGroup = void 0;
 var tslib_1 = require("tslib");
 require("./ChipGroup.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var useControlled_1 = require("../../hooks/useControlled");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
+var utils_1 = require("../../utils");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var FieldHint_1 = require("../FieldHint");
 var FormGroup_1 = require("../FormGroup");
 var FormTitle_1 = require("../FormTitle");
 var ChipGroupContext_1 = require("./ChipGroupContext");
 var constants_1 = require("./constants");
+var entities_1 = require("./entities");
 exports.cnChipGroup = (0, classname_1.cn)('ChipGroup');
 exports.ChipGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'ChipGroup',
     });
-    var _a = props.direction, direction = _a === void 0 ? constants_1.CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, _d = props.defaultValue, defaultValue = _d === void 0 ? [] : _d, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, other = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps"]);
+    var _a = props.direction, direction = _a === void 0 ? constants_1.CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, defaultValueProp = props.defaultValue, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, _d = props.mode, mode = _d === void 0 ? constants_1.CHIP_GROUP_DEFAULT_MODE : _d, hint = props.hint, other = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps", "mode", "hint"]);
+    var defaultValue = (0, react_1.useMemo)(function () {
+        if (defaultValueProp !== undefined) {
+            return defaultValueProp;
+        }
+        if (mode === 'checkbox') {
+            return [];
+        }
+        if (mode === 'radio') {
+            return null;
+        }
+        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C mode \"".concat(mode, "\""));
+    }, []);
     var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'ChipGroup',
         state: 'value',
     }), 2), valueState = _e[0], setValueState = _e[1];
+    var setValue = function (value, event) {
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+    };
+    (0, react_1.useEffect)(function () {
+        if (mode === 'checkbox') {
+            if ((0, utils_1.isString)(valueState)) {
+                var value = [valueState];
+                setValue(value, null);
+                return;
+            }
+            if (valueState === null) {
+                setValue([], null);
+                return;
+            }
+            return;
+        }
+        if (mode === 'radio') {
+            if (!(0, utils_1.isArray)(valueState)) {
+                return;
+            }
+            if (valueState.length > 0) {
+                setValue(valueState[0], null);
+                return;
+            }
+            setValue(null, null);
+            return;
+        }
+        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C \u0440\u0435\u0436\u0438\u043C \"".concat(mode, "\"."));
+    }, [mode]);
+    var valueArray = (function () {
+        if (!valueState) {
+            return [];
+        }
+        if ((0, utils_1.isString)(valueState)) {
+            return [valueState];
+        }
+        return valueState;
+    })();
     var onClick = function (event, payload) {
         var itemValue = payload.value;
         if (itemValue === undefined) {
             return;
         }
-        var requiredValueState = valueState !== null && valueState !== void 0 ? valueState : [];
-        var isValueAlreadyChecked = requiredValueState.includes(itemValue);
-        var value = isValueAlreadyChecked
-            ? requiredValueState.filter(function (item) { return item !== itemValue; })
-            : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(requiredValueState), false), [itemValue], false);
-        setValueState(value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+        var isValueAlreadyChecked = valueArray.includes(itemValue);
+        if (mode === 'checkbox') {
+            var value = isValueAlreadyChecked
+                ? valueArray.filter(function (item) { return item !== itemValue; })
+                : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(valueArray), false), [itemValue], false);
+            setValueState(value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+            return;
+        }
+        if (mode === 'radio') {
+            if (isValueAlreadyChecked) {
+                return;
+            }
+            setValueState(itemValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(itemValue, event);
+            return;
+        }
+        throw new Error("\u041D\u0435\u043E\u0436\u0438\u0434\u0430\u043D\u043D\u044B\u0439 mode \"".concat(mode, "\". \u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B: ").concat(JSON.stringify(entities_1.chipGroupModeVariant)));
     };
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnChipGroup)({ size: size }, [className]), role: "group" }, other, { ref: ref }),
         react_1.default.createElement(ChipGroupContext_1.ChipGroupContext.Provider, { value: {
                 value: valueState,
+                valueArray: valueArray,
                 onClick: onClick,
                 size: size,
                 disabled: disabled,
                 color: color,
             } },
             title && (react_1.default.createElement(FormTitle_1.FormTitle, tslib_1.__assign({ size: size }, titleProps), title)),
-            react_1.default.createElement(FormGroup_1.FormGroup, tslib_1.__assign({ direction: direction, size: size }, groupProps), children))));
+            react_1.default.createElement(FormGroup_1.FormGroup, tslib_1.__assign({ direction: direction, size: size }, groupProps), children),
+            react_1.default.createElement(FieldHint_1.FieldHint, { size: constants_1.CHIP_GROUP_SIZE_TO_HINT_SIZE[size], error: color === 'error', disabled: disabled }, hint))));
 });
 exports.ChipGroup.displayName = 'ChipGroup';

package/__inner__/cjs/components/ChipGroup/ChipGroupContext.d.ts

@@ -1,9 +1,10 @@
 import type { ChipColorVariant, ChipOnClick, ChipSizeVariant } from '../ChipNext';
-import type { ChipGroupValue } from './types';
+import type { ChipGroupValue, ChipGroupValueArray } from './entities';
 export type ChipGroupContextValue = {
     onClick: ChipOnClick;
     disabled?: boolean;
     value?: ChipGroupValue;
+    valueArray?: ChipGroupValueArray;
     size?: ChipSizeVariant;
     color?: ChipColorVariant;
 };

package/__inner__/cjs/components/ChipGroup/constants.d.ts

@@ -1,5 +1,7 @@
+import type { FormElementSizeVariant } from '../../types';
 import type { ChipSizeVariant } from '../ChipNext';
-import type { FormGroupDirectionVariant } from '../FormGroup';
-export declare const CHIP_GROUP_DEFAULT_DIRECTION: FormGroupDirectionVariant;
-export declare const CHIP_GROUP_DEFAULT_SIZE: ChipSizeVariant;
+export declare const CHIP_GROUP_DEFAULT_DIRECTION = "row";
+export declare const CHIP_GROUP_DEFAULT_SIZE = "m";
 export declare const CHIP_GROUP_DEFAULT_AS = "div";
+export declare const CHIP_GROUP_DEFAULT_MODE = "checkbox";
+export declare const CHIP_GROUP_SIZE_TO_HINT_SIZE: Readonly<Record<ChipSizeVariant, FormElementSizeVariant>>;

package/__inner__/cjs/components/ChipGroup/constants.js

@@ -1,6 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CHIP_GROUP_DEFAULT_AS = exports.CHIP_GROUP_DEFAULT_SIZE = exports.CHIP_GROUP_DEFAULT_DIRECTION = void 0;
+exports.CHIP_GROUP_SIZE_TO_HINT_SIZE = exports.CHIP_GROUP_DEFAULT_MODE = exports.CHIP_GROUP_DEFAULT_AS = exports.CHIP_GROUP_DEFAULT_SIZE = exports.CHIP_GROUP_DEFAULT_DIRECTION = void 0;
 exports.CHIP_GROUP_DEFAULT_DIRECTION = 'row';
 exports.CHIP_GROUP_DEFAULT_SIZE = 'm';
 exports.CHIP_GROUP_DEFAULT_AS = 'div';
+exports.CHIP_GROUP_DEFAULT_MODE = 'checkbox';
+exports.CHIP_GROUP_SIZE_TO_HINT_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'l',
+    l: 'l',
+};

package/__inner__/cjs/components/ChipGroup/entities/direction.d.ts

@@ -0,0 +1,2 @@
+export declare const chipGroupDirection: readonly ["row", "column", "rowReverse", "columnReverse"];
+export type ChipGroupDirection = (typeof chipGroupDirection)[number];

package/__inner__/cjs/components/ChipGroup/entities/direction.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipGroupDirection = void 0;
+var FormGroup_1 = require("../../FormGroup");
+exports.chipGroupDirection = FormGroup_1.formGroupDirectionVariant;

package/__inner__/cjs/components/ChipGroup/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './direction';
+export * from './mode';
+export * from './onChange';
+export * from './value';

package/__inner__/cjs/components/ChipGroup/entities/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./direction"), exports);
+tslib_1.__exportStar(require("./mode"), exports);
+tslib_1.__exportStar(require("./onChange"), exports);
+tslib_1.__exportStar(require("./value"), exports);

package/__inner__/cjs/components/ChipGroup/entities/mode.d.ts

@@ -0,0 +1,2 @@
+export declare const chipGroupModeVariant: readonly ["checkbox", "radio"];
+export type ChipGroupModeVariant = (typeof chipGroupModeVariant)[number];

package/__inner__/cjs/components/ChipGroup/entities/mode.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipGroupModeVariant = void 0;
+exports.chipGroupModeVariant = ['checkbox', 'radio'];

package/__inner__/cjs/components/ChipGroup/entities/onChange.d.ts

@@ -0,0 +1,4 @@
+import type { MouseEvent } from 'react';
+import type { ChipGroupModeVariant } from './mode';
+import type { ChipGroupValue } from './value';
+export type ChipGroupOnChange<Mode extends ChipGroupModeVariant = ChipGroupModeVariant> = (value: ChipGroupValue<Mode>, event: MouseEvent<HTMLElement> | null) => void;

package/__inner__/cjs/components/ChipGroup/entities/onChange.js

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

package/__inner__/cjs/components/ChipGroup/entities/value.d.ts

@@ -0,0 +1,3 @@
+import type { ChipGroupModeVariant } from './mode';
+export type ChipGroupValueArray = string[];
+export type ChipGroupValue<Mode extends ChipGroupModeVariant = ChipGroupModeVariant> = Mode extends 'checkbox' ? ChipGroupValueArray : string | null;

package/__inner__/cjs/components/ChipGroup/entities/value.js

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

package/__inner__/cjs/components/ChipGroup/index.d.ts

@@ -1,2 +1,4 @@
+export * from './entities';
+export * from './constants';
 export * from './ChipGroup';
 export * from './types';

package/__inner__/cjs/components/ChipGroup/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./ChipGroup"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/ChipGroup/types.d.ts

@@ -1,16 +1,17 @@
-import type { ElementType, MouseEvent, ReactNode } from 'react';
-import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ComponentRef, ElementType, ReactNode } from 'react';
+import type { WithDisplayName } from '../../types';
+import type { PolymorphicComponentPropsWithoutRef, PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { ChipColorVariant, ChipSizeVariant } from '../ChipNext';
-import type { FormGroupDirectionVariant, FormGroupProps } from '../FormGroup';
+import type { FieldHintProps } from '../FieldHint';
+import type { FormGroupProps } from '../FormGroup';
 import type { FormTitleProps } from '../FormTitle';
-import type { CHIP_GROUP_DEFAULT_AS } from './constants';
-export type ChipGroupValue = string[];
-export type ChipGroupOnChange = (value: ChipGroupValue, event: MouseEvent<HTMLElement>) => void;
-export type ChipGroupBaseProps = {
+import type { CHIP_GROUP_DEFAULT_AS, CHIP_GROUP_DEFAULT_MODE } from './constants';
+import type { ChipGroupValue, ChipGroupOnChange, ChipGroupModeVariant, ChipGroupDirection } from './entities';
+export type ChipGroupBaseProps<Mode extends ChipGroupModeVariant = ChipGroupModeVariant> = {
     /** Значение по умолчанию (неконтролируемое состояние) */
-    defaultValue?: ChipGroupValue;
+    defaultValue?: ChipGroupValue<Mode>;
     /** Текущее значение */
-    value?: ChipGroupValue;
+    value?: ChipGroupValue<Mode>;
     /** Вариант представления компонента */
     color?: ChipColorVariant;
     /** Размер */
@@ -18,9 +19,9 @@ export type ChipGroupBaseProps = {
     /** Содержимое компонента */
     children?: ReactNode;
     /** Направление */
-    direction?: FormGroupDirectionVariant;
+    direction?: ChipGroupDirection;
     /** Событие изменения состояния */
-    onChange?: ChipGroupOnChange;
+    onChange?: ChipGroupOnChange<Mode>;
     /** Если `true` делает элементы неактивными */
     disabled?: boolean;
     /** Идентификатор компонента для тестов */
@@ -29,5 +30,13 @@ export type ChipGroupBaseProps = {
     titleProps?: FormTitleProps;
     /** Свойства FormGroup */
     groupProps?: FormGroupProps;
+    /** Режим работы */
+    mode?: Mode;
+    /** Дополнительное описание */
+    hint?: ReactNode;
+    /** Параметры дополнительного описания */
+    hintProps?: FieldHintProps;
 };
-export type ChipGroupProps<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps, As>;
+export type ChipGroupProps<Mode extends ChipGroupModeVariant = typeof CHIP_GROUP_DEFAULT_MODE, As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps<Mode>, As>;
+export type ChipGroupComponent = WithDisplayName<(<Mode extends ChipGroupModeVariant = typeof CHIP_GROUP_DEFAULT_MODE, As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS>(props: PolymorphicComponentPropsWithRef<ChipGroupBaseProps<Mode>, As>) => ReactNode)>;
+export type ChipGroupRef<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = ComponentRef<As>;

package/__inner__/cjs/components/ChipNext/Chip.css

@@ -96,6 +96,12 @@
     --chip-bg-color-active: var(--color-background-overlay);
     --chip-text-color: var(--color-content-action-on);
   }
+.ChipNext_color_error {
+    --chip-bg-color: var(--color-background-error-light);
+    --chip-bg-color-hover: var(--color-background-error-light);
+    --chip-bg-color-active: var(--color-background-error-light);
+    --chip-text-color: var(--color-content-error);
+  }
 .ChipNext_color_primary.ChipNext_checked {
     --chip-bg-color: var(--color-background-action);
     --chip-bg-color-hover: var(--color-background-action);

package/__inner__/cjs/components/ChipNext/Chip.js

@@ -26,8 +26,8 @@ exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
         if (environment_1.isDev && value === undefined) {
             logger_1.logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
         }
-        if (checked === undefined && chipGroup.value) {
-            checked = chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.value.includes(value);
+        if (checked === undefined && chipGroup.valueArray) {
+            checked = chipGroup.valueArray.includes(value);
         }
         if (inProps.size === undefined && chipGroup.size) {
             size = chipGroup.size;

package/__inner__/cjs/components/ChipNext/entities/color.d.ts

@@ -0,0 +1,2 @@
+export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay", "error"];
+export type ChipColorVariant = (typeof chipColorVariant)[number];

package/__inner__/cjs/components/ChipNext/entities/color.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipColorVariant = void 0;
+exports.chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+    'error',
+];

package/__inner__/cjs/components/ChipNext/entities/events.d.ts

@@ -0,0 +1,5 @@
+import type { MouseEvent } from 'react';
+export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
+    checked: boolean;
+    value: string | undefined;
+}) => void;

package/__inner__/cjs/components/ChipNext/entities/events.js

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

package/__inner__/cjs/components/ChipNext/entities/icon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from '@ozen-ui/icons';
+import type { RenderContentType } from '../../../utils';
+export type ChipIcon = RenderContentType<IconProps>['content'];

package/__inner__/cjs/components/ChipNext/entities/icon.js

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

package/__inner__/cjs/components/ChipNext/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color';
+export * from './events';
+export * from './icon';
+export * from './size';

package/__inner__/cjs/components/ChipNext/entities/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./color"), exports);
+tslib_1.__exportStar(require("./events"), exports);
+tslib_1.__exportStar(require("./icon"), exports);
+tslib_1.__exportStar(require("./size"), exports);

package/__inner__/cjs/components/ChipNext/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
+export type ChipSizeVariant = (typeof chipSizeVariant)[number];

package/__inner__/cjs/components/ChipNext/entities/size.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipSizeVariant = void 0;
+exports.chipSizeVariant = ['xs', 's', 'm', 'l'];

package/__inner__/cjs/components/ChipNext/index.d.ts

@@ -1,2 +1,4 @@
+export * from './entities';
+export * from './constants';
 export * from './Chip';
 export * from './types';

package/__inner__/cjs/components/ChipNext/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./Chip"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/ChipNext/types.d.ts

@@ -1,17 +1,7 @@
-import type { ElementType, MouseEvent, ReactNode } from 'react';
-import type { IconProps } from '@ozen-ui/icons';
+import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import type { RenderContentType } from '../../utils/renderContent';
 import type { CHIP_DEFAULT_TAG } from './constants';
-export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay"];
-export type ChipColorVariant = (typeof chipColorVariant)[number];
-export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
-export type ChipSizeVariant = (typeof chipSizeVariant)[number];
-export type ChipIcon = RenderContentType<IconProps>['content'];
-export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
-    checked: boolean;
-    value: string | undefined;
-}) => void;
+import type { ChipColorVariant, ChipSizeVariant, ChipOnClick, ChipIcon } from './entities';
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -39,3 +29,4 @@ export type ChipBaseProps = {
     'data-testid'?: string;
 };
 export type ChipProps<As extends ElementType = typeof CHIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ChipBaseProps, As>;
+export type ChipRef<As extends ElementType = typeof CHIP_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/cjs/components/ChipNext/types.js

@@ -1,12 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipSizeVariant = exports.chipColorVariant = void 0;
-// ---- COLOR ----
-exports.chipColorVariant = [
-    'primary',
-    'secondary',
-    'main',
-    'overlay',
-];
-// ---- SIZE ----
-exports.chipSizeVariant = ['xs', 's', 'm', 'l'];

package/__inner__/cjs/components/DataListCard/DataListCard.js

@@ -20,7 +20,7 @@ var DataListCardRender = function (inProps, ref) {
         props: inProps,
         name: 'DataListCard',
     });
-    var className = props.className, children = props.children, _a = props.as, as = _a === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_TAG : _a, active = props.active, _b = props.size, size = _b === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_SIZE : _b, borderColorScheme = props.borderColorScheme, _c = props.backgroundColorScheme, backgroundColorScheme = _c === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _c, _d = props.interactive, interactive = _d === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.contentTrailingRatio, contentTrailingRatio = _e === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _e, _f = props.shadow, shadow = _f === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_SHADOW : _f, radiusProp = props.radius, _g = props.loading, loading = _g === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_LOADING : _g, loadingText = props.loadingText, _h = props.showNoOptions, showNoOptions = _h === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS : _h, noOptionsText = props.noOptionsText, other = tslib_1.__rest(props, ["className", "children", "as", "active", "size", "borderColorScheme", "backgroundColorScheme", "interactive", "contentTrailingRatio", "shadow", "radius", "loading", "loadingText", "showNoOptions", "noOptionsText"]);
+    var className = props.className, children = props.children, _a = props.as, as = _a === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_TAG : _a, active = props.active, _b = props.size, size = _b === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_SIZE : _b, borderColorScheme = props.borderColorScheme, _c = props.backgroundColorScheme, backgroundColorScheme = _c === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _c, _d = props.interactive, interactive = _d === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.contentTrailingRatio, contentTrailingRatio = _e === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _e, _f = props.shadow, shadow = _f === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_SHADOW : _f, radiusProp = props.radius, _g = props.loading, loading = _g === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_LOADING : _g, loadingText = props.loadingText, _h = props.showNoOptions, showNoOptions = _h === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS : _h, noOptionsText = props.noOptionsText, _j = props.align, align = _j === void 0 ? constants_1.DATA_LIST_CARD_DEFAULT_ALIGN : _j, padding = props.padding, other = tslib_1.__rest(props, ["className", "children", "as", "active", "size", "borderColorScheme", "backgroundColorScheme", "interactive", "contentTrailingRatio", "shadow", "radius", "loading", "loadingText", "showNoOptions", "noOptionsText", "align", "padding"]);
     var radius = radiusProp !== null && radiusProp !== void 0 ? radiusProp : constants_1.DATA_LIST_CARD_RADIUS_BY_SIZE[size];
     return (react_1.default.createElement(ListCard_1.ListCardContext.Provider, { value: {
             variant: 'list',
@@ -29,6 +29,8 @@ var DataListCardRender = function (inProps, ref) {
             backgroundColorScheme: backgroundColorScheme,
             interactive: interactive,
             contentTrailingRatio: contentTrailingRatio,
+            align: align,
+            padding: padding,
         } },
         react_1.default.createElement(DataListCardContext_1.DataListCardContext.Provider, { value: {
                 size: size,

package/__inner__/cjs/components/DataListCard/constants.d.ts

@@ -9,6 +9,7 @@ export declare const DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME: {
 };
 export declare const DATA_LIST_CARD_DEFAULT_INTERACTIVE = true;
 export declare const DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
+export declare const DATA_LIST_CARD_DEFAULT_ALIGN = "start";
 export declare const DATA_LIST_CARD_DEFAULT_LOADING = false;
 export declare const DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = true;
 export declare const DATA_LIST_CARD_DEFAULT_SHADOW = "l";

package/__inner__/cjs/components/DataListCard/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATA_LIST_CARD_RADIUS_BY_SIZE = exports.DATA_LIST_CARD_DEFAULT_SHADOW = exports.DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = exports.DATA_LIST_CARD_DEFAULT_LOADING = exports.DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = exports.DATA_LIST_CARD_DEFAULT_INTERACTIVE = exports.DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.DATA_LIST_CARD_DEFAULT_SIZE = exports.DATA_LIST_CARD_DEFAULT_TAG = void 0;
+exports.DATA_LIST_CARD_RADIUS_BY_SIZE = exports.DATA_LIST_CARD_DEFAULT_SHADOW = exports.DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = exports.DATA_LIST_CARD_DEFAULT_LOADING = exports.DATA_LIST_CARD_DEFAULT_ALIGN = exports.DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = exports.DATA_LIST_CARD_DEFAULT_INTERACTIVE = exports.DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.DATA_LIST_CARD_DEFAULT_SIZE = exports.DATA_LIST_CARD_DEFAULT_TAG = void 0;
 var constants_1 = require("../DataListBase/constants");
 var ListCard_1 = require("../ListCard");
 exports.DATA_LIST_CARD_DEFAULT_TAG = constants_1.DATA_LIST_BASE_DEFAULT_TAG;
@@ -8,6 +8,7 @@ exports.DATA_LIST_CARD_DEFAULT_SIZE = ListCard_1.LIST_CARD_DEFAULT_SIZE;
 exports.DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = ListCard_1.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME;
 exports.DATA_LIST_CARD_DEFAULT_INTERACTIVE = ListCard_1.LIST_CARD_DEFAULT_INTERACTIVE;
 exports.DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = ListCard_1.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO;
+exports.DATA_LIST_CARD_DEFAULT_ALIGN = ListCard_1.LIST_CARD_DEFAULT_ALIGN;
 exports.DATA_LIST_CARD_DEFAULT_LOADING = false;
 exports.DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = true;
 exports.DATA_LIST_CARD_DEFAULT_SHADOW = 'l';

package/__inner__/cjs/components/DatePicker/components/DateInput/types.d.ts

@@ -3,7 +3,7 @@ import type { ExtendableComponentPropsWithRef } from '../../../../types';
 import type { CalendarSteps } from '../../../Calendar';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../../../FieldControl';
 import type { InputProps } from '../../../Input';
-import type { InputPropPlaceholder } from '../../types';
+import type { InputPropPlaceholder } from '../../entities';
 export type DateInputRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
 export type DateInputProps = ExtendableComponentPropsWithRef<{
     steps: CalendarSteps;

package/__inner__/cjs/components/DatePicker/components/DatePickerModeDateRange/DatePickerModeDateRange.js

@@ -24,7 +24,7 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     minDate = props.minDate, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    maxDate = props.maxDate, _b = props.steps, steps = _b === void 0 ? constants_1.DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? constants_1.DATE_PICKER_DEFAULT_INITIAL_STEP : _c, other = tslib_1.__rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps", "minDate", "maxDate", "steps", "initialStep"]);
+    maxDate = props.maxDate, _b = props.steps, steps = _b === void 0 ? constants_1.DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? constants_1.DATE_PICKER_DEFAULT_INITIAL_STEP : _c, background = props.background, other = tslib_1.__rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps", "minDate", "maxDate", "steps", "initialStep", "background"]);
     var _d = tslib_1.__read((0, utils_3.getValueForDoubleProp)(label), 2), labelFrom = _d[0], labelTo = _d[1];
     var _e = tslib_1.__read((0, utils_3.getValueForDoubleProp)(renderLeft), 2), renderLeftFrom = _e[0], renderLeftTo = _e[1];
     var _f = tslib_1.__read((0, utils_3.getValueForDoubleProp)(renderRight), 2), renderRightFrom = _f[0], renderRightTo = _f[1];
@@ -264,8 +264,8 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
             disableStroke: disableStroke,
         }, [className]) }, other, { ref: rootRef }),
         react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({ gap: "l", className: (0, index_1.cnDatePicker)('Fields', [fieldsProps === null || fieldsProps === void 0 ? void 0 : fieldsProps.className]) }, fieldsProps, { ref: fieldsRef }),
-            react_1.default.createElement(index_2.DateInput, { size: size, error: error, label: labelFrom, required: required, disabled: disabled, value: inputValueFrom, onKeyDown: handleKeyDown, renderLeft: renderLeftFrom, labelProps: labelPropsFrom, disableStroke: disableStroke, steps: steps, placeholder: placeholderFrom, renderRight: react_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom, onPaste: handlePasteInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
-            react_1.default.createElement(index_2.DateInput, { size: size, error: error, label: labelTo, required: required, disabled: disabled, value: inputValueTo, onKeyDown: handleKeyDown, renderLeft: renderLeftTo, labelProps: labelPropsTo, placeholder: placeholderTo, disableStroke: disableStroke, steps: steps, renderRight: react_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo, onPaste: handlePasteInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
+            react_1.default.createElement(index_2.DateInput, { size: size, error: error, label: labelFrom, required: required, disabled: disabled, value: inputValueFrom, onKeyDown: handleKeyDown, renderLeft: renderLeftFrom, labelProps: labelPropsFrom, disableStroke: disableStroke, steps: steps, placeholder: placeholderFrom, renderRight: react_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), background: background, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom, onPaste: handlePasteInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
+            react_1.default.createElement(index_2.DateInput, { size: size, error: error, label: labelTo, required: required, disabled: disabled, value: inputValueTo, onKeyDown: handleKeyDown, renderLeft: renderLeftTo, labelProps: labelPropsTo, placeholder: placeholderTo, disableStroke: disableStroke, background: background, steps: steps, renderRight: react_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo, onPaste: handlePasteInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
         react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({ size: size, error: error, disabled: disabled }, hintProps), hint),
         react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { onExited: handleExited, ignoreClickOutsideRefs: [containerRef], disableEnforceFocus: disableEnforceFocus }),
             react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ calendars: calendars }, calendarProps, { initialStep: initialStep, steps: steps, mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: (0, utils_3.formatDateForCalendar)(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));

package/__inner__/cjs/components/DatePicker/components/DatePickerModeDateRange/utils/formatDateForCalendar/formatDateForCalendar.d.ts

@@ -1,3 +1,3 @@
 import type { CalendarPropValue } from '../../../../../Calendar';
-import type { DatePickerPropValue } from '../../../../types';
+import type { DatePickerPropValue } from '../../../../entities';
 export declare const formatDateForCalendar: (date?: DatePickerPropValue<"date-range">) => CalendarPropValue<"range">;

package/__inner__/cjs/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.js

@@ -17,7 +17,7 @@ var DatePickerRenderRight = function (_a) {
         onClear === null || onClear === void 0 ? void 0 : onClear(e);
     };
     return (react_1.default.createElement("div", { className: (0, index_1.cnDatePicker)('RenderRight') },
-        !disableClearButton && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.CrossIcon, title: clearText, variant: "function", onClick: handleClear, "aria-label": clearText, className: (0, index_1.cnDatePicker)('ClearButton', {
+        !disableClearButton && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.CrossIcon, title: clearText, variant: "function", color: "tertiary", onClick: handleClear, "aria-label": clearText, className: (0, index_1.cnDatePicker)('ClearButton', {
                 visibility: isVisibleClearButton,
             }), compressed: true })),
         react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),

package/__inner__/cjs/components/DatePicker/entities/background.d.ts

@@ -0,0 +1,2 @@
+export declare const datePickerBackgroundVariant: readonly ["main", "primary"];
+export type DatePickerBackgroundVariant = (typeof datePickerBackgroundVariant)[number];

package/__inner__/cjs/components/DatePicker/entities/background.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerBackgroundVariant = void 0;
+var FieldControl_1 = require("../../FieldControl");
+exports.datePickerBackgroundVariant = FieldControl_1.fieldControlBackgroundVariant;

package/__inner__/cjs/components/DatePicker/entities/deprecated.d.ts

@@ -0,0 +1,13 @@
+import type { DatePickerPropOnInputChange } from './input';
+import type { DatePickerModeVariant } from './mode';
+import type { DatePickerPropOnChange } from './onChange';
+/**
+ * @deprecated
+ * Use the `DatePickerPropOnChange` type to replace it.
+ * */
+export type DatePickerOnChange<MODE extends DatePickerModeVariant> = DatePickerPropOnChange<MODE>;
+/**
+ * @deprecated
+ * Use the `DatePickerPropOnInputChange` type to replace it.
+ * */
+export type DatePickerOnInputChange<MODE extends DatePickerModeVariant> = DatePickerPropOnInputChange<MODE>;

package/__inner__/cjs/components/DatePicker/entities/deprecated.js

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

package/__inner__/cjs/components/DatePicker/entities/fields.d.ts

@@ -0,0 +1,2 @@
+import type { StackProps } from '../../Stack';
+export type DatePickerPropFieldsProps<MODE> = MODE extends 'date-range' ? StackProps : never;

package/__inner__/cjs/components/DatePicker/entities/fields.js

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

package/__inner__/cjs/components/DatePicker/entities/index.d.ts

@@ -0,0 +1,13 @@
+export * from './background';
+export * from './deprecated';
+export * from './fields';
+export * from './input';
+export * from './label';
+export * from './mode';
+export * from './onChange';
+export * from './onError';
+export * from './placeholder';
+export * from './renderLeft';
+export * from './renderRight';
+export * from './size';
+export * from './value';