@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/cjs/components/Input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Input.styles.ts"],"names":["styles","wrapper","css","root","t","inputBg","inputBorderWidth","inputBorderColor","inputBorderTopColor","inputShadow","inputColor","inputWidth","borderless","useDefaultColor","inputIconColor","focus","inputBorderColorFocus","inputFocusShadow","input","inputPlaceholderColorLight","focusFallback","inputOutlineWidth","inputFocusOutline","placeholder","inputPlaceholderColor","inputTextColor","warning","inputBorderColorWarning","warningFallback","error","inputBorderColorError","errorFallback","disabled","inputDisabledBg","inputDisabledBorderColor","icon","inputTextColorDisabled","blink","blinkAnimation","keyframes","inputBlinkColor","sizeSmall","inputFontSizeSmall","inputLineHeightSmall","inputPaddingYSmall","inputPaddingXSmall","inputHeightSmall","inputBorderRadiusSmall","sizeSmallFallback","sizeMedium","inputFontSizeMedium","inputLineHeightMedium","inputPaddingYMedium","inputPaddingXMedium","inputHeightMedium","inputBorderRadiusMedium","sizeMediumFallback","sizeLarge","inputFontSizeLarge","inputLineHeightLarge","inputHeightLarge","inputPaddingYLarge","inputPaddingXLarge","inputBorderRadiusLarge","sizeLargeFallback","prefix","suffix","sideContainer","rightContainer","leftIconSmall","inputIconSizeSmall","inputIconGapSmall","rightIconSmall","leftIconMedium","inputIconSizeMedium","inputIconGapMedium","rightIconMedium","leftIconLarge","inputIconSizeLarge","inputIconGapLarge","rightIconLarge","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, keyframes, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\nimport { resetText } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  wrapper() {\r\n    return css`\r\n      align-items: center;\r\n      display: flex;\r\n      margin: 0;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n      position: relative;\r\n      text-overflow: clip;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n\r\n      &::before {\r\n        content: '\\\\A0';\r\n        display: inline-block;\r\n        width: 0;\r\n      }\r\n    `;\r\n  },\r\n\r\n  root(t: Theme) {\r\n    return css`\r\n      ${resetText()};\r\n\r\n      align-items: center;\r\n      background-clip: padding-box;\r\n      background-color: ${t.inputBg};\r\n      border: ${t.inputBorderWidth} solid ${t.inputBorderColor};\r\n      border-top-color: ${t.inputBorderTopColor};\r\n      box-shadow: ${t.inputShadow};\r\n      box-sizing: border-box;\r\n      color: ${t.inputColor};\r\n      cursor: text;\r\n      display: inline-flex;\r\n      outline: none;\r\n      position: relative;\r\n      width: ${t.inputWidth};\r\n\r\n      & * {\r\n        box-sizing: border-box;\r\n      }\r\n    `;\r\n  },\r\n\r\n  borderless() {\r\n    return css`\r\n      box-shadow: none !important;\r\n      border-color: transparent !important;\r\n    `;\r\n  },\r\n\r\n  useDefaultColor(t: Theme) {\r\n    return css`\r\n      color: ${t.inputIconColor};\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      border-color: ${t.inputBorderColorFocus};\r\n      box-shadow: ${t.inputFocusShadow};\r\n      outline: none;\r\n      z-index: 2;\r\n\r\n      ${cssName(styles.input(t))}:-moz-placeholder {\r\n        color: ${t.inputPlaceholderColorLight};\r\n      }\r\n      ${cssName(styles.input(t))}::-moz-placeholder {\r\n        color: ${t.inputPlaceholderColorLight};\r\n      }\r\n      ${cssName(styles.input(t))}::placeholder {\r\n        color: ${t.inputPlaceholderColorLight};\r\n      }\r\n    `;\r\n  },\r\n\r\n  focusFallback(t: Theme) {\r\n    return css`\r\n      box-shadow: none;\r\n      outline: ${t.inputOutlineWidth} solid ${t.inputFocusOutline};\r\n    `;\r\n  },\r\n\r\n  placeholder(t: Theme) {\r\n    return css`\r\n      -ms-user-select: none;\r\n      color: ${t.inputPlaceholderColor};\r\n      cursor: text;\r\n      font-size: inherit;\r\n      height: 100%;\r\n      left: 0;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      position: absolute;\r\n      top: 0;\r\n      user-select: none;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n\r\n      ${cssName(styles.focus(t))} & {\r\n        color: ${t.inputPlaceholderColorLight};\r\n      }\r\n    `;\r\n  },\r\n\r\n  input(t: Theme) {\r\n    return css`\r\n      -webkit-appearance: none;\r\n      background: transparent;\r\n      border: 0 none;\r\n      color: ${t.inputTextColor};\r\n      font: inherit;\r\n      line-height: inherit;\r\n      margin: 0;\r\n      outline: none;\r\n      padding: 0;\r\n      text-overflow: clip;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n\r\n      &:-moz-placeholder {\r\n        opacity: 1;\r\n      }\r\n      &::-moz-placeholder {\r\n        opacity: 1;\r\n      }\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n      &:-moz-placeholder {\r\n        color: ${t.inputPlaceholderColor};\r\n      }\r\n      &::-moz-placeholder {\r\n        color: ${t.inputPlaceholderColor};\r\n      }\r\n      &::placeholder {\r\n        color: ${t.inputPlaceholderColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      & {\r\n        border-color: ${t.inputBorderColorWarning} !important;\r\n        box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorWarning} !important;\r\n        z-index: 2;\r\n      }\r\n    `;\r\n  },\r\n\r\n  warningFallback(t: Theme) {\r\n    return css`\r\n      box-shadow: none !important;\r\n      outline: ${t.inputBorderWidth} solid ${t.inputBorderColorWarning} !important;\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      border-color: ${t.inputBorderColorError} !important;\r\n      box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorError} !important;\r\n      z-index: 2;\r\n    `;\r\n  },\r\n\r\n  errorFallback(t: Theme) {\r\n    return css`\r\n      box-shadow: none !important;\r\n      outline: ${t.inputBorderWidth} solid ${t.inputBorderColorError} !important;\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: ${t.inputDisabledBg};\r\n      border-color: ${t.inputDisabledBorderColor} !important;\r\n      box-shadow: none;\r\n\r\n      ${cssName(styles.icon())} {\r\n        cursor: default;\r\n      }\r\n      ${cssName(styles.input(t))} {\r\n        color: ${t.inputTextColorDisabled};\r\n        pointer-events: none;\r\n        /* fix text color in safari */\r\n        -webkit-text-fill-color: currentcolor;\r\n      }\r\n      ${cssName(styles.input(t))}:-moz-placeholder {\r\n        -webkit-text-fill-color: ${t.inputPlaceholderColor};\r\n      }\r\n      ${cssName(styles.input(t))}::-moz-placeholder {\r\n        -webkit-text-fill-color: ${t.inputPlaceholderColor};\r\n      }\r\n      ${cssName(styles.input(t))}::placeholder {\r\n        -webkit-text-fill-color: ${t.inputPlaceholderColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  blink(t: Theme) {\r\n    const blinkAnimation = keyframes`\r\n    0% {\r\n      background-color: ${t.inputBlinkColor};\r\n    }\r\n  `;\r\n    return css`\r\n      animation: ${blinkAnimation} 0.15s ease-in;\r\n    `;\r\n  },\r\n\r\n  sizeSmall(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        font-size: ${t.inputFontSizeSmall};\r\n        line-height: ${t.inputLineHeightSmall} !important;\r\n        padding-top: ${t.inputPaddingYSmall};\r\n        padding-bottom: ${t.inputPaddingYSmall};\r\n        padding-left: ${t.inputPaddingXSmall};\r\n        padding-right: ${t.inputPaddingXSmall};\r\n        height: ${t.inputHeightSmall};\r\n        border-radius: ${t.inputBorderRadiusSmall};\r\n      }\r\n    `;\r\n  },\r\n\r\n  sizeSmallFallback(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        padding-top: ${shift(t.inputPaddingYSmall, '-1')};\r\n        padding-bottom: ${shift(t.inputPaddingYSmall, '1')};\r\n        padding-left: ${t.inputPaddingXSmall};\r\n        padding-right: ${t.inputPaddingXSmall};\r\n        line-height: normal !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  sizeMedium(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        font-size: ${t.inputFontSizeMedium};\r\n        line-height: ${t.inputLineHeightMedium};\r\n        padding-top: ${t.inputPaddingYMedium};\r\n        padding-bottom: ${t.inputPaddingYMedium};\r\n        padding-left: ${t.inputPaddingXMedium};\r\n        padding-right: ${t.inputPaddingXMedium};\r\n        height: ${t.inputHeightMedium};\r\n        border-radius: ${t.inputBorderRadiusMedium};\r\n      }\r\n    `;\r\n  },\r\n\r\n  sizeMediumFallback(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        padding-top: ${shift(t.inputPaddingYMedium, '-1')};\r\n        padding-bottom: ${shift(t.inputPaddingYMedium, '1')};\r\n        padding-left: ${t.inputPaddingXMedium};\r\n        padding-right: ${t.inputPaddingXMedium};\r\n        line-height: normal !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  sizeLarge(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        font-size: ${t.inputFontSizeLarge};\r\n        line-height: ${t.inputLineHeightLarge};\r\n        height: ${t.inputHeightLarge};\r\n        padding-top: ${shift(t.inputPaddingYLarge, '-1')};\r\n        padding-bottom: ${shift(t.inputPaddingYLarge, '1')};\r\n        padding-left: ${t.inputPaddingXLarge};\r\n        padding-right: ${t.inputPaddingXLarge};\r\n        border-radius: ${t.inputBorderRadiusLarge};\r\n      }\r\n    `;\r\n  },\r\n\r\n  sizeLargeFallback(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        padding-top: ${shift(t.inputPaddingYLarge, '-2')};\r\n        padding-bottom: ${shift(t.inputPaddingYLarge, '2')};\r\n        padding-left: ${t.inputPaddingXLarge};\r\n        padding-right: ${t.inputPaddingXLarge};\r\n        line-height: normal !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  prefix(t: Theme) {\r\n    return css`\r\n      color: ${t.inputPlaceholderColor};\r\n    `;\r\n  },\r\n\r\n  suffix(t: Theme) {\r\n    return css`\r\n      color: ${t.inputPlaceholderColor};\r\n    `;\r\n  },\r\n\r\n  sideContainer() {\r\n    return css`\r\n      align-items: center;\r\n      display: flex;\r\n      flex-shrink: 0;\r\n      height: 100%;\r\n\r\n      &::before {\r\n        content: '\\\\a0';\r\n        display: inline-block;\r\n        width: 0;\r\n      }\r\n    `;\r\n  },\r\n\r\n  rightContainer() {\r\n    return css`\r\n      justify-self: flex-end;\r\n      margin: 0 0 0 auto;\r\n      padding-left: 0;\r\n    `;\r\n  },\r\n\r\n  icon() {\r\n    return css`\r\n      flex-shrink: 0;\r\n      cursor: text;\r\n      z-index: 2;\r\n      text-align: center;\r\n      box-sizing: content-box !important;\r\n    `;\r\n  },\r\n\r\n  leftIconSmall(t: Theme) {\r\n    return css`\r\n      width: ${t.inputIconSizeSmall};\r\n      padding-right: ${t.inputIconGapSmall};\r\n    `;\r\n  },\r\n\r\n  rightIconSmall(t: Theme) {\r\n    return css`\r\n      width: ${t.inputIconSizeSmall};\r\n      padding-left: ${t.inputIconGapSmall};\r\n    `;\r\n  },\r\n\r\n  leftIconMedium(t: Theme) {\r\n    return css`\r\n      width: ${t.inputIconSizeMedium};\r\n      padding-right: ${t.inputIconGapMedium};\r\n    `;\r\n  },\r\n\r\n  rightIconMedium(t: Theme) {\r\n    return css`\r\n      width: ${t.inputIconSizeMedium};\r\n      padding-left: ${t.inputIconGapMedium};\r\n    `;\r\n  },\r\n\r\n  leftIconLarge(t: Theme) {\r\n    return css`\r\n      width: ${t.inputIconSizeLarge};\r\n      padding-right: ${t.inputIconGapLarge};\r\n    `;\r\n  },\r\n\r\n  rightIconLarge(t: Theme) {\r\n    return css`\r\n      width: ${t.inputIconSizeLarge};\r\n      padding-left: ${t.inputIconGapLarge};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Input.styles.ts"],"names":["shouldCompensateFontFamily","fontFamilyCompensation","Boolean","parseInt","getStyles","emotion","wrapper","css","root","t","inputBackgroundClip","inputBg","inputBorderWidth","inputBorderColor","inputBorderTopColor","transitionDuration","transitionTimingFunction","inputShadow","inputColor","inputWidth","hovering","inputBorderColorHover","borderless","useDefaultColor","inputIconColor","focus","inputFocusedBg","inputBorderColorFocus","inputFocusShadow","focusFallback","inputOutlineWidth","inputFocusOutline","placeholder","inputPlaceholderColor","placeholderFocus","inputPlaceholderColorLight","placeholderDisabled","inputPlaceholderColorDisabled","input","inputTextColor","inputColorScheme","inputFocus","inputDisabled","inputTextColorDisabled","warning","inputBorderColorWarning","warningFallback","error","inputBorderColorError","errorFallback","disabled","inputDisabledBg","inputDisabledBorderColor","blink","blinkAnimation","keyframes","inputBlinkColor","sizeSmall","inputFontSizeSmall","inputLineHeightSmall","inputPaddingYSmall","inputPaddingXSmall","inputHeightSmall","inputBorderRadiusSmall","sizeSmallFallback","fontFamilyCompensationBaseline","sizeMedium","inputFontSizeMedium","inputLineHeightMedium","inputPaddingYMedium","inputPaddingXMedium","inputHeightMedium","inputBorderRadiusMedium","sizeMediumFallback","sizeLarge","inputFontSizeLarge","inputLineHeightLarge","inputHeightLarge","inputPaddingYLarge","inputPaddingXLarge","inputBorderRadiusLarge","sizeLargeFallback","prefix","prefixDisabled","suffix","suffixDisabled","sideContainer","rightContainer","icon","iconFocus","inputFocusedIconColor","iconDisabled","leftIconSmall","inputIconSizeSmall","inputIconGapSmall","rightIconSmall","leftIconMedium","inputIconSizeMedium","inputIconGapMedium","rightIconMedium","leftIconLarge","inputIconSizeLarge","inputIconGapLarge","rightIconLarge","hideBlinkingCursor"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport { resetText } from '../../lib/styles/Mixins';\n\nconst shouldCompensateFontFamily = (fontFamilyCompensation: string): boolean =>\n  Boolean(parseInt(fontFamilyCompensation));\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    wrapper() {\n      return emotion.css`\n        align-items: center;\n        display: flex;\n        margin: 0;\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        text-overflow: clip;\n        white-space: nowrap;\n        width: 100%;\n\n        &::before {\n          content: '\\\\A0';\n          display: inline-block;\n          width: 0;\n        }\n      `;\n    },\n\n    root(t: Theme) {\n      return emotion.css`\n        ${resetText(emotion)};\n\n        align-items: center;\n        background-clip: ${t.inputBackgroundClip};\n        background-color: ${t.inputBg};\n        border: ${t.inputBorderWidth} solid ${t.inputBorderColor};\n        border-top-color: ${t.inputBorderTopColor};\n        transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        box-shadow: ${t.inputShadow};\n        box-sizing: border-box;\n        color: ${t.inputColor};\n        cursor: text;\n        display: inline-flex;\n        outline: none;\n        position: relative;\n        width: ${t.inputWidth};\n\n        & * {\n          box-sizing: border-box;\n        }\n      `;\n    },\n\n    hovering(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-color: ${t.inputBorderColorHover};\n        }\n      `;\n    },\n\n    borderless() {\n      return emotion.css`\n        box-shadow: none;\n        border-color: transparent;\n        background-clip: padding-box;\n      `;\n    },\n\n    useDefaultColor(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n        background-color: ${t.inputFocusedBg};\n        border-color: ${t.inputBorderColorFocus};\n        box-shadow: ${t.inputFocusShadow};\n        outline: none;\n        z-index: 2;\n      `;\n    },\n\n    focusFallback(t: Theme) {\n      return emotion.css`\n        box-shadow: none;\n        outline: ${t.inputOutlineWidth} solid ${t.inputFocusOutline};\n      `;\n    },\n\n    placeholder(t: Theme) {\n      return emotion.css`\n        -ms-user-select: none;\n        color: ${t.inputPlaceholderColor};\n        cursor: text;\n        font-size: inherit;\n        height: 100%;\n        left: 0;\n        overflow: hidden;\n        pointer-events: none;\n        position: absolute;\n        top: 0;\n        user-select: none;\n        white-space: nowrap;\n        width: 100%;\n      `;\n    },\n\n    placeholderFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorLight};\n      `;\n    },\n\n    placeholderDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n\n    input(t: Theme) {\n      return emotion.css`\n        -webkit-appearance: none;\n        background: transparent;\n        border: 0 none;\n        color: ${t.inputTextColor};\n        font: inherit;\n        line-height: inherit;\n        margin: 0;\n        outline: none;\n        padding: 0;\n        text-overflow: clip;\n        white-space: nowrap;\n        width: 100%;\n        color-scheme: ${t.inputColorScheme};\n\n        &:-moz-placeholder {\n          opacity: 1;\n        }\n        &::-moz-placeholder {\n          opacity: 1;\n        }\n        &::-ms-clear {\n          display: none;\n        }\n        &:-moz-placeholder {\n          color: ${t.inputPlaceholderColor};\n        }\n        &::-moz-placeholder {\n          color: ${t.inputPlaceholderColor};\n        }\n        &::placeholder {\n          color: ${t.inputPlaceholderColor};\n        }\n      `;\n    },\n\n    inputFocus(t: Theme) {\n      return emotion.css`\n        &:-moz-placeholder {\n          color: ${t.inputPlaceholderColorLight};\n        }\n        &::-moz-placeholder {\n          color: ${t.inputPlaceholderColorLight};\n        }\n        &::placeholder {\n          color: ${t.inputPlaceholderColorLight};\n        }\n      `;\n    },\n\n    inputDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputTextColorDisabled};\n        /* fix text color in safari https://bugs.webkit.org/show_bug.cgi?id=115510 */\n        -webkit-text-fill-color: ${t.inputTextColorDisabled};\n\n        &:-moz-placeholder {\n          -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n        }\n        &::-moz-placeholder {\n          -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n        }\n        &::placeholder {\n          -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n        }\n      `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n        border-color: ${t.inputBorderColorWarning};\n        box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorWarning};\n        z-index: 2;\n      `;\n    },\n\n    warningFallback(t: Theme) {\n      return emotion.css`\n        box-shadow: none;\n        outline: ${t.inputBorderWidth} solid ${t.inputBorderColorWarning};\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n        border-color: ${t.inputBorderColorError};\n        box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorError};\n        z-index: 2;\n      `;\n    },\n\n    errorFallback(t: Theme) {\n      return emotion.css`\n        box-shadow: none;\n        outline: ${t.inputBorderWidth} solid ${t.inputBorderColorError};\n      `;\n    },\n\n    disabled(t: Theme) {\n      return emotion.css`\n        background-color: ${t.inputDisabledBg};\n        border-color: ${t.inputDisabledBorderColor};\n        box-shadow: none;\n      `;\n    },\n\n    blink(t: Theme) {\n      const blinkAnimation = emotion.keyframes`\n    0% {\n      background-color: ${t.inputBlinkColor};\n    }\n  `;\n      return emotion.css`\n        animation: ${blinkAnimation} 0.15s ease-in;\n      `;\n    },\n\n    sizeSmall(t: Theme) {\n      return emotion.css`\n        font-size: ${t.inputFontSizeSmall};\n        line-height: ${t.inputLineHeightSmall};\n        padding-top: ${t.inputPaddingYSmall};\n        padding-bottom: ${t.inputPaddingYSmall};\n        padding-left: ${t.inputPaddingXSmall};\n        padding-right: ${t.inputPaddingXSmall};\n        height: ${t.inputHeightSmall};\n        border-radius: ${t.inputBorderRadiusSmall};\n      `;\n    },\n\n    sizeSmallFallback(t: Theme) {\n      return emotion.css`\n        padding-top: ${shift(\n          t.inputPaddingYSmall,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '-1' : '0',\n        )};\n        padding-bottom: ${shift(\n          t.inputPaddingYSmall,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '1' : '0',\n        )};\n        padding-left: ${t.inputPaddingXSmall};\n        padding-right: ${t.inputPaddingXSmall};\n        line-height: normal;\n      `;\n    },\n\n    sizeMedium(t: Theme) {\n      return emotion.css`\n        font-size: ${t.inputFontSizeMedium};\n        line-height: ${t.inputLineHeightMedium};\n        padding-top: ${t.inputPaddingYMedium};\n        padding-bottom: ${t.inputPaddingYMedium};\n        padding-left: ${t.inputPaddingXMedium};\n        padding-right: ${t.inputPaddingXMedium};\n        height: ${t.inputHeightMedium};\n        border-radius: ${t.inputBorderRadiusMedium};\n      `;\n    },\n\n    sizeMediumFallback(t: Theme) {\n      return emotion.css`\n        padding-top: ${shift(\n          t.inputPaddingYMedium,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '-1' : '0',\n        )};\n        padding-bottom: ${shift(\n          t.inputPaddingYMedium,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '1' : '0',\n        )};\n        padding-left: ${t.inputPaddingXMedium};\n        padding-right: ${t.inputPaddingXMedium};\n        line-height: normal;\n      `;\n    },\n\n    sizeLarge(t: Theme) {\n      return emotion.css`\n        font-size: ${t.inputFontSizeLarge};\n        line-height: ${t.inputLineHeightLarge};\n        height: ${t.inputHeightLarge};\n        padding-top: ${shift(\n          t.inputPaddingYLarge,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '-1' : '0',\n        )};\n        padding-bottom: ${shift(\n          t.inputPaddingYLarge,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '1' : '0',\n        )};\n        padding-left: ${t.inputPaddingXLarge};\n        padding-right: ${t.inputPaddingXLarge};\n        border-radius: ${t.inputBorderRadiusLarge};\n      `;\n    },\n\n    sizeLargeFallback(t: Theme) {\n      return emotion.css`\n        padding-top: ${shift(\n          t.inputPaddingYLarge,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '-2' : '0',\n        )};\n        padding-bottom: ${shift(\n          t.inputPaddingYLarge,\n          shouldCompensateFontFamily(t.fontFamilyCompensationBaseline) ? '2' : '0',\n        )};\n        padding-left: ${t.inputPaddingXLarge};\n        padding-right: ${t.inputPaddingXLarge};\n        line-height: normal;\n      `;\n    },\n\n    prefix(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n\n    prefixDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n\n    suffix(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n\n    suffixDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n\n    sideContainer() {\n      return emotion.css`\n        align-items: center;\n        display: flex;\n        flex-shrink: 0;\n        height: 100%;\n\n        &::before {\n          content: '\\\\a0';\n          display: inline-block;\n          width: 0;\n        }\n      `;\n    },\n\n    rightContainer() {\n      return emotion.css`\n        justify-self: flex-end;\n        margin: 0 0 0 auto;\n        padding-left: 0;\n      `;\n    },\n\n    icon() {\n      return emotion.css`\n        flex-shrink: 0;\n        cursor: text;\n        z-index: 2;\n        text-align: center;\n        box-sizing: content-box !important; // fix possible \"reset.css\" problem\n      `;\n    },\n\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n\n    iconDisabled() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n\n    leftIconSmall(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeSmall};\n        padding-right: ${t.inputIconGapSmall};\n      `;\n    },\n\n    rightIconSmall(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeSmall};\n        padding-left: ${t.inputIconGapSmall};\n      `;\n    },\n\n    leftIconMedium(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeMedium};\n        padding-right: ${t.inputIconGapMedium};\n      `;\n    },\n\n    rightIconMedium(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeMedium};\n        padding-left: ${t.inputIconGapMedium};\n      `;\n    },\n\n    leftIconLarge(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeLarge};\n        padding-right: ${t.inputIconGapLarge};\n      `;\n    },\n\n    rightIconLarge(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeLarge};\n        padding-left: ${t.inputIconGapLarge};\n      `;\n    },\n\n    hideBlinkingCursor() {\n      return emotion.css`\n        caret-color: transparent;\n      `;\n    },\n  });\n"]}

package/cjs/components/Input/Input.typings.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type InputElement = (HTMLInputElement | {
+    input: HTMLInputElement | null;
+}) & {
+    getRootNode: () => HTMLElement | null;
+};
+export declare type InputElementProps = React.InputHTMLAttributes<HTMLInputElement>;

package/cjs/components/Input/Input.typings.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

package/cjs/components/Input/InputLayout/InputLayout.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { CommonProps } from '../../../internal/CommonWrapper';
+import { InputLayoutContextProps } from './InputLayoutContext';
+declare type InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;
+export interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {
+    labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+    context: Partial<InputLayoutContextProps>;
+}
+export declare const InputLayout: import("../../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLLabelElement, InputLayoutRootProps> & Record<never, never>;
+export {};

package/cjs/components/Input/InputLayout/InputLayout.js

@@ -0,0 +1,36 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayout = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
+
+var _forwardRefAndName = require("../../../lib/forwardRefAndName");
+var _Input = require("../Input");
+var _CommonWrapper = require("../../../internal/CommonWrapper");
+var _Emotion = require("../../../lib/theming/Emotion");
+
+var _InputLayoutAside = require("./InputLayoutAside");
+var _InputLayoutContext = require("./InputLayoutContext");
+var _InputLayout = require("./InputLayout.styles");
+
+
+
+
+
+
+
+
+var InputLayout = (0, _forwardRefAndName.forwardRefAndName)('InputLayout', function (props, ref) {
+  var leftIcon = props.leftIcon,rightIcon = props.rightIcon,prefix = props.prefix,suffix = props.suffix,labelProps = props.labelProps,context = props.context,children = props.children;
+  var _context = (0, _extends2.default)({}, _InputLayoutContext.InputLayoutContextDefault, context);
+  var emotion = (0, _Emotion.useEmotion)();
+  var stylesLayout = (0, _InputLayout.getStylesLayout)(emotion);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_InputLayoutContext.InputLayoutContext.Provider, { value: _context }, /*#__PURE__*/
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement("label", (0, _extends2.default)({ ref: ref, "data-tid": _Input.InputDataTids.root }, labelProps), /*#__PURE__*/
+    _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: leftIcon, text: prefix, side: "left" }), /*#__PURE__*/
+    _react.default.createElement("span", { className: stylesLayout.input() }, children), /*#__PURE__*/
+    _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: rightIcon, text: suffix, side: "right" })))));
+
+
+
+
+});exports.InputLayout = InputLayout;

package/cjs/components/Input/InputLayout/InputLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayout.tsx"],"names":["InputLayout","props","ref","leftIcon","rightIcon","prefix","suffix","labelProps","context","children","_context","InputLayoutContextDefault","emotion","stylesLayout","InputDataTids","root","input"],"mappings":"mPAAA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;AASO,IAAMA,WAAW,GAAG,0CAA0D,aAA1D,EAAyE,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAClH,MAAQC,QAAR,GAA+EF,KAA/E,CAAQE,QAAR,CAAkBC,SAAlB,GAA+EH,KAA/E,CAAkBG,SAAlB,CAA6BC,MAA7B,GAA+EJ,KAA/E,CAA6BI,MAA7B,CAAqCC,MAArC,GAA+EL,KAA/E,CAAqCK,MAArC,CAA6CC,UAA7C,GAA+EN,KAA/E,CAA6CM,UAA7C,CAAyDC,OAAzD,GAA+EP,KAA/E,CAAyDO,OAAzD,CAAkEC,QAAlE,GAA+ER,KAA/E,CAAkEQ,QAAlE;AACA,MAAMC,QAAiC,8BAAQC,6CAAR,EAAsCH,OAAtC,CAAvC;AACA,MAAMI,OAAO,GAAG,0BAAhB;AACA,MAAMC,YAAY,GAAG,kCAAgBD,OAAhB,CAArB;;AAEA;AACE,iCAAC,sCAAD,CAAoB,QAApB,IAA6B,KAAK,EAAEF,QAApC;AACE,iCAAC,4BAAD,EAAmBT,KAAnB;AACE,mEAAO,GAAG,EAAEC,GAAZ,EAAiB,YAAUY,qBAAcC,IAAzC,IAAmDR,UAAnD;AACE,iCAAC,kCAAD,IAAkB,IAAI,EAAEJ,QAAxB,EAAkC,IAAI,EAAEE,MAAxC,EAAgD,IAAI,EAAC,MAArD,GADF;AAEE,2CAAM,SAAS,EAAEQ,YAAY,CAACG,KAAb,EAAjB,IAAwCP,QAAxC,CAFF;AAGE,iCAAC,kCAAD,IAAkB,IAAI,EAAEL,SAAxB,EAAmC,IAAI,EAAEE,MAAzC,EAAiD,IAAI,EAAC,OAAtD,GAHF,CADF,CADF,CADF;;;;;AAWD,CAjB0B,CAApB,C","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { InputDataTids, InputProps } from '../Input';\nimport { CommonProps, CommonWrapper } from '../../../internal/CommonWrapper';\nimport { useEmotion } from '../../../lib/theming/Emotion';\n\nimport { InputLayoutAside } from './InputLayoutAside';\nimport { InputLayoutContext, InputLayoutContextDefault, InputLayoutContextProps } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\ntype InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;\n  context: Partial<InputLayoutContextProps>;\n}\n\nexport const InputLayout = forwardRefAndName<HTMLLabelElement, InputLayoutRootProps>('InputLayout', (props, ref) => {\n  const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children } = props;\n  const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n  const emotion = useEmotion();\n  const stylesLayout = getStylesLayout(emotion);\n\n  return (\n    <InputLayoutContext.Provider value={_context}>\n      <CommonWrapper {...props}>\n        <label ref={ref} data-tid={InputDataTids.root} {...labelProps}>\n          <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n          <span className={stylesLayout.input()}>{children}</span>\n          <InputLayoutAside icon={rightIcon} text={suffix} side=\"right\" />\n        </label>\n      </CommonWrapper>\n    </InputLayoutContext.Provider>\n  );\n});\n"]}

package/cjs/components/Input/InputLayout/InputLayout.styles.d.ts

@@ -0,0 +1,12 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../../lib/theming/Theme';
+export declare const getStylesLayout: (emotion: Emotion) => {
+    root(t: Theme): string;
+    input(): string;
+    aside(): string;
+    icon(t: Theme): string;
+    iconFocus(t: Theme): string;
+    iconDisabled(): string;
+    text(t: Theme): string;
+    textDisabled(t: Theme): string;
+};

package/cjs/components/Input/InputLayout/InputLayout.styles.js

@@ -0,0 +1,57 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStylesLayout = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _chars = require("../../../lib/chars");
+var _Emotion = require("../../../lib/theming/Emotion");
+
+var _Input = require("../Input.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+var getStylesLayout = function getStylesLayout(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root(t) {
+        return (0, _Input.getStyles)(emotion).root(t);
+      },
+      input: function input() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "])));
+
+
+
+
+
+
+      },
+      aside: function aside() {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "])),
+
+
+
+
+
+        _chars.ZERO_WIDTH_SPACE_CSS);
+
+
+      },
+      icon: function icon(t) {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+        t.inputIconColor);
+
+      },
+      iconFocus: function iconFocus(t) {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+        t.inputFocusedIconColor);
+
+      },
+      iconDisabled: function iconDisabled() {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: default;\n      "])));
+
+
+      },
+      text: function text(t) {
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+        t.inputPlaceholderColor);
+
+      },
+      textDisabled: function textDisabled(t) {
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+        t.inputPlaceholderColorDisabled);
+
+      } }));};exports.getStylesLayout = getStylesLayout;

package/cjs/components/Input/InputLayout/InputLayout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayout.styles.ts"],"names":["getStylesLayout","emotion","root","t","input","css","aside","ZERO_WIDTH_SPACE_CSS","icon","inputIconColor","iconFocus","inputFocusedIconColor","iconDisabled","text","inputPlaceholderColor","textDisabled","inputPlaceholderColorDisabled"],"mappings":";;AAEA;AACA;;AAEA,wC;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,OAAD;AAC7B,+BAAa;AACXC,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAO,sBAAUF,OAAV,EAAmBC,IAAnB,CAAwBC,CAAxB,CAAP;AACD,OAHU;AAIXC,MAAAA,KAJW,mBAIH;AACN,eAAOH,OAAO,CAACI,GAAf;;;;;;;AAOD,OAZU;AAaXC,MAAAA,KAbW,mBAaH;AACN,eAAOL,OAAO,CAACI,GAAf;;;;;;AAMgBE,mCANhB;;;AASD,OAvBU;AAwBXC,MAAAA,IAxBW,gBAwBNL,CAxBM,EAwBI;AACb,eAAOF,OAAO,CAACI,GAAf;AACWF,QAAAA,CAAC,CAACM,cADb;;AAGD,OA5BU;AA6BXC,MAAAA,SA7BW,qBA6BDP,CA7BC,EA6BS;AAClB,eAAOF,OAAO,CAACI,GAAf;AACWF,QAAAA,CAAC,CAACQ,qBADb;;AAGD,OAjCU;AAkCXC,MAAAA,YAlCW,0BAkCI;AACb,eAAOX,OAAO,CAACI,GAAf;;;AAGD,OAtCU;AAuCXQ,MAAAA,IAvCW,gBAuCNV,CAvCM,EAuCI;AACb,eAAOF,OAAO,CAACI,GAAf;AACWF,QAAAA,CAAC,CAACW,qBADb;;AAGD,OA3CU;AA4CXC,MAAAA,YA5CW,wBA4CEZ,CA5CF,EA4CY;AACrB,eAAOF,OAAO,CAACI,GAAf;AACWF,QAAAA,CAAC,CAACa,6BADb;;AAGD,OAhDU,EAAb,CAD6B,GAAxB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars';\nimport { memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\nimport { getStyles } from '../Input.styles';\n\nexport const getStylesLayout = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return getStyles(emotion).root(t);\n    },\n    input() {\n      return emotion.css`\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      `;\n    },\n    aside() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n    iconDisabled() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n    text(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n    textDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n  });\n"]}

package/cjs/components/Input/InputLayout/InputLayoutAside.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface InputLayoutAsideProps {
+    icon: InputProps['leftIcon'] | InputProps['rightIcon'];
+    text: InputProps['prefix'] | InputProps['suffix'];
+    side: 'left' | 'right';
+}
+export declare const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps>;

package/cjs/components/Input/InputLayout/InputLayoutAside.js

@@ -0,0 +1,26 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutAside = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _Emotion = require("../../../lib/theming/Emotion");
+
+var _InputLayout = require("./InputLayout.styles");
+var _InputLayoutAsideIcon = require("./InputLayoutAsideIcon");
+var _InputLayoutAsideText = require("./InputLayoutAsideText");
+
+
+
+
+
+
+
+var InputLayoutAside = function InputLayoutAside(_ref) {var icon = _ref.icon,text = _ref.text,side = _ref.side;
+  var emotion = (0, _Emotion.useEmotion)();
+  var asideClassName = (0, _InputLayout.getStylesLayout)(emotion).aside();
+
+  var _icon = /*#__PURE__*/_react.default.createElement(_InputLayoutAsideIcon.InputLayoutAsideIcon, { key: "icon", icon: icon, side: side });
+  var _text = /*#__PURE__*/_react.default.createElement(_InputLayoutAsideText.InputLayoutAsideText, { key: "text", text: text });
+
+  var child = side === 'left' ? [_icon, _text] : [_text, _icon];
+
+  return /*#__PURE__*/_react.default.createElement("span", { className: asideClassName }, child);
+};exports.InputLayoutAside = InputLayoutAside;

package/cjs/components/Input/InputLayout/InputLayoutAside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAside.tsx"],"names":["InputLayoutAside","icon","text","side","emotion","asideClassName","aside","_icon","_text","child"],"mappings":"sKAAA;;;AAGA;;AAEA;AACA;AACA;;;;;;;;AAQO,IAAMA,gBAAgE,GAAG,SAAnEA,gBAAmE,OAA0B,KAAvBC,IAAuB,QAAvBA,IAAuB,CAAjBC,IAAiB,QAAjBA,IAAiB,CAAXC,IAAW,QAAXA,IAAW;AACxG,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,cAAc,GAAG,kCAAgBD,OAAhB,EAAyBE,KAAzB,EAAvB;;AAEA,MAAMC,KAAK,gBAAG,6BAAC,0CAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEN,IAAvC,EAA6C,IAAI,EAAEE,IAAnD,GAAd;AACA,MAAMK,KAAK,gBAAG,6BAAC,0CAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEN,IAAvC,GAAd;;AAEA,MAAMO,KAAK,GAAGN,IAAI,KAAK,MAAT,GAAkB,CAACI,KAAD,EAAQC,KAAR,CAAlB,GAAmC,CAACA,KAAD,EAAQD,KAAR,CAAjD;;AAEA,sBAAO,uCAAM,SAAS,EAAEF,cAAjB,IAAkCI,KAAlC,CAAP;AACD,CAVM,C","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\n\nimport { getStylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n  const emotion = useEmotion();\n  const asideClassName = getStylesLayout(emotion).aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"]}

package/cjs/components/Input/InputLayout/InputLayoutAsideIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface InputLayoutAsideIconProps {
+    icon: InputProps['leftIcon'] | InputProps['rightIcon'];
+    side: 'left' | 'right';
+}
+export declare const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps>;

package/cjs/components/Input/InputLayout/InputLayoutAsideIcon.js

@@ -0,0 +1,65 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutAsideIcon = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactIs = require("react-is");
+
+var _utils = require("../../../lib/utils");
+
+var _Emotion = require("../../../lib/theming/Emotion");
+
+var _useTheme = require("../../../lib/theming/useTheme");
+
+var _InputLayoutContext = require("./InputLayoutContext");
+var _InputLayout = require("./InputLayout.styles");
+
+
+
+
+
+
+var InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {var _ref$icon = _ref.icon,icon = _ref$icon === void 0 ? null : _ref$icon,side = _ref.side;
+  var emotion = (0, _Emotion.useEmotion)();
+  var theme = (0, _useTheme.useTheme)();
+  var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),focused = _React$useContext.focused,disabled = _React$useContext.disabled,size = _React$useContext.size;
+
+  var sizes = {
+    small: parseInt(theme.inputIconSizeSmall),
+    medium: parseInt(theme.inputIconSizeMedium),
+    large: parseInt(theme.inputIconSizeLarge) };
+
+  var gaps = {
+    small: parseInt(theme.inputIconGapSmall),
+    medium: parseInt(theme.inputIconGapMedium),
+    large: parseInt(theme.inputIconGapLarge) };
+
+
+  var _icon = icon instanceof Function ? icon() : icon;
+  if ((0, _reactIs.isElement)(icon) && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size;
+    _icon = /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size] });
+  }
+
+  var style = {};
+  if (side) {
+    if (side === 'right') {
+      style.marginLeft = gaps[size];
+    } else {
+      style.marginRight = gaps[size];
+    }
+  }
+
+  var stylesLayout = (0, _InputLayout.getStylesLayout)(emotion);
+
+  return (
+    _icon && /*#__PURE__*/
+    _react.default.createElement("span", {
+      style: style,
+      className: emotion.cx(
+      stylesLayout.aside(),
+      stylesLayout.icon(theme),
+      focused && stylesLayout.iconFocus(theme),
+      disabled && stylesLayout.iconDisabled()) },
+
+
+    _icon));
+
+
+
+};exports.InputLayoutAsideIcon = InputLayoutAsideIcon;

package/cjs/components/Input/InputLayout/InputLayoutAsideIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAsideIcon.tsx"],"names":["InputLayoutAsideIcon","icon","side","emotion","theme","React","useContext","InputLayoutContext","focused","disabled","size","sizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","gaps","inputIconGapSmall","inputIconGapMedium","inputIconGapLarge","_icon","Function","cloneElement","props","style","marginLeft","marginRight","stylesLayout","cx","aside","iconFocus","iconDisabled"],"mappings":"0KAAA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;;;;;;;AAOO,IAAMA,oBAAwE,GAAG,SAA3EA,oBAA2E,OAA2B,sBAAxBC,IAAwB,CAAxBA,IAAwB,0BAAjB,IAAiB,aAAXC,IAAW,QAAXA,IAAW;AACjH,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,0BAAoCC,eAAMC,UAAN,CAAiBC,sCAAjB,CAApC,CAAQC,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB,CAA2BC,IAA3B,qBAA2BA,IAA3B;;AAEA,MAAMC,KAA+B,GAAG;AACtCC,IAAAA,KAAK,EAAEC,QAAQ,CAACT,KAAK,CAACU,kBAAP,CADuB;AAEtCC,IAAAA,MAAM,EAAEF,QAAQ,CAACT,KAAK,CAACY,mBAAP,CAFsB;AAGtCC,IAAAA,KAAK,EAAEJ,QAAQ,CAACT,KAAK,CAACc,kBAAP,CAHuB,EAAxC;;AAKA,MAAMC,IAA8B,GAAG;AACrCP,IAAAA,KAAK,EAAEC,QAAQ,CAACT,KAAK,CAACgB,iBAAP,CADsB;AAErCL,IAAAA,MAAM,EAAEF,QAAQ,CAACT,KAAK,CAACiB,kBAAP,CAFqB;AAGrCJ,IAAAA,KAAK,EAAEJ,QAAQ,CAACT,KAAK,CAACkB,iBAAP,CAHsB,EAAvC;;;AAMA,MAAIC,KAAK,GAAGtB,IAAI,YAAYuB,QAAhB,GAA2BvB,IAAI,EAA/B,GAAoCA,IAAhD;AACA,MAAI,wBAAUA,IAAV,KAAmB,yBAAaA,IAAb,CAAvB,EAA2C;AACzCsB,IAAAA,KAAK,gBAAGlB,eAAMoB,YAAN,CAAmBxB,IAAnB,EAAyB,EAAES,IAAI,sBAAET,IAAI,CAACyB,KAAL,CAAWhB,IAAb,+BAAqBC,KAAK,CAACD,IAAD,CAAhC,EAAzB,CAAR;AACD;;AAED,MAAMiB,KAA0B,GAAG,EAAnC;AACA,MAAIzB,IAAJ,EAAU;AACR,QAAIA,IAAI,KAAK,OAAb,EAAsB;AACpByB,MAAAA,KAAK,CAACC,UAAN,GAAmBT,IAAI,CAACT,IAAD,CAAvB;AACD,KAFD,MAEO;AACLiB,MAAAA,KAAK,CAACE,WAAN,GAAoBV,IAAI,CAACT,IAAD,CAAxB;AACD;AACF;;AAED,MAAMoB,YAAY,GAAG,kCAAgB3B,OAAhB,CAArB;;AAEA;AACEoB,IAAAA,KAAK;AACH;AACE,MAAA,KAAK,EAAEI,KADT;AAEE,MAAA,SAAS,EAAExB,OAAO,CAAC4B,EAAR;AACTD,MAAAA,YAAY,CAACE,KAAb,EADS;AAETF,MAAAA,YAAY,CAAC7B,IAAb,CAAkBG,KAAlB,CAFS;AAGTI,MAAAA,OAAO,IAAIsB,YAAY,CAACG,SAAb,CAAuB7B,KAAvB,CAHF;AAITK,MAAAA,QAAQ,IAAIqB,YAAY,CAACI,YAAb,EAJH,CAFb;;;AASGX,IAAAA,KATH,CAFJ;;;;AAeD,CA/CM,C","sourcesContent":["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../../lib/utils';\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\nimport { SizeProp } from '../../../lib/types/props';\nimport { useTheme } from '../../../lib/theming/useTheme';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon)) {\n    _icon = React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  const stylesLayout = getStylesLayout(emotion);\n\n  return (\n    _icon && (\n      <span\n        style={style}\n        className={emotion.cx(\n          stylesLayout.aside(),\n          stylesLayout.icon(theme),\n          focused && stylesLayout.iconFocus(theme),\n          disabled && stylesLayout.iconDisabled(),\n        )}\n      >\n        {_icon}\n      </span>\n    )\n  );\n};\n"]}

package/cjs/components/Input/InputLayout/InputLayoutAsideText.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface InputLayoutAsideTextProps {
+    text: InputProps['prefix'] | InputProps['suffix'];
+}
+export declare const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps>;

package/cjs/components/Input/InputLayout/InputLayoutAsideText.js

@@ -0,0 +1,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutAsideText = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _Emotion = require("../../../lib/theming/Emotion");
+var _useTheme = require("../../../lib/theming/useTheme");
+
+var _InputLayoutContext = require("./InputLayoutContext");
+var _InputLayout = require("./InputLayout.styles");
+
+
+
+
+
+var InputLayoutAsideText = function InputLayoutAsideText(_ref) {var _ref$text = _ref.text,text = _ref$text === void 0 ? null : _ref$text;
+  var emotion = (0, _Emotion.useEmotion)();
+  var theme = (0, _useTheme.useTheme)();
+  var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),disabled = _React$useContext.disabled;
+
+  var stylesLayout = (0, _InputLayout.getStylesLayout)(emotion);
+  var asideClassName = stylesLayout.aside();
+
+  return (
+    text && /*#__PURE__*/
+    _react.default.createElement("span", {
+      className: emotion.cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme)) },
+
+    text));
+
+
+
+};exports.InputLayoutAsideText = InputLayoutAsideText;

package/cjs/components/Input/InputLayout/InputLayoutAsideText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAsideText.tsx"],"names":["InputLayoutAsideText","text","emotion","theme","React","useContext","InputLayoutContext","disabled","stylesLayout","asideClassName","aside","cx","textDisabled"],"mappings":"0KAAA;;;AAGA;AACA;;AAEA;AACA;;;;;;AAMO,IAAMA,oBAAwE,GAAG,SAA3EA,oBAA2E,OAAqB,sBAAlBC,IAAkB,CAAlBA,IAAkB,0BAAX,IAAW;AAC3G,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,0BAAqBC,eAAMC,UAAN,CAAiBC,sCAAjB,CAArB,CAAQC,QAAR,qBAAQA,QAAR;;AAEA,MAAMC,YAAY,GAAG,kCAAgBN,OAAhB,CAArB;AACA,MAAMO,cAAc,GAAGD,YAAY,CAACE,KAAb,EAAvB;;AAEA;AACET,IAAAA,IAAI;AACF;AACE,MAAA,SAAS,EAAEC,OAAO,CAACS,EAAR,CAAWF,cAAX,EAA2BD,YAAY,CAACP,IAAb,CAAkBE,KAAlB,CAA3B,EAAqDI,QAAQ,IAAIC,YAAY,CAACI,YAAb,CAA0BT,KAA1B,CAAjE,CADb;;AAGGF,IAAAA,IAHH,CAFJ;;;;AASD,CAjBM,C","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\nimport { useTheme } from '../../../lib/theming/useTheme';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const stylesLayout = getStylesLayout(emotion);\n  const asideClassName = stylesLayout.aside();\n\n  return (\n    text && (\n      <span\n        className={emotion.cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}\n      >\n        {text}\n      </span>\n    )\n  );\n};\n"]}

package/cjs/components/Input/InputLayout/InputLayoutContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SizeProp } from '../../../lib/types/props';
+export interface InputLayoutContextProps {
+    focused: boolean;
+    disabled: boolean;
+    size: SizeProp;
+}
+export declare const InputLayoutContextDefault: InputLayoutContextProps;
+export declare const InputLayoutContext: React.Context<InputLayoutContextProps>;

package/cjs/components/Input/InputLayout/InputLayoutContext.js

@@ -0,0 +1,17 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutContextDefault = exports.InputLayoutContext = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+
+
+
+
+
+
+
+var InputLayoutContextDefault = {
+  focused: false,
+  disabled: false,
+  size: 'small' };exports.InputLayoutContextDefault = InputLayoutContextDefault;
+
+
+var InputLayoutContext = /*#__PURE__*/_react.default.createContext(InputLayoutContextDefault);exports.InputLayoutContext = InputLayoutContext;

package/cjs/components/Input/InputLayout/InputLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutContext.tsx"],"names":["InputLayoutContextDefault","focused","disabled","size","InputLayoutContext","React","createContext"],"mappings":"4MAAA;;;;;;;;;;AAUO,IAAMA,yBAAkD,GAAG;AAChEC,EAAAA,OAAO,EAAE,KADuD;AAEhEC,EAAAA,QAAQ,EAAE,KAFsD;AAGhEC,EAAAA,IAAI,EAAE,OAH0D,EAA3D,C;;;AAMA,IAAMC,kBAAkB,gBAAGC,eAAMC,aAAN,CAA6CN,yBAA7C,CAA3B,C","sourcesContent":["import React from 'react';\n\nimport { SizeProp } from '../../../lib/types/props';\n\nexport interface InputLayoutContextProps {\n  focused: boolean;\n  disabled: boolean;\n  size: SizeProp;\n}\n\nexport const InputLayoutContextDefault: InputLayoutContextProps = {\n  focused: false,\n  disabled: false,\n  size: 'small',\n};\n\nexport const InputLayoutContext = React.createContext<InputLayoutContextProps>(InputLayoutContextDefault);\n"]}

package/cjs/components/Input/InputLayout/PolyfillPlaceholder.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputProps } from '../Input';
+declare type PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {
+    isMaskVisible: boolean;
+};
+export interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {
+    children: InputProps['placeholder'];
+}
+export declare const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps>;
+export {};

package/cjs/components/Input/InputLayout/PolyfillPlaceholder.js

@@ -0,0 +1,48 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PolyfillPlaceholder = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _Emotion = require("../../../lib/theming/Emotion");
+var _Input = require("../Input.styles");
+var _needsPolyfillPlaceholder = require("../../../lib/needsPolyfillPlaceholder");
+var _useTheme = require("../../../lib/theming/useTheme");
+
+var _InputLayoutContext = require("./InputLayoutContext");
+
+
+
+
+
+
+
+
+
+var PolyfillPlaceholder = function PolyfillPlaceholder(_ref)
+
+
+
+
+
+{var placeholder = _ref.children,align = _ref.align,value = _ref.value,defaultValue = _ref.defaultValue,isMaskVisible = _ref.isMaskVisible;
+  var emotion = (0, _Emotion.useEmotion)();
+  var theme = (0, _useTheme.useTheme)();
+  var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),focused = _React$useContext.focused,disabled = _React$useContext.disabled;
+
+  var _placeholder = null;
+  var styles = (0, _Input.getStyles)(emotion);
+
+  if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {var _emotion$cx;
+    _placeholder = /*#__PURE__*/
+    _react.default.createElement("div", {
+      className: emotion.cx(styles.placeholder(theme), (_emotion$cx = {}, _emotion$cx[
+      styles.placeholderDisabled(theme)] = disabled, _emotion$cx[
+      styles.placeholderFocus(theme)] = focused, _emotion$cx)),
+
+      style: { textAlign: align || 'inherit' } },
+
+    placeholder);
+
+
+  }
+
+  return _placeholder;
+};exports.PolyfillPlaceholder = PolyfillPlaceholder;

package/cjs/components/Input/InputLayout/PolyfillPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PolyfillPlaceholder.tsx"],"names":["PolyfillPlaceholder","placeholder","children","align","value","defaultValue","isMaskVisible","emotion","theme","React","useContext","InputLayoutContext","focused","disabled","_placeholder","styles","needsPolyfillPlaceholder","cx","placeholderDisabled","placeholderFocus","textAlign"],"mappings":"yKAAA;;;AAGA;AACA;AACA;AACA;;AAEA;;;;;;;;;;AAUO,IAAMA,mBAAyE,GAAG,SAA5EA,mBAA4E;;;;;;AAMnF,KALMC,WAKN,QALJC,QAKI,CAJJC,KAII,QAJJA,KAII,CAHJC,KAGI,QAHJA,KAGI,CAFJC,YAEI,QAFJA,YAEI,CADJC,aACI,QADJA,aACI;AACJ,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,0BAA8BC,eAAMC,UAAN,CAAiBC,sCAAjB,CAA9B,CAAQC,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB;;AAEA,MAAIC,YAAY,GAAG,IAAnB;AACA,MAAMC,MAAM,GAAG,sBAAUR,OAAV,CAAf;;AAEA,MAAIS,sDAA4Bf,WAA5B,IAA2C,CAACK,aAA5C,IAA6D,CAACF,KAA9D,IAAuE,CAACC,YAA5E,EAA0F;AACxFS,IAAAA,YAAY;AACV;AACE,MAAA,SAAS,EAAEP,OAAO,CAACU,EAAR,CAAWF,MAAM,CAACd,WAAP,CAAmBO,KAAnB,CAAX;AACRO,MAAAA,MAAM,CAACG,mBAAP,CAA2BV,KAA3B,CADQ,IAC4BK,QAD5B;AAERE,MAAAA,MAAM,CAACI,gBAAP,CAAwBX,KAAxB,CAFQ,IAEyBI,OAFzB,eADb;;AAKE,MAAA,KAAK,EAAE,EAAEQ,SAAS,EAAEjB,KAAK,IAAI,SAAtB,EALT;;AAOGF,IAAAA,WAPH,CADF;;;AAWD;;AAED,SAAOa,YAAP;AACD,CA7BM,C","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\nimport { getStyles } from '../Input.styles';\nimport { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder';\nimport { useTheme } from '../../../lib/theming/useTheme';\n\nimport { InputLayoutContext } from './InputLayoutContext';\n\ntype PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {\n  isMaskVisible: boolean;\n};\n\nexport interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {\n  children: InputProps['placeholder'];\n}\n\nexport const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps> = ({\n  children: placeholder,\n  align,\n  value,\n  defaultValue,\n  isMaskVisible,\n}) => {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const { focused, disabled } = React.useContext(InputLayoutContext);\n\n  let _placeholder = null;\n  const styles = getStyles(emotion);\n\n  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {\n    _placeholder = (\n      <div\n        className={emotion.cx(styles.placeholder(theme), {\n          [styles.placeholderDisabled(theme)]: disabled,\n          [styles.placeholderFocus(theme)]: focused,\n        })}\n        style={{ textAlign: align || 'inherit' }}\n      >\n        {placeholder}\n      </div>\n    );\n  }\n\n  return _placeholder;\n};\n"]}

package/cjs/components/Input/index.d.ts

@@ -1 +1,2 @@
 export * from './Input';
+export * from './Input.typings';

package/cjs/components/Input/index.js

@@ -1 +1,2 @@
-"use strict";exports.__esModule = true;var _Input = require("./Input");Object.keys(_Input).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Input[key];});
+"use strict";exports.__esModule = true;var _Input = require("./Input");Object.keys(_Input).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Input[key]) return;exports[key] = _Input[key];});
+var _Input2 = require("./Input.typings");Object.keys(_Input2).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Input2[key]) return;exports[key] = _Input2[key];});

package/cjs/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Input';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA;AACA","sourcesContent":["export * from './Input';\nexport * from './Input.typings';\n"]}