@lidofinance/lido-ui 3.20.1 → 3.22.0

package/dist/cjs/input/Input.js

@@ -75,10 +75,12 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), hasErrorMessage && /*#__PURE__*/jsxRuntime.jsx(InputStyles.InputMessageStyle, {
       $variant: "error",
       $bordered: true,
+      $wrap: true,
       children: error
     }), hasWarningMessage && /*#__PURE__*/jsxRuntime.jsx(InputStyles.InputMessageStyle, {
       $variant: "warning",
       $bordered: true,
+      $wrap: true,
       children: warning
     }), hasSuccessMessage && /*#__PURE__*/jsxRuntime.jsx(InputStyles.InputMessageStyle, {
       $variant: "success",

package/dist/cjs/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../packages/input/Input.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  InputWrapperStyle,\n  InputContentStyle,\n  InputControlWrapperStyle,\n  InputStyle,\n  InputLeftDecoratorStyle,\n  InputRightDecoratorStyle,\n  InputMessageStyle,\n} from './InputStyles.js'\nimport { InputLabelStyle } from './LabelStyles.js'\nimport { InputProps } from './types.js'\n\nexport const Input = forwardRef(\n  (\n    {\n      label,\n      error,\n      warning,\n      success,\n      active = false,\n      fullwidth = false,\n      placeholder = ' ',\n      leftDecorator,\n      rightDecorator,\n      className,\n      style,\n      variant = 'default',\n      color = 'default',\n      id,\n      disabled = false,\n      wrapperRef,\n      children,\n      ...rest\n    }: InputProps,\n    ref?: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const hasLabel = !!label && variant === 'default'\n\n    const hasError = !!error\n    const hasErrorMessage = hasError && typeof error !== 'boolean'\n    const hasWarning = !hasError && !!warning // `error` overrides `warning`\n    const hasWarningMessage = hasWarning && typeof warning !== 'boolean'\n    const hasSuccess = !!success && !error\n    const hasSuccessMessage = hasSuccess && typeof success !== 'boolean'\n\n    const hasLeftDecorator = !!leftDecorator\n    const hasRightDecorator = !!rightDecorator\n\n    return (\n      <InputWrapperStyle\n        className={className}\n        style={style}\n        $disabled={disabled}\n        $fullwidth={fullwidth}\n        htmlFor={id}\n        ref={wrapperRef}\n      >\n        <InputContentStyle\n          $color={color}\n          $variant={variant}\n          $error={hasError}\n          $warning={hasWarning}\n          $active={active}\n          $disabled={disabled}\n        >\n          {hasLeftDecorator && (\n            <InputLeftDecoratorStyle>{leftDecorator}</InputLeftDecoratorStyle>\n          )}\n\n          <InputControlWrapperStyle>\n            <InputStyle\n              $labeled={hasLabel}\n              $color={color}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              type='text'\n              ref={ref}\n              id={id}\n              disabled={disabled}\n              {...rest}\n            />\n            {hasLabel && (\n              <InputLabelStyle $color={color}>{label}</InputLabelStyle>\n            )}\n          </InputControlWrapperStyle>\n\n          {hasRightDecorator && (\n            <InputRightDecoratorStyle>\n              {rightDecorator}\n            </InputRightDecoratorStyle>\n          )}\n        </InputContentStyle>\n\n        {hasErrorMessage && (\n          <InputMessageStyle $variant='error' $bordered>\n            {error}\n          </InputMessageStyle>\n        )}\n        {hasWarningMessage && (\n          <InputMessageStyle $variant='warning' $bordered>\n            {warning}\n          </InputMessageStyle>\n        )}\n        {hasSuccessMessage && (\n          <InputMessageStyle $variant='success' $bordered>\n            {success}\n          </InputMessageStyle>\n        )}\n      </InputWrapperStyle>\n    )\n  },\n)\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","ref","label","error","warning","success","active","fullwidth","placeholder","leftDecorator","rightDecorator","className","style","variant","color","id","disabled","wrapperRef","children","rest","hasLabel","hasError","hasErrorMessage","hasWarning","hasWarningMessage","hasSuccess","hasSuccessMessage","hasLeftDecorator","hasRightDecorator","_jsxs","InputWrapperStyle","InputContentStyle","_jsx","InputLeftDecoratorStyle","InputControlWrapperStyle","InputStyle","InputLabelStyle","InputRightDecoratorStyle","InputMessageStyle","displayName"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../packages/input/Input.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  InputWrapperStyle,\n  InputContentStyle,\n  InputControlWrapperStyle,\n  InputStyle,\n  InputLeftDecoratorStyle,\n  InputRightDecoratorStyle,\n  InputMessageStyle,\n} from './InputStyles.js'\nimport { InputLabelStyle } from './LabelStyles.js'\nimport { InputProps } from './types.js'\n\nexport const Input = forwardRef(\n  (\n    {\n      label,\n      error,\n      warning,\n      success,\n      active = false,\n      fullwidth = false,\n      placeholder = ' ',\n      leftDecorator,\n      rightDecorator,\n      className,\n      style,\n      variant = 'default',\n      color = 'default',\n      id,\n      disabled = false,\n      wrapperRef,\n      children,\n      ...rest\n    }: InputProps,\n    ref?: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const hasLabel = !!label && variant === 'default'\n\n    const hasError = !!error\n    const hasErrorMessage = hasError && typeof error !== 'boolean'\n    const hasWarning = !hasError && !!warning // `error` overrides `warning`\n    const hasWarningMessage = hasWarning && typeof warning !== 'boolean'\n    const hasSuccess = !!success && !error\n    const hasSuccessMessage = hasSuccess && typeof success !== 'boolean'\n\n    const hasLeftDecorator = !!leftDecorator\n    const hasRightDecorator = !!rightDecorator\n\n    return (\n      <InputWrapperStyle\n        className={className}\n        style={style}\n        $disabled={disabled}\n        $fullwidth={fullwidth}\n        htmlFor={id}\n        ref={wrapperRef}\n      >\n        <InputContentStyle\n          $color={color}\n          $variant={variant}\n          $error={hasError}\n          $warning={hasWarning}\n          $active={active}\n          $disabled={disabled}\n        >\n          {hasLeftDecorator && (\n            <InputLeftDecoratorStyle>{leftDecorator}</InputLeftDecoratorStyle>\n          )}\n\n          <InputControlWrapperStyle>\n            <InputStyle\n              $labeled={hasLabel}\n              $color={color}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              type='text'\n              ref={ref}\n              id={id}\n              disabled={disabled}\n              {...rest}\n            />\n            {hasLabel && (\n              <InputLabelStyle $color={color}>{label}</InputLabelStyle>\n            )}\n          </InputControlWrapperStyle>\n\n          {hasRightDecorator && (\n            <InputRightDecoratorStyle>\n              {rightDecorator}\n            </InputRightDecoratorStyle>\n          )}\n        </InputContentStyle>\n\n        {hasErrorMessage && (\n          <InputMessageStyle $variant='error' $bordered $wrap>\n            {error}\n          </InputMessageStyle>\n        )}\n        {hasWarningMessage && (\n          <InputMessageStyle $variant='warning' $bordered $wrap>\n            {warning}\n          </InputMessageStyle>\n        )}\n        {hasSuccessMessage && (\n          <InputMessageStyle $variant='success' $bordered>\n            {success}\n          </InputMessageStyle>\n        )}\n      </InputWrapperStyle>\n    )\n  },\n)\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","ref","label","error","warning","success","active","fullwidth","placeholder","leftDecorator","rightDecorator","className","style","variant","color","id","disabled","wrapperRef","children","rest","hasLabel","hasError","hasErrorMessage","hasWarning","hasWarningMessage","hasSuccess","hasSuccessMessage","hasLeftDecorator","hasRightDecorator","_jsxs","InputWrapperStyle","InputContentStyle","_jsx","InputLeftDecoratorStyle","InputControlWrapperStyle","InputStyle","InputLabelStyle","InputRightDecoratorStyle","InputMessageStyle","displayName"],"mappings":"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"}

package/dist/cjs/input/InputStyles.js

@@ -382,22 +382,27 @@ const InputMessageStyle = styledComponentsWrapper.default.span`
   return theme.borderRadiusesMap.sm;
 }}px;
   padding: 6px 10px;
-  white-space: nowrap;
+  white-space: ${_ref25 => {
+  let {
+    $wrap
+  } = _ref25;
+  return $wrap ? 'wrap' : 'nowrap';
+}};
   overflow: hidden;
   box-sizing: border-box;
   text-overflow: ellipsis;
-  max-width: ${_ref25 => {
+  max-width: ${_ref26 => {
   let {
     $bordered
-  } = _ref25;
+  } = _ref26;
   return $bordered ? 'calc(100% + 2px)' : '100%';
 }};
   z-index: 3;
 
-  ${_ref26 => {
+  ${_ref27 => {
   let {
     $variant
-  } = _ref26;
+  } = _ref27;
   return messageVariants[$variant];
 }}
 `;

package/dist/cjs/input/InputStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyles.js","sources":["../../../packages/input/InputStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputMessageVariants, InputVariants, InputColors } from './types.js'\nimport {\n  labelEmptyValueCSS,\n  labelFocusCSS,\n  labelErrorCSS,\n  InputLabelStyle,\n  labelWarningCSS,\n} from './LabelStyles.js'\n\nconst statesCSS = css`\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst activeCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst errorCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-error);\n\n    ${InputLabelStyle} {\n      ${labelErrorCSS}\n    }\n  }\n`\n\nconst warningCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-warning);\n\n    ${InputLabelStyle} {\n      ${labelWarningCSS}\n    }\n  }\n`\n\nconst wrapperColors = {\n  default: css<{ $disabled: boolean }>`\n    background: var(--lido-color-controlBg);\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-background);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-borderHover);\n          }\n    `};\n  `,\n  accent: css<{ $disabled: boolean }>`\n    background: var(--lido-color-accentControlBg);\n    border-color: var(--lido-color-accentBorder);\n    color: var(--lido-color-accentText);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-controlBg);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-accentBorderHover);\n          }\n    `};\n  `,\n}\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: inherit;\n  display: flex;\n  align-items: center;\n`\n\nexport const InputLeftDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-right: 16px;\n`\n\nexport const InputRightDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-left: 16px;\n`\n\nexport const InputWrapperStyle = styled.label<{\n  $fullwidth: boolean\n  $disabled: boolean\n}>`\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nconst contentVariants = {\n  default: css`\n    padding-top: 17px;\n    padding-bottom: 17px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      margin-top: -17px;\n      margin-bottom: -17px;\n    }\n  `,\n  small: css`\n    padding-top: 9px;\n    padding-bottom: 9px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      padding-top: -9px;\n      padding-bottom: -9px;\n    }\n  `,\n}\n\nexport const InputContentStyle = styled.span<{\n  $error: boolean\n  $warning: boolean\n  $active: boolean\n  $disabled: boolean\n  $color: InputColors\n  $variant: InputVariants\n}>`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  border: 1px solid;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  transition: border-color ${({ theme }) => theme.duration.fast} ease;\n\n  ${({ $variant }) => contentVariants[$variant]};\n  ${({ $color }) => wrapperColors[$color]};\n  ${({ $disabled }) => ($disabled ? '' : statesCSS)};\n  ${({ $active }) => ($active ? activeCSS : '')};\n  ${({ $warning }) => ($warning ? warningCSS : '')};\n  ${({ $error }) => ($error ? errorCSS : '')};\n`\n\nexport const InputControlWrapperStyle = styled.div`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n`\n\nconst labeledCSS = css`\n  &:not(:focus):placeholder-shown {\n    & + ${InputLabelStyle} {\n      ${labelEmptyValueCSS}\n    }\n\n    &::placeholder {\n      opacity: 0;\n    }\n  }\n`\n\nconst inputColors = {\n  default: css`\n    color: var(--lido-color-text);\n\n    &:disabled {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &::placeholder {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n  `,\n  accent: css`\n    color: var(--lido-color-accentText);\n    opacity: 1;\n\n    &:disabled {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &::placeholder {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n  `,\n}\n\nexport const InputStyle = styled.input<{\n  $labeled: boolean\n  $color: InputColors\n}>`\n  width: 100%;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: 1em;\n  line-height: 1.43em;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  border: none;\n  outline: none;\n  position: relative;\n  top: ${({ $labeled }) => ($labeled ? 8 : 0)}px;\n\n  &::placeholder {\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  ${({ $color }) => inputColors[$color]}\n  ${({ $labeled }) => ($labeled ? labeledCSS : '')}\n`\n\nexport const TextareaStyle = styled(InputStyle).attrs({\n  as: 'textarea',\n})`\n  resize: none;\n`\n\nconst messageVariants = {\n  error: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-errorContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-warningContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  success: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-successContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n}\n\nexport const InputMessageStyle = styled.span<{\n  $variant: InputMessageVariants\n  $bordered?: boolean\n}>`\n  margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;\n  left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;\n  position: absolute;\n  top: 100%;\n  line-height: 1.6em;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n  padding: 6px 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')};\n  z-index: 3;\n\n  ${({ $variant }) => messageVariants[$variant]}\n`\n"],"names":["statesCSS","css","InputLabelStyle","labelFocusCSS","activeCSS","errorCSS","labelErrorCSS","warningCSS","labelWarningCSS","wrapperColors","default","$disabled","accent","decoratorCSS","InputLeftDecoratorStyle","styled","span","InputRightDecoratorStyle","InputWrapperStyle","label","$fullwidth","contentVariants","small","InputContentStyle","theme","fontSizesMap","xs","borderRadiusesMap","lg","duration","fast","$variant","$color","$active","$warning","$error","InputControlWrapperStyle","div","labeledCSS","labelEmptyValueCSS","inputColors","InputStyle","input","$labeled","TextareaStyle","attrs","as","messageVariants","error","boxShadows","sm","warning","success","InputMessageStyle","$bordered","xxs"],"mappings":"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"}
+{"version":3,"file":"InputStyles.js","sources":["../../../packages/input/InputStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputMessageVariants, InputVariants, InputColors } from './types.js'\nimport {\n  labelEmptyValueCSS,\n  labelFocusCSS,\n  labelErrorCSS,\n  InputLabelStyle,\n  labelWarningCSS,\n} from './LabelStyles.js'\n\nconst statesCSS = css`\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst activeCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst errorCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-error);\n\n    ${InputLabelStyle} {\n      ${labelErrorCSS}\n    }\n  }\n`\n\nconst warningCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-warning);\n\n    ${InputLabelStyle} {\n      ${labelWarningCSS}\n    }\n  }\n`\n\nconst wrapperColors = {\n  default: css<{ $disabled: boolean }>`\n    background: var(--lido-color-controlBg);\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-background);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-borderHover);\n          }\n    `};\n  `,\n  accent: css<{ $disabled: boolean }>`\n    background: var(--lido-color-accentControlBg);\n    border-color: var(--lido-color-accentBorder);\n    color: var(--lido-color-accentText);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-controlBg);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-accentBorderHover);\n          }\n    `};\n  `,\n}\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: inherit;\n  display: flex;\n  align-items: center;\n`\n\nexport const InputLeftDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-right: 16px;\n`\n\nexport const InputRightDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-left: 16px;\n`\n\nexport const InputWrapperStyle = styled.label<{\n  $fullwidth: boolean\n  $disabled: boolean\n}>`\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nconst contentVariants = {\n  default: css`\n    padding-top: 17px;\n    padding-bottom: 17px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      margin-top: -17px;\n      margin-bottom: -17px;\n    }\n  `,\n  small: css`\n    padding-top: 9px;\n    padding-bottom: 9px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      padding-top: -9px;\n      padding-bottom: -9px;\n    }\n  `,\n}\n\nexport const InputContentStyle = styled.span<{\n  $error: boolean\n  $warning: boolean\n  $active: boolean\n  $disabled: boolean\n  $color: InputColors\n  $variant: InputVariants\n}>`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  border: 1px solid;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  transition: border-color ${({ theme }) => theme.duration.fast} ease;\n\n  ${({ $variant }) => contentVariants[$variant]};\n  ${({ $color }) => wrapperColors[$color]};\n  ${({ $disabled }) => ($disabled ? '' : statesCSS)};\n  ${({ $active }) => ($active ? activeCSS : '')};\n  ${({ $warning }) => ($warning ? warningCSS : '')};\n  ${({ $error }) => ($error ? errorCSS : '')};\n`\n\nexport const InputControlWrapperStyle = styled.div`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n`\n\nconst labeledCSS = css`\n  &:not(:focus):placeholder-shown {\n    & + ${InputLabelStyle} {\n      ${labelEmptyValueCSS}\n    }\n\n    &::placeholder {\n      opacity: 0;\n    }\n  }\n`\n\nconst inputColors = {\n  default: css`\n    color: var(--lido-color-text);\n\n    &:disabled {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &::placeholder {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n  `,\n  accent: css`\n    color: var(--lido-color-accentText);\n    opacity: 1;\n\n    &:disabled {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &::placeholder {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n  `,\n}\n\nexport const InputStyle = styled.input<{\n  $labeled: boolean\n  $color: InputColors\n}>`\n  width: 100%;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: 1em;\n  line-height: 1.43em;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  border: none;\n  outline: none;\n  position: relative;\n  top: ${({ $labeled }) => ($labeled ? 8 : 0)}px;\n\n  &::placeholder {\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  ${({ $color }) => inputColors[$color]}\n  ${({ $labeled }) => ($labeled ? labeledCSS : '')}\n`\n\nexport const TextareaStyle = styled(InputStyle).attrs({\n  as: 'textarea',\n})`\n  resize: none;\n`\n\nconst messageVariants = {\n  error: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-errorContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-warningContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  success: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-successContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n}\n\nexport const InputMessageStyle = styled.span<{\n  $variant: InputMessageVariants\n  $bordered?: boolean\n  $wrap?: boolean\n}>`\n  margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;\n  left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;\n  position: absolute;\n  top: 100%;\n  line-height: 1.6em;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n  padding: 6px 10px;\n  white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};\n  overflow: hidden;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')};\n  z-index: 3;\n\n  ${({ $variant }) => messageVariants[$variant]}\n`\n"],"names":["statesCSS","css","InputLabelStyle","labelFocusCSS","activeCSS","errorCSS","labelErrorCSS","warningCSS","labelWarningCSS","wrapperColors","default","$disabled","accent","decoratorCSS","InputLeftDecoratorStyle","styled","span","InputRightDecoratorStyle","InputWrapperStyle","label","$fullwidth","contentVariants","small","InputContentStyle","theme","fontSizesMap","xs","borderRadiusesMap","lg","duration","fast","$variant","$color","$active","$warning","$error","InputControlWrapperStyle","div","labeledCSS","labelEmptyValueCSS","inputColors","InputStyle","input","$labeled","TextareaStyle","attrs","as","messageVariants","error","boxShadows","sm","warning","success","InputMessageStyle","$bordered","xxs","$wrap"],"mappings":"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"}

package/dist/esm/input/Input.mjs

@@ -71,10 +71,12 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     }), hasErrorMessage && /*#__PURE__*/jsx(InputMessageStyle, {
       $variant: "error",
       $bordered: true,
+      $wrap: true,
       children: error
     }), hasWarningMessage && /*#__PURE__*/jsx(InputMessageStyle, {
       $variant: "warning",
       $bordered: true,
+      $wrap: true,
       children: warning
     }), hasSuccessMessage && /*#__PURE__*/jsx(InputMessageStyle, {
       $variant: "success",

package/dist/esm/input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../packages/input/Input.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  InputWrapperStyle,\n  InputContentStyle,\n  InputControlWrapperStyle,\n  InputStyle,\n  InputLeftDecoratorStyle,\n  InputRightDecoratorStyle,\n  InputMessageStyle,\n} from './InputStyles.js'\nimport { InputLabelStyle } from './LabelStyles.js'\nimport { InputProps } from './types.js'\n\nexport const Input = forwardRef(\n  (\n    {\n      label,\n      error,\n      warning,\n      success,\n      active = false,\n      fullwidth = false,\n      placeholder = ' ',\n      leftDecorator,\n      rightDecorator,\n      className,\n      style,\n      variant = 'default',\n      color = 'default',\n      id,\n      disabled = false,\n      wrapperRef,\n      children,\n      ...rest\n    }: InputProps,\n    ref?: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const hasLabel = !!label && variant === 'default'\n\n    const hasError = !!error\n    const hasErrorMessage = hasError && typeof error !== 'boolean'\n    const hasWarning = !hasError && !!warning // `error` overrides `warning`\n    const hasWarningMessage = hasWarning && typeof warning !== 'boolean'\n    const hasSuccess = !!success && !error\n    const hasSuccessMessage = hasSuccess && typeof success !== 'boolean'\n\n    const hasLeftDecorator = !!leftDecorator\n    const hasRightDecorator = !!rightDecorator\n\n    return (\n      <InputWrapperStyle\n        className={className}\n        style={style}\n        $disabled={disabled}\n        $fullwidth={fullwidth}\n        htmlFor={id}\n        ref={wrapperRef}\n      >\n        <InputContentStyle\n          $color={color}\n          $variant={variant}\n          $error={hasError}\n          $warning={hasWarning}\n          $active={active}\n          $disabled={disabled}\n        >\n          {hasLeftDecorator && (\n            <InputLeftDecoratorStyle>{leftDecorator}</InputLeftDecoratorStyle>\n          )}\n\n          <InputControlWrapperStyle>\n            <InputStyle\n              $labeled={hasLabel}\n              $color={color}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              type='text'\n              ref={ref}\n              id={id}\n              disabled={disabled}\n              {...rest}\n            />\n            {hasLabel && (\n              <InputLabelStyle $color={color}>{label}</InputLabelStyle>\n            )}\n          </InputControlWrapperStyle>\n\n          {hasRightDecorator && (\n            <InputRightDecoratorStyle>\n              {rightDecorator}\n            </InputRightDecoratorStyle>\n          )}\n        </InputContentStyle>\n\n        {hasErrorMessage && (\n          <InputMessageStyle $variant='error' $bordered>\n            {error}\n          </InputMessageStyle>\n        )}\n        {hasWarningMessage && (\n          <InputMessageStyle $variant='warning' $bordered>\n            {warning}\n          </InputMessageStyle>\n        )}\n        {hasSuccessMessage && (\n          <InputMessageStyle $variant='success' $bordered>\n            {success}\n          </InputMessageStyle>\n        )}\n      </InputWrapperStyle>\n    )\n  },\n)\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","ref","label","error","warning","success","active","fullwidth","placeholder","leftDecorator","rightDecorator","className","style","variant","color","id","disabled","wrapperRef","children","rest","hasLabel","hasError","hasErrorMessage","hasWarning","hasWarningMessage","hasSuccess","hasSuccessMessage","hasLeftDecorator","hasRightDecorator","_jsxs","_jsx","displayName"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","sources":["../../../packages/input/Input.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  InputWrapperStyle,\n  InputContentStyle,\n  InputControlWrapperStyle,\n  InputStyle,\n  InputLeftDecoratorStyle,\n  InputRightDecoratorStyle,\n  InputMessageStyle,\n} from './InputStyles.js'\nimport { InputLabelStyle } from './LabelStyles.js'\nimport { InputProps } from './types.js'\n\nexport const Input = forwardRef(\n  (\n    {\n      label,\n      error,\n      warning,\n      success,\n      active = false,\n      fullwidth = false,\n      placeholder = ' ',\n      leftDecorator,\n      rightDecorator,\n      className,\n      style,\n      variant = 'default',\n      color = 'default',\n      id,\n      disabled = false,\n      wrapperRef,\n      children,\n      ...rest\n    }: InputProps,\n    ref?: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const hasLabel = !!label && variant === 'default'\n\n    const hasError = !!error\n    const hasErrorMessage = hasError && typeof error !== 'boolean'\n    const hasWarning = !hasError && !!warning // `error` overrides `warning`\n    const hasWarningMessage = hasWarning && typeof warning !== 'boolean'\n    const hasSuccess = !!success && !error\n    const hasSuccessMessage = hasSuccess && typeof success !== 'boolean'\n\n    const hasLeftDecorator = !!leftDecorator\n    const hasRightDecorator = !!rightDecorator\n\n    return (\n      <InputWrapperStyle\n        className={className}\n        style={style}\n        $disabled={disabled}\n        $fullwidth={fullwidth}\n        htmlFor={id}\n        ref={wrapperRef}\n      >\n        <InputContentStyle\n          $color={color}\n          $variant={variant}\n          $error={hasError}\n          $warning={hasWarning}\n          $active={active}\n          $disabled={disabled}\n        >\n          {hasLeftDecorator && (\n            <InputLeftDecoratorStyle>{leftDecorator}</InputLeftDecoratorStyle>\n          )}\n\n          <InputControlWrapperStyle>\n            <InputStyle\n              $labeled={hasLabel}\n              $color={color}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              type='text'\n              ref={ref}\n              id={id}\n              disabled={disabled}\n              {...rest}\n            />\n            {hasLabel && (\n              <InputLabelStyle $color={color}>{label}</InputLabelStyle>\n            )}\n          </InputControlWrapperStyle>\n\n          {hasRightDecorator && (\n            <InputRightDecoratorStyle>\n              {rightDecorator}\n            </InputRightDecoratorStyle>\n          )}\n        </InputContentStyle>\n\n        {hasErrorMessage && (\n          <InputMessageStyle $variant='error' $bordered $wrap>\n            {error}\n          </InputMessageStyle>\n        )}\n        {hasWarningMessage && (\n          <InputMessageStyle $variant='warning' $bordered $wrap>\n            {warning}\n          </InputMessageStyle>\n        )}\n        {hasSuccessMessage && (\n          <InputMessageStyle $variant='success' $bordered>\n            {success}\n          </InputMessageStyle>\n        )}\n      </InputWrapperStyle>\n    )\n  },\n)\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","ref","label","error","warning","success","active","fullwidth","placeholder","leftDecorator","rightDecorator","className","style","variant","color","id","disabled","wrapperRef","children","rest","hasLabel","hasError","hasErrorMessage","hasWarning","hasWarningMessage","hasSuccess","hasSuccessMessage","hasLeftDecorator","hasRightDecorator","_jsxs","_jsx","displayName"],"mappings":"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"}

package/dist/esm/input/InputStyles.mjs

@@ -378,22 +378,27 @@ const InputMessageStyle = styled.span`
   return theme.borderRadiusesMap.sm;
 }}px;
   padding: 6px 10px;
-  white-space: nowrap;
+  white-space: ${_ref25 => {
+  let {
+    $wrap
+  } = _ref25;
+  return $wrap ? 'wrap' : 'nowrap';
+}};
   overflow: hidden;
   box-sizing: border-box;
   text-overflow: ellipsis;
-  max-width: ${_ref25 => {
+  max-width: ${_ref26 => {
   let {
     $bordered
-  } = _ref25;
+  } = _ref26;
   return $bordered ? 'calc(100% + 2px)' : '100%';
 }};
   z-index: 3;
 
-  ${_ref26 => {
+  ${_ref27 => {
   let {
     $variant
-  } = _ref26;
+  } = _ref27;
   return messageVariants[$variant];
 }}
 `;

package/dist/esm/input/InputStyles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyles.mjs","sources":["../../../packages/input/InputStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputMessageVariants, InputVariants, InputColors } from './types.js'\nimport {\n  labelEmptyValueCSS,\n  labelFocusCSS,\n  labelErrorCSS,\n  InputLabelStyle,\n  labelWarningCSS,\n} from './LabelStyles.js'\n\nconst statesCSS = css`\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst activeCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst errorCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-error);\n\n    ${InputLabelStyle} {\n      ${labelErrorCSS}\n    }\n  }\n`\n\nconst warningCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-warning);\n\n    ${InputLabelStyle} {\n      ${labelWarningCSS}\n    }\n  }\n`\n\nconst wrapperColors = {\n  default: css<{ $disabled: boolean }>`\n    background: var(--lido-color-controlBg);\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-background);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-borderHover);\n          }\n    `};\n  `,\n  accent: css<{ $disabled: boolean }>`\n    background: var(--lido-color-accentControlBg);\n    border-color: var(--lido-color-accentBorder);\n    color: var(--lido-color-accentText);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-controlBg);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-accentBorderHover);\n          }\n    `};\n  `,\n}\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: inherit;\n  display: flex;\n  align-items: center;\n`\n\nexport const InputLeftDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-right: 16px;\n`\n\nexport const InputRightDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-left: 16px;\n`\n\nexport const InputWrapperStyle = styled.label<{\n  $fullwidth: boolean\n  $disabled: boolean\n}>`\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nconst contentVariants = {\n  default: css`\n    padding-top: 17px;\n    padding-bottom: 17px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      margin-top: -17px;\n      margin-bottom: -17px;\n    }\n  `,\n  small: css`\n    padding-top: 9px;\n    padding-bottom: 9px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      padding-top: -9px;\n      padding-bottom: -9px;\n    }\n  `,\n}\n\nexport const InputContentStyle = styled.span<{\n  $error: boolean\n  $warning: boolean\n  $active: boolean\n  $disabled: boolean\n  $color: InputColors\n  $variant: InputVariants\n}>`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  border: 1px solid;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  transition: border-color ${({ theme }) => theme.duration.fast} ease;\n\n  ${({ $variant }) => contentVariants[$variant]};\n  ${({ $color }) => wrapperColors[$color]};\n  ${({ $disabled }) => ($disabled ? '' : statesCSS)};\n  ${({ $active }) => ($active ? activeCSS : '')};\n  ${({ $warning }) => ($warning ? warningCSS : '')};\n  ${({ $error }) => ($error ? errorCSS : '')};\n`\n\nexport const InputControlWrapperStyle = styled.div`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n`\n\nconst labeledCSS = css`\n  &:not(:focus):placeholder-shown {\n    & + ${InputLabelStyle} {\n      ${labelEmptyValueCSS}\n    }\n\n    &::placeholder {\n      opacity: 0;\n    }\n  }\n`\n\nconst inputColors = {\n  default: css`\n    color: var(--lido-color-text);\n\n    &:disabled {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &::placeholder {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n  `,\n  accent: css`\n    color: var(--lido-color-accentText);\n    opacity: 1;\n\n    &:disabled {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &::placeholder {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n  `,\n}\n\nexport const InputStyle = styled.input<{\n  $labeled: boolean\n  $color: InputColors\n}>`\n  width: 100%;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: 1em;\n  line-height: 1.43em;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  border: none;\n  outline: none;\n  position: relative;\n  top: ${({ $labeled }) => ($labeled ? 8 : 0)}px;\n\n  &::placeholder {\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  ${({ $color }) => inputColors[$color]}\n  ${({ $labeled }) => ($labeled ? labeledCSS : '')}\n`\n\nexport const TextareaStyle = styled(InputStyle).attrs({\n  as: 'textarea',\n})`\n  resize: none;\n`\n\nconst messageVariants = {\n  error: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-errorContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-warningContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  success: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-successContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n}\n\nexport const InputMessageStyle = styled.span<{\n  $variant: InputMessageVariants\n  $bordered?: boolean\n}>`\n  margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;\n  left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;\n  position: absolute;\n  top: 100%;\n  line-height: 1.6em;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n  padding: 6px 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')};\n  z-index: 3;\n\n  ${({ $variant }) => messageVariants[$variant]}\n`\n"],"names":["statesCSS","css","InputLabelStyle","labelFocusCSS","activeCSS","errorCSS","labelErrorCSS","warningCSS","labelWarningCSS","wrapperColors","default","$disabled","accent","decoratorCSS","InputLeftDecoratorStyle","styled","span","InputRightDecoratorStyle","InputWrapperStyle","label","$fullwidth","contentVariants","small","InputContentStyle","theme","fontSizesMap","xs","borderRadiusesMap","lg","duration","fast","$variant","$color","$active","$warning","$error","InputControlWrapperStyle","div","labeledCSS","labelEmptyValueCSS","inputColors","InputStyle","input","$labeled","TextareaStyle","attrs","as","messageVariants","error","boxShadows","sm","warning","success","InputMessageStyle","$bordered","xxs"],"mappings":"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"}
+{"version":3,"file":"InputStyles.mjs","sources":["../../../packages/input/InputStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputMessageVariants, InputVariants, InputColors } from './types.js'\nimport {\n  labelEmptyValueCSS,\n  labelFocusCSS,\n  labelErrorCSS,\n  InputLabelStyle,\n  labelWarningCSS,\n} from './LabelStyles.js'\n\nconst statesCSS = css`\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst activeCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst errorCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-error);\n\n    ${InputLabelStyle} {\n      ${labelErrorCSS}\n    }\n  }\n`\n\nconst warningCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-warning);\n\n    ${InputLabelStyle} {\n      ${labelWarningCSS}\n    }\n  }\n`\n\nconst wrapperColors = {\n  default: css<{ $disabled: boolean }>`\n    background: var(--lido-color-controlBg);\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-background);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-borderHover);\n          }\n    `};\n  `,\n  accent: css<{ $disabled: boolean }>`\n    background: var(--lido-color-accentControlBg);\n    border-color: var(--lido-color-accentBorder);\n    color: var(--lido-color-accentText);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-controlBg);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-accentBorderHover);\n          }\n    `};\n  `,\n}\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: inherit;\n  display: flex;\n  align-items: center;\n`\n\nexport const InputLeftDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-right: 16px;\n`\n\nexport const InputRightDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-left: 16px;\n`\n\nexport const InputWrapperStyle = styled.label<{\n  $fullwidth: boolean\n  $disabled: boolean\n}>`\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nconst contentVariants = {\n  default: css`\n    padding-top: 17px;\n    padding-bottom: 17px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      margin-top: -17px;\n      margin-bottom: -17px;\n    }\n  `,\n  small: css`\n    padding-top: 9px;\n    padding-bottom: 9px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      padding-top: -9px;\n      padding-bottom: -9px;\n    }\n  `,\n}\n\nexport const InputContentStyle = styled.span<{\n  $error: boolean\n  $warning: boolean\n  $active: boolean\n  $disabled: boolean\n  $color: InputColors\n  $variant: InputVariants\n}>`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  border: 1px solid;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  transition: border-color ${({ theme }) => theme.duration.fast} ease;\n\n  ${({ $variant }) => contentVariants[$variant]};\n  ${({ $color }) => wrapperColors[$color]};\n  ${({ $disabled }) => ($disabled ? '' : statesCSS)};\n  ${({ $active }) => ($active ? activeCSS : '')};\n  ${({ $warning }) => ($warning ? warningCSS : '')};\n  ${({ $error }) => ($error ? errorCSS : '')};\n`\n\nexport const InputControlWrapperStyle = styled.div`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n`\n\nconst labeledCSS = css`\n  &:not(:focus):placeholder-shown {\n    & + ${InputLabelStyle} {\n      ${labelEmptyValueCSS}\n    }\n\n    &::placeholder {\n      opacity: 0;\n    }\n  }\n`\n\nconst inputColors = {\n  default: css`\n    color: var(--lido-color-text);\n\n    &:disabled {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &::placeholder {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n  `,\n  accent: css`\n    color: var(--lido-color-accentText);\n    opacity: 1;\n\n    &:disabled {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &::placeholder {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n  `,\n}\n\nexport const InputStyle = styled.input<{\n  $labeled: boolean\n  $color: InputColors\n}>`\n  width: 100%;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: 1em;\n  line-height: 1.43em;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  border: none;\n  outline: none;\n  position: relative;\n  top: ${({ $labeled }) => ($labeled ? 8 : 0)}px;\n\n  &::placeholder {\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  ${({ $color }) => inputColors[$color]}\n  ${({ $labeled }) => ($labeled ? labeledCSS : '')}\n`\n\nexport const TextareaStyle = styled(InputStyle).attrs({\n  as: 'textarea',\n})`\n  resize: none;\n`\n\nconst messageVariants = {\n  error: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-errorContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-warningContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  success: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-successContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n}\n\nexport const InputMessageStyle = styled.span<{\n  $variant: InputMessageVariants\n  $bordered?: boolean\n  $wrap?: boolean\n}>`\n  margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;\n  left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;\n  position: absolute;\n  top: 100%;\n  line-height: 1.6em;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n  padding: 6px 10px;\n  white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};\n  overflow: hidden;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')};\n  z-index: 3;\n\n  ${({ $variant }) => messageVariants[$variant]}\n`\n"],"names":["statesCSS","css","InputLabelStyle","labelFocusCSS","activeCSS","errorCSS","labelErrorCSS","warningCSS","labelWarningCSS","wrapperColors","default","$disabled","accent","decoratorCSS","InputLeftDecoratorStyle","styled","span","InputRightDecoratorStyle","InputWrapperStyle","label","$fullwidth","contentVariants","small","InputContentStyle","theme","fontSizesMap","xs","borderRadiusesMap","lg","duration","fast","$variant","$color","$active","$warning","$error","InputControlWrapperStyle","div","labeledCSS","labelEmptyValueCSS","inputColors","InputStyle","input","$labeled","TextareaStyle","attrs","as","messageVariants","error","boxShadows","sm","warning","success","InputMessageStyle","$bordered","xxs","$wrap"],"mappings":"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"}

package/dist/types/input/InputStyles.d.ts

@@ -27,5 +27,6 @@ export declare const TextareaStyle: import("styled-components").StyledComponent<
 export declare const InputMessageStyle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     $variant: InputMessageVariants;
     $bordered?: boolean | undefined;
+    $wrap?: boolean | undefined;
 }, never>;
 //# sourceMappingURL=InputStyles.d.ts.map

package/dist/types/input/InputStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyles.d.ts","sourceRoot":"","sources":["../../../packages/input/InputStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAoG7E,eAAO,MAAM,uBAAuB,0GAGnC,CAAA;AAED,eAAO,MAAM,wBAAwB,0GAGpC,CAAA;AAED,eAAO,MAAM,iBAAiB;gBAChB,OAAO;eACR,OAAO;SAQnB,CAAA;AAuBD,eAAO,MAAM,iBAAiB;YACpB,OAAO;cACL,OAAO;aACR,OAAO;eACL,OAAO;YACV,WAAW;cACT,aAAa;SAmBxB,CAAA;AAED,eAAO,MAAM,wBAAwB,yGAIpC,CAAA;AAgED,eAAO,MAAM,UAAU;cACX,OAAO;YACT,WAAW;SAsBpB,CAAA;AAED,eAAO,MAAM,aAAa;cAzBd,OAAO;YACT,WAAW;;;QA4BpB,CAAA;AAuBD,eAAO,MAAM,iBAAiB;cAClB,oBAAoB;;SAoB/B,CAAA"}
+{"version":3,"file":"InputStyles.d.ts","sourceRoot":"","sources":["../../../packages/input/InputStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAoG7E,eAAO,MAAM,uBAAuB,0GAGnC,CAAA;AAED,eAAO,MAAM,wBAAwB,0GAGpC,CAAA;AAED,eAAO,MAAM,iBAAiB;gBAChB,OAAO;eACR,OAAO;SAQnB,CAAA;AAuBD,eAAO,MAAM,iBAAiB;YACpB,OAAO;cACL,OAAO;aACR,OAAO;eACL,OAAO;YACV,WAAW;cACT,aAAa;SAmBxB,CAAA;AAED,eAAO,MAAM,wBAAwB,yGAIpC,CAAA;AAgED,eAAO,MAAM,UAAU;cACX,OAAO;YACT,WAAW;SAsBpB,CAAA;AAED,eAAO,MAAM,aAAa;cAzBd,OAAO;YACT,WAAW;;;QA4BpB,CAAA;AAuBD,eAAO,MAAM,iBAAiB;cAClB,oBAAoB;;;SAqB/B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/lido-ui",
-  "version": "3.20.1",
+  "version": "3.22.0",
   "homepage": "https://github.com/lidofinance/ui",
   "repository": {
     "type": "git",
@@ -9,6 +9,9 @@
   "bugs": {
     "url": "https://github.com/lidofinance/ui/issues"
   },
+  "engines": {
+    "node": ">=20.0.0 <21.0.0"
+  },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {