@designbasekorea/ui 0.2.34 → 0.2.36

package/dist/index.umd.js

@@ -4012,7 +4012,7 @@
     ModalBody.displayName = 'ModalBody';
     ModalFooter.displayName = 'ModalFooter';
 
-    const Label = ({ children, htmlFor, required = false, size = 'm', disabled = false, error = false, className, onClick, }) => {
+    const Label = ({ children, htmlFor, required = false, size = 's', disabled = false, error = false, className, onClick, }) => {
         const classes = [
             'designbase-label',
             `designbase-label--${size}`,
@@ -4059,7 +4059,7 @@
             lg: 18,
         };
         const iconSize = iconSizeMap[size];
-        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), jsxRuntime.jsxs("div", { className: "designbase-input__wrapper", children: [actualStartIcon && (jsxRuntime.jsx("div", { className: "designbase-input__start-icon", children: React.createElement(actualStartIcon, { size: iconSize }) })), jsxRuntime.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: actualType, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), isPassword && (jsxRuntime.jsx("button", { type: "button", className: "designbase-input__password-toggle", onClick: handlePasswordToggle, disabled: disabled, "aria-label": showPassword ? '비밀번호 숨기기' : '비밀번호 보기', children: React.createElement(PasswordIcon, { size: iconSize }) })), EndIcon && !isPassword && (jsxRuntime.jsx("div", { className: "designbase-input__end-icon", children: React.createElement(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntime.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
+        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 's' : size === 'm' ? 'm' : 'l', children: label })), jsxRuntime.jsxs("div", { className: "designbase-input__wrapper", children: [actualStartIcon && (jsxRuntime.jsx("div", { className: "designbase-input__start-icon", children: React.createElement(actualStartIcon, { size: iconSize }) })), jsxRuntime.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: actualType, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), isPassword && (jsxRuntime.jsx("button", { type: "button", className: "designbase-input__password-toggle", onClick: handlePasswordToggle, disabled: disabled, "aria-label": showPassword ? '비밀번호 숨기기' : '비밀번호 보기', children: React.createElement(PasswordIcon, { size: iconSize }) })), EndIcon && !isPassword && (jsxRuntime.jsx("div", { className: "designbase-input__end-icon", children: React.createElement(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntime.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
     });
     Input.displayName = 'Input';
 
@@ -5322,17 +5322,19 @@
 
     /* ----------------------- 유틸 ----------------------- */
     const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+    const normalizeHex = (s) => (s || '').trim().toUpperCase();
+    /** #RRGGBB → {r,g,b} */
     const hexToRgb = (hex) => {
         const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
         if (!m)
             return null;
         return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
     };
-    const rgbToHex = (r, g, b) => {
-        const toHex = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
-        return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+    /** RGB → HEX */
+    const toHex = (r, g, b) => {
+        const h = (x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, '0');
+        return `#${h(r)}${h(g)}${h(b)}`.toUpperCase();
     };
-    /** RGB ↔ HSV (HSV: h[0-360], s[0-100], v[0-100]) */
     const rgbToHsv = (r, g, b) => {
         r /= 255;
         g /= 255;
@@ -5356,7 +5358,7 @@
         }
         const s = max === 0 ? 0 : d / max;
         const v = max;
-        return { h: Math.round(h * 100) / 100, s: Math.round(s * 10000) / 100, v: Math.round(v * 10000) / 100 };
+        return { h, s: s * 100, v: v * 100 };
     };
     const hsvToRgb = (h, s, v) => {
         s /= 100;
@@ -5424,86 +5426,123 @@
             }
             h *= 60;
         }
-        return {
-            h: Math.round(h * 100) / 100,
-            s: Math.round(s * 10000) / 100,
-            l: Math.round(l * 10000) / 100,
-        };
+        return { h, s: s * 100, l: l * 100 };
     };
     /* ----------------------- 컴포넌트 ----------------------- */
-    const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, onApply, onCancel, className, }) => {
-        /** 내부 HSV + alpha */
-        const [h, setH] = React.useState(211);
-        const [s, setS] = React.useState(100);
-        const [v, setV] = React.useState(50);
+    const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChangeFormat = 'hex', fireOnInit = false, changeDebounceMs = 0, onChange, onApply, onCancel, className, }) => {
+        /** 초기 HSV는 props에서 즉시 도출(StrictMode 안전) */
+        const initialHex = normalizeHex(value || defaultValue) || '#006FFF';
+        const initialRgb = hexToRgb(initialHex) || { r: 0, g: 111, b: 255 };
+        const initialHsv = rgbToHsv(initialRgb.r, initialRgb.g, initialRgb.b);
+        const [h, setH] = React.useState(() => initialHsv.h);
+        const [s, setS] = React.useState(() => initialHsv.s);
+        const [v, setV] = React.useState(() => initialHsv.v);
         const [a, setA] = React.useState(100);
         const [isOpen, setIsOpen] = React.useState(false);
         const [format, setFormat] = React.useState('hex');
         const [isCopied, setIsCopied] = React.useState(false);
-        const [colorInput, setColorInput] = React.useState('');
+        const [colorInput, setColorInput] = React.useState(() => initialHex);
         const [alphaInput, setAlphaInput] = React.useState('100');
         const [tempColor, setTempColor] = React.useState('');
         const pickerRef = React.useRef(null);
         const areaRef = React.useRef(null);
         const dragging = React.useRef(false);
-        /** 초기값 세팅 */
+        /** onChange 보호 상태 */
+        const lastEmittedRef = React.useRef(normalizeHex(initialHex)); // ✅ 초기값 미리 기록
+        const didMountRef = React.useRef(false); // ✅ 첫 렌더 감지
+        const emitErrorCountRef = React.useRef(0);
+        const emitBlockedUntilRef = React.useRef(0);
+        /** 제어형(value) 변화 → HSV 반영 */
         React.useEffect(() => {
-            const initial = (value || defaultValue).toUpperCase();
-            const rgb = hexToRgb(initial);
-            if (rgb) {
-                const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                setH(h);
-                setS(s);
-                setV(v);
-            }
-            setColorInput(initial);
-            setAlphaInput('100');
-        }, []);
-        /** 제어형(value) → HSV */
-        React.useEffect(() => {
-            if (!value)
+            if (value == null)
                 return;
-            const rgb = hexToRgb(value);
-            if (rgb) {
-                const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                setH(h);
-                setS(s);
-                setV(v);
-            }
+            const norm = normalizeHex(value);
+            const rgb = hexToRgb(norm);
+            if (!rgb)
+                return;
+            const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+            setH(hsv.h);
+            setS(hsv.s);
+            setV(hsv.v);
+            setColorInput(norm);
         }, [value]);
-        /** RGB/HSL 계산 */
+        /** 파생값 */
         const rgb = React.useMemo(() => hsvToRgb(h, s, v), [h, s, v]);
-        const hex = React.useMemo(() => rgbToHex(rgb.r, rgb.g, rgb.b), [rgb]);
+        const hex = React.useMemo(() => toHex(rgb.r, rgb.g, rgb.b), [rgb]);
         const hsl = React.useMemo(() => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb]);
-        /** 출력값 formatted */
-        const formatted = React.useMemo(() => {
+        /** UI 표시 문자열 */
+        const uiFormatted = React.useMemo(() => {
             const alpha = a / 100;
             switch (format) {
                 case 'hex': return hex;
                 case 'rgb': return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
                 case 'rgba': return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
-                case 'hsl': return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
-                case 'hsla': return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`;
+                case 'hsl': return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
+                case 'hsla': return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${alpha.toFixed(2)})`;
                 default: return hex;
             }
         }, [format, hex, rgb, hsl, a]);
-        /** ✅ 무한 루프 방지: formatted이 부모 value랑 같으면 onChange 호출하지 않음 */
+        /** 콜백으로 내보낼 문자열 */
+        const outward = React.useMemo(() => {
+            if (onChangeFormat === 'hex')
+                return hex;
+            return uiFormatted;
+        }, [hex, uiFormatted, onChangeFormat]);
+        /** 최초 렌더 스킵 + 동일값/레이트리밋 검사 후 onChange */
         React.useEffect(() => {
-            if (value !== undefined && value.toUpperCase() === formatted.toUpperCase())
+            if (!onChange)
+                return;
+            // 첫 렌더는 기본 차단 (옵션으로 허용)
+            if (!didMountRef.current) {
+                didMountRef.current = true;
+                if (!fireOnInit)
+                    return; // 기본: 초기 발사 금지
+            }
+            const now = Date.now();
+            if (emitBlockedUntilRef.current > now)
                 return;
-            onChange?.(formatted);
+            const currentHexNorm = normalizeHex(outward);
+            const last = lastEmittedRef.current;
+            // 제어형: 부모 value와 동일하면 발사 금지
+            if (value && normalizeHex(value) === currentHexNorm)
+                return;
+            // 직전 발사값과 동일하면 금지
+            if (last === currentHexNorm)
+                return;
+            const fire = () => {
+                try {
+                    lastEmittedRef.current = currentHexNorm;
+                    onChange(onChangeFormat === 'hex' ? currentHexNorm : outward);
+                    emitErrorCountRef.current = 0;
+                }
+                catch (e) {
+                    emitErrorCountRef.current += 1;
+                    if (emitErrorCountRef.current >= 20) {
+                        emitBlockedUntilRef.current = Date.now() + 3000;
+                        // eslint-disable-next-line no-console
+                        console.warn('[ColorPicker] onChange errors too frequent; temporarily muted.');
+                    }
+                }
+            };
+            if (changeDebounceMs > 0) {
+                const t = setTimeout(fire, changeDebounceMs);
+                return () => clearTimeout(t);
+            }
+            fire();
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [formatted]); // onChange와 value를 의존성에서 제거
-        /** formatted 변경시 colorInput 동기화 */
+        }, [outward]); // 의도적으로 onChange/value 제외
+        /** colorInput 동기화(표시 전용) */
         React.useEffect(() => {
-            setColorInput(formatted.toUpperCase());
-        }, [formatted]);
+            const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+            if (colorInput !== next)
+                setColorInput(next);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [uiFormatted, format]);
         /** 드롭다운 외부 클릭 닫기 */
         React.useEffect(() => {
             const handler = (e) => {
-                if (pickerRef.current && !pickerRef.current.contains(e.target)) {
+                if (pickerRef.current && !pickerRef.current.contains(e.target))
                     setIsOpen(false);
-                }
             };
             if (isOpen && type === 'dropdown')
                 document.addEventListener('mousedown', handler);
@@ -5517,8 +5556,8 @@
             const rect = el.getBoundingClientRect();
             const x = clamp(clientX - rect.left, 0, rect.width);
             const y = clamp(clientY - rect.top, 0, rect.height);
-            const newS = Math.round((x / rect.width) * 100);
-            const newV = Math.round(100 - (y / rect.height) * 100);
+            const newS = (x / rect.width) * 100;
+            const newV = 100 - (y / rect.height) * 100;
             setS(newS);
             setV(newV);
         };
@@ -5532,13 +5571,13 @@
             return; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
         const onAreaTouchEnd = () => { dragging.current = false; };
         /** 슬라이더 */
-        const onHueChange = React.useCallback((e) => setH(parseInt(e.target.value, 10)), []);
+        const onHueChange = React.useCallback((e) => setH(parseFloat(e.target.value)), []);
         const onAlphaChange = React.useCallback((e) => {
             const newAlpha = parseInt(e.target.value, 10);
             setA(newAlpha);
             setAlphaInput(String(newAlpha));
         }, []);
-        /** 컬러 인풋 (엔터 확정) */
+        /** 컬러 인풋 확정 */
         const commitColorInput = React.useCallback(() => {
             const str = colorInput.trim();
             if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
@@ -5547,7 +5586,7 @@
                 setH(hsv.h);
                 setS(hsv.s);
                 setV(hsv.v);
-                setColorInput(str.toUpperCase());
+                setColorInput(normalizeHex(str));
                 return;
             }
             let m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(str);
@@ -5559,7 +5598,7 @@
                 setH(hsv.h);
                 setS(hsv.s);
                 setV(hsv.v);
-                setColorInput(`rgb(${r}, ${g}, ${b})`.toUpperCase());
+                setColorInput(`rgb(${r}, ${g}, ${b})`);
                 return;
             }
             m = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(str);
@@ -5574,42 +5613,47 @@
                 setV(hsv.v);
                 setA(Math.round(alpha * 100));
                 setAlphaInput(String(Math.round(alpha * 100)));
-                setColorInput(`rgba(${r}, ${g}, ${b}, ${alpha})`.toUpperCase());
+                setColorInput(`rgba(${r}, ${g}, ${b}, ${alpha})`);
                 return;
             }
-            setColorInput(formatted.toUpperCase());
-        }, [colorInput, formatted]);
-        const onColorKeyDown = (e) => {
-            if (e.key === 'Enter')
-                commitColorInput();
+            // 인식 실패 → 표시값으로 원복
+            setColorInput(format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted);
+        }, [colorInput, uiFormatted, format]);
+        const onColorKeyDown = (e) => { if (e.key === 'Enter')
+            commitColorInput(); };
+        const onColorBlur = () => {
+            const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+            if (colorInput !== next)
+                setColorInput(next);
         };
-        const onColorBlur = () => setColorInput(formatted.toUpperCase());
-        /** 알파 인풋 (엔터 확정) */
+        /** 알파 인풋 확정 */
         const commitAlphaInput = React.useCallback(() => {
             const n = Number(alphaInput.trim());
             if (!Number.isNaN(n) && n >= 0 && n <= 100) {
-                setA(Math.round(n));
-                setAlphaInput(String(Math.round(n)));
+                const rounded = Math.round(n);
+                if (a !== rounded)
+                    setA(rounded);
+                if (alphaInput !== String(rounded))
+                    setAlphaInput(String(rounded));
                 return;
             }
             setAlphaInput(String(a));
         }, [alphaInput, a]);
-        const onAlphaInputKeyDown = (e) => {
-            if (e.key === 'Enter')
-                commitAlphaInput();
-        };
-        const onAlphaInputBlur = () => setAlphaInput(String(a));
+        const onAlphaInputKeyDown = (e) => { if (e.key === 'Enter')
+            commitAlphaInput(); };
+        const onAlphaInputBlur = () => { if (alphaInput !== String(a))
+            setAlphaInput(String(a)); };
         /** 복사 */
         const onCopy = React.useCallback(async () => {
             try {
-                await navigator.clipboard.writeText(formatted);
+                await navigator.clipboard.writeText(uiFormatted);
                 setIsCopied(true);
                 setTimeout(() => setIsCopied(false), 1600);
             }
             catch (e) {
                 console.error(e);
             }
-        }, [formatted]);
+        }, [uiFormatted]);
         /** EyeDropper */
         const onEyedrop = React.useCallback(async () => {
             try {
@@ -5627,7 +5671,7 @@
                 console.error(e);
             }
         }, []);
-        /** modal open(중요: formatted deps 제거) */
+        /** 모달 */
         const handleModalOpen = React.useCallback(() => {
             if (type === 'modal')
                 setTempColor(hex);
@@ -5635,10 +5679,11 @@
         }, [type, hex]);
         const handleModalApply = React.useCallback(() => {
             if (type === 'modal') {
-                onApply?.(formatted);
+                const out = onChangeFormat === 'hex' ? hex : uiFormatted;
+                onApply?.(out);
                 setIsOpen(false);
             }
-        }, [type, formatted, onApply]);
+        }, [type, hex, uiFormatted, onApply, onChangeFormat]);
         const handleModalCancel = React.useCallback(() => {
             if (type === 'modal') {
                 const rgb = hexToRgb(tempColor);
@@ -5655,28 +5700,28 @@
         /** 스타일 */
         const hueTrackStyle = React.useMemo(() => ({
             background: `linear-gradient(to right,
-            hsl(0,100%,50%),
-            hsl(60,100%,50%),
-            hsl(120,100%,50%),
-            hsl(180,100%,50%),
-            hsl(240,100%,50%),
-            hsl(300,100%,50%),
-            hsl(360,100%,50%))`,
+      hsl(0,100%,50%),
+      hsl(60,100%,50%),
+      hsl(120,100%,50%),
+      hsl(180,100%,50%),
+      hsl(240,100%,50%),
+      hsl(300,100%,50%),
+      hsl(360,100%,50%))`,
         }), []);
         const areaBackground = React.useMemo(() => ({
             backgroundImage: `
-            linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
-            linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
-        `,
+      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
+      linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
+    `,
         }), [h]);
         const alphaTrackStyle = React.useMemo(() => ({
             backgroundImage: `
-            linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
-            linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
-            linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
-            linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))
-        `,
+      linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
+      linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))
+    `,
             backgroundSize: '8px 8px,8px 8px,8px 8px,8px 8px,100% 100%',
             backgroundPosition: '0 0,0 4px,4px -4px,-4px 0,0 0',
             backgroundColor: 'var(--db-surface-base)',
@@ -5688,9 +5733,7 @@
             'designbase-color-picker--no-input': !showInput,
         }, className);
         const Trigger = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && (type === 'modal' ? handleModalOpen() : setIsOpen(v => !v)), children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-display", children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-box", style: {
-                            backgroundColor: showAlpha
-                                ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})`
-                                : hex
+                            backgroundColor: showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})` : hex
                         } }) }), showInput && (jsxRuntime.jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => { e.stopPropagation(); onCopy(); }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) })), jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] }));
         const Selector = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-area", children: jsxRuntime.jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.EyedropperIcon, {}) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__slider-container", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__hue-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 360, value: h, onChange: onHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue", style: hueTrackStyle }) }), showAlpha && (jsxRuntime.jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] })] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxRuntime.jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
                                 { label: 'HEX', value: 'hex' },
@@ -7002,7 +7045,7 @@
         }, className);
         const textareaClasses = clsx('designbase-textarea__field', textareaClassName);
         const isOverLimit = maxLength && currentLength > maxLength;
-        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: textareaId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), showCharacterCount && characterCountPosition === 'top' && (jsxRuntime.jsx("div", { className: "designbase-textarea__character-count designbase-textarea__character-count--top", children: jsxRuntime.jsxs("span", { className: clsx('designbase-textarea__character-count-text', {
+        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: textareaId, required: required, error: error, disabled: disabled, size: size === 's' ? 's' : size === 'm' ? 'm' : 'l', children: label })), showCharacterCount && characterCountPosition === 'top' && (jsxRuntime.jsx("div", { className: "designbase-textarea__character-count designbase-textarea__character-count--top", children: jsxRuntime.jsxs("span", { className: clsx('designbase-textarea__character-count-text', {
                             'designbase-textarea__character-count-text--error': isOverLimit
                         }), children: [currentLength, maxLength && ` / ${maxLength}`] }) })), jsxRuntime.jsx("div", { className: "designbase-textarea__wrapper", children: jsxRuntime.jsx("textarea", { ref: forwardedRef, id: textareaId, className: textareaClasses, placeholder: placeholder, defaultValue: defaultValue, value: value, rows: rows, maxLength: maxLength, disabled: disabled, readOnly: readOnly, required: required, "aria-describedby": clsx({
                             [helperTextId]: helperText,