@vkontakte/vkui 5.6.1 → 5.6.2

package/dist/cssm/components/Alert/Alert.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useId } from '../../hooks/useId';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
 import { Platform } from '../../lib/platform';
@@ -90,6 +91,9 @@ const AlertAction = ({ action, onItemClick, ...restProps })=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */ export const Alert = ({ actions = [], actionsLayout = 'horizontal', children, className, style, text, header, onClose, dismissLabel = 'Закрыть предупреждение', ...restProps })=>{
+    const generatedId = useId();
+    const headerId = `vkui-alert-${generatedId}-header`;
+    const textId = `vkui-alert-${generatedId}-text`;
     const platform = usePlatform();
     const { isDesktop } = useAdaptivityWithJSMediaQueries();
     const { waitTransitionFinish } = useWaitTransitionFinish();
@@ -144,14 +148,14 @@ const AlertAction = ({ action, onItemClick, ...restProps })=>{
         className: classNames(styles['Alert'], platform === Platform.IOS && styles['Alert--ios'], platform === Platform.VKCOM && styles['Alert--vkcom'], resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'], closing && styles['Alert--closing'], isDesktop && styles['Alert--desktop']),
         role: "alertdialog",
         "aria-modal": true,
-        "aria-labelledby": "vkui--alert--title",
-        "aria-describedby": "vkui--alert--desc"
+        "aria-labelledby": headerId,
+        "aria-describedby": textId
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Alert__content']
     }, hasReactNode(header) && /*#__PURE__*/ React.createElement(AlertHeader, {
-        id: "vkui--alert--title"
+        id: headerId
     }, header), hasReactNode(text) && /*#__PURE__*/ React.createElement(AlertText, {
-        id: "vkui--alert--desc"
+        id: textId
     }, text), children), /*#__PURE__*/ React.createElement("div", {
         className: styles['Alert__actions']
     }, actions.map((action, i)=>/*#__PURE__*/ React.createElement(AlertAction, {

package/dist/cssm/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","styles","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","closing","setClosing","useState","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const generatedId = useId();\n\n  const headerId = `vkui-alert-${generatedId}-header`;\n  const textId = `vkui-alert-${generatedId}-text`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby={headerId}\n        aria-describedby={textId}\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useId","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","styles","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","generatedId","headerId","textId","isDesktop","waitTransitionFinish","closing","setClosing","useState","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","aria-label"],"mappings":"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"}

package/dist/cssm/components/Checkbox/Checkbox.js

@@ -10,6 +10,7 @@ import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
 import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Checkbox.module.css';
 const sizeYClassNames = {
@@ -109,7 +110,7 @@ const warn = warnOnce('Checkbox');
         className: styles['Checkbox__content']
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Checkbox__title']
-    }, /*#__PURE__*/ React.createElement("span", null, children), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Text, null, children), /*#__PURE__*/ React.createElement("div", {
         className: styles['Checkbox__titleAfter']
     }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Checkbox__description']

package/dist/cssm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <Text>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height"],"mappings":"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"}

package/dist/cssm/components/Checkbox/Checkbox.module.css

@@ -42,32 +42,6 @@
   flex-grow: 1;
   color: var(--vkui--color_text_primary);
   word-break: break-word;
-  font-weight: var(--vkui--font_weight_accent3);
-}
-
-.Checkbox--sizeY-regular:not(.Checkbox--vkcom) .Checkbox__content {
-  font-size: var(--vkui--font_headline1--font_size--regular);
-  line-height: var(--vkui--font_headline1--line_height--regular);
-}
-
-@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
-  .Checkbox--sizeY-none:not(.Checkbox--vkcom) .Checkbox__content {
-    font-size: var(--vkui--font_headline1--font_size--regular);
-    line-height: var(--vkui--font_headline1--line_height--regular);
-  }
-}
-
-.Checkbox--vkcom .Checkbox__content,
-.Checkbox--sizeY-compact .Checkbox__content {
-  font-size: var(--vkui--font_text--font_size--compact);
-  line-height: var(--vkui--font_text--line_height--compact);
-}
-
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Checkbox--sizeY-none .Checkbox__content {
-    font-size: var(--vkui--font_text--font_size--compact);
-    line-height: var(--vkui--font_text--line_height--compact);
-  }
 }
 
 .Checkbox__description {

package/dist/cssm/components/DateInput/DateInput.js

@@ -13,6 +13,7 @@ import { IconButton } from '../IconButton/IconButton';
 import { InputLike } from '../InputLike/InputLike';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
 import { Popper } from '../Popper/Popper';
+import { Text } from '../Typography/Text/Text';
 import '../InputLike/InputLike.module.css'; // Reorder css
 import styles from './DateInput.module.css';
 const sizeYClassNames = {
@@ -153,7 +154,7 @@ const getInternalValue = (value)=>{
         type: "hidden",
         name: name,
         value: value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''
-    }), /*#__PURE__*/ React.createElement("span", {
+    }), /*#__PURE__*/ React.createElement(Text, {
         className: styles['DateInput__input'],
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ React.createElement(InputLike, {

package/dist/cssm/components/DateInput/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursAriaLabel'\n      | 'changeMinutesAriaLabel'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  showNeighboringMonth,\n  size,\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  changeDayAriaLabel = 'Изменить день',\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'DD.MM.YYYY';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <span className={styles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeYearAriaLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n              {' '}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              aria-label={changeHoursAriaLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              aria-label={changeMinutesAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","showNeighboringMonth","size","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","changeHoursAriaLabel","changeMinutesAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","Fragment","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursAriaLabel'\n      | 'changeMinutesAriaLabel'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  showNeighboringMonth,\n  size,\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  changeDayAriaLabel = 'Изменить день',\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'DD.MM.YYYY';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <Text className={styles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeYearAriaLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n              {' '}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              aria-label={changeHoursAriaLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              aria-label={changeMinutesAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","styles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","showNeighboringMonth","size","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","changeHoursAriaLabel","changeMinutesAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","onKeyDown","onElementSelect","Fragment","targetRef","offsetDistance","placement","onClose"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,mBAAmB;AACtE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,iBAAiB;AAGxD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAO,oCAAoC,CAAC,cAAc;AAC1D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACZ,SAASe,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAwCA,MAAMI,iBAAiB,CAACC;IACtB,IAAIC,SAAS;IACb,IAAIC,MAAM;IACV,IAAIC,MAAM;IAEV,OAAQH;QACN,KAAK;YACHG,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACND,MAAM;YACND,SAAS;YACT;QACF,KAAK;YACHE,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACN;IACJ;IAEA,OAAO;QAAEF;QAAQC;QAAKC;IAAI;AAC5B;AAEA,MAAMC,mBAAmB,CAACC;IACxB,MAAMC,WAAW;QAAC;QAAI;QAAI;QAAI;QAAI;KAAG;IACrC,IAAID,OAAO;QACTC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QAClDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QACvDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMM,WAAW,IAAIF,QAAQ,CAAC,GAAG;QACtDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMO,QAAQ,IAAIH,QAAQ,CAAC,GAAG;QACnDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMQ,UAAU,IAAIJ,QAAQ,CAAC,GAAG;IACvD;IACA,OAAOH;AACT;AAEA;;CAEC,GACD,OAAO,MAAMQ,YAAY,CAAC,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,aAAa,EACbC,WAAW,EACXb,KAAK,EACLc,QAAQ,EACRC,oBAAoB,cAAc,EAClCC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,gBAAgB,IAAI,EACpBC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,kBAAkB,EAClBC,kBAAkB,EAClBC,oBAAoB,EACpBC,IAAI,EACJC,uBAAuB,gBAAgB,EACvCC,sBAAsB,cAAc,EACpCC,qBAAqB,eAAe,EACpCC,uBAAuB,cAAc,EACrCC,yBAAyB,iBAAiB,EAC1CC,sBAAsB,eAAe,EACrCC,wBAAwB,oBAAoB,EAC5CC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,kBAAkB,KAAK,EACvB,GAAGC,OACY;IACf,MAAMC,UAAU3E,MAAM4E,MAAM,CAAkB;IAC9C,MAAMC,YAAY7E,MAAM4E,MAAM,CAAkB;IAChD,MAAME,WAAW9E,MAAM4E,MAAM,CAAkB;IAC/C,MAAMG,WAAW/E,MAAM4E,MAAM,CAAkB;IAC/C,MAAMI,aAAahF,MAAM4E,MAAM,CAAkB;IAEjD,MAAMK,aAAa1C,aAAa,IAAI;IAEpC,MAAM2C,wBAAwBlF,MAAMmF,WAAW,CAC7C,CAACC;QACC,IAAK,IAAIC,IAAI,GAAGA,KAAKJ,YAAYI,KAAK,EAAG;YACvC,IAAID,aAAa,CAACC,EAAE,CAAC5D,MAAM,GAAGF,eAAe8D,GAAG5D,MAAM,EAAE;gBACtD;YACF;QACF;QAEA,IAAI6D,iBAAiB,CAAC,EAAEF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC;QAClF,IAAIG,OAAO;QACX,IAAIhD,YAAY;YACd+C,kBAAkB,CAAC,CAAC,EAAEF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC;YAC5DG,QAAQ;QACV;QAEA,IAAI7E,QAAQ4E,gBAAgBC,OAAO;YACjC5C,WAAWhC,MAAM2E,gBAAgBC,MAAM1D,SAAS,IAAI2D;QACtD;IACF,GACA;QAACjD;QAAY0C;QAAYtC;QAAUd;KAAM;IAG3C,MAAM4D,OAAOzF,MAAM0F,OAAO,CACxB,IAAM;YAACf;YAASE;YAAWC;YAAUC;YAAUC;SAAW,EAC1D;QAACL;QAASE;QAAWC;QAAUC;QAAUC;KAAW;IAGtD,MAAM,EACJW,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,YAAY,EACZC,aAAa,EACbX,aAAa,EACbY,aAAa,EACbC,iBAAiB,EACjBC,gBAAgB,EAChBC,KAAK,EACLC,oBAAoB,EACrB,GAAG/F,aAAa;QACf4E;QACAQ;QACArC;QACAC;QACA9B;QACAoB;QACAuC;QACAtD;QACAC;IACF;IAEA,MAAM,EAAEwE,QAAQ,MAAM,EAAE,GAAGjG;IAE3B,MAAMkG,gBAAgBhG,aAAaqF,SAASzC;IAE5C,MAAMqD,mBAAmBvG,MAAMmF,WAAW,CACxC,CAACtD;QACCc,WAAWd;QACX,IAAImB,iBAAiB,CAACT,YAAY;YAChC6D;QACF;IACF,GACA;QAACzD;QAAUyD;QAAsBpD;QAAeT;KAAW;IAG7D,qBACE,oBAAC1B;QACCgC,OAAOA;QACPC,WAAW3C,WAAWkG,UAAU9F,SAASiG,OAAO,IAAIpF,eAAe,CAACiF,MAAM,EAAEvD;QAC5EI,YAAYoD;QACZG,OACE5E,sBACE,oBAACf;YAAW4F,WAAU;YAAUC,cAAY1C;YAAqBX,SAAS6C;yBACxE,oBAAClG,oCAGH,oBAACa;YAAW4F,WAAU;YAAUC,cAAYzC;YAAuBZ,SAASwC;yBAC1E,oBAAC5F;QAIPmD,UAAUA;QACVC,SAAS9C,aAAa0F,kBAAkB5C;QACxCC,SAAS/C,aAAa0F,kBAAkB3C;QACvC,GAAGmB,KAAK;qBAET,oBAACkC;QACCC,MAAK;QACL1D,MAAMA;QACNtB,OAAOA,QAAQpB,OAAOoB,OAAOU,aAAa,qBAAqB,gBAAgB;sBAEjF,oBAACrB;QAAK4B,WAAW3B,MAAM,CAAC,mBAAmB;QAAE2F,WAAWd;qBACtD,oBAACjF;QACCU,QAAQ;QACRyB,YAAYyB;QACZnD,OAAO;QACPuF,iBAAiBd;QACjBpE,OAAOuD,aAAa,CAAC,EAAE;QACvBuB,cAAY7C;sBAEd,oBAAC9C,wBAAiB,oBAClB,oBAACD;QACCU,QAAQ;QACRyB,YAAY2B;QACZrD,OAAO;QACPuF,iBAAiBd;QACjBpE,OAAOuD,aAAa,CAAC,EAAE;QACvBuB,cAAY/C;sBAEd,oBAAC5C,wBAAiB,oBAClB,oBAACD;QACCU,QAAQ;QACRyB,YAAY4B;QACZtD,OAAO;QACPuF,iBAAiBd;QACjBpE,OAAOuD,aAAa,CAAC,EAAE;QACvBuB,cAAY9C;QAEbtB,4BACC,oBAACvC,MAAMgH,QAAQ,sBACb,oBAAChG;QAAiB8B,WAAW3B,MAAM,CAAC,iCAAiC;OAClE,oBAEH,oBAACJ;QACCU,QAAQ;QACRyB,YAAY6B;QACZvD,OAAO;QACPuF,iBAAiBd;QACjBpE,OAAOuD,aAAa,CAAC,EAAE;QACvBuB,cAAY5C;sBAEd,oBAAC/C,wBAAiB,oBAClB,oBAACD;QACCU,QAAQ;QACRyB,YAAY8B;QACZxD,OAAO;QACPuF,iBAAiBd;QACjBpE,OAAOuD,aAAa,CAAC,EAAE;QACvBuB,cAAY3C;UAKnB6B,QAAQ,CAACpB,iCACR,oBAACxD;QAAOgG,WAAWtB;QAASuB,gBAAgB;QAAGC,WAAWvE;qBACxD,oBAAChC;QACCiB,OAAOA;QACPc,UAAU4D;QACVhE,YAAYA;QACZG,aAAaA;QACbD,eAAeA;QACfD,mBAAmBA;QACnB4E,SAASrB;QACT7C,YAAY0C;QACZ7C,gBAAgBA;QAChBE,gBAAgBA;QAChBc,sBAAsBA;QACtBC,wBAAwBA;QACxBR,oBAAoBA;QACpBC,oBAAoBA;QACpBG,sBAAsBA;QACtBC,qBAAqBA;QACrBC,oBAAoBA;QACpBJ,sBAAsBA;QACtBC,MAAMA;QACNQ,UAAUA;QACVC,gBAAgBA;QAChBC,aAAaA;QACbC,aAAaA;QACbC,eAAeA;QACfC,eAAeA;;AAM3B,EAAE"}

package/dist/cssm/components/DateInput/DateInput.module.css

@@ -2,7 +2,6 @@
   flex-grow: 1;
   margin-left: 10px;
   margin-right: 14px;
-  font-size: 16px;
   z-index: var(--vkui_internal--z_index_form_field_element);
   cursor: text;
   white-space: nowrap;
@@ -19,13 +18,11 @@
 }
 
 .DateInput--sizeY-compact .DateInput__input {
-  font-size: 15px;
   margin-right: 22px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .DateInput--sizeY-none .DateInput__input {
-    font-size: 15px;
     margin-right: 22px;
   }
 }

package/dist/cssm/components/DateRangeInput/DateRangeInput.js

@@ -13,6 +13,7 @@ import { IconButton } from '../IconButton/IconButton';
 import { InputLike } from '../InputLike/InputLike';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
 import { Popper } from '../Popper/Popper';
+import { Text } from '../Typography/Text/Text';
 import styles from './DateRangeInput.module.css';
 import dateInputStyles from '../DateInput/DateInput.module.css';
 const sizeYClassNames = {
@@ -174,7 +175,7 @@ const getInternalValue = (value)=>{
         type: "hidden",
         name: name,
         value: value ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${value[1] ? format(value[1], 'DD.MM.YYYY') : ''}` : ''
-    }), /*#__PURE__*/ React.createElement("span", {
+    }), /*#__PURE__*/ React.createElement(Text, {
         className: dateInputStyles['DateInput__input'],
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ React.createElement(InputLike, {

package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'DD.MM.YYYY';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <span className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","dateInputStyles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'DD.MM.YYYY';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","styles","dateInputStyles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}

package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css

@@ -2,7 +2,6 @@
   flex-grow: 1;
   margin-left: 10px;
   margin-right: 14px;
-  font-size: 16px;
   z-index: var(--vkui_internal--z_index_form_field_element);
   cursor: text;
   white-space: nowrap;
@@ -14,13 +13,11 @@
 }
 
 .DateRangeInput--sizeY-compact .DateRangeInput__input {
-  font-size: 15px;
   margin-right: 22px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .DateRangeInput--sizeY-none .DateRangeInput__input {
-    font-size: 15px;
     margin-right: 22px;
   }
 }

package/dist/cssm/components/Radio/Radio.js

@@ -6,6 +6,7 @@ import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Radio.module.css';
 const sizeYClassNames = {
@@ -59,7 +60,7 @@ const RadioIcon = (props)=>{
         className: styles['Radio__content']
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Radio__title']
-    }, /*#__PURE__*/ React.createElement("span", null, children), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Text, null, children), /*#__PURE__*/ React.createElement("div", {
         className: styles['Radio__titleAfter']
     }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Radio__description']

package/dist/cssm/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;QAAa,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLJ,SAAS,EACTK,UAAU,EACVC,UAAU,EACVC,MAAM,EACN,GAAGC,WACQ;IACX,MAAMC,WAAWjC;IACjB,MAAM,EAAEkC,QAAQ,MAAM,EAAE,GAAGnC;IAE3B,qBACE,oBAACK;QACC+B,WAAU;QACVP,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACf2B,UAAUjC,SAASmC,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,GAAG,GAAG,MAAMnC;QACrDoC,UAAUP,UAAUO,QAAQ;QAC5BV,YAAYA;qBAEZ,oBAACvB;QACE,GAAG0B,SAAS;QACbG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,WAAWjB,MAAM,CAAC,eAAe;sBAEnC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,eAAe;qBACpC,oBAACmC,cAAMhB,yBACP,oBAACe;QAAIjB,WAAWjB,MAAM,CAAC,oBAAoB;OAAGuB,cAE/ChC,aAAa6B,8BACZ,oBAACtB;QAASmB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <Text>{children}</Text>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;QAAa,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLJ,SAAS,EACTK,UAAU,EACVC,UAAU,EACVC,MAAM,EACN,GAAGC,WACQ;IACX,MAAMC,WAAWlC;IACjB,MAAM,EAAEmC,QAAQ,MAAM,EAAE,GAAGpC;IAE3B,qBACE,oBAACK;QACCgC,WAAU;QACVP,OAAOA;QACPJ,WAAW5B,WACTW,MAAM,CAAC,QAAQ,EACf2B,UAAUlC,SAASoC,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAahC,SAASqC,GAAG,GAAG,MAAMpC;QACrDqC,UAAUP,UAAUO,QAAQ;QAC5BV,YAAYA;qBAEZ,oBAACvB;QACE,GAAG0B,SAAS;QACbG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,WAAWjB,MAAM,CAAC,eAAe;sBAEnC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,eAAe;qBACpC,oBAACF,YAAMqB,yBACP,oBAACe;QAAIjB,WAAWjB,MAAM,CAAC,oBAAoB;OAAGuB,cAE/CjC,aAAa8B,8BACZ,oBAACvB;QAASoB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}

package/dist/cssm/components/Search/Search.js

@@ -53,7 +53,7 @@ import styles from './Search.module.css';
         inputRef
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], className),
+        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Search__field']