@cloud-ru/uikit-product-mobile-fields 0.11.24 → 0.11.26

package/dist/esm/constants/dateFields.js

@@ -0,0 +1,103 @@
+export var SlotKey;
+(function (SlotKey) {
+    SlotKey["Day"] = "D";
+    SlotKey["Month"] = "M";
+    SlotKey["Year"] = "Y";
+    SlotKey["Hours"] = "h";
+    SlotKey["Minutes"] = "m";
+    SlotKey["Seconds"] = "s";
+})(SlotKey || (SlotKey = {}));
+export const MODES = {
+    Date: 'date',
+    DateTime: 'date-time',
+};
+export const TIME_MODES = {
+    FullTime: 'full-time',
+    NoSeconds: 'no-seconds',
+};
+export const NO_SECONDS_MODE = 'date-time-no-sec';
+export const MASK = {
+    [MODES.Date]: {
+        'ru-RU': 'ДД.ММ.ГГГГ',
+        'en-US': 'DD.MM.YYYY',
+    },
+    [MODES.DateTime]: {
+        'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
+        'en-US': 'DD.MM.YYYY, hh:mm:ss',
+    },
+    [NO_SECONDS_MODE]: {
+        'ru-RU': 'ДД.ММ.ГГГГ, чч:мм',
+        'en-US': 'DD.MM.YYYY, hh:mm',
+    },
+    [TIME_MODES.FullTime]: {
+        'ru-RU': 'чч:мм:сс',
+        'en-US': 'hh:mm:ss',
+    },
+    [TIME_MODES.NoSeconds]: {
+        'ru-RU': 'чч:мм',
+        'en-US': 'hh:mm',
+    },
+};
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+const DATE_SLOTS = {
+    [SlotKey.Day]: { start: 0, end: 2, max: 31, min: 1 },
+    [SlotKey.Month]: { start: 3, end: 5, max: 12, min: 1 },
+    [SlotKey.Year]: { start: 6, end: 10, max: 2100, min: 1900 },
+};
+const TIME_SLOTS = (shift, showSeconds) => (Object.assign({ [SlotKey.Hours]: { start: shift, end: shift + 2, max: 23, min: 0 }, [SlotKey.Minutes]: { start: shift + 3, end: shift + 5, max: 59, min: 0 } }, (showSeconds ? { [SlotKey.Seconds]: { start: shift + 6, end: shift + 8, max: 59, min: 0 } } : {})));
+export const SLOTS = {
+    [MODES.Date]: DATE_SLOTS,
+    [MODES.DateTime]: Object.assign(Object.assign({}, DATE_SLOTS), TIME_SLOTS(12, true)),
+    [NO_SECONDS_MODE]: Object.assign(Object.assign({}, DATE_SLOTS), TIME_SLOTS(12, false)),
+    [TIME_MODES.FullTime]: TIME_SLOTS(0, true),
+    [TIME_MODES.NoSeconds]: TIME_SLOTS(0, false),
+};
+export const SLOT_ORDER = {
+    [MODES.Date]: [SlotKey.Day, SlotKey.Month, SlotKey.Year],
+    [MODES.DateTime]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+    [NO_SECONDS_MODE]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes],
+    [TIME_MODES.FullTime]: [SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+    [TIME_MODES.NoSeconds]: [SlotKey.Hours, SlotKey.Minutes],
+};
+const RU_DATE_SLOTS_PLACEHOLDER = {
+    [SlotKey.Day]: 'ДД',
+    [SlotKey.Month]: 'ММ',
+    [SlotKey.Year]: 'ГГГГ',
+};
+const RU_TIME_SLOTS_PLACEHOLDER = {
+    [SlotKey.Hours]: 'чч',
+    [SlotKey.Minutes]: 'мм',
+    [SlotKey.Seconds]: 'сс',
+};
+const EN_DATE_SLOTS_PLACEHOLDER = {
+    [SlotKey.Day]: 'DD',
+    [SlotKey.Month]: 'MM',
+    [SlotKey.Year]: 'YYYY',
+};
+const EN_TIME_SLOTS_PLACEHOLDER = {
+    [SlotKey.Hours]: 'hh',
+    [SlotKey.Minutes]: 'mm',
+    [SlotKey.Seconds]: 'ss',
+};
+export const SLOTS_PLACEHOLDER = {
+    [MODES.Date]: {
+        'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+        'en-US': EN_DATE_SLOTS_PLACEHOLDER,
+    },
+    [MODES.DateTime]: {
+        'ru-RU': Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), RU_TIME_SLOTS_PLACEHOLDER),
+        'en-US': Object.assign(Object.assign({}, EN_DATE_SLOTS_PLACEHOLDER), EN_TIME_SLOTS_PLACEHOLDER),
+    },
+    [NO_SECONDS_MODE]: {
+        'ru-RU': Object.assign(Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), RU_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+        'en-US': Object.assign(Object.assign(Object.assign({}, EN_DATE_SLOTS_PLACEHOLDER), EN_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+    },
+    [TIME_MODES.FullTime]: {
+        'ru-RU': RU_TIME_SLOTS_PLACEHOLDER,
+        'en-US': EN_TIME_SLOTS_PLACEHOLDER,
+    },
+    [TIME_MODES.NoSeconds]: {
+        'ru-RU': Object.assign(Object.assign({}, RU_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+        'en-US': Object.assign(Object.assign({}, EN_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+    },
+};

package/dist/esm/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';

package/dist/esm/constants/index.js

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';

package/dist/esm/helperComponents/ButtonCopyValue/ButtonCopyValue.d.ts

@@ -0,0 +1,14 @@
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ButtonSize } from '@snack-uikit/input-private';
+import { AsyncValueRequest } from '../../types';
+type ButtonCopyValueProps = {
+    size: ButtonSize;
+    valueToCopy?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    tabIndex?: number;
+    onValueRequest?(): AsyncValueRequest;
+    disabled?: boolean;
+};
+export declare const ButtonCopyValue: import("react").ForwardRefExoticComponent<ButtonCopyValueProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/helperComponents/ButtonCopyValue/ButtonCopyValue.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import copyToClipboard from 'copy-to-clipboard';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { getIcon } from './helpers';
+import styles from './styles.module.css';
+export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onValueRequest, disabled }, ref) => {
+    const [isChecked, setIsChecked] = useState(false);
+    const timerId = useRef();
+    const closeTooltip = () => setIsChecked(false);
+    const handleCopy = (event, asyncValue) => {
+        const value = asyncValue || valueToCopy;
+        value && copyToClipboard(value, { format: 'text/plain' });
+        setIsChecked(true);
+        clearTimeout(timerId.current);
+        timerId.current = setTimeout(closeTooltip, 2000);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handleClick = event => {
+        event.stopPropagation();
+        if (onValueRequest) {
+            onValueRequest().then(({ success, value }) => {
+                if (success) {
+                    handleCopy(event, value);
+                }
+            });
+        }
+        else {
+            handleCopy(event);
+        }
+    };
+    useEffect(() => () => {
+        closeTooltip();
+        clearTimeout(timerId.current);
+    }, []);
+    return (_jsx("button", { className: styles.buttonCopyValue, "data-size": size, "data-disabled": disabled || undefined, onClick: handleClick, "data-test-id": 'button-copy-value', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, type: 'button', disabled: disabled, children: getIcon({ size, isChecked }) }));
+});

package/dist/esm/helperComponents/ButtonCopyValue/helpers.d.ts

@@ -0,0 +1,7 @@
+import { ButtonSize } from '@snack-uikit/input-private';
+type GetIconProps = {
+    size: ButtonSize;
+    isChecked: boolean;
+};
+export declare function getIcon({ size, isChecked }: GetIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/ButtonCopyValue/helpers.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckSVG, CopySVG } from '@sbercloud/uikit-product-icons';
+import { BUTTON_SIZE } from '@snack-uikit/input-private';
+export function getIcon({ size, isChecked }) {
+    switch (size) {
+        case BUTTON_SIZE.S: {
+            return isChecked ? _jsx(CheckSVG, { size: 16 }) : _jsx(CopySVG, { size: 16 });
+        }
+        case BUTTON_SIZE.M:
+        default: {
+            return isChecked ? _jsx(CheckSVG, { size: 24 }) : _jsx(CopySVG, { size: 24 });
+        }
+    }
+}

package/dist/esm/helperComponents/ButtonCopyValue/index.d.ts

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

package/dist/esm/helperComponents/ButtonCopyValue/index.js

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

package/dist/esm/helperComponents/ButtonCopyValue/styles.module.css

@@ -0,0 +1,47 @@
+.buttonCopyValue{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:transparent;
+  border:none;
+}
+.buttonCopyValue[data-size=s]{
+  width:var(--size-fields-buttons-s, 16px);
+  height:var(--size-fields-buttons-s, 16px);
+  border-radius:var(--radius-fields-buttons-s, 8px);
+}
+.buttonCopyValue[data-size=s] svg{
+  width:var(--size-icon-container-xs, 16px) !important;
+  height:var(--size-icon-container-xs, 16px) !important;
+}
+.buttonCopyValue[data-size=m]{
+  width:var(--size-fields-buttons-m, 24px);
+  height:var(--size-fields-buttons-m, 24px);
+  border-radius:var(--radius-fields-buttons-m, 12px);
+}
+.buttonCopyValue[data-size=m] svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.buttonCopyValue:hover{
+  cursor:pointer;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.buttonCopyValue:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  color:var(--sys-neutral-text-support, #6d707f);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.buttonCopyValue:active{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.buttonCopyValue[data-disabled]{
+  cursor:not-allowed;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

package/dist/esm/helperComponents/FieldContainerPrivate/FieldContainerPrivate.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { Size } from '@snack-uikit/input-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ContainerVariant, ValidationState } from '../../types';
+export type FieldContainerPrivateProps = WithSupportProps<{
+    className?: string;
+    children: ReactNode;
+    size: Size;
+    validationState: ValidationState;
+    variant: ContainerVariant;
+    disabled: boolean;
+    readonly: boolean;
+    focused?: boolean;
+    selectable?: boolean;
+    style?: CSSProperties;
+    prefix?: ReactNode;
+    postfix?: ReactNode;
+    inputRef: RefObject<HTMLElement>;
+    onClick?: MouseEventHandler;
+}>;
+export declare function FieldContainerPrivate({ className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, onClick, ...rest }: FieldContainerPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/FieldContainerPrivate/FieldContainerPrivate.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { VALIDATION_STATE } from '../../constants';
+import styles from './styles.module.css';
+export function FieldContainerPrivate(_a) {
+    var { className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, onClick } = _a, rest = __rest(_a, ["className", "children", "size", "validationState", "variant", "disabled", "readonly", "focused", "selectable", "style", "prefix", "postfix", "onClick"]);
+    const handleContainerClick = event => {
+        if (disabled) {
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ? VALIDATION_STATE.Default : validationState, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readonly || undefined, "data-focused": focused || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, role: 'textbox', tabIndex: -1 }, extractSupportProps(rest), { children: [prefix && (_jsx("span", { className: styles.prefix, "data-test-id": 'field-container-private__prefix-icon', children: prefix })), children, postfix && _jsx("span", { className: styles.postfix, children: postfix })] })));
+}

package/dist/esm/helperComponents/FieldContainerPrivate/index.d.ts

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

package/dist/esm/helperComponents/FieldContainerPrivate/index.js

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

package/dist/esm/helperComponents/FieldContainerPrivate/styles.module.css

@@ -0,0 +1,219 @@
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  border-style:solid;
+}
+.container[data-validation=default]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.container[data-validation=default]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-decor-hovered, #b3deca);
+}
+.container[data-validation=default]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=default]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-accent-default, #389f74);
+  outline-color:var(--sys-primary-decor-activated, #99d7ba);
+}
+.container[data-validation=error]{
+  background-color:var(--sys-red-background1-level, #fef6f3);
+  border-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.container[data-validation=error]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-red-decor-hovered, #fac1b3);
+}
+.container[data-validation=error]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=error]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-red-accent-default, #cb3f3e);
+  outline-color:var(--sys-red-decor-activated, #fbab99);
+}
+.container[data-validation=warning]{
+  background-color:var(--sys-yellow-background1-level, #fcfbef);
+  border-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.container[data-validation=warning]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-yellow-decor-hovered, #ead49a);
+}
+.container[data-validation=warning]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=warning]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-yellow-accent-default, #e2b134);
+  outline-color:var(--sys-yellow-decor-activated, #e6c878);
+}
+.container[data-validation=success]{
+  background-color:var(--sys-green-background1-level, #f6fdf3);
+  border-color:var(--sys-green-decor-default, #d2ead0);
+}
+.container[data-validation=success]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-green-decor-hovered, #c0e1ba);
+}
+.container[data-validation=success]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=success]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-green-accent-default, #57b762);
+  outline-color:var(--sys-green-decor-activated, #a8d1a2);
+}
+.container[data-size=s]{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+}
+.container[data-size=s],
+.container[data-size=s] input,
+.container[data-size=s] select,
+.container[data-size=s] textarea,
+.container[data-size=s] span{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.container[data-size=s][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-s-left, 7px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-s-right, 7px);
+  height:var(--size-fields-s, 32px);
+}
+.container[data-size=s][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-top:var(--space-fields-multi-line-container-s-top, 7px);
+  padding-bottom:var(--space-fields-multi-line-container-s-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-s-left, 7px);
+  padding-right:var(--space-fields-multi-line-container-s-right, 2px);
+}
+.container[data-size=m]{
+  border-radius:var(--radius-fields-m, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+}
+.container[data-size=m],
+.container[data-size=m] input,
+.container[data-size=m] select,
+.container[data-size=m] textarea,
+.container[data-size=m] span{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.container[data-size=m][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-m, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-m-left, 9px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-m-right, 9px);
+  height:var(--size-fields-m, 40px);
+}
+.container[data-size=m][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-m, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-top:var(--space-fields-multi-line-container-m-top, 9px);
+  padding-bottom:var(--space-fields-multi-line-container-m-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-m-left, 9px);
+  padding-right:var(--space-fields-multi-line-container-m-right, 2px);
+}
+.container[data-size=l]{
+  border-radius:var(--radius-fields-l, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+}
+.container[data-size=l],
+.container[data-size=l] input,
+.container[data-size=l] select,
+.container[data-size=l] textarea,
+.container[data-size=l] span{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+.container[data-size=l][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-l, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-l-left, 11px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  padding-right:var(--space-fields-single-line-container-l-right, 11px);
+  height:var(--size-fields-l, 48px);
+}
+.container[data-size=l][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-l, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-top:var(--space-fields-multi-line-container-l-top, 11px);
+  padding-bottom:var(--space-fields-multi-line-container-l-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-l-left, 11px);
+  padding-right:var(--space-fields-multi-line-container-l-right, 2px);
+}
+.container[data-selectable],
+.container[data-selectable] input,
+.container[data-selectable] select,
+.container[data-selectable] textarea,
+.container[data-selectable] span{
+  cursor:pointer;
+}
+.container[data-readonly],
+.container[data-readonly] input,
+.container[data-readonly] select,
+.container[data-readonly] textarea,
+.container[data-readonly] span{
+  cursor:default;
+}
+.container[data-readonly], .container[data-readonly]:hover{
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.container[data-readonly]:focus-within, .container[data-readonly][data-focused]{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  outline:none;
+}
+.container[data-disabled],
+.container[data-disabled] input,
+.container[data-disabled] select,
+.container[data-disabled] textarea,
+.container[data-disabled] span{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.container[data-disabled], .container[data-disabled]:focus-within, .container[data-disabled][data-focused], .container[data-disabled]:hover{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  outline:none;
+}
+
+.prefix{
+  display:inline-flex;
+  flex-shrink:0;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-postfix-gap, 4px);
+}

package/dist/esm/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,9 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string | number;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+export function ItemContent(_a) {
+    var { caption, description, option, className, disabled } = _a, rest = __rest(_a, ["caption", "description", "option", "className", "disabled"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": 'l', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.label, children: _jsx("span", { "data-test-id": 'list__base-item-option', children: option }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx("span", { "data-test-id": 'list__base-item-description', children: description }) }))] })));
+}

package/dist/esm/helperComponents/ItemContent/index.d.ts

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

package/dist/esm/helperComponents/ItemContent/index.js

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