@homecode/ui 5.1.0 → 5.1.2

package/dist/esm/src/components/Gallery/Gallery.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Component, createRef } from 'react';
+import { Component, createRef, useState, useRef, useLayoutEffect } from 'react';
 import { createStore } from 'justorm/react';
 import Time from 'timen';
 import compare from 'compareq';
@@ -19,18 +19,60 @@ const DIR_NAME = {
     '1': 'left',
     '-1': 'right',
 };
+function galleryStoreTarget(store) {
+    const o = store;
+    if (o.originalObject == null) {
+        throw new Error('Gallery: justorm store missing originalObject');
+    }
+    return o.originalObject;
+}
 function getInitialState(items, startIndex) {
     return circularSlice(items, startIndex, 3);
 }
 function Arr({ className, size, icon, ...rest }) {
     return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
 }
-function Item({ src, size, isLoaded, isError, onLoad, onError }) {
+function Item({ src, size }) {
+    const [loaded, setLoaded] = useState(false);
+    const [isError, setIsError] = useState(false);
     const style = {};
-    if (isLoaded)
+    const imgRef = useRef(null);
+    useLayoutEffect(() => {
+        const img = imgRef.current;
+        if (!img || isError)
+            return;
+        let cancelled = false;
+        const notify = () => {
+            if (!cancelled)
+                setLoaded(true);
+        };
+        // Cached images may never fire `load` after mount; `decode()` covers that path.
+        if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
+            notify();
+            return () => {
+                cancelled = true;
+            };
+        }
+        if (typeof img.decode === 'function') {
+            img.decode().then(notify).catch(() => { });
+            return () => {
+                cancelled = true;
+            };
+        }
+        requestAnimationFrame(() => {
+            if (!cancelled &&
+                img.complete &&
+                (img.naturalWidth > 0 || img.naturalHeight > 0))
+                notify();
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src, isError]);
+    if (loaded)
         style.backgroundImage = `url(${src})`;
-    return (jsx("div", { className: S.item, style: style, children: !isLoaded &&
-            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { src: src, onLoad: onLoad, onError: onError }), jsx(Spinner, { size: size })] }))) }));
+    return (jsx("div", { className: S.item, style: style, children: !loaded &&
+            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { ref: imgRef, src: src, onLoad: () => setLoaded(true), onError: () => setIsError(true) }), jsx(Spinner, { size: size })] }))) }));
 }
 class Gallery extends Component {
     store;
@@ -46,14 +88,12 @@ class Gallery extends Component {
     };
     constructor(props) {
         super(props);
-        const { startIndex, items } = props;
+        const { startIndex } = props;
         this.recenter();
         this.index = startIndex;
         this.store = createStore(this, {
             items: this.getStateItems(),
             movingDirection: 0,
-            loading: {},
-            errors: {},
             isDragging: false,
         });
     }
@@ -69,7 +109,9 @@ class Gallery extends Component {
             !compare(prevProps.items, items)) {
             this.index = startIndex;
             this.recenter();
-            this.store.items = this.getStateItems();
+            const next = this.getStateItems();
+            Object.assign(galleryStoreTarget(this.store), { items: next });
+            this.setState({});
         }
     }
     getStateItems() {
@@ -144,20 +186,20 @@ class Gallery extends Component {
     }, DURATION);
     switch(direction) {
         this.index += direction * -1;
-        this.store.items = circularSlice(this.items, this.index, 3);
-        this.store.movingDirection = 0;
+        const nextItems = circularSlice(this.items, this.index, 3);
+        // justorm v3: proxy set skips when compareq sees no change; bypass via originalObject.
+        Object.assign(galleryStoreTarget(this.store), {
+            items: nextItems,
+            movingDirection: 0,
+        });
         this.removeTransformDelta();
+        this.setState({});
         const { onChange } = this.props;
-        const { items, loading } = this.store;
         onChange?.(this.index, this.items[this.index]);
-        items.forEach(src => {
-            if (typeof loading[src] !== 'boolean')
-                loading[src] = false;
-        });
     }
     render() {
         const { className, size, showArrows, showDots, initialBounce, cover, ...rest } = this.props;
-        const { items, movingDirection, loading, errors, isDragging } = this.store;
+        const { items, movingDirection, isDragging } = this.store;
         const dirName = DIR_NAME[movingDirection];
         const isSingle = this.isSingle();
         const props = omit(rest, ['items', 'onChange', 'animation', 'startIndex']);
@@ -171,7 +213,7 @@ class Gallery extends Component {
                 props.onPointerLeave = this.onPointerUp;
             }
         }
-        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size, isLoaded: loading[src], isError: errors[src], onLoad: () => (loading[src] = true), onError: () => (errors[src] = true) }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
                     // @ts-ignore
                     index: this.index % items.length, count: items.length }))] }));
     }

package/dist/esm/src/components/Gallery/Gallery.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
 var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","arr":"Gallery_arr__knicI"};
 styleInject(css_248z);
 

package/dist/esm/src/components/Input/Input.js

@@ -27,7 +27,7 @@ const Input = forwardRef((props, ref) => {
             ref.current = element;
         }
     };
-    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, clearPaddingLeft, clearPaddingRight, forceLabelOnTop, scrollProps, step = 1, round, autoFocus, className, } = props;
+    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, clearPaddingLeft, clearPaddingRight, forceLabelOnTop, scrollProps, step = 1, round, autoFocus, className, fitContentWidth, } = props;
     const updateAutoComplete = () => {
         const form = inputRef.current?.closest('form');
         const val = form?.getAttribute('autocomplete');
@@ -272,7 +272,7 @@ const Input = forwardRef((props, ref) => {
             setTextareaValue(String(value ?? ''));
     }, []);
     const Control = isTextArea ? 'span' : 'input';
-    const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, className);
+    const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, fitContentWidth && !isTextArea && S.fitContentWidth, className);
     return (jsxs("div", { className: classes, children: [jsxs("label", { className: cn(S.main, clearPaddingLeft && S.clearPaddingLeft, clearPaddingRight && S.clearPaddingRight), children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: setRef, key: "control" }), isTextArea &&
                                 controlProps.placeholder &&
                                 !controlProps.value && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder }))] })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => onNumberWheel(1), tabIndex: -1, children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => onNumberWheel(-1), tabIndex: -1, children: jsx(Icon, { type: "chevronDown", size: size }) })] })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: onLabelClipPathChange, children: label }, "label"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, round: round, onClick: onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), renderAddon('right'), required && !hideRequiredStar && (jsx(RequiredStar, { size: size }, "required-star"))] }, "main"), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));

package/dist/esm/src/components/Input/Input.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_main__M6Qxb,.Input_root__kj4vQ{width:100%}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_main__M6Qxb.Input_clearPaddingRight__sGl9l{padding-right:0!important}.Input_main__M6Qxb.Input_clearPaddingLeft__LBlwM{padding-left:0!important}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto;max-height:inherit!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:transparent}.Input_isFocused__9jtFN.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-xs__b5Kx7{font-size:14px}.Input_size-xs__b5Kx7 .Input_main__M6Qxb{border-radius:4px;font-size:14px;min-height:24px;min-width:24px;padding:0 0 0 8px}.Input_round__yJr-2.Input_size-xs__b5Kx7 .Input_main__M6Qxb{border-radius:12px}.Input_size-s__-U0r-{font-size:16px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:16px;min-height:32px;min-width:32px;padding:0 0 0 12px}.Input_round__yJr-2.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:16px}.Input_size-m__jTEMl{font-size:18px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:18px;min-height:40px;min-width:40px;padding:0 0 0 16px}.Input_round__yJr-2.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:20px}.Input_size-l__BR-zg{font-size:22px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:22px;min-height:48px;min-width:48px;padding:0 0 0 20px}.Input_round__yJr-2.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:24px}.Input_size-xl__o-R-1{font-size:26px}.Input_size-xl__o-R-1 .Input_main__M6Qxb{border-radius:10px;font-size:26px;min-height:56px;min-width:56px;padding:0 0 0 24px}.Input_round__yJr-2.Input_size-xl__o-R-1 .Input_main__M6Qxb{border-radius:28px}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_controlWrapper__WgrZL{flex:1}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;height:100%;min-width:30px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-xs__b5Kx7 .Input_control__wZcMD{padding-right:10px}.Input_size-s__-U0r- .Input_control__wZcMD{padding-right:12px}.Input_size-m__jTEMl .Input_control__wZcMD{padding-right:16px}.Input_size-l__BR-zg .Input_control__wZcMD{padding-right:20px}.Input_size-xl__o-R-1 .Input_control__wZcMD{padding-right:22px}.Input_size-xs__b5Kx7.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:34px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:36px}.Input_size-xl__o-R-1.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:40px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;min-height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_control__wZcMD[type=number]{-moz-appearance:textfield;margin-right:14px}.Input_control__wZcMD[type=number]::-webkit-inner-spin-button,.Input_control__wZcMD[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.Input_numberArrows__8jveR{display:flex;flex-direction:column;height:100%;position:absolute;right:0}.Input_numberArrows__8jveR>button{background-color:transparent!important;height:50%;max-height:none;min-height:0;min-height:auto;opacity:.5;padding-left:0;padding-right:0;transition:opacity .1s ease-out;width:50%}.Input_numberArrows__8jveR>button:hover{opacity:1}.Input_size-xs__b5Kx7 .Input_numberArrows__8jveR>button{min-width:19.2px}.Input_size-s__-U0r- .Input_numberArrows__8jveR>button{min-width:25.6px}.Input_size-m__jTEMl .Input_numberArrows__8jveR>button{min-width:32px}.Input_size-l__BR-zg .Input_numberArrows__8jveR>button{min-width:38.4px}.Input_size-xl__o-R-1 .Input_numberArrows__8jveR>button{min-width:44.8px}.Input_numberArrows__8jveR>button>svg{transform:scale(.8)}.Input_numberArrows__8jveR>button:first-child>svg{margin-bottom:-5%}.Input_numberArrows__8jveR>button:last-child>svg{margin-top:-5%}.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding-left:0!important}.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:6px 12px 0 8px}.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:6px}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 16px 0 12px}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 20px 0 16px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 24px 0 20px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:14px 28px 0 24px}.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:14px}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;flex-shrink:0;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_size-xs__b5Kx7 .Input_addonLeft__i1c70{margin-right:calc(var(--p-2)/2)}.Input_size-s__-U0r- .Input_addonLeft__i1c70{margin-right:calc(var(--p-3)/2)}.Input_size-m__jTEMl .Input_addonLeft__i1c70{margin-right:calc(var(--p-5)/2)}.Input_size-l__BR-zg .Input_addonLeft__i1c70{margin-right:calc(var(--p-8)/2)}.Input_size-xl__o-R-1 .Input_addonLeft__i1c70{margin-right:calc(var(--p-10)/2)}.Input_size-xs__b5Kx7 .Input_addonRight__A9Iht{margin-left:calc(var(--p-2)/2)}.Input_size-s__-U0r- .Input_addonRight__A9Iht{margin-left:calc(var(--p-3)/2)}.Input_size-m__jTEMl .Input_addonRight__A9Iht{margin-left:calc(var(--p-5)/2)}.Input_size-l__BR-zg .Input_addonRight__A9Iht{margin-left:calc(var(--p-8)/2)}.Input_size-xl__o-R-1 .Input_addonRight__A9Iht{margin-left:calc(var(--p-10)/2)}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-xs__b5Kx7 .Input_requiredStar__6MeQ4{right:3px;top:3px}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_size-xl__o-R-1 .Input_requiredStar__6MeQ4{right:10px;top:10px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-xs__b5Kx7 .Input_clearIcon__Gi1Nc{height:8px;width:8px}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}";
-var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","controlWrapper":"Input_controlWrapper__WgrZL","clearPaddingRight":"Input_clearPaddingRight__sGl9l","clearPaddingLeft":"Input_clearPaddingLeft__LBlwM","border":"Input_border__01i-B","variant-clean":"Input_variant-clean__yjtdm","isFocused":"Input_isFocused__9jtFN","variant-default":"Input_variant-default__frNbg","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","size-xs":"Input_size-xs__b5Kx7","round":"Input_round__yJr-2","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","size-xl":"Input_size-xl__o-R-1","control":"Input_control__wZcMD","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","scroller":"Input_scroller__OBm8M","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","numberArrows":"Input_numberArrows__8jveR","placeholder":"Input_placeholder__DRYLA","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc"};
+var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_main__M6Qxb,.Input_root__kj4vQ{width:100%}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_main__M6Qxb.Input_clearPaddingRight__sGl9l{padding-right:0!important}.Input_main__M6Qxb.Input_clearPaddingLeft__LBlwM{padding-left:0!important}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto;max-height:inherit!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:transparent}.Input_isFocused__9jtFN.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-xs__b5Kx7{font-size:14px}.Input_size-xs__b5Kx7 .Input_main__M6Qxb{border-radius:4px;font-size:14px;min-height:24px;min-width:24px;padding:0 0 0 8px}.Input_round__yJr-2.Input_size-xs__b5Kx7 .Input_main__M6Qxb{border-radius:12px}.Input_size-s__-U0r-{font-size:16px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:16px;min-height:32px;min-width:32px;padding:0 0 0 12px}.Input_round__yJr-2.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:16px}.Input_size-m__jTEMl{font-size:18px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:18px;min-height:40px;min-width:40px;padding:0 0 0 16px}.Input_round__yJr-2.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:20px}.Input_size-l__BR-zg{font-size:22px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:22px;min-height:48px;min-width:48px;padding:0 0 0 20px}.Input_round__yJr-2.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:24px}.Input_size-xl__o-R-1{font-size:26px}.Input_size-xl__o-R-1 .Input_main__M6Qxb{border-radius:10px;font-size:26px;min-height:56px;min-width:56px;padding:0 0 0 24px}.Input_round__yJr-2.Input_size-xl__o-R-1 .Input_main__M6Qxb{border-radius:28px}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_controlWrapper__WgrZL{flex:1}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;height:100%;min-width:30px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-xs__b5Kx7 .Input_control__wZcMD{padding-right:10px}.Input_size-s__-U0r- .Input_control__wZcMD{padding-right:12px}.Input_size-m__jTEMl .Input_control__wZcMD{padding-right:16px}.Input_size-l__BR-zg .Input_control__wZcMD{padding-right:20px}.Input_size-xl__o-R-1 .Input_control__wZcMD{padding-right:22px}.Input_size-xs__b5Kx7.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:34px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:36px}.Input_size-xl__o-R-1.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:40px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;min-height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_control__wZcMD[type=number]{-moz-appearance:textfield;margin-right:14px}.Input_control__wZcMD[type=number]::-webkit-inner-spin-button,.Input_control__wZcMD[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.Input_numberArrows__8jveR{display:flex;flex-direction:column;height:100%;position:absolute;right:0}.Input_numberArrows__8jveR>button{background-color:transparent!important;height:50%;max-height:none;min-height:0;min-height:auto;opacity:.5;padding-left:0;padding-right:0;transition:opacity .1s ease-out;width:50%}.Input_numberArrows__8jveR>button:hover{opacity:1}.Input_size-xs__b5Kx7 .Input_numberArrows__8jveR>button{min-width:19.2px}.Input_size-s__-U0r- .Input_numberArrows__8jveR>button{min-width:25.6px}.Input_size-m__jTEMl .Input_numberArrows__8jveR>button{min-width:32px}.Input_size-l__BR-zg .Input_numberArrows__8jveR>button{min-width:38.4px}.Input_size-xl__o-R-1 .Input_numberArrows__8jveR>button{min-width:44.8px}.Input_numberArrows__8jveR>button>svg{transform:scale(.8)}.Input_numberArrows__8jveR>button:first-child>svg{margin-bottom:-5%}.Input_numberArrows__8jveR>button:last-child>svg{margin-top:-5%}.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding-left:0!important}.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:6px 12px 0 8px}.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-xs__b5Kx7.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:6px}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 16px 0 12px}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 20px 0 16px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 24px 0 20px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:14px 28px 0 24px}.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-xl__o-R-1.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:14px}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;flex-shrink:0;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_size-xs__b5Kx7 .Input_addonLeft__i1c70{margin-right:calc(var(--p-2)/2)}.Input_size-s__-U0r- .Input_addonLeft__i1c70{margin-right:calc(var(--p-3)/2)}.Input_size-m__jTEMl .Input_addonLeft__i1c70{margin-right:calc(var(--p-5)/2)}.Input_size-l__BR-zg .Input_addonLeft__i1c70{margin-right:calc(var(--p-8)/2)}.Input_size-xl__o-R-1 .Input_addonLeft__i1c70{margin-right:calc(var(--p-10)/2)}.Input_size-xs__b5Kx7 .Input_addonRight__A9Iht{margin-left:calc(var(--p-2)/2)}.Input_size-s__-U0r- .Input_addonRight__A9Iht{margin-left:calc(var(--p-3)/2)}.Input_size-m__jTEMl .Input_addonRight__A9Iht{margin-left:calc(var(--p-5)/2)}.Input_size-l__BR-zg .Input_addonRight__A9Iht{margin-left:calc(var(--p-8)/2)}.Input_size-xl__o-R-1 .Input_addonRight__A9Iht{margin-left:calc(var(--p-10)/2)}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-xs__b5Kx7 .Input_requiredStar__6MeQ4{right:3px;top:3px}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_size-xl__o-R-1 .Input_requiredStar__6MeQ4{right:10px;top:10px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-xs__b5Kx7 .Input_clearIcon__Gi1Nc{height:8px;width:8px}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}@supports (field-sizing:content){.Input_root__kj4vQ.Input_fitContentWidth__H0MTc,.Input_root__kj4vQ.Input_fitContentWidth__H0MTc .Input_main__M6Qxb{max-width:100%;width:-moz-fit-content;width:fit-content}.Input_root__kj4vQ.Input_fitContentWidth__H0MTc .Input_controlWrapper__WgrZL{flex:0 1 auto;max-width:100%;width:-moz-fit-content;width:fit-content}.Input_root__kj4vQ.Input_fitContentWidth__H0MTc .Input_control__wZcMD{field-sizing:content;flex-grow:0;max-width:100%;width:auto}}";
+var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","controlWrapper":"Input_controlWrapper__WgrZL","clearPaddingRight":"Input_clearPaddingRight__sGl9l","clearPaddingLeft":"Input_clearPaddingLeft__LBlwM","border":"Input_border__01i-B","variant-clean":"Input_variant-clean__yjtdm","isFocused":"Input_isFocused__9jtFN","variant-default":"Input_variant-default__frNbg","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","size-xs":"Input_size-xs__b5Kx7","round":"Input_round__yJr-2","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","size-xl":"Input_size-xl__o-R-1","control":"Input_control__wZcMD","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","scroller":"Input_scroller__OBm8M","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","numberArrows":"Input_numberArrows__8jveR","placeholder":"Input_placeholder__DRYLA","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc","fitContentWidth":"Input_fitContentWidth__H0MTc"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/types/src/components/Input/Input.d.ts

@@ -23,4 +23,5 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
     controlProps?: T.ControlProps & import("../../types").ComponentType;
     checkAutofill?: boolean;
     scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
+    fitContentWidth?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/types/src/components/Input/Input.types.d.ts

@@ -26,4 +26,6 @@ export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Om
     controlProps?: ControlProps & ComponentType;
     checkAutofill?: boolean;
     scrollProps?: Partial<ScrollProps>;
+    /** When true, width follows text via CSS `field-sizing: content` (non-textarea only). */
+    fitContentWidth?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",