visits-style 2.2.1 → 2.2.3

package/dist/components/Dialog/index.d.ts

@@ -21,9 +21,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
      * 未指定の場合は、スタイルを全部外した状態で表示されます
      * */
     size?: 'small' | 'medium' | 'large';
-    /** モーダルのtransition exitが完了した時に発火されるcallback */
+    /** openの値を実際に変更するコールバック */
     onOpenChange?: (open: boolean) => void;
-    /** モーダルのtransition exitが完了した時に発火されるcallback */
+    /** モーダルのtransition exitが完了した時に発火されるコールバック */
     onExited?: () => void;
     /**
      * モーダルの背景からのpaddingを指定します。

package/dist/components/Toast/types.d.ts

@@ -48,15 +48,13 @@ export interface ToasterProps {
     max?: number;
     ListItem?: FunctionComponent<ToastItemProps>;
     /**
-     * 表示するToastのタイプに使うアイコンを指定(未指定の場合はアイコンは表示されません)\
-     * ただし、loading状態はspinnerを表示します
+     * 表示するToastのタイプに使うアイコンを指定(未指定の場合はアイコンは表示されません)
     */
-    icons?: Record<Exclude<ToastType, 'loading'>, ReactNode>;
+    icons?: Record<ToastType, ReactNode>;
 }
 export interface ToastContextType {
     /**
-     * 表示するToastのタイプに使うアイコンを指定(未指定の場合はアイコンは表示されません)\
-     * ただし、loading状態はspinnerを表示します
+     * 表示するToastのタイプに使うアイコンを指定(未指定の場合はアイコンは表示されません)
     */
-    icons?: Record<Exclude<ToastType, 'loading'>, ReactNode>;
+    icons?: Record<ToastType, ReactNode>;
 }

package/dist/elements/Spinner/index.d.ts

@@ -1,7 +1,5 @@
 import { HTMLAttributes } from 'react';
 export interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** サイズ */
-    size?: number;
     label?: string;
 }
-export default function Spinner({ size, label, ...rest }: Props): import("react").JSX.Element;
+export default function Spinner({ label, ...rest }: Props): import("react").JSX.Element;

package/dist/elements/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Base } from './Base';
+export { default as Base, element, type BaseProps } from './Base';
 export { default as Skeleton } from './Skeleton';
 export { default as Button, type ButtonProps, varientButton } from './Button';
 export { default as ButtonGroup } from './Button/ButtonGroup';

package/dist/forms/Select/index.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { Props as PopoverProps } from '../../components/Popover';
 type OptionType<T> = {
     value: T;
     label: string;
@@ -29,14 +30,20 @@ export interface Props<T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     override?: boolean;
     /** クリアボタン、矢印アイコンの領域のdivのスタイルのカスタム指定 */
     buttonAreaStyle?: string;
+    /** ボタンの文字のスタイルのカスタム指定 */
+    labelStyle?: string;
     /** section(stringのみで区域を区切った場合)を使うときのスタイルのカスタム指定 */
     sectionLabelStyle?: string;
     /** 各選択肢のスタイルのカスタム指定 */
     optionStyle?: string;
+    /** Popoverのスタイルのカスタム指定 */
+    popoverStyle?: string;
     /** 選択を取り消すボタンのaria-label */
     clearLabelText?: string;
+    /** Popoverの表示位置 */
+    popoverPosition?: PopoverProps['position'];
 }
-export default function Select<T = unknown>({ className, placeholder, options, error, disabled, value, maxHeight, arrowIcon, closeIcon, checkIcon, onChange, onClear, renderItem, sectionLabelStyle, buttonAreaStyle, clearLabelText, optionStyle, ...rest }: Props<T>): import("react").JSX.Element;
+export default function Select<T = unknown>({ className, placeholder, options, error, disabled, value, maxHeight, arrowIcon, closeIcon, checkIcon, onChange, onClear, renderItem, sectionLabelStyle, buttonAreaStyle, clearLabelText, optionStyle, popoverStyle, popoverPosition, labelStyle, ...rest }: Props<T>): import("react").JSX.Element;
 interface SelectItemProps<T> {
     className?: string;
     value: T;

package/dist/index.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("clsx");c=s(c,1);let l=require("tailwind-merge"),u=require("react"),d=require("react/jsx-runtime"),f=require("@floating-ui/react"),p=require("react-dom");var m=c.default;function h(e,t){return t?(0,l.twMerge)(e,t):e}function g({as:e,classList:t=[],className:n,override:r,...i}){let a=(0,u.useMemo)(()=>r?n:h(m(t),n),[t,n,r]);return(0,u.createElement)(e||`div`,{className:a,...i})}function _(e){return(0,d.jsx)(g,{as:`label`,classList:[`leading-none peer-disabled:opacity-70`],...e})}function v({label:e,children:t,required:n,htmlFor:r,error:i,help:a,helpBefore:o,innerClass:s,...c}){let l=(0,u.useMemo)(()=>m(`font-medium`,n?`after:content-["*"] after:text-danger after:text-sm after:pl-0.5`:``),[n]);return(0,d.jsxs)(g,{classList:`flex flex-col space-y-2`,...c,children:[e?(0,d.jsx)(_,{className:l,htmlFor:r,children:e}):null,a&&o?(0,d.jsx)(`p`,{className:`text-xs text-muted pb-2`,children:a}):null,(0,d.jsx)(`div`,{className:s,children:y(t,!!i)}),a&&!o&&!i?(0,d.jsx)(`p`,{className:`text-xs text-muted`,children:a}):null,i?(0,d.jsx)(`p`,{className:`text-xs text-danger`,children:i}):null]})}function y(e,t){let n=u.Children.count(e);if(!n)return null;if(n===1)return(0,u.cloneElement)(e,{error:t});let r=u.Children.toArray(e);return r[0]=(0,u.cloneElement)(r[0],{error:t}),r}function b({error:e,...t}){return(0,d.jsx)(g,{as:`fieldset`,classList:[`flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted`,`[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none`,e?`border-danger hover:border-danger-fore`:`border-input`],...t})}function x({type:e,error:t,...n}){return(0,d.jsx)(g,{as:`input`,type:e,classList:[`flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted`,`disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2`,t?`border-danger hover:border-danger-fore focus-visible:ring-danger`:`border-input not-disabled:hover:border-input-fore focus-visible:ring-ring`,e===`file`?`file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground`:null],...n})}function S({error:e,...t}){return(0,d.jsx)(g,{as:`textarea`,classList:[`flex rounded-md border bg-background px-3 py-2 w-full`,`disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring`,e?`border-danger hover:border-danger-fore`:`border-input not-disabled:hover:border-input-fore`],...t})}function C(){return(0,d.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`30`,height:`30`,viewBox:`0 0 30 30`,children:(0,d.jsx)(`rect`,{width:`20`,height:`3`,y:`13.5`,x:`4.5`,fill:`currentColor`,stroke:`none`,rx:`2`})})}function w({checked:e,indeterminate:t,id:n,name:r,onChange:i,value:a,checkIcon:o,error:s,...c}){let l=()=>{c.disabled||i?.(!e)};return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`checkbox`,id:n||r,classList:[`inline-flex justify-center items-center border w-4.5 h-4.5 rounded`,`cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`,{"border-danger hover:border-danger-fore":s,"bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input":!s&&e,"border-input not-disabled:hover:border-input-fore":!s&&!e}],onClick:l,"aria-checked":e,...c,children:[e?o:null,t&&!e?(0,d.jsx)(C,{}):null,(0,d.jsx)(`input`,{type:`checkbox`,"aria-hidden":`true`,name:r,checked:e,value:a,onChange:l,disabled:c.disabled,style:{position:`absolute`,pointerEvents:`none`,top:0,left:0,width:1,height:1,opacity:0}})]})}var T=typeof window<`u`&&window.document!==void 0&&window.document.createElement!==void 0?u.useLayoutEffect:u.useEffect;function E({children:e,container:t,disabled:n}){let[r,i]=(0,u.useState)(null);return T(()=>{if(!t){let e=document.getElementById(`visits-style-portals`);return e||(e=document.createElement(`div`),e.id=`visits-style-portals`,document.body.appendChild(e)),i(e)}i(t)},[t]),n||!r?null:(0,p.createPortal)(e,r)}function D(e){e&&(e.stopPropagation(),e.preventDefault())}var O={open:150,close:75};function k({ref:e,position:t,label:n,children:r,disabled:i,offset:a={x:0,y:6},onOpen:o,onClose:s,onManualClose:c,timeout:l=O,override:p,zIndex:m=9996,role:h,...g}){let[_,v]=(0,u.useState)(!1),y=(0,f.useId)(),b=(0,u.useRef)(o),x=(0,u.useRef)(s),{refs:S,floatingStyles:C,context:w}=(0,f.useFloating)({nodeId:y,placement:t,middleware:[(0,f.shift)(),(0,f.flip)({fallbackAxisSideDirection:`end`}),(0,f.offset)({mainAxis:a.y,crossAxis:a.x})],open:_,onOpenChange:e=>{e?b.current?.(S.reference.current,S.floating.current):x.current?.(S.reference.current,S.floating.current),v(e)},whileElementsMounted:f.autoUpdate}),{isMounted:T,styles:k}=(0,f.useTransitionStyles)(w,{duration:l,initial({side:e}){let t=``;return t=e===`top`?`translateY(5%) scale(0.95)`:e===`bottom`?`translateY(-5%) scale(0.95)`:e===`left`?`translateX(5%) scale(0.95)`:`translateX(-5%) scale(0.95)`,{opacity:0,transform:t}}}),j=(0,u.useCallback)(e=>{if(D(e),c)return c();v(!1),x.current?.(S.reference.current,S.floating.current)},[c]);(0,u.useEffect)(()=>{if(i&&_)return v(!1)},[i,_]),(0,u.useImperativeHandle)(e,()=>({open:()=>{v(!0),b.current?.(S.reference.current,S.floating.current)},close:()=>{v(!1),x.current?.(S.reference.current,S.floating.current)}}),[]);let{getFloatingProps:M,getReferenceProps:N}=(0,f.useInteractions)([(0,f.useClick)(w,{enabled:!i})]);return b.current=o,x.current=s,(0,d.jsxs)(d.Fragment,{children:[(0,u.cloneElement)(u.Children.only(n),N({ref:S.setReference,tabIndex:0,role:`button`,"aria-expanded":_,disabled:i,onClick:D})),(0,d.jsx)(E,{disabled:i||!T,children:(0,d.jsx)(f.FloatingOverlay,{"data-testid":`vs-popover-shadow`,onClick:j,style:{zIndex:m},autoFocus:!0,children:(0,d.jsx)(`div`,{role:h||`region`,ref:S.setFloating,style:C,children:(0,d.jsx)(A,{override:p,styles:k,...M({...g,onClick:D}),children:r})})})})]})}function A({override:e,styles:t,style:n={},...r}){return(0,d.jsx)(g,{classList:[`z-20 w-auto h-auto outline-none transition-transform ease-in-out`,e?null:`border border-accent rounded-md shadow-lg p-1 bg-background`],style:{...t,...n},...r})}function j({className:e,placeholder:t=``,options:n=[],error:r,disabled:i,value:a,maxHeight:o=408,arrowIcon:s,closeIcon:c,checkIcon:l,onChange:f,onClear:p,renderItem:m,sectionLabelStyle:h,buttonAreaStyle:_,clearLabelText:v,optionStyle:y,...b}){let x=(0,u.useRef)(null),[S,C]=(0,u.useState)(0),w=(0,u.useMemo)(()=>Array.isArray(a),[]),T=(0,u.useCallback)(e=>{f?.(e),w||x.current?.close()},[f,w]),E=(0,u.useCallback)(e=>Array.isArray(a)?a.indexOf(e)>-1:a===e,[a]),D=(0,u.useMemo)(()=>{let e={},t=n.filter(e=>typeof e!=`string`);for(let n=0,r=t.length;n<r;n+=1){let r=t[n];e[`${r.value}`]=r.label}return e},[n]),O=(0,u.useMemo)(()=>{if(!a)return t;if(Array.isArray(a)){if(!a.length)return t;let e=[...a].sort(),n=[];for(let t=0,r=e.length;t<r;t+=1)n[t]=D[`${e[t]}`]||``;return n.filter(Boolean).join(`,`)||t}return D[`${a}`]||t},[t,a,D]),A=(0,u.useMemo)(()=>a==null?!0:Array.isArray(a)?!a.length:!1,[a]),j=(0,u.useCallback)((e,t)=>m?typeof e==`string`?m(e,{index:t,selected:!1,onChange:()=>{}}):m(e,{index:t,selected:E(e.value),onChange:()=>T(e.value)}):typeof e==`string`?(0,d.jsx)(g,{as:`h5`,classList:[`font-normal py-1 px-2 text-muted`],className:h,children:e},`optionheader-${t}`):(0,d.jsx)(M,{selected:E(e.value),onChange:T,checkIcon:l,className:y,...e},e.label),[m,T,E,h,y,l]);return(0,d.jsx)(k,{label:(0,d.jsxs)(g,{as:`button`,type:`button`,classList:[`flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer`,`disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring`,r?`border-danger hover:border-danger-fore`:`border-input not-disabled:hover:border-input-fore`],className:e,disabled:i,...b,children:[(0,d.jsx)(g,{as:`span`,classList:[`overflow-hidden text-ellipsis whitespace-nowrap`,A?`text-muted`:`text-text`],children:O}),(0,d.jsxs)(g,{classList:`relative flex items-center space-x-2`,className:_,children:[p&&!A?(0,d.jsx)(`div`,{tabIndex:-1,role:`button`,className:`size-6 p-1.5 rounded hover:bg-accent cursor-pointer`,"aria-label":v,onKeyDown:e=>{(e.key===`Enter`||e.key===`Space`)&&p()},onClick:e=>{e.stopPropagation(),p()},children:c}):null,s]})]}),ref:x,onOpen:e=>C(e?.getBoundingClientRect().width||0),disabled:i,children:(0,d.jsx)(`ul`,{className:`overflow-y-auto flex flex-col`,role:`listbox`,style:{minWidth:S,maxWidth:`calc(100vw - 3rem)`,maxHeight:o},children:n.map(j)})})}function M({className:e,value:t,label:n,selected:r,checkIcon:i,onChange:a}){return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`option`,classList:`flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer`,className:e,"aria-selected":r,onClick:()=>a?.(t),children:[r&&i?i:(0,d.jsx)(`div`,{className:`w-5 h-1 mr-1`}),n]})}function N({checked:e,className:t,id:n,name:r,onChange:i,value:a,error:o,...s}){let c=()=>{s.disabled||i?.(!e)};return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`radio`,id:n||r,classList:[`relative inline-flex justify-center items-center border w-4.5 h-4.5 rounded-full`,`cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore`,o?`border-danger`:`border-input`,e?`[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input`:``],className:t,onClick:c,"aria-checked":e,...s,children:[(0,d.jsx)(`i`,{className:`block w-2.5 h-2.5 rounded-full transition-transform`,style:{transform:e?``:`scale(0.8)`,opacity:+!!e}}),(0,d.jsx)(`input`,{type:`radio`,"aria-hidden":`true`,name:r,checked:e,value:a,onChange:c,disabled:s.disabled,style:{position:`absolute`,pointerEvents:`none`,top:0,left:0,width:1,height:1,opacity:0}})]})}function P({checked:e,onChange:t,value:n,id:r,name:i,error:a,ref:o,...s}){let c=()=>{s.disabled||t?.(!e)};return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`switch`,id:r||i,classList:[`inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50`,`w-11`,e?`bg-primary disabled:bg-text`:`bg-input`],onClick:c,"aria-checked":e,"aria-invalid":a,...s,children:[(0,d.jsx)(`span`,{className:`pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform`,style:{transform:e?`translateX(100%)`:``}}),(0,d.jsx)(`input`,{ref:o,type:`checkbox`,"aria-hidden":`true`,name:i,checked:e,value:n,onChange:c,disabled:s.disabled,style:{position:`absolute`,pointerEvents:`none`,top:0,left:0,width:1,height:1,opacity:0}})]})}function F({header:e,show:t,children:n,timeout:r=300,...i}){let a=(0,u.useRef)(null),o=(0,u.useRef)(0),s=(0,u.useRef)(0),c=(0,u.useRef)(!0);return(0,u.useEffect)(()=>{s.current=r},[r]),T(()=>{if(!a.current)return;if(a.current.style.overflow=`hidden`,a.current.style.opacity=`1`,c.current){c.current=!1,a.current.style.height=t?`auto`:`0px`,t?window.requestAnimationFrame(()=>{a.current&&(o.current=a.current.offsetHeight)}):(window.requestAnimationFrame(()=>{a.current&&(a.current.style.height=`auto`,o.current=a.current.offsetHeight,a.current.style.height=`0px`)}),a.current.style.opacity=`0`);return}t||(a.current.style.height=`${o.current}px`);let e=[];e[0]=window.requestAnimationFrame(()=>{e[1]=window.requestAnimationFrame(()=>{a.current&&(a.current.style.height=`${t?o.current:0}px`,a.current.style.opacity=t?`1`:`0`)})});let n,r=()=>{a.current&&(t?(a.current.style.height=`auto`,a.current.style.overflow=``,a.current.style.opacity=``,window.requestAnimationFrame(()=>{a.current&&(o.current=a.current.offsetHeight)})):a.current.style.height=`0px`)};return s.current===0?r():n=window.setTimeout(r,s.current),()=>{e.forEach(window.cancelAnimationFrame),n&&window.clearTimeout(n)}},[t]),(0,d.jsxs)(`div`,{...i,children:[e,(0,d.jsx)(`div`,{className:`transition-all ease-in-out overflow-hidden`,role:`region`,"aria-hidden":!t,ref:a,style:{transitionDuration:`${r}ms`},children:n})]})}var I=(0,u.forwardRef)(({children:e,position:t=`bottom`,label:n,className:r,timeout:i=150,offset:a={x:0,y:6},clientPoint:o=!1,disabled:s},c)=>{let[l,p]=(0,u.useState)(!1),m=(0,f.useId)(),{refs:h,floatingStyles:g,context:_}=(0,f.useFloating)({nodeId:m,open:l,placement:t,middleware:[(0,f.shift)(),(0,f.flip)(),(0,f.offset)({mainAxis:a.y,crossAxis:a.x})],whileElementsMounted:s?void 0:f.autoUpdate,onOpenChange:p}),{getReferenceProps:v,getFloatingProps:y}=(0,f.useInteractions)([(0,f.useHover)(_,{enabled:!s}),(0,f.useClientPoint)(_,{enabled:o})]),{isMounted:b,styles:x}=(0,f.useTransitionStyles)(_,{duration:i,initial:{opacity:0,transform:`scale(0.8)`}});(0,u.useImperativeHandle)(c,()=>({floating:h.floating,reference:h.reference,open:()=>p(!0),close:()=>p(!1)})),(0,u.useEffect)(()=>{s&&p(!1)},[s]);let S=typeof e==`string`?(0,d.jsx)(`span`,{children:e}):e;return(0,d.jsxs)(d.Fragment,{children:[(0,u.cloneElement)(u.Children.only(S),{ref:h.setReference,...v()}),(0,d.jsx)(E,{disabled:s||!b,children:(0,d.jsx)(`div`,{role:`tooltip`,className:`z-9999`,ref:h.setFloating,...y({style:g}),children:(0,d.jsx)(L,{className:r,style:x,children:n})})})]})});I.displayName=`Tooltip`;var L=(0,u.forwardRef)(({className:e,custom:t,...n},r)=>{let i=(0,u.useMemo)(()=>h(m(`relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre`,t?null:`border border-accent rounded shadow-md px-3 py-1 bg-background`),e),[e,t]);return(0,d.jsx)(`div`,{ref:r,className:i,...n})});L.displayName=`TooltipContent`;function R({variant:e,size:t}){return m(`inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,`disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto`,{"bg-primary text-inverted hover:bg-primary-fore":!e||e===`primary`,"bg-info text-inverted hover:bg-info-fore":e===`info`,"bg-warn text-inverted hover:bg-warn-fore":e===`warn`,"bg-danger text-inverted hover:bg-danger-fore":e===`danger`,"hover:bg-accent":e===`ghost`,"hover:underline":e===`link`,"border border-input hover:bg-accent":e===`outline`},{"px-2 py-1":!t,"p-1.5":t===`icon`})}function z({size:e,variant:t,className:n,...r}){let i=(0,u.useMemo)(()=>h(R({size:e,variant:t}),n),[e,t,n]);return(0,d.jsx)(`button`,{className:i,type:`button`,...r})}var B={open:150,close:75};function V({open:e,children:t,timeout:n=B,padding:r=`0.85rem`,verticalAlign:i=`center`,closeOnOverlay:a,closeOnEsc:o,onExited:s,className:c,onOpenChange:l,size:p,...h}){let g=(0,u.useRef)(s),_=(0,u.useRef)(!1),v=(0,f.useId)(),{refs:y,context:b}=(0,f.useFloating)({open:e,onOpenChange:l,nodeId:v}),{getFloatingProps:x}=(0,f.useInteractions)([(0,f.useDismiss)(b,{enabled:o,escapeKey:o,outsidePress:!1})]),{isMounted:S,styles:C}=(0,f.useTransitionStyles)(b,{duration:n,initial:{opacity:0,transform:`scale(0.8)`}});(0,u.useEffect)(()=>{_.current!==S&&(_.current=S,!S&&g.current?.())},[S]);let w=(0,u.useCallback)(()=>{a&&l?.(!1)},[l,a]);g.current=s;let T=(0,u.useMemo)(()=>m(`grid bg-backdrop z-40 justify-items-center transition ease-in-out`,{"place-items-start items-start":i===`start`,"place-items-end":i===`end`,"place-items-center":i===`center`||!i}),[i]);return(0,d.jsx)(E,{disabled:!S,children:(0,d.jsx)(f.FloatingOverlay,{className:T,"data-testid":`vs-dialog-overlay`,onClick:w,style:{padding:r,opacity:C.opacity},lockScroll:!0,children:(0,d.jsx)(H,{ref:y.setFloating,className:c,role:`dialog`,size:p,onClick:D,...x({...h,style:C}),children:t})})})}function H({size:e,...t}){return(0,d.jsx)(g,{classList:[e?`flex flex-col bg-background shadow-lg p-5 rounded`:null,{"w-full max-w-dialog-sm":e===`small`,"w-full max-w-dialog-md":e===`medium`,"w-full max-w-dialog-lg":e===`large`}],...t})}function U(e){return(0,d.jsx)(g,{classList:`inline-block animate-pulse rounded-md bg-accent`,...e})}function W(e){return(0,d.jsx)(g,{role:`group`,classList:[`flex items-center justify-center`,`[&_button]:rounded-none **:first:rounded-bl **:first:rounded-tl **:last:rounded-br **:last:rounded-tr`,`**:first:border-r-0 **:last:border-l-0`],...e})}function G({size:e=20,label:t=`Loading...`,...n}){return(0,d.jsxs)(`div`,{role:`status`,...n,children:[(0,d.jsxs)(`svg`,{"aria-hidden":`true`,className:`text-accent animate-spin fill-primary`,width:e,height:e,viewBox:`0 0 100 101`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,d.jsx)(`path`,{d:`M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z`,fill:`currentColor`}),(0,d.jsx)(`path`,{d:`M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z`,fill:`currentFill`})]}),(0,d.jsx)(`span`,{className:`sr-only`,children:t})]})}function K({value:e,max:t,...n}){let r=(0,u.useMemo)(()=>e?Math.min(100,Math.round(e/t*100)):0,[e,t]);return(0,d.jsx)(g,{role:`progressbar`,classList:`relative overflow-hidden rounded-full bg-primary`,"aria-valuemax":t,"aria-valuemin":0,...n,children:(0,d.jsx)(g,{className:`h-full w-full flex-1 bg-input transition-all origin-right`,style:{transform:`translateX(${r}%)`}})})}function q({orientation:e=`horizontal`,...t}){return(0,d.jsx)(g,{as:`hr`,role:`none`,classList:[`border-0 p-0 shrink-0 bg-input`,e===`horizontal`?`h-px w-full`:`w-px h-full`],...t})}var J={open:250,close:150};function Y({open:e,timeout:t=J,onOpenChange:n,position:r=`right`,overlay:i,onExited:a,onOpen:o,...s}){let c=(0,f.useId)(),l=(0,u.useRef)(!1),p=(0,u.useRef)(o),m=(0,u.useRef)(a),{refs:h,context:_}=(0,f.useFloating)({open:e,onOpenChange:n,nodeId:c}),{isMounted:v,styles:y}=(0,f.useTransitionStyles)(_,{duration:t,initial(){let e=`translateX(75%)`;return r===`left`?e=`translateX(-75%)`:r===`top`?e=`translateY(-75%)`:r===`bottom`&&(e=`translateY(75%)`),{opacity:0,transform:e}}});return(0,u.useEffect)(()=>{if(l.current!==v){if(l.current=v,v){p.current?.();return}m.current?.()}},[v]),m.current=a,p.current=o,(0,d.jsxs)(E,{disabled:!v,children:[i?(0,d.jsx)(f.FloatingOverlay,{className:`bg-backdrop`,style:{opacity:y.opacity},onClick:()=>n?.(!1)}):null,(0,d.jsx)(g,{ref:h.setFloating,role:`dialog`,classList:[`fixed transition-transform z-30`,{"top-0 right-0 h-full max-h-screen":r===`right`,"top-0 left-0 h-full max-h-screen":r===`left`,"top-0 left-0 right-0 w-full max-w-screen":r===`top`,"bottom-0 left-0 right-0 w-full max-w-screen":r===`bottom`}],style:y,children:(0,d.jsx)(ee,{...s})})]})}function ee(e){return(0,d.jsx)(g,{classList:`relative bg-background min-w-full min-h-full border border-input shadow-lg`,...e})}function X({type:e,label:t,message:n}){let{icons:r}=ne();return(0,d.jsxs)(`div`,{className:`flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2`,children:[e?(0,d.jsxs)(`figure`,{className:`mr-2`,children:[e===`success`&&r?.success?r.success:null,e===`info`&&r?.info?r.info:null,e===`error`&&r?.error?r.error:null,e===`warn`&&r?.warn?r.warn:null,e===`loading`?(0,d.jsx)(G,{size:20}):null]}):null,(0,d.jsxs)(`div`,{className:`space-y-2`,children:[(0,d.jsx)(`p`,{className:`font-medium leading-none`,children:t}),n?(0,d.jsx)(`p`,{children:n}):null]})]})}function Z(){}var Q=new class{notify=Z;lastId=0;subscribe=e=>(this.notify=e,()=>{this.notify=Z});add=(e,t={})=>{this.lastId+=1;let n=`${this.lastId}`;return this.notify({id:n,type:`add`,config:{id:n,label:e,...t}}),n};update=(e,t)=>{this.notify({id:e,type:`update`,config:t})};remove=e=>{this.notify({id:e,type:`remove`})};clear=()=>{this.lastId=0}};function te({id:e,type:t,index:n,duration:r=5e3,className:i,children:a,inverted:o,timeout:s=250,max:l=3}){let p=(0,u.useRef)(!1),[m,h]=(0,u.useState)(!1),{context:g,refs:_}=(0,f.useFloating)({open:m,onOpenChange:h,nodeId:e}),{isMounted:v,styles:y}=(0,f.useTransitionStyles)(g,{duration:s,initial:{opacity:0,transform:`translateY(${o?``:`-`}50%)`}});(0,u.useLayoutEffect)(()=>{h(n<=l)},[n,l]),(0,u.useEffect)(()=>{p.current!==v&&(v||Q.remove(e),p.current=v)},[v,e]),(0,u.useEffect)(()=>{if(!r)return;let e=window.setTimeout(()=>h(!1),r);return()=>window.clearTimeout(e)},[r,e]);let b=(0,u.useCallback)(()=>{t!==`loading`&&h(!1)},[t]),x=(0,u.useMemo)(()=>(0,c.default)(`relative flex w-fit transition-transform ease-in-out cursor-pointer`,i),[i]);return v?(0,d.jsx)(`li`,{role:`log`,tabIndex:-1,ref:_.setFloating,className:x,style:y,onClick:b,children:a}):null}var $=(0,u.createContext)({});function ne(){return(0,u.useContext)($)}function re({className:e,offset:t={},position:n=`top-left`,max:r,ListItem:i=X,icons:a}){let o=(0,u.useMemo)(()=>{let e={position:`fixed`,...t};return Object.keys(t).length||(n.indexOf(`top`)>-1?e.top=`16px`:n.indexOf(`bottom`)>-1&&(e.bottom=`16px`),n.indexOf(`left`)>-1?e.left=`16px`:n.indexOf(`right`)>-1&&(e.right=`16px`)),n.indexOf(`left`)>-1?e.alignItems=`flex-start`:n.indexOf(`right`)>-1?e.alignItems=`flex-end`:(e.left=`50%`,e.alignItems=`center`,e.transform=`translateX(-50%)`),e},[t,n]),s=(0,u.useMemo)(()=>(0,c.default)(`flex flex-col z-40 overflow-hidden`,e),[e]),l=(0,u.useMemo)(()=>n?.startsWith(`bottom`)||!1,[n]),f=(0,u.useRef)(new Map),[p,m]=(0,u.useState)([]),h=(0,u.useState)(0)[1];T(()=>Q.subscribe(e=>{(0,u.startTransition)(()=>{if(e.type===`add`)f.current.set(e.id,e.config),m(t=>[...t,e.id]);else if(e.type===`remove`){if(!f.current.delete(e.id))return;m(t=>{let n=new Set(t);return n.has(e.id)?(n.delete(e.id),Array.from(n)):t})}else if(e.type===`update`){let t=f.current.get(e.id);if(!t)return;f.current.set(e.id,{...t,...e.config}),h(e=>e+1)}})}),[]);let g=(0,u.useMemo)(()=>({icons:a}),[a]),_=p.length;return(0,d.jsx)(E,{children:(0,d.jsx)(`ol`,{className:s,style:o,"aria-live":`polite`,children:(0,d.jsx)($.Provider,{value:g,children:p.map((e,t)=>{let n=f.current.get(e);if(!n)return null;let{className:a,duration:o,...s}=n;return(0,d.jsx)(te,{id:e,index:_-t,className:a,duration:o,inverted:l,max:r,children:(0,u.createElement)(i,s)},e)})})})})}exports.Accordion=F,exports.Base=g,exports.Button=z,exports.ButtonGroup=W,exports.Checkbox=w,exports.Dialog=V,exports.Divider=q,exports.FormField=v,exports.FormLabel=_,exports.Input=x,exports.InputField=b,exports.Popover=k,exports.Portal=E,exports.Progress=K,exports.Radio=N,exports.Select=j,exports.Sheet=Y,exports.Skeleton=U,exports.Spinner=G,exports.Switch=P,exports.Textarea=S,exports.Toast=re,exports.ToastItem=X,exports.Tooltip=I,exports.cn=m,exports.merge=h,exports.toast=Q,exports.varientButton=R;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("clsx");c=s(c,1);let l=require("tailwind-merge"),u=require("react"),d=require("react/jsx-runtime"),f=require("@floating-ui/react"),p=require("react-dom");var m=c.default;function h(e,t){return t?(0,l.twMerge)(e,t):e}function g({as:e,classList:t=[],className:n,override:r,...i}){let a=(0,u.useMemo)(()=>r?n:h(m(t),n),[t,n,r]);return(0,u.createElement)(e||`div`,{className:a,...i})}function _(e,t){let n=({className:n,...r})=>{let i=(0,u.useMemo)(()=>h(m(t),n),[n]);return(0,u.createElement)(e,{className:i,...r})};return n.displayName=`Styled${typeof e==`string`?e:`Component`}`,n}function v(e){return(0,d.jsx)(g,{as:`label`,classList:[`leading-none peer-disabled:opacity-70`],...e})}function y({label:e,children:t,required:n,htmlFor:r,error:i,help:a,helpBefore:o,innerClass:s,...c}){let l=(0,u.useMemo)(()=>m(`font-medium`,n?`after:content-["*"] after:text-danger after:text-sm after:pl-0.5`:``),[n]);return(0,d.jsxs)(g,{classList:`flex flex-col space-y-2`,...c,children:[e?(0,d.jsx)(v,{className:l,htmlFor:r,children:e}):null,a&&o?(0,d.jsx)(`p`,{className:`text-xs text-muted pb-2`,children:a}):null,(0,d.jsx)(`div`,{className:s,children:b(t,!!i)}),a&&!o&&!i?(0,d.jsx)(`p`,{className:`text-xs text-muted`,children:a}):null,i?(0,d.jsx)(`p`,{className:`text-xs text-danger`,children:i}):null]})}function b(e,t){let n=u.Children.count(e);if(!n)return null;if(n===1)return(0,u.cloneElement)(e,{error:t});let r=u.Children.toArray(e);return r[0]=(0,u.cloneElement)(r[0],{error:t}),r}function x({error:e,...t}){return(0,d.jsx)(g,{as:`fieldset`,classList:[`flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted`,`[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none`,e?`border-danger hover:border-danger-fore`:`border-input`],...t})}function S({type:e,error:t,...n}){return(0,d.jsx)(g,{as:`input`,type:e,classList:[`flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted`,`disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2`,t?`border-danger hover:border-danger-fore focus-visible:ring-danger`:`border-input not-disabled:hover:border-input-fore focus-visible:ring-ring`,e===`file`?`file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground`:null],...n})}function C({error:e,...t}){return(0,d.jsx)(g,{as:`textarea`,classList:[`flex rounded-md border bg-background px-3 py-2 w-full`,`disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring`,e?`border-danger hover:border-danger-fore`:`border-input not-disabled:hover:border-input-fore`],...t})}function w(){return(0,d.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`30`,height:`30`,viewBox:`0 0 30 30`,children:(0,d.jsx)(`rect`,{width:`20`,height:`3`,y:`13.5`,x:`4.5`,fill:`currentColor`,stroke:`none`,rx:`2`})})}function T({checked:e,indeterminate:t,id:n,name:r,onChange:i,value:a,checkIcon:o,error:s,...c}){let l=()=>{c.disabled||i?.(!e)};return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`checkbox`,id:n||r,classList:[`inline-flex justify-center items-center border w-4.5 h-4.5 rounded`,`cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`,{"border-danger hover:border-danger-fore":s,"bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input":!s&&e,"border-input not-disabled:hover:border-input-fore":!s&&!e}],onClick:l,"aria-checked":e,...c,children:[e?o:null,t&&!e?(0,d.jsx)(w,{}):null,(0,d.jsx)(`input`,{type:`checkbox`,"aria-hidden":`true`,name:r,checked:e,value:a,onChange:l,disabled:c.disabled,style:{position:`absolute`,pointerEvents:`none`,top:0,left:0,width:1,height:1,opacity:0}})]})}var E=typeof window<`u`&&window.document!==void 0&&window.document.createElement!==void 0?u.useLayoutEffect:u.useEffect;function D({children:e,container:t,disabled:n}){let[r,i]=(0,u.useState)(null);return E(()=>{if(!t){let e=document.getElementById(`visits-style-portals`);return e||(e=document.createElement(`div`),e.id=`visits-style-portals`,document.body.appendChild(e)),i(e)}i(t)},[t]),n||!r?null:(0,p.createPortal)(e,r)}function O(e){e&&(e.stopPropagation(),e.preventDefault())}var k={open:150,close:75};function A({ref:e,position:t,label:n,children:r,disabled:i,offset:a={x:0,y:6},onOpen:o,onClose:s,onManualClose:c,timeout:l=k,override:p,zIndex:m=9996,role:h,...g}){let[_,v]=(0,u.useState)(!1),y=(0,f.useId)(),b=(0,u.useRef)(o),x=(0,u.useRef)(s),{refs:S,floatingStyles:C,context:w}=(0,f.useFloating)({nodeId:y,placement:t,middleware:[(0,f.shift)(),(0,f.flip)({fallbackAxisSideDirection:`end`}),(0,f.offset)({mainAxis:a.y,crossAxis:a.x})],open:_,onOpenChange:e=>{e?b.current?.(S.reference.current,S.floating.current):x.current?.(S.reference.current,S.floating.current),v(e)},whileElementsMounted:f.autoUpdate}),{isMounted:T,styles:E}=(0,f.useTransitionStyles)(w,{duration:l,initial({side:e}){let t=``;return t=e===`top`?`translateY(5%) scale(0.95)`:e===`bottom`?`translateY(-5%) scale(0.95)`:e===`left`?`translateX(5%) scale(0.95)`:`translateX(-5%) scale(0.95)`,{opacity:0,transform:t}}}),A=(0,u.useCallback)(e=>{if(O(e),c)return c();v(!1),x.current?.(S.reference.current,S.floating.current)},[c]);(0,u.useEffect)(()=>{if(i&&_)return v(!1)},[i,_]),(0,u.useImperativeHandle)(e,()=>({open:()=>{v(!0),b.current?.(S.reference.current,S.floating.current)},close:()=>{v(!1),x.current?.(S.reference.current,S.floating.current)}}),[]);let{getFloatingProps:M,getReferenceProps:N}=(0,f.useInteractions)([(0,f.useClick)(w,{enabled:!i})]);return b.current=o,x.current=s,(0,d.jsxs)(d.Fragment,{children:[(0,u.cloneElement)(u.Children.only(n),N({ref:S.setReference,tabIndex:0,role:`button`,"aria-expanded":_,disabled:i,onClick:O})),(0,d.jsx)(D,{disabled:i||!T,children:(0,d.jsx)(f.FloatingOverlay,{"data-testid":`vs-popover-shadow`,onClick:A,style:{zIndex:m},autoFocus:!0,children:(0,d.jsx)(`div`,{role:h||`region`,ref:S.setFloating,style:C,children:(0,d.jsx)(j,{override:p,styles:E,...M({...g,onClick:O}),children:r})})})})]})}function j({override:e,styles:t,style:n={},...r}){return(0,d.jsx)(g,{classList:[`z-20 w-auto h-auto outline-none transition-transform ease-in-out`,e?null:`border border-accent rounded-md shadow-lg p-1 bg-background`],style:{...t,...n},...r})}function M({className:e,placeholder:t=``,options:n=[],error:r,disabled:i,value:a,maxHeight:o=408,arrowIcon:s,closeIcon:c,checkIcon:l,onChange:f,onClear:p,renderItem:m,sectionLabelStyle:h,buttonAreaStyle:_,clearLabelText:v,optionStyle:y,popoverStyle:b,popoverPosition:x,labelStyle:S,...C}){let w=(0,u.useRef)(null),[T,E]=(0,u.useState)(0),D=(0,u.useMemo)(()=>Array.isArray(a),[]),O=(0,u.useCallback)(e=>{f?.(e),D||w.current?.close()},[f,D]),k=(0,u.useCallback)(e=>Array.isArray(a)?a.indexOf(e)>-1:a===e,[a]),j=(0,u.useMemo)(()=>{let e={},t=n.filter(e=>typeof e!=`string`);for(let n=0,r=t.length;n<r;n+=1){let r=t[n];e[`${r.value}`]=r.label}return e},[n]),M=(0,u.useMemo)(()=>{if(!a)return t;if(Array.isArray(a)){if(!a.length)return t;let e=[...a].sort(),n=[];for(let t=0,r=e.length;t<r;t+=1)n[t]=j[`${e[t]}`]||``;return n.filter(Boolean).join(`,`)||t}return j[`${a}`]||t},[t,a,j]),P=(0,u.useMemo)(()=>a==null?!0:Array.isArray(a)?!a.length:!1,[a]),F=(0,u.useCallback)((e,t)=>m?typeof e==`string`?m(e,{index:t,selected:!1,onChange:()=>{}}):m(e,{index:t,selected:k(e.value),onChange:()=>O(e.value)}):typeof e==`string`?(0,d.jsx)(g,{as:`h5`,classList:[`font-normal py-1 px-2 text-muted`],className:h,children:e},`optionheader-${t}`):(0,d.jsx)(N,{selected:k(e.value),onChange:O,checkIcon:l,className:y,...e},e.label),[m,O,k,h,y,l]);return(0,d.jsx)(A,{label:(0,d.jsxs)(g,{as:`button`,type:`button`,classList:[`flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer`,`disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring`,r?`border-danger hover:border-danger-fore`:`border-input not-disabled:hover:border-input-fore`],className:e,disabled:i,...C,children:[(0,d.jsx)(g,{as:`span`,classList:[`overflow-hidden text-ellipsis whitespace-nowrap`,P?`text-muted`:`text-text`],className:S,children:M}),(0,d.jsxs)(g,{classList:`relative flex items-center space-x-2`,className:_,children:[p&&!P?(0,d.jsx)(`div`,{tabIndex:-1,role:`button`,className:`size-6 p-1.5 rounded hover:bg-accent cursor-pointer`,"aria-label":v,onKeyDown:e=>{(e.key===`Enter`||e.key===`Space`)&&p()},onClick:e=>{e.stopPropagation(),p()},children:c}):null,s]})]}),ref:w,onOpen:e=>E(e?.getBoundingClientRect().width||0),className:b,position:x,disabled:i,children:(0,d.jsx)(`ul`,{className:`overflow-y-auto flex flex-col`,role:`listbox`,style:{minWidth:T,maxWidth:`calc(100vw - 3rem)`,maxHeight:o},children:n.map(F)})})}function N({className:e,value:t,label:n,selected:r,checkIcon:i,onChange:a}){return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`option`,classList:`flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer`,className:e,"aria-selected":r,onClick:()=>a?.(t),children:[r&&(i||i===null)?i:(0,d.jsx)(`div`,{className:`w-5 h-1 mr-1`}),n]})}function P({checked:e,className:t,id:n,name:r,onChange:i,value:a,error:o,...s}){let c=()=>{s.disabled||i?.(!e)};return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`radio`,id:n||r,classList:[`relative inline-flex justify-center items-center border w-4.5 h-4.5 rounded-full`,`cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore`,o?`border-danger`:`border-input`,e?`[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input`:``],className:t,onClick:c,"aria-checked":e,...s,children:[(0,d.jsx)(`i`,{className:`block w-2.5 h-2.5 rounded-full transition-transform`,style:{transform:e?``:`scale(0.8)`,opacity:+!!e}}),(0,d.jsx)(`input`,{type:`radio`,"aria-hidden":`true`,name:r,checked:e,value:a,onChange:c,disabled:s.disabled,style:{position:`absolute`,pointerEvents:`none`,top:0,left:0,width:1,height:1,opacity:0}})]})}function F({checked:e,onChange:t,value:n,id:r,name:i,error:a,ref:o,...s}){let c=()=>{s.disabled||t?.(!e)};return(0,d.jsxs)(g,{as:`button`,type:`button`,role:`switch`,id:r||i,classList:[`inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50`,`w-11`,e?`bg-primary disabled:bg-text`:`bg-input`],onClick:c,"aria-checked":e,"aria-invalid":a,...s,children:[(0,d.jsx)(`span`,{className:`pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform`,style:{transform:e?`translateX(100%)`:``}}),(0,d.jsx)(`input`,{ref:o,type:`checkbox`,"aria-hidden":`true`,name:i,checked:e,value:n,onChange:c,disabled:s.disabled,style:{position:`absolute`,pointerEvents:`none`,top:0,left:0,width:1,height:1,opacity:0}})]})}function I({header:e,show:t,children:n,timeout:r=300,...i}){let a=(0,u.useRef)(null),o=(0,u.useRef)(0),s=(0,u.useRef)(0),c=(0,u.useRef)(!0);return(0,u.useEffect)(()=>{s.current=r},[r]),E(()=>{if(!a.current)return;if(a.current.style.overflow=`hidden`,a.current.style.opacity=`1`,c.current){c.current=!1,a.current.style.height=t?`auto`:`0px`,t?window.requestAnimationFrame(()=>{a.current&&(o.current=a.current.offsetHeight)}):(window.requestAnimationFrame(()=>{a.current&&(a.current.style.height=`auto`,o.current=a.current.offsetHeight,a.current.style.height=`0px`)}),a.current.style.opacity=`0`);return}t||(a.current.style.height=`${o.current}px`);let e=[];e[0]=window.requestAnimationFrame(()=>{e[1]=window.requestAnimationFrame(()=>{a.current&&(a.current.style.height=`${t?o.current:0}px`,a.current.style.opacity=t?`1`:`0`)})});let n,r=()=>{a.current&&(t?(a.current.style.height=`auto`,a.current.style.overflow=``,a.current.style.opacity=``,window.requestAnimationFrame(()=>{a.current&&(o.current=a.current.offsetHeight)})):a.current.style.height=`0px`)};return s.current===0?r():n=window.setTimeout(r,s.current),()=>{e.forEach(window.cancelAnimationFrame),n&&window.clearTimeout(n)}},[t]),(0,d.jsxs)(`div`,{...i,children:[e,(0,d.jsx)(`div`,{className:`transition-all ease-in-out overflow-hidden`,role:`region`,"aria-hidden":!t,ref:a,style:{transitionDuration:`${r}ms`},children:n})]})}var L=(0,u.forwardRef)(({children:e,position:t=`bottom`,label:n,className:r,timeout:i=150,offset:a={x:0,y:6},clientPoint:o=!1,disabled:s},c)=>{let[l,p]=(0,u.useState)(!1),m=(0,f.useId)(),{refs:h,floatingStyles:g,context:_}=(0,f.useFloating)({nodeId:m,open:l,placement:t,middleware:[(0,f.shift)(),(0,f.flip)(),(0,f.offset)({mainAxis:a.y,crossAxis:a.x})],whileElementsMounted:s?void 0:f.autoUpdate,onOpenChange:p}),{getReferenceProps:v,getFloatingProps:y}=(0,f.useInteractions)([(0,f.useHover)(_,{enabled:!s}),(0,f.useClientPoint)(_,{enabled:o})]),{isMounted:b,styles:x}=(0,f.useTransitionStyles)(_,{duration:i,initial:{opacity:0,transform:`scale(0.8)`}});(0,u.useImperativeHandle)(c,()=>({floating:h.floating,reference:h.reference,open:()=>p(!0),close:()=>p(!1)})),(0,u.useEffect)(()=>{s&&p(!1)},[s]);let S=typeof e==`string`?(0,d.jsx)(`span`,{children:e}):e;return(0,d.jsxs)(d.Fragment,{children:[(0,u.cloneElement)(u.Children.only(S),{ref:h.setReference,...v()}),(0,d.jsx)(D,{disabled:s||!b,children:(0,d.jsx)(`div`,{role:`tooltip`,className:`z-9999`,ref:h.setFloating,...y({style:g}),children:(0,d.jsx)(R,{className:r,style:x,children:n})})})]})});L.displayName=`Tooltip`;var R=(0,u.forwardRef)(({className:e,custom:t,...n},r)=>{let i=(0,u.useMemo)(()=>h(m(`relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre`,t?null:`border border-accent rounded shadow-md px-3 py-1 bg-background`),e),[e,t]);return(0,d.jsx)(`div`,{ref:r,className:i,...n})});R.displayName=`TooltipContent`;function z({variant:e,size:t}){return m(`inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,`disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto`,{"bg-primary text-inverted hover:bg-primary-fore":!e||e===`primary`,"bg-info text-inverted hover:bg-info-fore":e===`info`,"bg-warn text-inverted hover:bg-warn-fore":e===`warn`,"bg-danger text-inverted hover:bg-danger-fore":e===`danger`,"hover:bg-accent":e===`ghost`,"hover:underline":e===`link`,"border border-input hover:bg-accent":e===`outline`},{"px-2 py-1":t!==`icon`,"p-1.5":t===`icon`})}function B({size:e,variant:t,className:n,...r}){let i=(0,u.useMemo)(()=>h(z({size:e,variant:t}),n),[e,t,n]);return(0,d.jsx)(`button`,{className:i,type:`button`,...r})}var V={open:150,close:75};function H({open:e,children:t,timeout:n=V,padding:r=`0.85rem`,verticalAlign:i=`center`,closeOnOverlay:a,closeOnEsc:o,onExited:s,className:c,onOpenChange:l,size:p,...h}){let g=(0,u.useRef)(s),_=(0,u.useRef)(!1),v=(0,f.useId)(),{refs:y,context:b}=(0,f.useFloating)({open:e,onOpenChange:l,nodeId:v}),{getFloatingProps:x}=(0,f.useInteractions)([(0,f.useDismiss)(b,{enabled:o,escapeKey:o,outsidePress:!1})]),{isMounted:S,styles:C}=(0,f.useTransitionStyles)(b,{duration:n,initial:{opacity:0,transform:`scale(0.8)`}});(0,u.useEffect)(()=>{_.current!==S&&(_.current=S,!S&&g.current?.())},[S]);let w=(0,u.useCallback)(()=>{a&&l?.(!1)},[l,a]);g.current=s;let T=(0,u.useMemo)(()=>m(`grid bg-backdrop z-40 justify-items-center transition ease-in-out`,{"place-items-start items-start":i===`start`,"place-items-end":i===`end`,"place-items-center":i===`center`||!i}),[i]);return(0,d.jsx)(D,{disabled:!S,children:(0,d.jsx)(f.FloatingOverlay,{className:T,"data-testid":`vs-dialog-overlay`,onClick:w,style:{padding:r,opacity:C.opacity},lockScroll:!0,children:(0,d.jsx)(U,{ref:y.setFloating,className:c,role:`dialog`,size:p,onClick:O,...x({...h,style:C}),children:t})})})}function U({size:e,...t}){return(0,d.jsx)(g,{classList:[e?`flex flex-col bg-background shadow-lg p-5 rounded`:null,{"w-full max-w-dialog-sm":e===`small`,"w-full max-w-dialog-md":e===`medium`,"w-full max-w-dialog-lg":e===`large`}],...t})}function W(e){return(0,d.jsx)(g,{classList:`inline-block animate-pulse rounded-md bg-accent`,...e})}function G(e){return(0,d.jsx)(g,{role:`group`,classList:[`flex items-center justify-center`,`[&_button]:rounded-none **:first:rounded-bl **:first:rounded-tl **:last:rounded-br **:last:rounded-tr`,`**:first:border-r-0 **:last:border-l-0`],...e})}function K({label:e=`Loading...`,...t}){return(0,d.jsxs)(g,{as:`svg`,classList:`fill-accent animate-spin text-primary`,"aria-label":e,"aria-hidden":`true`,width:`32`,height:`32`,viewBox:`0 0 100 101`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,...t,children:[(0,d.jsx)(`path`,{d:`M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z`,fill:`currentFill`}),(0,d.jsx)(`path`,{d:`M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z`,fill:`currentColor`})]})}function q({value:e,max:t,...n}){let r=(0,u.useMemo)(()=>e?Math.min(100,Math.round(e/t*100)):0,[e,t]);return(0,d.jsx)(g,{role:`progressbar`,classList:`relative overflow-hidden rounded-full bg-primary`,"aria-valuemax":t,"aria-valuemin":0,...n,children:(0,d.jsx)(g,{className:`h-full w-full flex-1 bg-input transition-all origin-right`,style:{transform:`translateX(${r}%)`}})})}function J({orientation:e=`horizontal`,...t}){return(0,d.jsx)(g,{as:`hr`,role:`none`,classList:[`border-0 p-0 shrink-0 bg-input`,e===`horizontal`?`h-px w-full`:`w-px h-full`],...t})}var Y={open:250,close:150};function ee({open:e,timeout:t=Y,onOpenChange:n,position:r=`right`,overlay:i,onExited:a,onOpen:o,...s}){let c=(0,f.useId)(),l=(0,u.useRef)(!1),p=(0,u.useRef)(o),m=(0,u.useRef)(a),{refs:h,context:_}=(0,f.useFloating)({open:e,onOpenChange:n,nodeId:c}),{isMounted:v,styles:y}=(0,f.useTransitionStyles)(_,{duration:t,initial(){let e=`translateX(75%)`;return r===`left`?e=`translateX(-75%)`:r===`top`?e=`translateY(-75%)`:r===`bottom`&&(e=`translateY(75%)`),{opacity:0,transform:e}}});return(0,u.useEffect)(()=>{if(l.current!==v){if(l.current=v,v){p.current?.();return}m.current?.()}},[v]),m.current=a,p.current=o,(0,d.jsxs)(D,{disabled:!v,children:[i?(0,d.jsx)(f.FloatingOverlay,{className:`bg-backdrop`,style:{opacity:y.opacity},onClick:()=>n?.(!1)}):null,(0,d.jsx)(g,{ref:h.setFloating,role:`dialog`,classList:[`fixed transition-transform z-30`,{"top-0 right-0 h-full max-h-screen":r===`right`,"top-0 left-0 h-full max-h-screen":r===`left`,"top-0 left-0 right-0 w-full max-w-screen":r===`top`,"bottom-0 left-0 right-0 w-full max-w-screen":r===`bottom`}],style:y,children:(0,d.jsx)(te,{...s})})]})}function te(e){return(0,d.jsx)(g,{classList:`relative bg-background min-w-full min-h-full border border-input shadow-lg`,...e})}function X({type:e,label:t,message:n}){let{icons:r}=re();return(0,d.jsxs)(`div`,{className:`flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2`,children:[e?(0,d.jsxs)(`figure`,{className:`mr-2`,children:[e===`success`&&r?.success?r.success:null,e===`info`&&r?.info?r.info:null,e===`error`&&r?.error?r.error:null,e===`warn`&&r?.warn?r.warn:null,e===`loading`?r?.loading:null]}):null,(0,d.jsxs)(`div`,{className:`space-y-2`,children:[(0,d.jsx)(`p`,{className:`font-medium leading-none`,children:t}),n?(0,d.jsx)(`p`,{children:n}):null]})]})}function Z(){}var Q=new class{notify=Z;lastId=0;subscribe=e=>(this.notify=e,()=>{this.notify=Z});add=(e,t={})=>{this.lastId+=1;let n=`${this.lastId}`;return this.notify({id:n,type:`add`,config:{id:n,label:e,...t}}),n};update=(e,t)=>{this.notify({id:e,type:`update`,config:t})};remove=e=>{this.notify({id:e,type:`remove`})};clear=()=>{this.lastId=0}};function ne({id:e,type:t,index:n,duration:r=5e3,className:i,children:a,inverted:o,timeout:s=250,max:l=3}){let p=(0,u.useRef)(!1),[m,h]=(0,u.useState)(!1),{context:g,refs:_}=(0,f.useFloating)({open:m,onOpenChange:h,nodeId:e}),{isMounted:v,styles:y}=(0,f.useTransitionStyles)(g,{duration:s,initial:{opacity:0,transform:`translateY(${o?``:`-`}50%)`}});(0,u.useLayoutEffect)(()=>{h(n<=l)},[n,l]),(0,u.useEffect)(()=>{p.current!==v&&(v||Q.remove(e),p.current=v)},[v,e]),(0,u.useEffect)(()=>{if(!r)return;let e=window.setTimeout(()=>h(!1),r);return()=>window.clearTimeout(e)},[r,e]);let b=(0,u.useCallback)(()=>{t!==`loading`&&h(!1)},[t]),x=(0,u.useMemo)(()=>(0,c.default)(`relative flex w-fit transition-transform ease-in-out cursor-pointer`,i),[i]);return v?(0,d.jsx)(`li`,{role:`log`,tabIndex:-1,ref:_.setFloating,className:x,style:y,onClick:b,children:a}):null}var $=(0,u.createContext)({});function re(){return(0,u.useContext)($)}function ie({className:e,offset:t={},position:n=`top-left`,max:r,ListItem:i=X,icons:a}){let o=(0,u.useMemo)(()=>{let e={position:`fixed`,...t};return Object.keys(t).length||(n.indexOf(`top`)>-1?e.top=`16px`:n.indexOf(`bottom`)>-1&&(e.bottom=`16px`),n.indexOf(`left`)>-1?e.left=`16px`:n.indexOf(`right`)>-1&&(e.right=`16px`)),n.indexOf(`left`)>-1?e.alignItems=`flex-start`:n.indexOf(`right`)>-1?e.alignItems=`flex-end`:(e.left=`50%`,e.alignItems=`center`,e.transform=`translateX(-50%)`),e},[t,n]),s=(0,u.useMemo)(()=>(0,c.default)(`flex flex-col z-40 overflow-hidden`,e),[e]),l=(0,u.useMemo)(()=>n?.startsWith(`bottom`)||!1,[n]),f=(0,u.useRef)(new Map),[p,m]=(0,u.useState)([]),h=(0,u.useState)(0)[1];E(()=>Q.subscribe(e=>{(0,u.startTransition)(()=>{if(e.type===`add`)f.current.set(e.id,e.config),m(t=>[...t,e.id]);else if(e.type===`remove`){if(!f.current.delete(e.id))return;m(t=>{let n=new Set(t);return n.has(e.id)?(n.delete(e.id),Array.from(n)):t})}else if(e.type===`update`){let t=f.current.get(e.id);if(!t)return;f.current.set(e.id,{...t,...e.config}),h(e=>e+1)}})}),[]);let g=(0,u.useMemo)(()=>({icons:a}),[a]),_=p.length;return(0,d.jsx)(D,{children:(0,d.jsx)(`ol`,{className:s,style:o,"aria-live":`polite`,children:(0,d.jsx)($.Provider,{value:g,children:p.map((e,t)=>{let n=f.current.get(e);if(!n)return null;let{className:a,duration:o,...s}=n;return(0,d.jsx)(ne,{id:e,index:_-t,className:a,duration:o,inverted:l,max:r,children:(0,u.createElement)(i,s)},e)})})})})}exports.Accordion=I,exports.Base=g,exports.Button=B,exports.ButtonGroup=G,exports.Checkbox=T,exports.Dialog=H,exports.Divider=J,exports.FormField=y,exports.FormLabel=v,exports.Input=S,exports.InputField=x,exports.Popover=A,exports.Portal=D,exports.Progress=q,exports.Radio=P,exports.Select=M,exports.Sheet=ee,exports.Skeleton=W,exports.Spinner=K,exports.Switch=F,exports.Textarea=C,exports.Toast=ie,exports.ToastItem=X,exports.Tooltip=L,exports.cn=m,exports.element=_,exports.merge=h,exports.toast=Q,exports.varientButton=z;

package/dist/index.es.js

@@ -22,9 +22,19 @@ function F({ as: e, classList: t = [], className: n, override: r, ...i }) {
 		...i
 	});
 }
+function I(e, t) {
+	let n = ({ className: n, ...r }) => {
+		let i = p(() => P(N(t), n), [n]);
+		return a(e, {
+			className: i,
+			...r
+		});
+	};
+	return n.displayName = `Styled${typeof e == "string" ? e : "Component"}`, n;
+}
 //#endregion
 //#region src/forms/Field/FormLabel.tsx
-function I(e) {
+function L(e) {
 	return /* @__PURE__ */ _(F, {
 		as: "label",
 		classList: ["leading-none peer-disabled:opacity-70"],
@@ -33,13 +43,13 @@ function I(e) {
 }
 //#endregion
 //#region src/forms/Field/FormField.tsx
-function L({ label: e, children: t, required: n, htmlFor: r, error: i, help: a, helpBefore: o, innerClass: s, ...c }) {
+function R({ label: e, children: t, required: n, htmlFor: r, error: i, help: a, helpBefore: o, innerClass: s, ...c }) {
 	let l = p(() => N("font-medium", n ? "after:content-[\"*\"] after:text-danger after:text-sm after:pl-0.5" : ""), [n]);
 	return /* @__PURE__ */ v(F, {
 		classList: "flex flex-col space-y-2",
 		...c,
 		children: [
-			e ? /* @__PURE__ */ _(I, {
+			e ? /* @__PURE__ */ _(L, {
 				className: l,
 				htmlFor: r,
 				children: e
@@ -50,7 +60,7 @@ function L({ label: e, children: t, required: n, htmlFor: r, error: i, help: a,
 			}) : null,
 			/* @__PURE__ */ _("div", {
 				className: s,
-				children: R(t, !!i)
+				children: z(t, !!i)
 			}),
 			a && !o && !i ? /* @__PURE__ */ _("p", {
 				className: "text-xs text-muted",
@@ -63,7 +73,7 @@ function L({ label: e, children: t, required: n, htmlFor: r, error: i, help: a,
 		]
 	});
 }
-function R(e, t) {
+function z(e, t) {
 	let i = n.count(e);
 	if (!i) return null;
 	if (i === 1) return r(e, { error: t });
@@ -72,7 +82,7 @@ function R(e, t) {
 }
 //#endregion
 //#region src/forms/Field/InputField.tsx
-function z({ error: e, ...t }) {
+function ee({ error: e, ...t }) {
 	return /* @__PURE__ */ _(F, {
 		as: "fieldset",
 		classList: [
@@ -113,7 +123,7 @@ function V({ error: e, ...t }) {
 }
 //#endregion
 //#region src/forms/Checkbox/index.tsx
-function ee() {
+function H() {
 	return /* @__PURE__ */ _("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "30",
@@ -130,7 +140,7 @@ function ee() {
 		})
 	});
 }
-function H({ checked: e, indeterminate: t, id: n, name: r, onChange: i, value: a, checkIcon: o, error: s, ...c }) {
+function U({ checked: e, indeterminate: t, id: n, name: r, onChange: i, value: a, checkIcon: o, error: s, ...c }) {
 	let l = () => {
 		c.disabled || i?.(!e);
 	};
@@ -153,7 +163,7 @@ function H({ checked: e, indeterminate: t, id: n, name: r, onChange: i, value: a
 		...c,
 		children: [
 			e ? o : null,
-			t && !e ? /* @__PURE__ */ _(ee, {}) : null,
+			t && !e ? /* @__PURE__ */ _(H, {}) : null,
 			/* @__PURE__ */ _("input", {
 				type: "checkbox",
 				"aria-hidden": "true",
@@ -177,12 +187,12 @@ function H({ checked: e, indeterminate: t, id: n, name: r, onChange: i, value: a
 }
 //#endregion
 //#region src/hooks/useIsomorphicLayoutEffect.ts
-var U = typeof window < "u" && window.document !== void 0 && window.document.createElement !== void 0 ? f : u;
+var W = typeof window < "u" && window.document !== void 0 && window.document.createElement !== void 0 ? f : u;
 //#endregion
 //#region src/components/Portal/index.tsx
-function W({ children: e, container: t, disabled: n }) {
+function G({ children: e, container: t, disabled: n }) {
 	let [r, i] = h(null);
-	return U(() => {
+	return W(() => {
 		if (!t) {
 			let e = document.getElementById("visits-style-portals");
 			return e || (e = document.createElement("div"), e.id = "visits-style-portals", document.body.appendChild(e)), i(e);
@@ -192,7 +202,7 @@ function W({ children: e, container: t, disabled: n }) {
 }
 //#endregion
 //#region src/utils/stopPropagation.ts
-function G(e) {
+function K(e) {
 	e && (e.stopPropagation(), e.preventDefault());
 }
 //#endregion
@@ -201,11 +211,11 @@ var te = {
 	open: 150,
 	close: 75
 };
-function K({ ref: e, position: t, label: i, children: a, disabled: o, offset: s = {
+function q({ ref: e, position: t, label: i, children: a, disabled: o, offset: s = {
 	x: 0,
 	y: 6
 }, onOpen: l, onClose: f, onManualClose: p, timeout: T = te, override: E, zIndex: O = 9996, role: M, ...N }) {
-	let [P, F] = h(!1), I = k(), L = m(l), R = m(f), { refs: z, floatingStyles: B, context: V } = D({
+	let [P, F] = h(!1), I = k(), L = m(l), R = m(f), { refs: z, floatingStyles: ee, context: B } = D({
 		nodeId: I,
 		placement: t,
 		middleware: [
@@ -221,7 +231,7 @@ function K({ ref: e, position: t, label: i, children: a, disabled: o, offset: s
 			e ? L.current?.(z.reference.current, z.floating.current) : R.current?.(z.reference.current, z.floating.current), F(e);
 		},
 		whileElementsMounted: b
-	}), { isMounted: ee, styles: H } = j(V, {
+	}), { isMounted: V, styles: H } = j(B, {
 		duration: T,
 		initial({ side: e }) {
 			let t = "";
@@ -231,7 +241,7 @@ function K({ ref: e, position: t, label: i, children: a, disabled: o, offset: s
 			};
 		}
 	}), U = c((e) => {
-		if (G(e), p) return p();
+		if (K(e), p) return p();
 		F(!1), R.current?.(z.reference.current, z.floating.current);
 	}, [p]);
 	u(() => {
@@ -244,16 +254,16 @@ function K({ ref: e, position: t, label: i, children: a, disabled: o, offset: s
 			F(!1), R.current?.(z.reference.current, z.floating.current);
 		}
 	}), []);
-	let { getFloatingProps: K, getReferenceProps: q } = A([w(V, { enabled: !o })]);
+	let { getFloatingProps: W, getReferenceProps: q } = A([w(B, { enabled: !o })]);
 	return L.current = l, R.current = f, /* @__PURE__ */ v(g, { children: [r(n.only(i), q({
 		ref: z.setReference,
 		tabIndex: 0,
 		role: "button",
 		"aria-expanded": P,
 		disabled: o,
-		onClick: G
-	})), /* @__PURE__ */ _(W, {
-		disabled: o || !ee,
+		onClick: K
+	})), /* @__PURE__ */ _(G, {
+		disabled: o || !V,
 		children: /* @__PURE__ */ _(y, {
 			"data-testid": "vs-popover-shadow",
 			onClick: U,
@@ -262,13 +272,13 @@ function K({ ref: e, position: t, label: i, children: a, disabled: o, offset: s
 			children: /* @__PURE__ */ _("div", {
 				role: M || "region",
 				ref: z.setFloating,
-				style: B,
+				style: ee,
 				children: /* @__PURE__ */ _(ne, {
 					override: E,
 					styles: H,
-					...K({
+					...W({
 						...N,
-						onClick: G
+						onClick: K
 					}),
 					children: a
 				})
@@ -288,57 +298,57 @@ function ne({ override: e, styles: t, style: n = {}, ...r }) {
 }
 //#endregion
 //#region src/forms/Select/index.tsx
-function q({ className: e, placeholder: t = "", options: n = [], error: r, disabled: i, value: a, maxHeight: o = 408, arrowIcon: s, closeIcon: l, checkIcon: u, onChange: d, onClear: f, renderItem: g, sectionLabelStyle: y, buttonAreaStyle: b, clearLabelText: x, optionStyle: S, ...C }) {
-	let w = m(null), [T, E] = h(0), D = p(() => Array.isArray(a), []), O = c((e) => {
-		d?.(e), D || w.current?.close();
-	}, [d, D]), k = c((e) => Array.isArray(a) ? a.indexOf(e) > -1 : a === e, [a]), A = p(() => {
+function re({ className: e, placeholder: t = "", options: n = [], error: r, disabled: i, value: a, maxHeight: o = 408, arrowIcon: s, closeIcon: l, checkIcon: u, onChange: d, onClear: f, renderItem: g, sectionLabelStyle: y, buttonAreaStyle: b, clearLabelText: x, optionStyle: S, popoverStyle: C, popoverPosition: w, labelStyle: T, ...E }) {
+	let D = m(null), [O, k] = h(0), A = p(() => Array.isArray(a), []), j = c((e) => {
+		d?.(e), A || D.current?.close();
+	}, [d, A]), M = c((e) => Array.isArray(a) ? a.indexOf(e) > -1 : a === e, [a]), N = p(() => {
 		let e = {}, t = n.filter((e) => typeof e != "string");
 		for (let n = 0, r = t.length; n < r; n += 1) {
 			let r = t[n];
 			e[`${r.value}`] = r.label;
 		}
 		return e;
-	}, [n]), j = p(() => {
+	}, [n]), P = p(() => {
 		if (!a) return t;
 		if (Array.isArray(a)) {
 			if (!a.length) return t;
 			let e = [...a].sort(), n = [];
-			for (let t = 0, r = e.length; t < r; t += 1) n[t] = A[`${e[t]}`] || "";
+			for (let t = 0, r = e.length; t < r; t += 1) n[t] = N[`${e[t]}`] || "";
 			return n.filter(Boolean).join(",") || t;
 		}
-		return A[`${a}`] || t;
+		return N[`${a}`] || t;
 	}, [
 		t,
 		a,
-		A
-	]), M = p(() => a == null ? !0 : Array.isArray(a) ? !a.length : !1, [a]), N = c((e, t) => g ? typeof e == "string" ? g(e, {
+		N
+	]), I = p(() => a == null ? !0 : Array.isArray(a) ? !a.length : !1, [a]), L = c((e, t) => g ? typeof e == "string" ? g(e, {
 		index: t,
 		selected: !1,
 		onChange: () => {}
 	}) : g(e, {
 		index: t,
-		selected: k(e.value),
-		onChange: () => O(e.value)
+		selected: M(e.value),
+		onChange: () => j(e.value)
 	}) : typeof e == "string" ? /* @__PURE__ */ _(F, {
 		as: "h5",
 		classList: ["font-normal py-1 px-2 text-muted"],
 		className: y,
 		children: e
-	}, `optionheader-${t}`) : /* @__PURE__ */ _(re, {
-		selected: k(e.value),
-		onChange: O,
+	}, `optionheader-${t}`) : /* @__PURE__ */ _(ie, {
+		selected: M(e.value),
+		onChange: j,
 		checkIcon: u,
 		className: S,
 		...e
 	}, e.label), [
 		g,
-		O,
-		k,
+		j,
+		M,
 		y,
 		S,
 		u
 	]);
-	return /* @__PURE__ */ _(K, {
+	return /* @__PURE__ */ _(q, {
 		label: /* @__PURE__ */ v(F, {
 			as: "button",
 			type: "button",
@@ -349,15 +359,16 @@ function q({ className: e, placeholder: t = "", options: n = [], error: r, disab
 			],
 			className: e,
 			disabled: i,
-			...C,
+			...E,
 			children: [/* @__PURE__ */ _(F, {
 				as: "span",
-				classList: ["overflow-hidden text-ellipsis whitespace-nowrap", M ? "text-muted" : "text-text"],
-				children: j
+				classList: ["overflow-hidden text-ellipsis whitespace-nowrap", I ? "text-muted" : "text-text"],
+				className: T,
+				children: P
 			}), /* @__PURE__ */ v(F, {
 				classList: "relative flex items-center space-x-2",
 				className: b,
-				children: [f && !M ? /* @__PURE__ */ _("div", {
+				children: [f && !I ? /* @__PURE__ */ _("div", {
 					tabIndex: -1,
 					role: "button",
 					className: "size-6 p-1.5 rounded hover:bg-accent cursor-pointer",
@@ -372,22 +383,24 @@ function q({ className: e, placeholder: t = "", options: n = [], error: r, disab
 				}) : null, s]
 			})]
 		}),
-		ref: w,
-		onOpen: (e) => E(e?.getBoundingClientRect().width || 0),
+		ref: D,
+		onOpen: (e) => k(e?.getBoundingClientRect().width || 0),
+		className: C,
+		position: w,
 		disabled: i,
 		children: /* @__PURE__ */ _("ul", {
 			className: "overflow-y-auto flex flex-col",
 			role: "listbox",
 			style: {
-				minWidth: T,
+				minWidth: O,
 				maxWidth: "calc(100vw - 3rem)",
 				maxHeight: o
 			},
-			children: n.map(N)
+			children: n.map(L)
 		})
 	});
 }
-function re({ className: e, value: t, label: n, selected: r, checkIcon: i, onChange: a }) {
+function ie({ className: e, value: t, label: n, selected: r, checkIcon: i, onChange: a }) {
 	return /* @__PURE__ */ v(F, {
 		as: "button",
 		type: "button",
@@ -396,12 +409,12 @@ function re({ className: e, value: t, label: n, selected: r, checkIcon: i, onCha
 		className: e,
 		"aria-selected": r,
 		onClick: () => a?.(t),
-		children: [r && i ? i : /* @__PURE__ */ _("div", { className: "w-5 h-1 mr-1" }), n]
+		children: [r && (i || i === null) ? i : /* @__PURE__ */ _("div", { className: "w-5 h-1 mr-1" }), n]
 	});
 }
 //#endregion
 //#region src/forms/Radio/index.tsx
-function ie({ checked: e, className: t, id: n, name: r, onChange: i, value: a, error: o, ...s }) {
+function ae({ checked: e, className: t, id: n, name: r, onChange: i, value: a, error: o, ...s }) {
 	let c = () => {
 		s.disabled || i?.(!e);
 	};
@@ -448,7 +461,7 @@ function ie({ checked: e, className: t, id: n, name: r, onChange: i, value: a, e
 }
 //#endregion
 //#region src/forms/Switch/index.tsx
-function ae({ checked: e, onChange: t, value: n, id: r, name: i, error: a, ref: o, ...s }) {
+function oe({ checked: e, onChange: t, value: n, id: r, name: i, error: a, ref: o, ...s }) {
 	let c = () => {
 		s.disabled || t?.(!e);
 	};
@@ -493,11 +506,11 @@ function ae({ checked: e, onChange: t, value: n, id: r, name: i, error: a, ref:
 }
 //#endregion
 //#region src/components/Accordion/index.tsx
-function oe({ header: e, show: t, children: n, timeout: r = 300, ...i }) {
+function se({ header: e, show: t, children: n, timeout: r = 300, ...i }) {
 	let a = m(null), o = m(0), s = m(0), c = m(!0);
 	return u(() => {
 		s.current = r;
-	}, [r]), U(() => {
+	}, [r]), W(() => {
 		if (!a.current) return;
 		if (a.current.style.overflow = "hidden", a.current.style.opacity = "1", c.current) {
 			c.current = !1, a.current.style.height = t ? "auto" : "0px", t ? window.requestAnimationFrame(() => {
@@ -573,7 +586,7 @@ var J = o(({ children: e, position: t = "bottom", label: i, className: a, timeou
 	return /* @__PURE__ */ v(g, { children: [r(n.only(L), {
 		ref: w.setReference,
 		...N()
-	}), /* @__PURE__ */ _(W, {
+	}), /* @__PURE__ */ _(G, {
 		disabled: l || !F,
 		children: /* @__PURE__ */ _("div", {
 			role: "tooltip",
@@ -610,11 +623,11 @@ function X({ variant: e, size: t }) {
 		"hover:underline": e === "link",
 		"border border-input hover:bg-accent": e === "outline"
 	}, {
-		"px-2 py-1": !t,
+		"px-2 py-1": t !== "icon",
 		"p-1.5": t === "icon"
 	});
 }
-function se({ size: e, variant: t, className: n, ...r }) {
+function ce({ size: e, variant: t, className: n, ...r }) {
 	let i = p(() => P(X({
 		size: e,
 		variant: t
@@ -631,11 +644,11 @@ function se({ size: e, variant: t, className: n, ...r }) {
 }
 //#endregion
 //#region src/components/Dialog/index.tsx
-var ce = {
+var le = {
 	open: 150,
 	close: 75
 };
-function le({ open: e, children: t, timeout: n = ce, padding: r = "0.85rem", verticalAlign: i = "center", closeOnOverlay: a, closeOnEsc: o, onExited: s, className: l, onOpenChange: d, size: f, ...h }) {
+function ue({ open: e, children: t, timeout: n = le, padding: r = "0.85rem", verticalAlign: i = "center", closeOnOverlay: a, closeOnEsc: o, onExited: s, className: l, onOpenChange: d, size: f, ...h }) {
 	let g = m(s), v = m(!1), b = k(), { refs: x, context: S } = D({
 		open: e,
 		onOpenChange: d,
@@ -663,7 +676,7 @@ function le({ open: e, children: t, timeout: n = ce, padding: r = "0.85rem", ver
 		"place-items-end": i === "end",
 		"place-items-center": i === "center" || !i
 	}), [i]);
-	return /* @__PURE__ */ _(W, {
+	return /* @__PURE__ */ _(G, {
 		disabled: !w,
 		children: /* @__PURE__ */ _(y, {
 			className: M,
@@ -674,12 +687,12 @@ function le({ open: e, children: t, timeout: n = ce, padding: r = "0.85rem", ver
 				opacity: T.opacity
 			},
 			lockScroll: !0,
-			children: /* @__PURE__ */ _(ue, {
+			children: /* @__PURE__ */ _(de, {
 				ref: x.setFloating,
 				className: l,
 				role: "dialog",
 				size: f,
-				onClick: G,
+				onClick: K,
 				...C({
 					...h,
 					style: T
@@ -689,7 +702,7 @@ function le({ open: e, children: t, timeout: n = ce, padding: r = "0.85rem", ver
 		})
 	});
 }
-function ue({ size: e, ...t }) {
+function de({ size: e, ...t }) {
 	return /* @__PURE__ */ _(F, {
 		classList: [e ? "flex flex-col bg-background shadow-lg p-5 rounded" : null, {
 			"w-full max-w-dialog-sm": e === "small",
@@ -701,7 +714,7 @@ function ue({ size: e, ...t }) {
 }
 //#endregion
 //#region src/elements/Skeleton/index.tsx
-function de(e) {
+function fe(e) {
 	return /* @__PURE__ */ _(F, {
 		classList: "inline-block animate-pulse rounded-md bg-accent",
 		...e
@@ -709,7 +722,7 @@ function de(e) {
 }
 //#endregion
 //#region src/elements/Button/ButtonGroup.tsx
-function fe(e) {
+function pe(e) {
 	return /* @__PURE__ */ _(F, {
 		role: "group",
 		classList: [
@@ -722,34 +735,30 @@ function fe(e) {
 }
 //#endregion
 //#region src/elements/Spinner/index.tsx
-function Z({ size: e = 20, label: t = "Loading...", ...n }) {
-	return /* @__PURE__ */ v("div", {
-		role: "status",
-		...n,
-		children: [/* @__PURE__ */ v("svg", {
-			"aria-hidden": "true",
-			className: "text-accent animate-spin fill-primary",
-			width: e,
-			height: e,
-			viewBox: "0 0 100 101",
-			fill: "none",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ _("path", {
-				d: "M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z",
-				fill: "currentColor"
-			}), /* @__PURE__ */ _("path", {
-				d: "M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z",
-				fill: "currentFill"
-			})]
-		}), /* @__PURE__ */ _("span", {
-			className: "sr-only",
-			children: t
+function me({ label: e = "Loading...", ...t }) {
+	return /* @__PURE__ */ v(F, {
+		as: "svg",
+		classList: "fill-accent animate-spin text-primary",
+		"aria-label": e,
+		"aria-hidden": "true",
+		width: "32",
+		height: "32",
+		viewBox: "0 0 100 101",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...t,
+		children: [/* @__PURE__ */ _("path", {
+			d: "M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z",
+			fill: "currentFill"
+		}), /* @__PURE__ */ _("path", {
+			d: "M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z",
+			fill: "currentColor"
 		})]
 	});
 }
 //#endregion
 //#region src/elements/Progress/index.tsx
-function pe({ value: e, max: t, ...n }) {
+function he({ value: e, max: t, ...n }) {
 	let r = p(() => e ? Math.min(100, Math.round(e / t * 100)) : 0, [e, t]);
 	return /* @__PURE__ */ _(F, {
 		role: "progressbar",
@@ -765,7 +774,7 @@ function pe({ value: e, max: t, ...n }) {
 }
 //#endregion
 //#region src/elements/Divider/index.tsx
-function me({ orientation: e = "horizontal", ...t }) {
+function ge({ orientation: e = "horizontal", ...t }) {
 	return /* @__PURE__ */ _(F, {
 		as: "hr",
 		role: "none",
@@ -775,11 +784,11 @@ function me({ orientation: e = "horizontal", ...t }) {
 }
 //#endregion
 //#region src/components/Sheet/index.tsx
-var he = {
+var _e = {
 	open: 250,
 	close: 150
 };
-function ge({ open: e, timeout: t = he, onOpenChange: n, position: r = "right", overlay: i, onExited: a, onOpen: o, ...s }) {
+function ve({ open: e, timeout: t = _e, onOpenChange: n, position: r = "right", overlay: i, onExited: a, onOpen: o, ...s }) {
 	let c = k(), l = m(!1), d = m(o), f = m(a), { refs: p, context: h } = D({
 		open: e,
 		onOpenChange: n,
@@ -802,7 +811,7 @@ function ge({ open: e, timeout: t = he, onOpenChange: n, position: r = "right",
 			}
 			f.current?.();
 		}
-	}, [g]), f.current = a, d.current = o, /* @__PURE__ */ v(W, {
+	}, [g]), f.current = a, d.current = o, /* @__PURE__ */ v(G, {
 		disabled: !g,
 		children: [i ? /* @__PURE__ */ _(y, {
 			className: "bg-backdrop",
@@ -818,11 +827,11 @@ function ge({ open: e, timeout: t = he, onOpenChange: n, position: r = "right",
 				"bottom-0 left-0 right-0 w-full max-w-screen": r === "bottom"
 			}],
 			style: b,
-			children: /* @__PURE__ */ _(_e, { ...s })
+			children: /* @__PURE__ */ _(ye, { ...s })
 		})]
 	});
 }
-function _e(e) {
+function ye(e) {
 	return /* @__PURE__ */ _(F, {
 		classList: "relative bg-background min-w-full min-h-full border border-input shadow-lg",
 		...e
@@ -830,8 +839,8 @@ function _e(e) {
 }
 //#endregion
 //#region src/components/Toast/ToastItem.tsx
-function Q({ type: e, label: t, message: n }) {
-	let { icons: r } = xe();
+function Z({ type: e, label: t, message: n }) {
+	let { icons: r } = Se();
 	return /* @__PURE__ */ v("div", {
 		className: "flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2",
 		children: [e ? /* @__PURE__ */ v("figure", {
@@ -841,7 +850,7 @@ function Q({ type: e, label: t, message: n }) {
 				e === "info" && r?.info ? r.info : null,
 				e === "error" && r?.error ? r.error : null,
 				e === "warn" && r?.warn ? r.warn : null,
-				e === "loading" ? /* @__PURE__ */ _(Z, { size: 20 }) : null
+				e === "loading" ? r?.loading : null
 			]
 		}) : null, /* @__PURE__ */ v("div", {
 			className: "space-y-2",
@@ -854,12 +863,12 @@ function Q({ type: e, label: t, message: n }) {
 }
 //#endregion
 //#region src/components/Toast/observer.ts
-function ve() {}
+function Q() {}
 var $ = new class {
-	notify = ve;
+	notify = Q;
 	lastId = 0;
 	subscribe = (e) => (this.notify = e, () => {
-		this.notify = ve;
+		this.notify = Q;
 	});
 	add = (e, t = {}) => {
 		this.lastId += 1;
@@ -893,7 +902,7 @@ var $ = new class {
 }();
 //#endregion
 //#region src/components/Toast/ToastFloat.tsx
-function ye({ id: t, type: n, index: r, duration: i = 5e3, className: a, children: o, inverted: s, timeout: l = 250, max: d = 3 }) {
+function be({ id: t, type: n, index: r, duration: i = 5e3, className: a, children: o, inverted: s, timeout: l = 250, max: d = 3 }) {
 	let g = m(!1), [v, y] = h(!1), { context: b, refs: x } = D({
 		open: v,
 		onOpenChange: y,
@@ -929,11 +938,11 @@ function ye({ id: t, type: n, index: r, duration: i = 5e3, className: a, childre
 }
 //#endregion
 //#region src/components/Toast/index.tsx
-var be = i({});
-function xe() {
-	return l(be);
+var xe = i({});
+function Se() {
+	return l(xe);
 }
-function Se({ className: t, offset: n = {}, position: r = "top-left", max: i, ListItem: o = Q, icons: c }) {
+function Ce({ className: t, offset: n = {}, position: r = "top-left", max: i, ListItem: o = Z, icons: c }) {
 	let l = p(() => {
 		let e = {
 			position: "fixed",
@@ -941,7 +950,7 @@ function Se({ className: t, offset: n = {}, position: r = "top-left", max: i, Li
 		};
 		return Object.keys(n).length || (r.indexOf("top") > -1 ? e.top = "16px" : r.indexOf("bottom") > -1 && (e.bottom = "16px"), r.indexOf("left") > -1 ? e.left = "16px" : r.indexOf("right") > -1 && (e.right = "16px")), r.indexOf("left") > -1 ? e.alignItems = "flex-start" : r.indexOf("right") > -1 ? e.alignItems = "flex-end" : (e.left = "50%", e.alignItems = "center", e.transform = "translateX(-50%)"), e;
 	}, [n, r]), u = p(() => e("flex flex-col z-40 overflow-hidden", t), [t]), d = p(() => r?.startsWith("bottom") || !1, [r]), f = m(/* @__PURE__ */ new Map()), [g, v] = h([]), y = h(0)[1];
-	U(() => $.subscribe((e) => {
+	W(() => $.subscribe((e) => {
 		s(() => {
 			if (e.type === "add") f.current.set(e.id, e.config), v((t) => [...t, e.id]);
 			else if (e.type === "remove") {
@@ -961,17 +970,17 @@ function Se({ className: t, offset: n = {}, position: r = "top-left", max: i, Li
 		});
 	}), []);
 	let b = p(() => ({ icons: c }), [c]), x = g.length;
-	return /* @__PURE__ */ _(W, { children: /* @__PURE__ */ _("ol", {
+	return /* @__PURE__ */ _(G, { children: /* @__PURE__ */ _("ol", {
 		className: u,
 		style: l,
 		"aria-live": "polite",
-		children: /* @__PURE__ */ _(be.Provider, {
+		children: /* @__PURE__ */ _(xe.Provider, {
 			value: b,
 			children: g.map((e, t) => {
 				let n = f.current.get(e);
 				if (!n) return null;
 				let { className: r, duration: s, ...c } = n;
-				return /* @__PURE__ */ _(ye, {
+				return /* @__PURE__ */ _(be, {
 					id: e,
 					index: x - t,
 					className: r,
@@ -985,4 +994,4 @@ function Se({ className: t, offset: n = {}, position: r = "top-left", max: i, Li
 	}) });
 }
 //#endregion
-export { oe as Accordion, F as Base, se as Button, fe as ButtonGroup, H as Checkbox, le as Dialog, me as Divider, L as FormField, I as FormLabel, B as Input, z as InputField, K as Popover, W as Portal, pe as Progress, ie as Radio, q as Select, ge as Sheet, de as Skeleton, Z as Spinner, ae as Switch, V as Textarea, Se as Toast, Q as ToastItem, J as Tooltip, N as cn, P as merge, $ as toast, X as varientButton };
+export { se as Accordion, F as Base, ce as Button, pe as ButtonGroup, U as Checkbox, ue as Dialog, ge as Divider, R as FormField, L as FormLabel, B as Input, ee as InputField, q as Popover, G as Portal, he as Progress, ae as Radio, re as Select, ve as Sheet, fe as Skeleton, me as Spinner, oe as Switch, V as Textarea, Ce as Toast, Z as ToastItem, J as Tooltip, N as cn, I as element, P as merge, $ as toast, X as varientButton };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/visits-works/visits-style.git"
   },
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "VISITS Technologiesのreactデザインコンポーネント",
   "type": "module",
   "main": "./dist/index.cjs.js",