@cloud-ru/uikit-product-fields-predefined 2.4.6 → 2.4.8-preview-68cf2382.0

package/dist/esm/components/FieldAi/components/PasswordValidation/styles.module.css

@@ -1,36 +0,0 @@
-.tooltipText{
-  display:flex;
-  flex-direction:column;
-}
-
-.validationList{
-  display:flex;
-  flex-direction:column;
-  gap:12px;
-}
-
-.validationItemsContainer{
-  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);
-  color:var(--sys-neutral-text-main, #41424e);
-  display:flex;
-  flex-direction:column;
-  gap:12px;
-}
-.validationItemsContainer[data-layout-type=mobile], .validationItemsContainer[data-layout-type=tablet]{
-  gap:8px;
-  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);
-  padding:8px 16px;
-}
-.validationItemsContainer[data-layout-type=mobile] .validationList, .validationItemsContainer[data-layout-type=tablet] .validationList{
-  gap:2px;
-}

package/dist/esm/components/FieldAi/components/TextArea/TextArea.d.ts

@@ -1,39 +0,0 @@
-import { ChangeEvent, FocusEventHandler, KeyboardEventHandler, RefAttributes } from 'react';
-import { InputPrivateProps } from '@snack-uikit/input-private';
-import { WithSupportProps } from '@snack-uikit/utils';
-export type TextAreaProps = RefAttributes<HTMLTextAreaElement> & WithSupportProps<{
-    /** HTML-аттрибут name */
-    name?: string;
-    /** HTML-аттрибут value */
-    value?: string;
-    /** Колбек смены значения */
-    onChange?(value: string, e: ChangeEvent<HTMLTextAreaElement>): void;
-    /** HTML-аттрибут id */
-    id?: string;
-    className?: string;
-    /** Плейсхолдер */
-    placeholder?: string;
-    /** Является ли поле доступным только на чтение */
-    readonly?: boolean;
-    /** Является ли поле деактивированным */
-    disabled?: boolean;
-    /** Включен ли автокомплит */
-    autoComplete?: boolean;
-    /** Максимальное кол-во символов */
-    maxLength?: number;
-    /** Колбек получения фокуса */
-    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
-    /** Колбек потери фокуса */
-    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-    /** Колбек нажатия клавиши клавиатуры */
-    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-    /** HTML-аттрибут tab-index */
-    tabIndex?: number;
-    /** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
-    minRows?: number;
-    /** Включение проверки орфографии @default true*/
-    spellCheck?: boolean;
-    /** Режим работы экранной клавиатуры */
-    inputMode?: InputPrivateProps['inputMode'];
-}>;
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/FieldAi/components/TextArea/TextArea.js

@@ -1,27 +0,0 @@
-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 } from "react/jsx-runtime";
-import cn from 'classnames';
-import { forwardRef, useState, } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
-import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
-import styles from './styles.module.css';
-export const TextArea = forwardRef((_a, ref) => {
-    var { name, value = '', onChange, placeholder, id, className, disabled = false, readonly = false, autoComplete = false, maxLength, onFocus, onBlur, onKeyDown, tabIndex, minRows = 3, spellCheck, inputMode } = _a, rest = __rest(_a, ["name", "value", "onChange", "placeholder", "id", "className", "disabled", "readonly", "autoComplete", "maxLength", "onFocus", "onBlur", "onKeyDown", "tabIndex", "minRows", "spellCheck", "inputMode"]);
-    // fix of height on the initial render
-    // see https://github.com/Andarist/react-textarea-autosize/issues/337#issuecomment-1024980737
-    const [, setIsRerendered] = useState(false);
-    useLayoutEffect(() => setIsRerendered(true), []);
-    const onChangeHandler = e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
-    const stopPropagation = e => e.stopPropagation();
-    return (_jsx(TextareaAutosize, Object.assign({ id: id, name: name, value: value, ref: ref, className: cn(className, styles.textarea), autoComplete: autoComplete ? 'on' : 'off', placeholder: placeholder, disabled: disabled, readOnly: readonly, maxLength: maxLength, onChange: onChangeHandler, onClick: stopPropagation, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, tabIndex: tabIndex, minRows: minRows, spellCheck: spellCheck, inputMode: inputMode }, extractSupportProps(rest))));
-});

package/dist/esm/components/FieldAi/components/TextArea/index.d.ts

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

package/dist/esm/components/FieldAi/components/TextArea/index.js

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

package/dist/esm/components/FieldAi/components/TextArea/styles.module.css

@@ -1,32 +0,0 @@
-.textarea{
-  resize:none;
-  box-sizing:border-box;
-  width:100%;
-  max-width:100%;
-  margin:0;
-  padding:0;
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:transparent;
-  border:none;
-  border-radius:0;
-  outline:0;
-}
-.textarea::-moz-placeholder{
-  color:var(--sys-neutral-text-disabled, #aaaebd);
-}
-.textarea::placeholder{
-  color:var(--sys-neutral-text-disabled, #aaaebd);
-}
-.textarea::-webkit-scrollbar{
-  width:0;
-  max-width:0;
-}
-.textarea:-moz-read-only{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-.textarea:read-only{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-.textarea[disabled]{
-  color:var(--sys-neutral-text-disabled, #aaaebd);
-}

package/dist/esm/components/FieldAi/components/WithPasswordValidation/WithPasswordValidation.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-import { ValidationPassword, ValidationPasswordKey } from '../../utils';
-export type WithPasswordTooltipProps = WithLayoutType<{
-    showValidation?: boolean;
-    children: ReactNode;
-    passwordValidation: ValidationPassword;
-    animatedKey?: ValidationPasswordKey | null;
-}>;
-export declare function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, animatedKey, }: WithPasswordTooltipProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

package/dist/esm/components/FieldAi/components/WithPasswordValidation/WithPasswordValidation.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { isTouchDevice } from '../../../../helpers';
-import { PasswordValidation } from '../PasswordValidation';
-import styles from './styles.module.css';
-export function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, animatedKey, }) {
-    if (isTouchDevice(layoutType)) {
-        if (showValidation) {
-            return (_jsxs("div", { className: styles.validationContainer, children: [_jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedKey }), children] }));
-        }
-        return children;
-    }
-    if (showValidation) {
-        return (_jsx(AdaptiveTooltip, { placement: 'left-end', layoutType: layoutType, tip: _jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedKey }), offset: 8, children: children }));
-    }
-    return children;
-}

package/dist/esm/components/FieldAi/components/WithPasswordValidation/index.d.ts

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

package/dist/esm/components/FieldAi/components/WithPasswordValidation/index.js

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

package/dist/esm/components/FieldAi/components/WithPasswordValidation/styles.module.css

@@ -1,6 +0,0 @@
-.validationContainer{
-  display:flex;
-  flex-direction:column;
-  gap:8px;
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-}

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

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

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

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

package/dist/esm/components/FieldAi/styles.module.css

@@ -1,61 +0,0 @@
-.wrapper{
-  display:flex;
-  flex-direction:column;
-  gap:var(--dimension-050m, 4px);
-  position:relative;
-}
-
-.passwordWrapper{
-  gap:0;
-}
-
-.alert{
-  display:flex;
-  gap:8px;
-  padding:4px 8px;
-  border-radius:8px 8px 0 0;
-  border:1px solid var(--sys-blue-decor-activated, #aac4ea);
-  background-color:var(--sys-blue-decor-default, #d6e2f4);
-  box-sizing:border-box;
-  height:38px;
-  position:absolute;
-  left:0;
-  top:-26px;
-  width:100%;
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
-.alertText{
-  flex:1;
-  min-width:0;
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
-.secured textarea{
-  -webkit-text-security:disc;
-  text-security:disc;
-}
-
-.mobileSubmitButton{
-  position:relative !important;
-  flex-shrink:0 !important;
-}
-.mobileSubmitButton:after{
-  content:"";
-  display:flex;
-  width:48px;
-  height:48px;
-  position:absolute;
-  top:50%;
-  left:50%;
-  transform:translate(-50%, -50%);
-}
-
-.submitButton:not([data-disabled]){
-  background:radial-gradient(229.88% 112% at 37.5% 77.08%, #26D07C 19.86%, #5FD7C2 50.73%, #7CB5F2 89.88%);
-}
-
-.textarea > :first-child[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]){
-  border-color:transparent;
-  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(57.79% 100% at 50% 0%, #7cb5f2 38%, #5fd7c2 79%, #26d07c 90%) border-box;
-}

package/dist/esm/components/FieldAi/utils.d.ts

@@ -1,10 +0,0 @@
-export type ValidationPassword = {
-    onlyLatin: boolean;
-    minLength: boolean;
-    hasLetterCases: boolean;
-    hasNumber: boolean;
-    hasSymbol: boolean;
-    noSpaces: boolean;
-};
-export type ValidationPasswordKey = keyof ValidationPassword;
-export declare const getValidationPassword: (password?: string) => ValidationPassword;

package/dist/esm/components/FieldAi/utils.js

@@ -1,15 +0,0 @@
-const MIN_PASSWORD_LENGTH = 8;
-const NUMBER_REGEX = /[0-9]/;
-const CAPITAL_REGEX = /\p{Lu}/u;
-const LOWER_REGEX = /\p{Ll}/u;
-const SYMBOLS_REGEX = /[\p{P}\p{S}]/u;
-const NO_SPACES = /^\S*$/u;
-const LATIN_REGEX = /^[a-zA-Z0-9\p{P}\p{S}]+$/u;
-export const getValidationPassword = (password = '') => ({
-    onlyLatin: Boolean(password.match(LATIN_REGEX)),
-    minLength: password.length >= MIN_PASSWORD_LENGTH,
-    hasLetterCases: Boolean(password.match(CAPITAL_REGEX)) && Boolean(password.match(LOWER_REGEX)),
-    hasNumber: Boolean(password.match(NUMBER_REGEX)),
-    hasSymbol: Boolean(password.match(SYMBOLS_REGEX)),
-    noSpaces: Boolean(password.match(NO_SPACES)),
-});

package/src/components/FieldAi/FieldAi.tsx

@@ -1,201 +0,0 @@
-import cn from 'classnames';
-import { forwardRef, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
-
-import { EyeClosedSVG, EyeSVG, PasswordLockSVG } from '@cloud-ru/uikit-product-icons';
-import { useLocale } from '@cloud-ru/uikit-product-locale';
-import {
-  AdaptiveFieldTextArea,
-  FieldTextAreaProps,
-  getAdaptiveFieldProps,
-} from '@cloud-ru/uikit-product-mobile-fields';
-import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-import { ButtonFunction, ButtonOutline } from '@snack-uikit/button';
-import { themeVars } from '@snack-uikit/figma-tokens';
-import { Tooltip } from '@snack-uikit/tooltip';
-import { Typography } from '@snack-uikit/typography';
-
-import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
-import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
-import { isTouchDevice as isTouchDeviceHelper } from '../../helpers';
-import { AIDisclaimer } from '../AIDisclaimer/AIDisclaimer';
-import { AlertButton } from './components/AlertButton';
-import { MobileFieldAi } from './components/MobileFieldAi';
-import { WithPasswordValidation } from './components/WithPasswordValidation';
-import styles from './styles.module.scss';
-import { getValidationPassword, ValidationPasswordKey } from './utils';
-
-export type FieldAiProps = WithLayoutType<
-  Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
-    /** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
-    secure?: boolean | 'password';
-    /** Колбек действия при отправке */
-    onSubmit(value: string): void;
-    /** Действие при клике по кнопке сброса контекста */
-    onResetContextClick?(): void;
-    /** Действие для отмены секьюрности поля */
-    onCancelSecure?(): void;
-  }
->;
-
-export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
-  (
-    {
-      secure = false,
-      onSubmit: handleSubmitProp,
-      value,
-      onResetContextClick,
-      onCancelSecure,
-      disabled,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const { layoutType, validationState } = props;
-    const { t } = useLocale('FieldsPredefined');
-    const isTouchDevice = isTouchDeviceHelper(layoutType);
-
-    const [isValueHidden, setIsValueHidden] = useState<boolean>(true);
-    const [animatedValidationKey, setAnimatedValidationKey] = useState<ValidationPasswordKey | null>(null);
-    const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-    const isValueValid = typeof value === 'string' && value.trim().length > 0;
-    const isPasswordMode = secure === 'password';
-
-    const passwordValidation = useMemo(() => getValidationPassword(value), [value]);
-    const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
-    const showPasswordError = !isPasswordValid && secure && value;
-    const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
-
-    useEffect(
-      () => () => {
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-        }
-      },
-      [],
-    );
-
-    const handleSubmit = () => {
-      if (isValueValid && isPasswordValid) {
-        handleSubmitProp(value);
-      }
-    };
-
-    const triggerValidationHighlight = (key: ValidationPasswordKey) => {
-      setAnimatedValidationKey(key);
-
-      timerRef.current = setTimeout(() => {
-        setAnimatedValidationKey(null);
-      }, 1000);
-    };
-
-    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = event => {
-      if (isTouchDevice) {
-        return;
-      }
-
-      if (isPasswordMode && event.key.length === 1) {
-        const isLetter = /\p{L}/u.test(event.key);
-        const isLatinLetter = /^[a-zA-Z]$/.test(event.key);
-
-        if (isLetter && !isLatinLetter) {
-          event.preventDefault();
-          triggerValidationHighlight('onlyLatin');
-          return;
-        }
-      }
-
-      if (event.key === 'Enter' && !event.shiftKey) {
-        event.preventDefault();
-
-        if (!disabled) {
-          handleSubmit();
-        }
-
-        return;
-      }
-    };
-
-    if (isTouchDevice && !secure) {
-      return (
-        <MobileFieldAi
-          {...props}
-          {...getAdaptiveFieldProps(props)}
-          onSubmit={handleSubmit}
-          submitEnabled={isValueValid && !disabled}
-          ref={ref}
-          value={value}
-        />
-      );
-    }
-
-    return (
-      <div className={cn(styles.wrapper, isPasswordMode && styles.passwordWrapper, className)}>
-        {showPasswordAlert && (
-          <div className={styles.alert}>
-            <PasswordLockSVG size={16} color={themeVars.sys.neutral.textSupport} />
-            <Typography.SansBodyS className={styles.alertText}>{t('FieldAi.secret.alert.text')}</Typography.SansBodyS>
-            <AlertButton label={t('FieldAi.secret.alert.button')} onClick={onCancelSecure} />
-          </div>
-        )}
-        <WithPasswordValidation
-          showValidation={isPasswordMode}
-          passwordValidation={passwordValidation}
-          layoutType={layoutType}
-          animatedKey={animatedValidationKey}
-        >
-          <AdaptiveFieldTextArea
-            {...props}
-            ref={ref}
-            value={value}
-            size='m'
-            minRows={secure ? 1 : 2}
-            maxRows={secure ? 1 : 4}
-            placeholder={secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder')}
-            className={cn(styles.textarea, secure && isValueHidden ? styles.secured : undefined)}
-            onKeyDown={handleKeyDown}
-            spellCheck={!secure}
-            validationState={showPasswordError ? 'error' : validationState}
-            footer={
-              <TextAreaActionsFooter
-                left={
-                  secure && (
-                    <ButtonFunction
-                      size='xs'
-                      icon={isValueHidden ? <EyeSVG /> : <EyeClosedSVG />}
-                      onClick={() => setIsValueHidden(prev => !prev)}
-                    />
-                  )
-                }
-                right={
-                  <>
-                    {secure && onResetContextClick && (
-                      <Tooltip tip={t('FieldAi.resetContext.tooltip')} hoverDelayOpen={600}>
-                        <ButtonOutline
-                          size='xs'
-                          label={t('FieldAi.resetContext.label')}
-                          onClick={onResetContextClick}
-                          appearance='destructive'
-                        />
-                      </Tooltip>
-                    )}
-                    <FieldSubmitButton
-                      showTooltip={!isTouchDevice}
-                      className={cn(styles.submitButton, isTouchDevice ? styles.mobileSubmitButton : undefined)}
-                      active={isValueValid && !disabled && isPasswordValid}
-                      handleClick={handleSubmit}
-                      size={isTouchDevice ? 's' : 'xs'}
-                    />
-                  </>
-                }
-              />
-            }
-          />
-        </WithPasswordValidation>
-
-        {!isPasswordMode && <AIDisclaimer layoutType={layoutType} />}
-      </div>
-    );
-  },
-);

package/src/components/FieldAi/components/AlertButton/AlertButton.tsx

@@ -1,16 +0,0 @@
-import { Typography } from '@snack-uikit/typography';
-
-import styles from './styles.module.scss';
-
-export type AlertButtonProps = {
-  label: string;
-  onClick?(): void;
-};
-
-export function AlertButton({ label, onClick }: AlertButtonProps) {
-  return (
-    <button onClick={onClick} className={styles.button}>
-      <Typography.SansLabelM className={styles.label}>{label}</Typography.SansLabelM>
-    </button>
-  );
-}

package/src/components/FieldAi/components/AlertButton/index.ts

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

package/src/components/FieldAi/components/AlertButton/styles.module.scss

@@ -1,20 +0,0 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
-
-.button {
-  outline: none;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.label {
-  color: stv.$sys-blue-text-support;
-
-  &:hover {
-    color: stv.$sys-neutral-text-main;
-  }
-}

package/src/components/FieldAi/components/CheckItem/CheckItem.tsx

@@ -1,45 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { CheckSVG } from '@cloud-ru/uikit-product-icons';
-import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-import { Typography } from '@snack-uikit/typography';
-
-import styles from './styles.module.scss';
-
-type CheckItemProps = WithLayoutType<{
-  label: string;
-  checked: boolean;
-  shouldHide?: boolean;
-  animated?: boolean;
-}>;
-
-const CHECKED_ITEM_DISAPPEAR_TIMEOUT = 500;
-
-export function CheckItem({ label, checked, layoutType, shouldHide = false, animated = false }: CheckItemProps) {
-  const [visible, setVisible] = useState(checked);
-
-  useEffect(() => {
-    if (checked) {
-      const timeoutId = setTimeout(() => {
-        setVisible(false);
-      }, CHECKED_ITEM_DISAPPEAR_TIMEOUT);
-
-      return () => clearTimeout(timeoutId);
-    }
-
-    setVisible(true);
-  }, [checked]);
-
-  if (shouldHide && !visible) {
-    return null;
-  }
-
-  return (
-    <div className={styles.checkItem} data-layout-type={layoutType} data-animated={animated}>
-      <CheckSVG size={16} className={styles.icon} data-checked={checked} />
-      <Typography.SansBodyM className={styles.label} data-checked={checked}>
-        {label}
-      </Typography.SansBodyM>
-    </div>
-  );
-}

package/src/components/FieldAi/components/CheckItem/index.ts

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

package/src/components/FieldAi/components/CheckItem/styles.module.scss

@@ -1,44 +0,0 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(4px);
-  }
-}
-
-.checkItem {
-  display: inline-flex;
-  gap: 10px;
-
-  &[data-layout-type='mobile'],
-  &[data-layout-type='tablet'] {
-    gap: 8px;
-  }
-
-  &[data-animated='true'] {
-    animation: shake 0.5s ease-in-out;
-  }
-}
-
-.icon {
-  flex-shrink: 0;
-  color: ste.$sys-neutral-accent-default;
-
-  &[data-checked='true'] {
-    color: ste.$sys-primary-text-light;
-  }
-}
-
-.label {
-  color: ste.$sys-neutral-text-light;
-
-  &[data-checked='true'] {
-    color: ste.$sys-primary-text-light;
-  }
-}