@bothub-chat/ui 2.48.1-fix-message-79720dcc-0313-4bb2-ac15-912e6fc16d36 → 2.48.1-fix-message-81026f5e-584f-4918-8c1c-31e3d26f3769

package/dist/components/chip/styled.d.ts

@@ -53,6 +53,10 @@ export declare const ChipImage: import("styled-components").IStyledComponent<"we
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -261,6 +265,8 @@ export declare const ChipImage: import("styled-components").IStyledComponent<"we
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLImageElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLImageElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLImageElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLImageElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLImageElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLImageElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLImageElement> | undefined;
     onAnimationStart?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
@@ -269,26 +275,39 @@ export declare const ChipImage: import("styled-components").IStyledComponent<"we
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLImageElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLImageElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     height?: string | number | undefined;
     width?: string | number | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    useMap?: string | undefined | undefined;
-    fetchPriority?: "auto" | "high" | "low" | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
-    sizes?: string | undefined | undefined;
-    src?: (string | import("@/ui/components/image").ImageSrc) | undefined;
     alt?: string | undefined;
-    preload?: boolean | undefined;
-    loading?: import("@/ui/components/image").ImageLoadingVariant | undefined;
     decoding?: "async" | "auto" | "sync" | undefined | undefined;
+    fetchPriority?: "auto" | "high" | "low" | undefined;
+    loading?: import("@/ui/components/image").ImageLoadingVariant | undefined;
+    sizes?: string | undefined | undefined;
+    src?: (string | import("@/ui/components/image").ImageSrc) | undefined;
     srcSet?: string | undefined | undefined;
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    useMap?: string | undefined | undefined;
+    preload?: boolean | undefined;
+    ref?: import("react").Ref<HTMLImageElement> | undefined;
 }>;
 export declare const ChipText: import("styled-components").IStyledComponent<"web", {
-    children?: import("react").ReactNode;
     variant?: import("@/ui/components/typography").TypographyVariant | undefined;
+    component?: import("@/ui/components/typography").TypographyComponent | undefined;
+    align?: import("@/ui/components/typography").TypographyAlign | undefined;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    target?: import("react").HTMLAttributeAnchorTarget | undefined;
+    children?: import("react").ReactNode;
     hidden?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
     content?: string | undefined | undefined;
@@ -337,6 +356,10 @@ export declare const ChipText: import("styled-components").IStyledComponent<"web
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -545,6 +568,8 @@ export declare const ChipText: import("styled-components").IStyledComponent<"web
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
     onAnimationStart?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
@@ -553,23 +578,24 @@ export declare const ChipText: import("styled-components").IStyledComponent<"web
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLSpanElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLSpanElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-    target?: import("react").HTMLAttributeAnchorTarget | undefined;
-    href?: string | undefined;
-    align?: import("@/ui/components/typography").TypographyAlign | undefined;
-    component?: import("@/ui/components/typography").TypographyComponent | undefined;
-    fullWidth?: boolean | undefined;
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    ref?: import("react").Ref<HTMLSpanElement> | undefined;
 }>;
 export declare const ChipDeleteButton: import("styled-components").IStyledComponent<"web", {
-    value?: string | number | readonly string[] | undefined;
     children?: import("react").ReactNode;
-    variant?: import("@/ui/components/button").ButtonVariant | undefined;
+    value?: string | number | readonly string[] | undefined;
     hidden?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
     content?: string | undefined | undefined;
-    size?: import("@/ui/components/button").ButtonSize | undefined;
     style?: import("react").CSSProperties | undefined;
     disabled?: boolean | undefined | undefined;
     key?: import("react").Key | null | undefined;
@@ -616,6 +642,10 @@ export declare const ChipDeleteButton: import("styled-components").IStyledCompon
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -821,6 +851,8 @@ export declare const ChipDeleteButton: import("styled-components").IStyledCompon
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
     onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -828,26 +860,36 @@ export declare const ChipDeleteButton: import("styled-components").IStyledCompon
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     form?: string | undefined | undefined;
-    name?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
-    href?: string | undefined;
-    formAction?: string | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
     formMethod?: string | undefined | undefined;
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
-    htmlFor?: string | undefined;
-    component?: import("@/ui/components/button").ButtonComponent | undefined;
+    name?: string | undefined | undefined;
     fullWidth?: boolean | undefined;
-    skeleton?: boolean | undefined;
+    variant?: import("@/ui/components/button").ButtonVariant | undefined;
+    component?: import("@/ui/components/button").ButtonComponent | undefined;
+    size?: import("@/ui/components/button").ButtonSize | undefined;
     corner?: import("@/ui/components/button").ButtonCorner | undefined;
     startIcon?: import("react").ReactNode;
     endIcon?: import("react").ReactNode;
     iconSize?: number | undefined;
     iconFill?: string | undefined;
+    skeleton?: boolean | undefined;
+    htmlFor?: string | undefined;
+    href?: string | undefined;
     disableHoverColor?: boolean | undefined;
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | null> | null | undefined;
+    ref?: import("react").Ref<HTMLButtonElement | null> | undefined;
 }>;

package/dist/components/chip/styled.js

@@ -1,4 +1,4 @@
-import{jsx as e}from"react/jsx-runtime";import{styled as t,css as i}from"styled-components";import{Typography as r}from"../typography/index.js";import{Button as o}from"../button/index.js";import{CloseIcon as a}from"../../icons/close/index.js";import{Image as n}from"../image/index.js";const p=t.div.withConfig({displayName:"styled__ChipStyled",componentId:"sc-1b7zlhu-0"})(["display:inline-flex;align-items:center;",""],(({$variant:e})=>{switch(e){case"default":return i`
+import{jsx as e}from"react/jsx-runtime";import{styled as t,css as i}from"styled-components";import{Typography as r}from"../typography/index.js";import{Button as o}from"../button/index.js";import{CloseIcon as a}from"../../icons/close/index.js";import{Image as n}from"../image/index.js";const p=t.div.withConfig({displayName:"styled__ChipStyled",componentId:"sc-1b7zlhu-0"})(["display:inline-flex;align-items:center;",""],({$variant:e})=>{switch(e){case"default":return i`
           height: 26px;
           gap: 6px;
           border-radius: 6px;
@@ -13,4 +13,4 @@ import{jsx as e}from"react/jsx-runtime";import{styled as t,css as i}from"styled-
           &:hover {
             border-color: ${({theme:e})=>e.colors.accent.primary};
           }
-        `}})),s=t(n).attrs({width:18,height:18}).withConfig({displayName:"styled__ChipImage",componentId:"sc-1b7zlhu-1"})(["border-radius:2px;"]),d=t(r).attrs({variant:"body-s-medium"}).withConfig({displayName:"styled__ChipText",componentId:"sc-1b7zlhu-2"})(["cursor:inherit;user-select:none;"]),m=t(o).attrs({variant:"text",iconSize:12,children:e(a,{})}).withConfig({displayName:"styled__ChipDeleteButton",componentId:"sc-1b7zlhu-3"})([""]);export{m as ChipDeleteButton,s as ChipImage,p as ChipStyled,d as ChipText};
+        `}}),s=t(n).attrs({width:18,height:18}).withConfig({displayName:"styled__ChipImage",componentId:"sc-1b7zlhu-1"})(["border-radius:2px;"]),d=t(r).attrs({variant:"body-s-medium"}).withConfig({displayName:"styled__ChipText",componentId:"sc-1b7zlhu-2"})(["cursor:inherit;user-select:none;"]),m=t(o).attrs({variant:"text",iconSize:12,children:e(a,{})}).withConfig({displayName:"styled__ChipDeleteButton",componentId:"sc-1b7zlhu-3"})([""]);export{m as ChipDeleteButton,s as ChipImage,p as ChipStyled,d as ChipText};

package/dist/components/color-picker/index.js

@@ -1 +1 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as o,useState as n,useCallback as l}from"react";import{ColorPickerStyled as t,ColorPickerLabel as c,ColorPickerBottom as i,ColorPickerHex as m,ColorPickerPreview as a}from"./styled.js";import{ColorPickerMenu as s}from"./menu/index.js";const d=({label:d,preview:f=!0,color:p="#1c64f2",onChange:h})=>{const u=o(null),[C,g]=n(!1),j=l((r=>{null==h||h(r)}),[]);return r(t,{ref:u,children:[d&&e(c,{children:d}),r(i,{$active:C,onClick:()=>g(!C),children:[e(m,{children:p}),f&&e(a,{style:{backgroundColor:p}})]}),C&&e(s,{color:p,parentRef:u,onChange:j,onClose:()=>g(!1)})]})};export{d as ColorPicker};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as o,useState as n,useCallback as l}from"react";import{ColorPickerStyled as t,ColorPickerLabel as c,ColorPickerBottom as i,ColorPickerHex as m,ColorPickerPreview as a}from"./styled.js";import{ColorPickerMenu as s}from"./menu/index.js";const d=({label:d,preview:f=!0,color:p="#1c64f2",onChange:h})=>{const u=o(null),[C,g]=n(!1),j=l(r=>{null==h||h(r)},[]);return r(t,{ref:u,children:[d&&e(c,{children:d}),r(i,{$active:C,onClick:()=>g(!C),children:[e(m,{children:p}),f&&e(a,{style:{backgroundColor:p}})]}),C&&e(s,{color:p,parentRef:u,onChange:j,onClose:()=>g(!1)})]})};export{d as ColorPicker};

package/dist/components/color-picker/menu/index.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as o,useCallback as r,useEffect as i}from"react";import{ColorPickerMenuStyled as l,ColorPickerMenuHeader as c,ColorPickerMenuHeaderLeft as u,ColorPickerMenuHeaderHexCodeInput as s,ColorPickerMenuPreview as d,ColorPickerMenuCloseButton as a,ColorPickerMenuArea as m,ColorPickerMenuSelector as h,ColorPickerMenuHueSlider as v}from"./styled.js";import"../../../theme/index.js";import{hexToRgb as p}from"../../../utils/colors/hexToRgb.js";import{hsvToRgb as f}from"../../../utils/colors/hsvToRgb.js";import{rgbToHex as g}from"../../../utils/colors/rgbToHex.js";import{rgbToHsv as w}from"../../../utils/colors/rgbToHsv.js";import{useTheme as M}from"../../../theme/hook.js";const C=({color:C,parentRef:j,onChange:x,onClose:b})=>{const k=M(),[E,y]=n(180),[L,R]=n(100),[$,B]=n(100),[T,D]=n((null!=C?C:k.colors.accent.primary).toUpperCase()),[X,F]=n(!1),H=o(!0),U=o(null),A=o(null),I=r((t=>{if(!U.current)return;const e=U.current.getBoundingClientRect(),{width:n}=e,o=t.clientX-e.left,r=Math.max(0,Math.min(359,Math.round(o/n*360)));y(r)}),[]),W=r((t=>{if(!A.current)return;const e=A.current.getBoundingClientRect(),{width:n,height:o}=e,r=t.clientX-e.left,i=t.clientY-e.top,l=Math.max(0,Math.min(100,Math.round(r/n*100))),c=Math.max(0,Math.min(100,Math.round(100-i/o*100)));R(l),B(c)}),[]),Y=r(((t,e)=>{e(t);const n=t=>{e(t)},o=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)}),[]),q=r((t=>{var e;H.current||(null===(e=null==j?void 0:j.current)||void 0===e?void 0:e.contains(t.target))||null==b||b()}),[]),z=r((t=>{const e=t.target.value.toUpperCase();if(/^#[\dABCDEF]{0,6}$/.test(e)){if(7===e.length){const t=p(e),[n,o,r]=w(t);return y(n),R(o),void B(r)}D(e)}}),[]),G=r((()=>{D("#")}),[]);i((()=>{var t,e,n;const o=null===(e=null===(t=null==j?void 0:j.current)||void 0===t?void 0:t.getBoundingClientRect)||void 0===e?void 0:e.call(t);window.innerWidth-(null!==(n=null==o?void 0:o.right)&&void 0!==n?n:0)<=250?F(!0):F(!1)}),[]),i((()=>{if(!H.current||!C)return;const t=p(C),[e,n,o]=w(t);y(e),R(n),B(o)}),[]),i((()=>{if(H.current)return void(H.current=!1);const t=f([E,L,$]),e=g(t);D(e),null==x||x(e)}),[E,L,$]),i((()=>(window.addEventListener("click",q),()=>{window.removeEventListener("click",q)})),[]);const J=`hsl(${E}, 100%, 50%)`,K=E/360*100+"%",N=`${L}%`,O=100-$+"%";return t(l,{$centeredX:X,children:[t(c,{children:[t(u,{children:[e(s,{value:T,onInput:z,onFocus:G}),e(d,{style:{backgroundColor:T}})]}),e(a,{onClick:b})]}),e(m,{ref:A,style:{background:`\n          linear-gradient(to right, white, ${J}), \n          linear-gradient(to top, black, transparent)\n        `},onMouseDown:t=>Y(t,W),children:e(h,{style:{top:O,left:N}})}),e(v,{ref:U,onMouseDown:t=>Y(t,I),children:e(h,{style:{top:"50%",left:K}})})]})};export{C as ColorPickerMenu};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as o,useCallback as r,useEffect as i}from"react";import{ColorPickerMenuStyled as l,ColorPickerMenuHeader as c,ColorPickerMenuHeaderLeft as u,ColorPickerMenuHeaderHexCodeInput as s,ColorPickerMenuPreview as d,ColorPickerMenuCloseButton as a,ColorPickerMenuArea as m,ColorPickerMenuSelector as h,ColorPickerMenuHueSlider as v}from"./styled.js";import"../../../theme/index.js";import{hexToRgb as p}from"../../../utils/colors/hexToRgb.js";import{hsvToRgb as f}from"../../../utils/colors/hsvToRgb.js";import{rgbToHex as g}from"../../../utils/colors/rgbToHex.js";import{rgbToHsv as w}from"../../../utils/colors/rgbToHsv.js";import{useTheme as M}from"../../../theme/hook.js";const C=({color:C,parentRef:j,onChange:x,onClose:b})=>{const k=M(),[E,y]=n(180),[L,R]=n(100),[$,B]=n(100),[T,D]=n((null!=C?C:k.colors.accent.primary).toUpperCase()),[X,F]=n(!1),H=o(!0),U=o(null),A=o(null),I=r(t=>{if(!U.current)return;const e=U.current.getBoundingClientRect(),{width:n}=e,o=t.clientX-e.left,r=Math.max(0,Math.min(359,Math.round(o/n*360)));y(r)},[]),W=r(t=>{if(!A.current)return;const e=A.current.getBoundingClientRect(),{width:n,height:o}=e,r=t.clientX-e.left,i=t.clientY-e.top,l=Math.max(0,Math.min(100,Math.round(r/n*100))),c=Math.max(0,Math.min(100,Math.round(100-i/o*100)));R(l),B(c)},[]),Y=r((t,e)=>{e(t);const n=t=>{e(t)},o=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)},[]),q=r(t=>{var e;H.current||(null===(e=null==j?void 0:j.current)||void 0===e?void 0:e.contains(t.target))||null==b||b()},[]),z=r(t=>{const e=t.target.value.toUpperCase();if(/^#[\dABCDEF]{0,6}$/.test(e)){if(7===e.length){const t=p(e),[n,o,r]=w(t);return y(n),R(o),void B(r)}D(e)}},[]),G=r(()=>{D("#")},[]);i(()=>{var t,e,n;const o=null===(e=null===(t=null==j?void 0:j.current)||void 0===t?void 0:t.getBoundingClientRect)||void 0===e?void 0:e.call(t);window.innerWidth-(null!==(n=null==o?void 0:o.right)&&void 0!==n?n:0)<=250?F(!0):F(!1)},[]),i(()=>{if(!H.current||!C)return;const t=p(C),[e,n,o]=w(t);y(e),R(n),B(o)},[]),i(()=>{if(H.current)return void(H.current=!1);const t=f([E,L,$]),e=g(t);D(e),null==x||x(e)},[E,L,$]),i(()=>(window.addEventListener("click",q),()=>{window.removeEventListener("click",q)}),[]);const J=`hsl(${E}, 100%, 50%)`,K=E/360*100+"%",N=`${L}%`,O=100-$+"%";return t(l,{$centeredX:X,children:[t(c,{children:[t(u,{children:[e(s,{value:T,onInput:z,onFocus:G}),e(d,{style:{backgroundColor:T}})]}),e(a,{onClick:b})]}),e(m,{ref:A,style:{background:`\n          linear-gradient(to right, white, ${J}), \n          linear-gradient(to top, black, transparent)\n        `},onMouseDown:t=>Y(t,W),children:e(h,{style:{top:O,left:N}})}),e(v,{ref:U,onMouseDown:t=>Y(t,I),children:e(h,{style:{top:"50%",left:K}})})]})};export{C as ColorPickerMenu};