{"version":3,"file":"index-BZ9l9YCf.js","sources":["../../Client/webkit/internal/loadingIndicator/index.tsx","../../Client/webkit/components/button/index.tsx"],"sourcesContent":["export function LoadingIndicator() {\r\n return (\r\n <div className='border-[3px] border-solid rounded-full border-white border-b-white/30 border-r-white/30 w-4 h-4 animate-spin duration-700' />\r\n );\r\n}\r\n","import { Tooltip } from '@webkit/components/tooltip';\r\nimport { DesignContext } from '@webkit/design/context';\r\nimport { LoadingIndicator } from '@webkit/internal/loadingIndicator';\r\nimport clsx from 'clsx';\r\nimport { ReactNode, useContext } from 'react';\r\nimport { Button as AriaButton } from 'react-aria-components';\r\nimport { tv } from 'tailwind-variants';\r\n\r\nexport type ButtonProps = {\r\n /** The onClick handler fired after the user clicks the button. */\r\n onClick?: () => Promise<void> | void;\r\n\r\n /** The type of the button. One of \"button\" or \"submit\". Defaults to \"button\". */\r\n type?: 'button' | 'submit';\r\n\r\n /** When set, marks the button as a secondary which has a different design. Defaults to false. */\r\n isSecondary?: boolean;\r\n\r\n /** When set, prevents the user from interacting with the button. Defaults to false. */\r\n isDisabled?: boolean;\r\n\r\n /** A flag indicating that the loading indicator should be displayed. Defaults to false. */\r\n isLoading?: boolean;\r\n\r\n /** The children rendered within the button DOM element. */\r\n children: ReactNode;\r\n\r\n /** Optional. An ID set on the underlying button DOM element. */\r\n id?: string;\r\n\r\n /** Optional. The name attribute of the underlying DOM button. */\r\n name?: string;\r\n\r\n /** Optional. The value attribute of the underlying DOM button. */\r\n value?: string;\r\n\r\n /** A string that if present will be shown in a tooltip when the button is hovered over by the mouse. */\r\n tooltipMessage?: string;\r\n\r\n /** Indicates an icon will be rendered inside the button. */\r\n iconButton?: boolean;\r\n};\r\n\r\nconst buttonStyles = {\r\n layout: 'min-h-9 w-full',\r\n transition: 'transition-all duration-200',\r\n colors: 'bg-brand-green-250 text-white',\r\n font: 'font-sans font-bold uppercase tracking-[1px] text-sm ',\r\n border: ' border-solid border-[3px] border-brand-green-250 outline-none',\r\n disabled: 'disabled:bg-brand-gray-300 disabled:cursor-default disabled:border-brand-gray-300',\r\n focus: 'focus:bg-brand-green-200',\r\n};\r\n\r\nconst styles = {\r\n button: tv({\r\n base: clsx(\r\n buttonStyles.layout,\r\n buttonStyles.transition,\r\n buttonStyles.colors,\r\n buttonStyles.font,\r\n buttonStyles.border,\r\n buttonStyles.disabled,\r\n buttonStyles.focus\r\n ),\r\n variants: {\r\n isLoading: {\r\n true: 'cursor-default',\r\n false: 'cursor-pointer',\r\n },\r\n isSecondary: {\r\n true: 'bg-black text-white border-black focus:bg-brand-gray-650',\r\n false: '',\r\n },\r\n design: {\r\n standard: 'rounded',\r\n landing: 'rounded-full text-base font-black min-h-10',\r\n 'single-quote-element': 'rounded',\r\n 'multi-quote-element': 'rounded',\r\n },\r\n },\r\n }),\r\n content: tv({\r\n base: 'transition-all duration-400',\r\n variants: {\r\n isLoading: {\r\n true: 'opacity-0',\r\n false: 'opacity-100',\r\n },\r\n },\r\n }),\r\n loader: tv({\r\n base: 'transition-all duration-400 absolute',\r\n variants: {\r\n isLoading: {\r\n true: 'opacity-100',\r\n false: 'opacity-0',\r\n },\r\n },\r\n }),\r\n};\r\n\r\nexport function Button(props: ButtonProps) {\r\n const design = useContext(DesignContext);\r\n\r\n const { onClick, type = 'button', isSecondary, isDisabled, isLoading, id, children, tooltipMessage } = props;\r\n\r\n const buttonComponent = (\r\n <AriaButton\r\n onPress={handleClick}\r\n isDisabled={isDisabled}\r\n className={styles.button({ isSecondary, isLoading, design })}\r\n type={type}\r\n id={id}\r\n name={props.name}\r\n value={props.value}\r\n >\r\n <div className='relative flex justify-center items-center'>\r\n <div className={styles.content({ isLoading })}>{children}</div>\r\n\r\n <div className={styles.loader({ isLoading })}>\r\n <LoadingIndicator />\r\n </div>\r\n </div>\r\n </AriaButton>\r\n );\r\n\r\n return tooltipMessage ? <Tooltip message={tooltipMessage}>{buttonComponent}</Tooltip> : buttonComponent;\r\n\r\n async function handleClick() {\r\n if (onClick === undefined || isLoading) {\r\n return;\r\n }\r\n\r\n await onClick();\r\n }\r\n}\r\n"],"names":["LoadingIndicator","jsx","buttonStyles","styles","tv","clsx","Button","props","design","useContext","DesignContext","onClick","type","isSecondary","isDisabled","isLoading","id","children","tooltipMessage","buttonComponent","AriaButton","handleClick","jsxs","Tooltip"],"mappings":"qNAAO,SAASA,GAAmB,CAE3B,OAAAC,EAAA,IAAC,MAAI,CAAA,UAAU,2HAA4H,CAAA,CAEnJ,CCuCA,MAAMC,EAAe,CACjB,OAAQ,iBACR,WAAY,8BACZ,OAAQ,gCACR,KAAM,wDACN,OAAQ,iEACR,SAAU,oFACV,MAAO,0BACX,EAEMC,EAAS,CACX,OAAQC,EAAG,CACP,KAAMC,EACFH,EAAa,OACbA,EAAa,WACbA,EAAa,OACbA,EAAa,KACbA,EAAa,OACbA,EAAa,SACbA,EAAa,KACjB,EACA,SAAU,CACN,UAAW,CACP,KAAM,iBACN,MAAO,gBACX,EACA,YAAa,CACT,KAAM,2DACN,MAAO,EACX,EACA,OAAQ,CACJ,SAAU,UACV,QAAS,6CACT,uBAAwB,UACxB,sBAAuB,SAAA,CAC3B,CACJ,CACH,EACD,QAASE,EAAG,CACR,KAAM,8BACN,SAAU,CACN,UAAW,CACP,KAAM,YACN,MAAO,aAAA,CACX,CACJ,CACH,EACD,OAAQA,EAAG,CACP,KAAM,uCACN,SAAU,CACN,UAAW,CACP,KAAM,cACN,MAAO,WAAA,CACX,CAEP,CAAA,CACL,EAEO,SAASE,EAAOC,EAAoB,CACjC,MAAAC,EAASC,aAAWC,CAAa,EAEjC,CAAE,QAAAC,EAAS,KAAAC,EAAO,SAAU,YAAAC,EAAa,WAAAC,EAAY,UAAAC,EAAW,GAAAC,EAAI,SAAAC,EAAU,eAAAC,CAAmB,EAAAX,EAEjGY,EACFlB,EAAA,IAACmB,EAAA,CACG,QAASC,EACT,WAAAP,EACA,UAAWX,EAAO,OAAO,CAAE,YAAAU,EAAa,UAAAE,EAAW,OAAAP,EAAQ,EAC3D,KAAAI,EACA,GAAAI,EACA,KAAMT,EAAM,KACZ,MAAOA,EAAM,MAEb,SAAAe,EAAA,KAAC,MAAI,CAAA,UAAU,4CACX,SAAA,CAACrB,MAAA,MAAA,CAAI,UAAWE,EAAO,QAAQ,CAAE,UAAAY,CAAU,CAAC,EAAI,SAAAE,EAAS,EAEzDhB,EAAAA,IAAC,MAAI,CAAA,UAAWE,EAAO,OAAO,CAAE,UAAAY,CAAW,CAAA,EACvC,SAACd,EAAAA,IAAAD,EAAA,CAAiB,CAAA,CACtB,CAAA,CAAA,CACJ,CAAA,CAAA,CACJ,EAGJ,OAAOkB,EAAkBjB,MAAAsB,EAAA,CAAQ,QAASL,EAAiB,UAAgB,CAAA,EAAaC,EAExF,eAAeE,GAAc,CACrBV,IAAY,QAAaI,GAI7B,MAAMJ,EAAQ,CAAA,CAEtB"}