ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/InputDinamycPlaceholder/InputDinamycPlaceholder.scss

@@ -0,0 +1,475 @@
+.input-box,
+.input-box__err {
+    width: 100%;
+    position: relative;
+
+    .input-dynamic {
+        display: flex;
+        width: 100%;
+        height: 56px;
+        padding: var(--space-x2, 8px) var(--space-x5, 12px);
+        align-items: center;
+        gap: var(--space-x2, 8px);
+        align-self: stretch;
+        border-radius: 8px;
+        border: 1px solid #E0E7F2;
+        background: var(--white, #FFF);
+        color: #020617;
+        font-size: 14px;
+        font-weight: 400;
+
+        &:-webkit-autofill,
+        &:-webkit-autofill:hover, 
+        &:-webkit-autofill:focus {
+            -webkit-box-shadow: 0 0 0px 1000px rgb(255, 255, 255) inset;
+            transition: background-color 5000s ease-in-out 0s;
+        }
+
+        &:auto-fill {
+            box-shadow: inset 0 0 0 100px var(--background-color);
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &:focus {
+            outline: none;
+            border: 1px solid #57CC6A;
+
+            &:hover {
+                border: 1px solid #57CC6A;
+            }
+        }
+
+        &:hover {
+            border: 1px solid #64748B;
+        }
+    }
+
+    .placeholder-dinamyc,
+    .placeholder-dinamyc_min,
+    .placeholder-dinamyc_min-blue {
+        width: 100%;
+        position: absolute;
+        top: calc(50% - 8px);
+        left: 14px;
+        pointer-events: none;
+
+        label {
+            position: absolute;
+            color: #64748B;
+            font-family: Inter;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 16px;
+            z-index: 1;
+            transition: 0.3s;
+        }
+
+        &_min,
+        &_min-blue {
+            display: inline-block;
+            top: -5px;
+            z-index: 1;
+            left: 8px;
+
+            label {
+                position: absolute;
+                z-index: 0;
+                color: #53616E;
+                font-family: Inter;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 10px;
+                transition: 0.3s;
+                padding-left: 6px;
+                padding-right: 6px;
+
+                &:after {
+                    content: '';
+                    display: inline-block;
+                    position: absolute;
+                    margin-top: 5px;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 6px;
+                    background-color: white;
+                    z-index: -1;
+                }
+            }
+        }
+
+        &_min-blue {
+            label {
+                color: #0B110B;
+            }
+        }
+    }
+
+    &__err {
+        .input-dynamic {
+            background-color: #FFF5F5;
+            border: 1px solid #FFD8D8;
+            border-radius: 8px;
+
+            &:focus,
+            &:hover {
+                border: 1px solid #FFD8D8;
+                -webkit-box-shadow: none;
+                -moz-box-shadow: none;
+                box-shadow: none;
+
+                &:hover {
+                    border: 1px solid #FFD8D8;
+                }
+            }
+        }
+
+        .placeholder-dinamyc_min {
+            label {
+                &:after {
+                    background-color: #FFF5F5;
+                }
+            }
+        }
+    }
+
+    .err {
+        position: absolute;
+        max-height: 30px;
+        height: 100%;
+        overflow-x: auto;
+        top: calc(100% + 2px);
+        display: flex;
+        gap: 4px;
+        align-items: flex-start;
+
+        // .btn__err {
+        //     width: 16px;
+        //     height: 16px;
+        //     border: none;
+        //     background-color: inherit;
+        //     background-image: url('./img/close_red.svg');
+        //     background-repeat: no-repeat;
+        //     background-size: 16px;
+        //     background-position: center;
+        // }
+
+        .text_tooltip {
+            padding-left: 8px;
+            color: #94A3B8;
+            height: 16px;
+            font-family: "Inter";
+            font-size: 12px;
+            height: auto;
+        }
+
+        .text_red {
+            color: #FF4D4F;
+            font-size: 12px;
+            margin: 0;
+        }
+    }
+
+    &__clean-value {
+        display: flex;
+        gap: 12px;
+        position: absolute;
+        top: calc(50% - 8px);
+        right: 10px;
+        display: flex;
+        gap: 4px;
+        align-items: flex-start;
+
+        .btn__clean {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background-color: inherit;
+            background-image: url('./img/close_grey.svg');
+            background-repeat: no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+
+        .btn__show,
+        .btn__hide {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background-color: inherit;
+            background-image: url('./img/show.svg');
+            background-repeat: no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+
+        .btn__hide {
+            background-image: url('./img/hide.svg');
+        }
+    }
+
+    &__info {
+        display: flex;
+        position: absolute;
+        //   top: calc(50% - 8px);
+        width: auto;
+        height: auto;
+        right: 20px;
+        gap: 4px;
+        align-items: flex-start;
+        z-index: 10000;
+
+        &:hover {
+            .tooltip {
+                display: flex;
+            }
+        }
+
+        .tooltip {
+            padding: 14px;
+            position: absolute;
+            min-width: 200px;
+            max-width: 200px;
+            left: -92px;
+            border: 2px solid #B2DAFF;
+            fill: #FFF;
+            stroke-width: 2px #B2DAFF solid;
+            margin-top: 8px;
+            z-index: 100000;
+            width: fit-content;
+            border-radius: 8px;
+            height: auto;
+            // position: absolute;
+            background-color: #fff;
+            display: none;
+            flex-direction: column;
+            gap: 4px;
+
+            .title {
+                color: var(--main-menu-primary-text, #020617);
+                font-family: Inter;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: normal;
+            }
+
+            .text {
+                color: var(--main-menu-teritary-text, #94A3B8);
+                /* Button link/Medium */
+                font-family: Inter;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 16px;
+                /* 114.286% */
+            }
+
+            &::after,
+            &::before {
+                content: '';
+                position: absolute;
+                background: rgb(255, 255, 255);
+                top: 40px;
+                left: calc(50% - 5px);
+                top: -6px;
+                width: 10px;
+                height: 10px;
+                border: 2px solid #B2DAFF;
+                border-right: none;
+                border-bottom: none;
+                transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                z-index: 0;
+            }
+
+        }
+
+        .btn__info {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background-color: inherit;
+            background-image: url('./img/info_tooltip.svg');
+            background-repeat: no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+
+        .text_red {
+            color: #FF4D4F;
+            font-size: 12px;
+            margin: 0;
+        }
+    }
+
+    // .autorization__input-field {
+    //     width: 100%;
+    //     min-height: 56px;
+    //     height: 100%;
+    //     font-family: 'Inter';
+    //     font-size: 14px;
+    //     padding: 0px;
+    //     margin-top: 24px;
+    //     border-radius: 16px;
+    //     border-radius: 0px;
+    //     border: none;
+    //     background: none;
+
+    //     .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root {
+    //         color: #94A3B8;
+    //         font-size: 14px;
+    //         padding-left: 8px;
+
+    //         &:focus {
+    //             color: #94A3B8;
+    //         }
+    //     }
+
+    //     .css-o943dk-MuiFormLabel-root-MuiInputLabel-root {
+    //         color: #94A3B8;
+    //     }
+
+    //     div {
+    //         border: none;
+    //         background: none;
+    //         border: 1px solid #F0F0F0;
+    //         border-radius: 8px;
+
+    //         &::after {
+    //             display: none;
+    //         }
+
+    //         &::before {
+    //             display: none;
+    //         }
+    //     }
+
+
+    //     input {
+    //         background-color: white;
+    //         border-radius: 8px;
+    //         font-size: 14px;
+
+    //         &::-webkit-outer-spin-button,
+    //         &::-webkit-inner-spin-button {
+    //             -webkit-appearance: none;
+    //             margin: 0;
+    //         }
+
+    //         &:focus {
+    //             border: 1px solid rgba(24, 144, 255, 1);
+    //             -webkit-box-shadow: 0px 0px 9px -3px rgba(24, 144, 255, 1);
+    //             -moz-box-shadow: 0px 0px 9px -3px rgba(24, 144, 255, 1);
+    //             box-shadow: 0px 0px 9px -3px rgba(24, 144, 255, 1);
+    //         }
+
+
+    //     }
+
+    //     input:-webkit-autofill,
+    //     input:-webkit-autofill:hover,
+    //     input:-webkit-autofill:focus input:-webkit-autofill,
+    //     textarea:-webkit-autofill,
+    //     textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
+    //     select:-webkit-autofill,
+    //     select:-webkit-autofill:hover,
+    //     select:-webkit-autofill:focus {
+    //         //   -webkit-text-fill-color: rgb(0, 0, 0);
+    //         -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+    //         transition: background-color 5000s ease-in-out 0s;
+    //         background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 174, 255, 0.04) 50%, rgba(255, 255, 255, 0) 51%, rgba(0, 174, 255, 0.03) 100%);
+    //     }
+
+    //     &::placeholder {
+    //         font-size: 14px;
+    //         font-family: "Inter";
+    //         color: #020617;
+    //     }
+
+    //     &_err {
+    //         border: 1px solid #FF4D4F;
+
+    //     }
+    // }
+
+    // &__err {
+    //     position: absolute;
+    //     top: calc(100%);
+    //     display: flex;
+    //     gap: 4px;
+    //     align-items: flex-start;
+
+    //     &:hover {
+    //         border: none;
+    //     }
+
+    //     .btn__err {
+    //         width: 16px;
+    //         height: 16px;
+    //         border: none;
+    //         background-color: inherit;
+    //         background-image: url('./img/close_red.svg');
+    //         background-repeat: no-repeat;
+    //         background-size: 16px;
+    //         background-position: center;
+    //     }
+
+    //     .text_red {
+    //         color: #FF4D4F;
+    //         font-size: 12px;
+    //         margin: 0;
+    //     }
+    // }
+
+    .input-err {
+        div {
+            border: 2px solid #FFD8D8;
+            border-radius: 8px;
+
+            input {
+                background-color: #FFF5F5;
+
+                &:focus,
+                &:hover {
+                    border: none;
+                    -webkit-box-shadow: none;
+                    -moz-box-shadow: none;
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+}
+
+.size-s {
+    .input-dynamic {
+        height: 40px;
+
+        &__err {}
+    }
+}
+
+.size-l {
+    .input-dynamic {
+        height: 56px;
+
+        &__err {}
+    }
+}
+
+.text_tooltip-mui {
+    padding-left: 8px;
+    color: #94A3B8;
+    height: 16px;
+    font-family: "Inter";
+    font-size: 12px;
+    height: auto;
+}

package/dist/stories/InputDinamycPlaceholder/InputDinamycPlaceholder.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _InputDinamycPlaceholder = _interopRequireDefault(require("./InputDinamycPlaceholder.js"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Components/InputDinamycPlaceholder',
+  component: _InputDinamycPlaceholder["default"],
+  parametrs: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    date: {
+      control: 'date'
+    }
+  },
+  args: {
+    tooltip: 'Подсказка',
+    tooltipStatic: false,
+    rows: false,
+    value: false,
+    changeValue: 'some text',
+    setChangeValue: false,
+    setValue: _addonActions.action,
+    classname: false,
+    placeholder: 'Value',
+    type: 'password',
+    onChange: _addonActions.action,
+    passwordTooltip: true,
+    err: false,
+    textErr: false,
+    infoHeader: 'Ttle',
+    info: false,
+    autoComplete: false,
+    disabled: false,
+    showClearIndicator: true,
+    multiline: false,
+    maxLength: false,
+    autoFocus: false,
+    variant: 'filled',
+    size: 'l',
+    required: true
+  }
+};
+var Default = exports.Default = {};

package/dist/stories/InputDinamycPlaceholder/img/close_grey.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#C5CCD3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 6L6 10" stroke="#C5CCD3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L10 10" stroke="#C5CCD3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/stories/InputDinamycPlaceholder/img/close_red.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#FF4D4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 6L6 10" stroke="#FF4D4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L10 10" stroke="#FF4D4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/stories/InputDinamycPlaceholder/img/hide.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6026_10547)">
+<path d="M11.1955 9.06673C11.3232 8.72564 11.3879 8.36424 11.3866 8.00006C11.3866 7.19145 11.0654 6.41595 10.4936 5.84417C9.92187 5.27239 9.14637 4.95117 8.33776 4.95117C7.97806 4.95159 7.62134 5.01631 7.28442 5.14228L7.99998 5.88006C8.10875 5.86266 8.21871 5.85374 8.32887 5.85339C8.90062 5.8522 9.44961 6.07728 9.85598 6.47948C10.2623 6.88168 10.4931 7.42833 10.4978 8.00006C10.4974 8.11022 10.4885 8.22017 10.4711 8.32895L11.1955 9.06673Z" fill="#C5CCD3"/>
+<path d="M14.8778 7.71976C13.4571 4.77935 10.9658 3 8.2089 3C7.45827 3.00197 6.71269 3.13739 6 3.40118L6.67869 4.16578C7.17858 4.02114 7.69259 3.94662 8.2089 3.94395C10.5822 3.94395 12.7405 5.42596 14.0262 7.92271C13.5546 8.84902 12.9293 9.666 12.1841 10.3298L12.7827 11C13.6452 10.2209 14.3615 9.2585 14.8904 8.16814L15 7.94159L14.8778 7.71976Z" fill="#C5CCD3"/>
+<path d="M2.07185 1.75855L3.99172 4.02909C2.77821 4.95315 1.78641 6.2313 1.11192 7.74036L1 7.97964L1.11192 8.224C2.56258 11.3956 5.10662 13.3149 7.92185 13.3149C9.02068 13.3146 10.1052 13.0205 11.0944 12.4545L13.2467 15L14 14.2364L2.80795 1L2.07185 1.75855ZM6.26887 6.72218L9.13146 10.1076C8.80802 10.3444 8.43568 10.4712 8.0553 10.4742C7.77891 10.4742 7.50525 10.4096 7.25006 10.284C6.99487 10.1585 6.7632 9.97447 6.56836 9.74263C6.37353 9.51079 6.21938 9.23567 6.11479 8.9331C6.0102 8.63054 5.95724 8.3065 5.95894 7.97964C5.96379 7.53498 6.07093 7.10027 6.26887 6.72218ZM5.6447 5.984C5.24197 6.65569 5.05321 7.47426 5.11184 8.29476C5.17046 9.11526 5.47269 9.88475 5.96501 10.467C6.45733 11.0492 7.10798 11.4067 7.80176 11.476C8.49553 11.5453 9.18768 11.3221 9.75563 10.8458L10.4444 11.6604C9.64706 12.0634 8.78895 12.2712 7.92185 12.2713C5.49834 12.2713 3.29437 10.6727 1.98146 7.97964C2.61153 6.66018 3.51895 5.55545 4.61589 4.77236L5.6447 5.984Z" fill="#C5CCD3"/>
+</g>
+<defs>
+<clipPath id="clip0_6026_10547">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/stories/InputDinamycPlaceholder/img/info_tooltip.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5656_80367)">
+<path d="M10.7598 14.667L5.23984 14.667L1.33317 10.7603L1.33317 5.24033L5.23984 1.33366L10.7598 1.33366L14.6665 5.24033L14.6665 10.7603L10.7598 14.667Z" stroke="#70808F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10.667V8.00033" stroke="#70808F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.33301H7.99333" stroke="#70808F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_5656_80367">
+<rect width="16" height="16" fill="white" transform="matrix(-1 0 0 -1 16 16)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/stories/InputDinamycPlaceholder/img/show.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9598 7.7975C14.9393 7.74813 14.4453 6.57375 13.3468 5.39687C11.8833 3.82875 10.0347 3 8 3C5.96533 3 4.11675 3.82875 2.65316 5.39687C1.55474 6.57375 1.05833 7.75 1.04024 7.7975C1.01371 7.86144 1 7.93064 1 8.00062C1 8.0706 1.01371 8.1398 1.04024 8.20375C1.06066 8.25312 1.55474 9.42688 2.65316 10.6038C4.11675 12.1713 5.96533 13 8 13C10.0347 13 11.8833 12.1713 13.3468 10.6038C14.4453 9.42688 14.9393 8.25312 14.9598 8.20375C14.9863 8.1398 15 8.0706 15 8.00062C15 7.93064 14.9863 7.86144 14.9598 7.7975ZM8 12C6.2045 12 4.63591 11.3006 3.33741 9.92188C2.80462 9.35418 2.35134 8.70685 1.99166 8C2.35124 7.29309 2.80454 6.64574 3.33741 6.07812C4.63591 4.69938 6.2045 4 8 4C9.7955 4 11.3641 4.69938 12.6626 6.07812C13.1964 6.6456 13.6507 7.29295 14.0113 8C13.5907 8.84125 11.7584 12 8 12ZM8 5C7.44621 5 6.90486 5.17595 6.4444 5.50559C5.98394 5.83524 5.62506 6.30377 5.41314 6.85195C5.20121 7.40013 5.14576 8.00333 5.2538 8.58527C5.36184 9.16721 5.62851 9.70176 6.0201 10.1213C6.41169 10.5409 6.9106 10.8266 7.45375 10.9424C7.99689 11.0581 8.55988 10.9987 9.07151 10.7716C9.58315 10.5446 10.0204 10.1601 10.3281 9.66671C10.6358 9.17336 10.8 8.59334 10.8 8C10.7992 7.2046 10.504 6.44202 9.97905 5.87959C9.45411 5.31716 8.74237 5.00083 8 5ZM8 10C7.63081 10 7.26991 9.8827 6.96294 9.66294C6.65596 9.44318 6.41671 9.13082 6.27542 8.76537C6.13414 8.39991 6.09717 7.99778 6.1692 7.60982C6.24123 7.22186 6.41901 6.86549 6.68007 6.58579C6.94112 6.30608 7.27373 6.1156 7.63583 6.03843C7.99793 5.96126 8.37325 6.00087 8.71434 6.15224C9.05543 6.30362 9.34697 6.55996 9.55208 6.88886C9.75719 7.21776 9.86667 7.60444 9.86667 8C9.86667 8.53043 9.67 9.03914 9.31993 9.41421C8.96987 9.78929 8.49507 10 8 10Z" fill="#C5CCD3"/>
+</svg>

package/dist/stories/InputDynamicWidth/InputDynamicWidth.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
+var _react = require("react");
+require("./InputDynamicWidth.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var InputDynamicWidth = function InputDynamicWidth(_ref) {
+  var onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Поиск' : _ref$placeholder,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? false : _ref$maxWidth,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'right' : _ref$position,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    value = _ref.value;
+  var _useState = (0, _react.useState)(value ? value : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    valueInside = _useState2[0],
+    setValueInside = _useState2[1];
+  var _useState3 = (0, _react.useState)(isOpen ? true : false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocus = _useState4[0],
+    setIsFocus = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (onChange) {
+      onChange(valueInside);
+    }
+  }, [valueInside]);
+  (0, _react.useEffect)(function () {
+    setValueInside(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "input-dynamic-width-bar",
+    style: {
+      justifyContent: position == 'left' ? 'end' : ''
+    },
+    onClick: function onClick(e) {
+      setIsFocus(true);
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    inputMode: "text",
+    placeholder: placeholder ? placeholder : 'Поиск',
+    className: isFocus ? "input-dynamic-width-bar__search_active" : "input-dynamic-width-bar__search",
+    readOnly: !isFocus,
+    autoComplete: 'off',
+    onBlur: function onBlur(e) {
+      if (valueInside === '') {
+        if (!isOpen) {
+          setIsFocus(false);
+        }
+      }
+    },
+    value: valueInside,
+    onChange: function onChange(e) {
+      setValueInside(e.target.value);
+    },
+    style: {
+      maxWidth: maxWidth ? maxWidth : ''
+    }
+  }), ((valueInside === null || valueInside === void 0 ? void 0 : valueInside.length) && isFocus) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "input-dynamic-width-bar__btn_close",
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation(e);
+      setValueInside('');
+      if (!isOpen) {
+        setIsFocus(false);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("img", _close_icon["default"])));
+};
+var _default = exports["default"] = InputDynamicWidth;