freemium-ui 2.0.73 → 2.0.75

package/storybook-static/{stories-Confirmation-stories.7fddd71d.iframe.bundle.js → stories-Confirmation-stories.03968f5d.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[93364],{"./src/stories/Confirmation.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Confirmation_stories});var react=__webpack_require__("./node_modules/react/index.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),Button=__webpack_require__("./src/components/Button/index.ts"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),esm_extends=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/extends.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-context/dist/index.mjs"),react_compose_refs_dist=__webpack_require__("./node_modules/@radix-ui/react-compose-refs/dist/index.mjs"),react_dialog_dist=__webpack_require__("./node_modules/@radix-ui/react-dialog/dist/index.mjs"),primitive_dist=__webpack_require__("./node_modules/@radix-ui/primitive/dist/index.mjs"),react_slot_dist=__webpack_require__("./node_modules/@radix-ui/react-slot/dist/index.mjs");const[$905f4ae918aab1aa$var$createAlertDialogContext,$905f4ae918aab1aa$export$b8891880751c2c5b]=(0,dist.A)("AlertDialog",[react_dialog_dist.Hs]),$905f4ae918aab1aa$var$useDialogScope=(0,react_dialog_dist.Hs)(),$905f4ae918aab1aa$export$de466dd8317b0b75=props=>{const{__scopeAlertDialog,...alertDialogProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.bL,(0,esm_extends.A)({},dialogScope,alertDialogProps,{modal:!0}))},$905f4ae918aab1aa$export$660f2bfdb986706c=props=>{const{__scopeAlertDialog,...portalProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.ZL,(0,esm_extends.A)({},dialogScope,portalProps))},$905f4ae918aab1aa$export$a707a4895ce23256=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...overlayProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.hJ,(0,esm_extends.A)({},dialogScope,overlayProps,{ref:forwardedRef}))})),[$905f4ae918aab1aa$var$AlertDialogContentProvider,$905f4ae918aab1aa$var$useAlertDialogContentContext]=$905f4ae918aab1aa$var$createAlertDialogContext("AlertDialogContent"),$905f4ae918aab1aa$export$94e6af45f0af4efd=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,children,...contentProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog),contentRef=(0,react.useRef)(null),composedRefs=(0,react_compose_refs_dist.s)(forwardedRef,contentRef),cancelRef=(0,react.useRef)(null);return(0,react.createElement)(react_dialog_dist.G$,{contentName:"AlertDialogContent",titleName:$905f4ae918aab1aa$var$TITLE_NAME,docsSlug:"alert-dialog"},(0,react.createElement)($905f4ae918aab1aa$var$AlertDialogContentProvider,{scope:__scopeAlertDialog,cancelRef},(0,react.createElement)(react_dialog_dist.UC,(0,esm_extends.A)({role:"alertdialog"},dialogScope,contentProps,{ref:composedRefs,onOpenAutoFocus:(0,primitive_dist.m)(contentProps.onOpenAutoFocus,(event=>{var _cancelRef$current;event.preventDefault(),null===(_cancelRef$current=cancelRef.current)||void 0===_cancelRef$current||_cancelRef$current.focus({preventScroll:!0})})),onPointerDownOutside:event=>event.preventDefault(),onInteractOutside:event=>event.preventDefault()}),(0,react.createElement)(react_slot_dist.xV,null,children),!1)))})),$905f4ae918aab1aa$var$TITLE_NAME="AlertDialogTitle",$905f4ae918aab1aa$export$225e0da62d314b7=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...titleProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.hE,(0,esm_extends.A)({},dialogScope,titleProps,{ref:forwardedRef}))})),$905f4ae918aab1aa$export$a23b55cde55ad9a5=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...descriptionProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.VY,(0,esm_extends.A)({},dialogScope,descriptionProps,{ref:forwardedRef}))})),$905f4ae918aab1aa$export$b454f818c58ee85d=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...actionProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.bm,(0,esm_extends.A)({},dialogScope,actionProps,{ref:forwardedRef}))})),$905f4ae918aab1aa$export$2f67a923571aaea0=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...cancelProps}=props,{cancelRef}=$905f4ae918aab1aa$var$useAlertDialogContentContext("AlertDialogCancel",__scopeAlertDialog),dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog),ref=(0,react_compose_refs_dist.s)(forwardedRef,cancelRef);return(0,react.createElement)(react_dialog_dist.bm,(0,esm_extends.A)({},dialogScope,cancelProps,{ref}))})),$905f4ae918aab1aa$export$be92b6f5f03c0fe9=$905f4ae918aab1aa$export$de466dd8317b0b75,$905f4ae918aab1aa$export$602eac185826482c=$905f4ae918aab1aa$export$660f2bfdb986706c,$905f4ae918aab1aa$export$c6fdb837b070b4ff=$905f4ae918aab1aa$export$a707a4895ce23256,$905f4ae918aab1aa$export$7c6e2c02157bb7d2=$905f4ae918aab1aa$export$94e6af45f0af4efd,$905f4ae918aab1aa$export$e19cd5f9376f8cee=$905f4ae918aab1aa$export$b454f818c58ee85d,$905f4ae918aab1aa$export$848c9b7ead0df967=$905f4ae918aab1aa$export$2f67a923571aaea0,$905f4ae918aab1aa$export$f99233281efd08a0=$905f4ae918aab1aa$export$225e0da62d314b7,$905f4ae918aab1aa$export$393edc798c47379d=$905f4ae918aab1aa$export$a23b55cde55ad9a5;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,styles=__webpack_require__("./src/styles/index.ts"),keyframes=__webpack_require__("./src/styles/keyframes.ts");const AlertDialogRoot=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$be92b6f5f03c0fe9)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)([""]))),AlertDialogPortal=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$602eac185826482c)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)([""]))),AlertDialogCancel=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$848c9b7ead0df967)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)([""]))),AlertDialogAction=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$e19cd5f9376f8cee)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)([""]))),AlertDialogOverlay=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$c6fdb837b070b4ff)(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  ","\n"])),styles.io),AlertDialogContent=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$7c6e2c02157bb7d2)(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)(["\n  ","\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n  min-width: 500px;\n  max-width: 540px;\n  max-height: 85vh;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  animation-duration: ",";\n  animation-timing-function: ",";\n  color: ",";\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),styles.td,(_ref=>{let{theme}=_ref;return theme.transitions.duration.standard}),(_ref2=>{let{theme}=_ref2;return theme.transitions.easing.easeIn}),(_ref3=>{let{theme}=_ref3;return theme.colors.text.primary}),keyframes.ZR,keyframes.gG),AlertDialogTitle=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$f99233281efd08a0)(_templateObject7||(_templateObject7=(0,taggedTemplateLiteral.A)(["\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  direction: ",";\n  margin: 0;\n  letter-spacing: unset;\n  padding: 32px 32px\n    "," 32px;\n"])),(_ref4=>{let{theme}=_ref4;return theme.colors.text.primary}),(_ref5=>{let{theme}=_ref5;return theme.typography.fontFamily}),(_ref6=>{let{theme}=_ref6;return theme.typography.heading4.fontSize}),(_ref7=>{let{theme}=_ref7;return theme.typography.heading4.lineHeight}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontWeight["semi-bold"]}),(_ref9=>{let{theme}=_ref9;return theme.direction}),(_ref10=>{let{$hasdescription}=_ref10;return $hasdescription?"0px":"16px"})),AlertDialogDescription=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$393edc798c47379d)(_templateObject8||(_templateObject8=(0,taggedTemplateLiteral.A)(["\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n  direction: ",";\n  letter-spacing: 0px;\n  padding: 0 32px 0px 32px;\n  letter-spacing: unset;\n  margin: 10px 0px 24px !important;\n"])),(_ref11=>{let{theme}=_ref11;return theme.colors.text.primary}),(_ref12=>{let{theme}=_ref12;return theme.typography.fontFamily}),(_ref13=>{let{theme}=_ref13;return theme.typography.primary.fontSize}),(_ref14=>{let{theme}=_ref14;return theme.typography.fontWeight.regular}),(_ref15=>{let{theme}=_ref15;return theme.typography.primary.lineHeight}),(_ref16=>{let{theme}=_ref16;return theme.direction})),StyledActions=styled_components_browser_esm.Ay.div(_templateObject9||(_templateObject9=(0,taggedTemplateLiteral.A)(["\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-top: 1px solid ",";\n  background-color: ",";\n  display: flex;\n  padding: 16px;\n  gap: 12px;\n  justify-content: flex-end;\n\n  ","\n"])),(_ref17=>{let{theme}=_ref17;return theme.colors.border.light}),(_ref18=>{let{theme}=_ref18;return theme.colors.fill.base}),(_ref19=>{let{theme}=_ref19;return"dark"===theme.mode&&(0,styled_components_browser_esm.AH)(_templateObject10||(_templateObject10=(0,taggedTemplateLiteral.A)(["\n      border-top: 1px solid ",";\n    "])),theme.colors.fill.base)}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Confirmation=_ref=>{let{isOpen,title,description,onConfirm,onDismiss,cancelButtonText,children,cancelButtonDisabled,confirmButtonDisabled,confirmButtonText,clickOutToClose=!1,bodyStyles,contentStyles,footerStyles,width="520px"}=_ref;const theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsx)(AlertDialogRoot,{open:isOpen,onOpenChange:o=>{o||null==onDismiss||onDismiss("root")},children:(0,jsx_runtime.jsxs)(AlertDialogPortal,{children:[(0,jsx_runtime.jsx)(AlertDialogOverlay,{forceMount:!0,style:bodyStyles,className:"AlertDialogOverlay",onClick:event=>{clickOutToClose&&(null==onDismiss||onDismiss("overlay",event))}}),(0,jsx_runtime.jsxs)(AlertDialogContent,{forceMount:!0,className:"AlertDialogContent",style:{...contentStyles,width},dir:theme.direction,children:[title&&(0,jsx_runtime.jsx)(AlertDialogTitle,{$hasdescription:!!description,className:"AlertDialogTitle",children:title}),description&&(0,jsx_runtime.jsx)(AlertDialogDescription,{$hasChildren:!!children,className:"AlertDialogDescription",children:description}),children?(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children}):null,(0,jsx_runtime.jsxs)(StyledActions,{style:footerStyles,children:[cancelButtonText&&(0,jsx_runtime.jsx)(AlertDialogCancel,{asChild:!0,children:(0,jsx_runtime.jsx)(Button.$,{variant:"secondary",autoFocus:!0,"aria-disabled":cancelButtonDisabled,disabled:cancelButtonDisabled,onClick:event=>{event.preventDefault(),null==onDismiss||onDismiss("button",event)},"aria-label":cancelButtonText,children:cancelButtonText})}),confirmButtonText&&(0,jsx_runtime.jsx)(AlertDialogAction,{asChild:!0,children:(0,jsx_runtime.jsx)(Button.$,{variant:"primary","aria-disabled":confirmButtonDisabled,disabled:confirmButtonDisabled,onClick:event=>{event.preventDefault(),null==onConfirm||onConfirm(event)},"aria-label":confirmButtonText,children:confirmButtonText})})]})]})]})})},Confirmation_Confirmation=Confirmation;try{Confirmation.displayName="Confirmation",Confirmation.__docgenInfo={description:"Confirmation component is used to show a confirmation dialog to the user. It is used to confirm an action before it is executed.",displayName:"Confirmation",props:{isOpen:{defaultValue:null,description:"Is the confirmation open",name:"isOpen",required:!1,type:{name:"boolean"}},children:{defaultValue:null,description:"The children or label",name:"children",required:!1,type:{name:"ReactNode"}},confirmButtonDisabled:{defaultValue:null,description:"Is the confirm button disabled",name:"confirmButtonDisabled",required:!1,type:{name:"boolean"}},cancelButtonDisabled:{defaultValue:null,description:"Is the cancel button disabled",name:"cancelButtonDisabled",required:!1,type:{name:"boolean"}},clickOutToClose:{defaultValue:{value:"false"},description:"Should the confirmation close when clicking outside",name:"clickOutToClose",required:!1,type:{name:"boolean"}},title:{defaultValue:null,description:"Title of the confirmation",name:"title",required:!1,type:{name:"string"}},description:{defaultValue:null,description:"Description of the confirmation",name:"description",required:!1,type:{name:"ReactNode"}},width:{defaultValue:{value:"520px"},description:"Width of the confirmation",name:"width",required:!1,type:{name:"string"}},onDismiss:{defaultValue:null,description:"Function to be called when the confirmation is dismissed",name:"onDismiss",required:!1,type:{name:'((type: "button" | "overlay" | "root", event?: MouseEvent<HTMLElement, MouseEvent>) => void)'}},onConfirm:{defaultValue:null,description:"Function to be called when the confirmation is confirmed",name:"onConfirm",required:!1,type:{name:"MouseEventHandler<HTMLButtonElement>"}},confirmButtonText:{defaultValue:null,description:"Confirm button text",name:"confirmButtonText",required:!1,type:{name:"string"}},cancelButtonText:{defaultValue:null,description:"Cancel button text",name:"cancelButtonText",required:!1,type:{name:"string"}},bodyStyles:{defaultValue:null,description:"Styles for the overlay",name:"bodyStyles",required:!1,type:{name:"CSSProperties"}},contentStyles:{defaultValue:null,description:"Styles for the content",name:"contentStyles",required:!1,type:{name:"CSSProperties"}},footerStyles:{defaultValue:null,description:"Styles for the footer",name:"footerStyles",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Confirmation/Confirmation.tsx#Confirmation"]={docgenInfo:Confirmation.__docgenInfo,name:"Confirmation",path:"src/components/Confirmation/Confirmation.tsx#Confirmation"})}catch(__react_docgen_typescript_loader_error){}const Confirmation_stories={title:"Components/Confirmation",component:Confirmation_Confirmation,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:function Render(props){const[{isOpen},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Button.$,{onClick:()=>{updateArgs({isOpen:!0})},variant:"primary",children:"Open confirmation"}),(0,jsx_runtime.jsx)(Confirmation_Confirmation,{...props,isOpen,onConfirm:()=>{updateArgs({isOpen:!0})},onDismiss:()=>{updateArgs({isOpen:!1})}})]})},args:{isOpen:!1,clickOutToClose:!1,title:"Are you absolutely sure?",description:"This action cannot be undone. This will permanently delete your account and remove your data from our servers.",confirmButtonText:"Proceed",cancelButtonText:"Cancel"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      isOpen\n    }, updateArgs] = useArgs();\n    return <>\n        <Button onClick={() => {\n        updateArgs({\n          isOpen: true\n        });\n      }} variant=\"primary\">\n          Open confirmation\n        </Button>\n        <Confirmation {...props} isOpen={isOpen} onConfirm={() => {\n        updateArgs({\n          isOpen: true\n        });\n      }} onDismiss={() => {\n        updateArgs({\n          isOpen: false\n        });\n      }} />\n      </>;\n  },\n  args: {\n    isOpen: false,\n    clickOutToClose: false,\n    title: 'Are you absolutely sure?',\n    description: 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',\n    confirmButtonText: 'Proceed',\n    cancelButtonText: 'Cancel'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Button_Button});var react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const ButtonSizeMap={large:{height:"45px",size:"16px"},mini:{height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}};var _templateObject;const StyledButton=styled_components_browser_esm.Ay.button(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  font-weight: ",";\n  font-family: ",";\n  border-radius: 4px;\n  display: ",";\n  border: 1px solid\n    ",";\n  background: linear-gradient(\n    180deg,\n    ","\n      2.56%,\n    ","\n      95.75%\n  );\n  color: ",";\n  height: ",";\n  line-height: 1.3;\n  font-size: ",";\n  cursor: ",";\n  white-space: nowrap;\n  padding: 0 12px;\n  &:hover {\n    background: ",";\n  }\n  &:active {\n    background: ",";\n    border-color: ",";\n  }\n  &:disabled {\n    color: ",";\n    border-color: ",";\n    background: linear-gradient(\n      180deg,\n      ","\n        4.39%,\n      ","\n        94.46%\n    );\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontWeight["semi-bold"]}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{$inline}=_ref4;return $inline?"inline-block":"block"}),(_ref5=>{let{theme,variant}=_ref5;return theme.components.button[variant].borderColor}),(_ref6=>{let{theme,variant}=_ref6;return theme.components.button[variant].backgroundFrom}),(_ref7=>{let{theme,variant}=_ref7;return theme.components.button[variant].backgroundTo}),(_ref8=>{let{theme,variant}=_ref8;return theme.components.button[variant].color}),(_ref9=>{let{size}=_ref9;return ButtonSizeMap[size].height}),(_ref10=>{let{size}=_ref10;return ButtonSizeMap[size].size}),(_ref11=>{let{disabled}=_ref11;return disabled?"not-allowed":"pointer"}),(_ref12=>{let{theme,variant}=_ref12;return theme.components.button[variant].hoverColor}),(_ref13=>{let{theme,variant}=_ref13;return theme.components.button[variant].activeBackgroundColor}),(_ref14=>{let{theme,variant}=_ref14;return theme.components.button[variant].activeBorderColor}),(_ref15=>{let{theme,variant}=_ref15;return theme.components.button[variant].disabledColor}),(_ref16=>{let{theme,variant}=_ref16;return theme.components.button[variant].disabledBorderColor}),(_ref17=>{let{theme,variant}=_ref17;return theme.components.button[variant].disabledBackgroundFrom}),(_ref18=>{let{theme,variant}=_ref18;return theme.components.button[variant].disabledBackgroundTo}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=react.forwardRef(((_ref,forwardedRef)=>{let{size="normal",variant="primary",children="",loading=!1,inline=!0,...props}=_ref;return react.useEffect((()=>{"string"==typeof children||props["aria-label"]||console.warn("The `aria-label` prop is required when the children of the Button are not a string. This is to ensure that assistive technologies can announce the content of the button. Please provide a valid `aria-describedby` prop to the Button component.")}),[]),(0,jsx_runtime.jsx)(StyledButton,{size,variant,$inline:inline,disabled:props.disabled||loading,"aria-disabled":props.disabled||loading,"aria-label":"string"==typeof children?children:void 0,role:"button",...props,ref:forwardedRef,children:loading?(0,jsx_runtime.jsx)(Loader,{}):children})})),Loader=()=>(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:"..."}),Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"Button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.",displayName:"Button",props:{size:{defaultValue:{value:"normal"},description:"The size of the button",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"mini"'},{value:'"normal"'}]}},variant:{defaultValue:{value:"primary"},description:"The variant of the button",name:"variant",required:!1,type:{name:"enum",value:[{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"danger"'}]}},children:{defaultValue:{value:""},description:"The children to be displayed in the button",name:"children",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:{value:"false"},description:"Whether the button is loading",name:"loading",required:!1,type:{name:"boolean"}},inline:{defaultValue:{value:"true"},description:"Whether the button is inline",name:"inline",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>_Button__WEBPACK_IMPORTED_MODULE_0__.A});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Button/Button.tsx")}}]);
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[93364],{"./src/stories/Confirmation.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Confirmation_stories});var react=__webpack_require__("./node_modules/react/index.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),Button=__webpack_require__("./src/components/Button/index.ts"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),esm_extends=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/extends.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-context/dist/index.mjs"),react_compose_refs_dist=__webpack_require__("./node_modules/@radix-ui/react-compose-refs/dist/index.mjs"),react_dialog_dist=__webpack_require__("./node_modules/@radix-ui/react-dialog/dist/index.mjs"),primitive_dist=__webpack_require__("./node_modules/@radix-ui/primitive/dist/index.mjs"),react_slot_dist=__webpack_require__("./node_modules/@radix-ui/react-slot/dist/index.mjs");const[$905f4ae918aab1aa$var$createAlertDialogContext,$905f4ae918aab1aa$export$b8891880751c2c5b]=(0,dist.A)("AlertDialog",[react_dialog_dist.Hs]),$905f4ae918aab1aa$var$useDialogScope=(0,react_dialog_dist.Hs)(),$905f4ae918aab1aa$export$de466dd8317b0b75=props=>{const{__scopeAlertDialog,...alertDialogProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.bL,(0,esm_extends.A)({},dialogScope,alertDialogProps,{modal:!0}))},$905f4ae918aab1aa$export$660f2bfdb986706c=props=>{const{__scopeAlertDialog,...portalProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.ZL,(0,esm_extends.A)({},dialogScope,portalProps))},$905f4ae918aab1aa$export$a707a4895ce23256=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...overlayProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.hJ,(0,esm_extends.A)({},dialogScope,overlayProps,{ref:forwardedRef}))})),[$905f4ae918aab1aa$var$AlertDialogContentProvider,$905f4ae918aab1aa$var$useAlertDialogContentContext]=$905f4ae918aab1aa$var$createAlertDialogContext("AlertDialogContent"),$905f4ae918aab1aa$export$94e6af45f0af4efd=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,children,...contentProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog),contentRef=(0,react.useRef)(null),composedRefs=(0,react_compose_refs_dist.s)(forwardedRef,contentRef),cancelRef=(0,react.useRef)(null);return(0,react.createElement)(react_dialog_dist.G$,{contentName:"AlertDialogContent",titleName:$905f4ae918aab1aa$var$TITLE_NAME,docsSlug:"alert-dialog"},(0,react.createElement)($905f4ae918aab1aa$var$AlertDialogContentProvider,{scope:__scopeAlertDialog,cancelRef},(0,react.createElement)(react_dialog_dist.UC,(0,esm_extends.A)({role:"alertdialog"},dialogScope,contentProps,{ref:composedRefs,onOpenAutoFocus:(0,primitive_dist.m)(contentProps.onOpenAutoFocus,(event=>{var _cancelRef$current;event.preventDefault(),null===(_cancelRef$current=cancelRef.current)||void 0===_cancelRef$current||_cancelRef$current.focus({preventScroll:!0})})),onPointerDownOutside:event=>event.preventDefault(),onInteractOutside:event=>event.preventDefault()}),(0,react.createElement)(react_slot_dist.xV,null,children),!1)))})),$905f4ae918aab1aa$var$TITLE_NAME="AlertDialogTitle",$905f4ae918aab1aa$export$225e0da62d314b7=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...titleProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.hE,(0,esm_extends.A)({},dialogScope,titleProps,{ref:forwardedRef}))})),$905f4ae918aab1aa$export$a23b55cde55ad9a5=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...descriptionProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.VY,(0,esm_extends.A)({},dialogScope,descriptionProps,{ref:forwardedRef}))})),$905f4ae918aab1aa$export$b454f818c58ee85d=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...actionProps}=props,dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);return(0,react.createElement)(react_dialog_dist.bm,(0,esm_extends.A)({},dialogScope,actionProps,{ref:forwardedRef}))})),$905f4ae918aab1aa$export$2f67a923571aaea0=(0,react.forwardRef)(((props,forwardedRef)=>{const{__scopeAlertDialog,...cancelProps}=props,{cancelRef}=$905f4ae918aab1aa$var$useAlertDialogContentContext("AlertDialogCancel",__scopeAlertDialog),dialogScope=$905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog),ref=(0,react_compose_refs_dist.s)(forwardedRef,cancelRef);return(0,react.createElement)(react_dialog_dist.bm,(0,esm_extends.A)({},dialogScope,cancelProps,{ref}))})),$905f4ae918aab1aa$export$be92b6f5f03c0fe9=$905f4ae918aab1aa$export$de466dd8317b0b75,$905f4ae918aab1aa$export$602eac185826482c=$905f4ae918aab1aa$export$660f2bfdb986706c,$905f4ae918aab1aa$export$c6fdb837b070b4ff=$905f4ae918aab1aa$export$a707a4895ce23256,$905f4ae918aab1aa$export$7c6e2c02157bb7d2=$905f4ae918aab1aa$export$94e6af45f0af4efd,$905f4ae918aab1aa$export$e19cd5f9376f8cee=$905f4ae918aab1aa$export$b454f818c58ee85d,$905f4ae918aab1aa$export$848c9b7ead0df967=$905f4ae918aab1aa$export$2f67a923571aaea0,$905f4ae918aab1aa$export$f99233281efd08a0=$905f4ae918aab1aa$export$225e0da62d314b7,$905f4ae918aab1aa$export$393edc798c47379d=$905f4ae918aab1aa$export$a23b55cde55ad9a5;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,styles=__webpack_require__("./src/styles/index.ts"),keyframes=__webpack_require__("./src/styles/keyframes.ts");const AlertDialogRoot=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$be92b6f5f03c0fe9)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)([""]))),AlertDialogPortal=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$602eac185826482c)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)([""]))),AlertDialogCancel=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$848c9b7ead0df967)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)([""]))),AlertDialogAction=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$e19cd5f9376f8cee)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)([""]))),AlertDialogOverlay=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$c6fdb837b070b4ff)(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  ","\n"])),styles.io),AlertDialogContent=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$7c6e2c02157bb7d2)(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)(["\n  ","\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n  min-width: 500px;\n  max-width: 540px;\n  max-height: 85vh;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  animation-duration: ",";\n  animation-timing-function: ",";\n  color: ",";\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),styles.td,(_ref=>{let{theme}=_ref;return theme.transitions.duration.standard}),(_ref2=>{let{theme}=_ref2;return theme.transitions.easing.easeIn}),(_ref3=>{let{theme}=_ref3;return theme.colors.text.primary}),keyframes.ZR,keyframes.gG),AlertDialogTitle=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$f99233281efd08a0)(_templateObject7||(_templateObject7=(0,taggedTemplateLiteral.A)(["\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  font-weight: ",";\n  direction: ",";\n  margin: 0;\n  letter-spacing: unset;\n  padding: 32px 32px\n    "," 32px;\n"])),(_ref4=>{let{theme}=_ref4;return theme.colors.text.primary}),(_ref5=>{let{theme}=_ref5;return theme.typography.fontFamily}),(_ref6=>{let{theme}=_ref6;return theme.typography.heading4.fontSize}),(_ref7=>{let{theme}=_ref7;return theme.typography.heading4.lineHeight}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontWeight["semi-bold"]}),(_ref9=>{let{theme}=_ref9;return theme.direction}),(_ref10=>{let{$hasdescription}=_ref10;return $hasdescription?"0px":"16px"})),AlertDialogDescription=(0,styled_components_browser_esm.Ay)($905f4ae918aab1aa$export$393edc798c47379d)(_templateObject8||(_templateObject8=(0,taggedTemplateLiteral.A)(["\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n  direction: ",";\n  letter-spacing: 0px;\n  padding: 0 32px 0px 32px;\n  letter-spacing: unset;\n  margin: 10px 0px 24px !important;\n"])),(_ref11=>{let{theme}=_ref11;return theme.colors.text.primary}),(_ref12=>{let{theme}=_ref12;return theme.typography.fontFamily}),(_ref13=>{let{theme}=_ref13;return theme.typography.primary.fontSize}),(_ref14=>{let{theme}=_ref14;return theme.typography.fontWeight.regular}),(_ref15=>{let{theme}=_ref15;return theme.typography.primary.lineHeight}),(_ref16=>{let{theme}=_ref16;return theme.direction})),StyledActions=styled_components_browser_esm.Ay.div(_templateObject9||(_templateObject9=(0,taggedTemplateLiteral.A)(["\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-top: 1px solid ",";\n  background-color: ",";\n  display: flex;\n  padding: 16px;\n  gap: 12px;\n  justify-content: flex-end;\n\n  ","\n"])),(_ref17=>{let{theme}=_ref17;return theme.colors.border.light}),(_ref18=>{let{theme}=_ref18;return theme.colors.fill.base}),(_ref19=>{let{theme}=_ref19;return"dark"===theme.mode&&(0,styled_components_browser_esm.AH)(_templateObject10||(_templateObject10=(0,taggedTemplateLiteral.A)(["\n      border-top: 1px solid ",";\n    "])),theme.colors.fill.base)}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Confirmation=_ref=>{let{isOpen,title,description,onConfirm,onDismiss,cancelButtonText,children,cancelButtonDisabled,confirmButtonDisabled,confirmButtonText,clickOutToClose=!1,bodyStyles,contentStyles,footerStyles,width="520px"}=_ref;const theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsx)(AlertDialogRoot,{open:isOpen,onOpenChange:o=>{o||null==onDismiss||onDismiss("root")},children:(0,jsx_runtime.jsxs)(AlertDialogPortal,{children:[(0,jsx_runtime.jsx)(AlertDialogOverlay,{forceMount:!0,style:bodyStyles,className:"AlertDialogOverlay",onClick:event=>{clickOutToClose&&(null==onDismiss||onDismiss("overlay",event))}}),(0,jsx_runtime.jsxs)(AlertDialogContent,{forceMount:!0,className:"AlertDialogContent",style:{...contentStyles,width},dir:theme.direction,children:[title&&(0,jsx_runtime.jsx)(AlertDialogTitle,{$hasdescription:!!description,className:"AlertDialogTitle",children:title}),description&&(0,jsx_runtime.jsx)(AlertDialogDescription,{$hasChildren:!!children,className:"AlertDialogDescription",children:description}),children?(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children}):null,(0,jsx_runtime.jsxs)(StyledActions,{style:footerStyles,children:[cancelButtonText&&(0,jsx_runtime.jsx)(AlertDialogCancel,{asChild:!0,children:(0,jsx_runtime.jsx)(Button.$,{variant:"secondary",autoFocus:!0,"aria-disabled":cancelButtonDisabled,disabled:cancelButtonDisabled,onClick:event=>{event.preventDefault(),null==onDismiss||onDismiss("button",event)},"aria-label":cancelButtonText,children:cancelButtonText})}),confirmButtonText&&(0,jsx_runtime.jsx)(AlertDialogAction,{asChild:!0,children:(0,jsx_runtime.jsx)(Button.$,{variant:"primary","aria-disabled":confirmButtonDisabled,disabled:confirmButtonDisabled,onClick:event=>{event.preventDefault(),null==onConfirm||onConfirm(event)},"aria-label":confirmButtonText,children:confirmButtonText})})]})]})]})})},Confirmation_Confirmation=Confirmation;try{Confirmation.displayName="Confirmation",Confirmation.__docgenInfo={description:"Confirmation component is used to show a confirmation dialog to the user. It is used to confirm an action before it is executed.",displayName:"Confirmation",props:{isOpen:{defaultValue:null,description:"Is the confirmation open",name:"isOpen",required:!1,type:{name:"boolean"}},children:{defaultValue:null,description:"The children or label",name:"children",required:!1,type:{name:"ReactNode"}},confirmButtonDisabled:{defaultValue:null,description:"Is the confirm button disabled",name:"confirmButtonDisabled",required:!1,type:{name:"boolean"}},cancelButtonDisabled:{defaultValue:null,description:"Is the cancel button disabled",name:"cancelButtonDisabled",required:!1,type:{name:"boolean"}},clickOutToClose:{defaultValue:{value:"false"},description:"Should the confirmation close when clicking outside",name:"clickOutToClose",required:!1,type:{name:"boolean"}},title:{defaultValue:null,description:"Title of the confirmation",name:"title",required:!1,type:{name:"string"}},description:{defaultValue:null,description:"Description of the confirmation",name:"description",required:!1,type:{name:"ReactNode"}},width:{defaultValue:{value:"520px"},description:"Width of the confirmation",name:"width",required:!1,type:{name:"string"}},onDismiss:{defaultValue:null,description:"Function to be called when the confirmation is dismissed",name:"onDismiss",required:!1,type:{name:'((type: "button" | "overlay" | "root", event?: MouseEvent<HTMLElement, MouseEvent>) => void)'}},onConfirm:{defaultValue:null,description:"Function to be called when the confirmation is confirmed",name:"onConfirm",required:!1,type:{name:"MouseEventHandler<HTMLButtonElement>"}},confirmButtonText:{defaultValue:null,description:"Confirm button text",name:"confirmButtonText",required:!1,type:{name:"string"}},cancelButtonText:{defaultValue:null,description:"Cancel button text",name:"cancelButtonText",required:!1,type:{name:"string"}},bodyStyles:{defaultValue:null,description:"Styles for the overlay",name:"bodyStyles",required:!1,type:{name:"CSSProperties"}},contentStyles:{defaultValue:null,description:"Styles for the content",name:"contentStyles",required:!1,type:{name:"CSSProperties"}},footerStyles:{defaultValue:null,description:"Styles for the footer",name:"footerStyles",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Confirmation/Confirmation.tsx#Confirmation"]={docgenInfo:Confirmation.__docgenInfo,name:"Confirmation",path:"src/components/Confirmation/Confirmation.tsx#Confirmation"})}catch(__react_docgen_typescript_loader_error){}const Confirmation_stories={title:"Components/Confirmation",component:Confirmation_Confirmation,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:function Render(props){const[{isOpen},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Button.$,{onClick:()=>{updateArgs({isOpen:!0})},variant:"primary",children:"Open confirmation"}),(0,jsx_runtime.jsx)(Confirmation_Confirmation,{...props,isOpen,onConfirm:()=>{updateArgs({isOpen:!0})},onDismiss:()=>{updateArgs({isOpen:!1})}})]})},args:{isOpen:!1,clickOutToClose:!1,title:"Are you absolutely sure?",description:"This action cannot be undone. This will permanently delete your account and remove your data from our servers.",confirmButtonText:"Proceed",cancelButtonText:"Cancel"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      isOpen\n    }, updateArgs] = useArgs();\n    return <>\n        <Button onClick={() => {\n        updateArgs({\n          isOpen: true\n        });\n      }} variant=\"primary\">\n          Open confirmation\n        </Button>\n        <Confirmation {...props} isOpen={isOpen} onConfirm={() => {\n        updateArgs({\n          isOpen: true\n        });\n      }} onDismiss={() => {\n        updateArgs({\n          isOpen: false\n        });\n      }} />\n      </>;\n  },\n  args: {\n    isOpen: false,\n    clickOutToClose: false,\n    title: 'Are you absolutely sure?',\n    description: 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',\n    confirmButtonText: 'Proceed',\n    cancelButtonText: 'Cancel'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Button_Button});var react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const ButtonSizeMap={large:{height:"45px",size:"16px"},mini:{height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}};var _templateObject;const StyledButton=styled_components_browser_esm.Ay.button(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  font-weight: ",";\n  font-family: ",";\n  border-radius: 4px;\n  display: ",";\n  border: 1px solid\n    ",";\n  background: linear-gradient(\n    180deg,\n    ","\n      2.56%,\n    ","\n      95.75%\n  );\n  color: ",";\n  height: ",";\n  line-height: 1.3;\n  font-size: ",";\n  cursor: ",";\n  white-space: nowrap;\n  padding: 0 12px;\n  &:hover {\n    background: ",";\n  }\n  &:active {\n    background: ",";\n    border-color: ",";\n  }\n  &:disabled {\n    color: ",";\n    border-color: ",";\n    background: linear-gradient(\n      180deg,\n      ","\n        4.39%,\n      ","\n        94.46%\n    );\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontWeight["semi-bold"]}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{$inline}=_ref4;return $inline?"inline-block":"block"}),(_ref5=>{let{theme,$variant}=_ref5;return theme.components.button[$variant].borderColor}),(_ref6=>{let{theme,$variant}=_ref6;return theme.components.button[$variant].backgroundFrom}),(_ref7=>{let{theme,$variant}=_ref7;return theme.components.button[$variant].backgroundTo}),(_ref8=>{let{theme,$variant}=_ref8;return theme.components.button[$variant].color}),(_ref9=>{let{$size}=_ref9;return ButtonSizeMap[$size].height}),(_ref10=>{let{$size}=_ref10;return ButtonSizeMap[$size].size}),(_ref11=>{let{disabled}=_ref11;return disabled?"not-allowed":"pointer"}),(_ref12=>{let{theme,$variant}=_ref12;return theme.components.button[$variant].hoverColor}),(_ref13=>{let{theme,$variant}=_ref13;return theme.components.button[$variant].activeBackgroundColor}),(_ref14=>{let{theme,$variant}=_ref14;return theme.components.button[$variant].activeBorderColor}),(_ref15=>{let{theme,$variant}=_ref15;return theme.components.button[$variant].disabledColor}),(_ref16=>{let{theme,$variant}=_ref16;return theme.components.button[$variant].disabledBorderColor}),(_ref17=>{let{theme,$variant}=_ref17;return theme.components.button[$variant].disabledBackgroundFrom}),(_ref18=>{let{theme,$variant}=_ref18;return theme.components.button[$variant].disabledBackgroundTo}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=react.forwardRef(((_ref,forwardedRef)=>{let{size="normal",variant="primary",children="",loading=!1,inline=!0,...props}=_ref;return react.useEffect((()=>{"string"==typeof children||props["aria-label"]||console.warn("The `aria-label` prop is required when the children of the Button are not a string. This is to ensure that assistive technologies can announce the content of the button. Please provide a valid `aria-describedby` prop to the Button component.")}),[]),(0,jsx_runtime.jsx)(StyledButton,{$size:size,$variant:variant,$inline:inline,disabled:props.disabled||loading,"aria-disabled":props.disabled||loading,"aria-label":"string"==typeof children?children:void 0,role:"button",...props,ref:forwardedRef,children:loading?(0,jsx_runtime.jsx)(Loader,{}):children})})),Loader=()=>(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:"..."}),Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"Button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.",displayName:"Button",props:{size:{defaultValue:{value:"normal"},description:"The size of the button",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"mini"'},{value:'"normal"'}]}},variant:{defaultValue:{value:"primary"},description:"The variant of the button",name:"variant",required:!1,type:{name:"enum",value:[{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"danger"'}]}},children:{defaultValue:{value:""},description:"The children to be displayed in the button",name:"children",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:{value:"false"},description:"Whether the button is loading",name:"loading",required:!1,type:{name:"boolean"}},inline:{defaultValue:{value:"true"},description:"Whether the button is inline",name:"inline",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>_Button__WEBPACK_IMPORTED_MODULE_0__.A});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Button/Button.tsx")}}]);

package/storybook-static/stories-DatePicker-stories.fcb0ade4.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[94805],{"./src/stories/DatePicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _storybook_preview_api__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("storybook/internal/preview-api"),_components_Pickers_DatePicker__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Pickers/DatePicker.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/DatePicker",component:_components_Pickers_DatePicker__WEBPACK_IMPORTED_MODULE_2__.l,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:function Render(props){const[{value},updateArgs]=(0,_storybook_preview_api__WEBPACK_IMPORTED_MODULE_1__.useArgs)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components_Pickers_DatePicker__WEBPACK_IMPORTED_MODULE_2__.l,{...props,locale:"en-US",value,onChange:dateString=>{console.log("onChange",dateString),updateArgs({value:dateString})}})},args:{id:"date-picker-input",label:"Date Picker"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      value\n    }, updateArgs] = useArgs();\n    return <DatePicker {...props} locale=\"en-US\" value={value} onChange={(dateString: string | null) => {\n      console.log('onChange', dateString);\n      updateArgs({\n        value: dateString\n      });\n    }} />;\n  },\n  args: {\n    id: 'date-picker-input',\n    label: 'Date Picker'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Pickers/DatePicker.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,l:()=>DatePicker});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@blueprintjs/core/lib/esm/context/overlays/overlaysProvider.js"),_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@blueprintjs/datetime2/lib/esm/components/date-input3/dateInput3.js"),moment__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/moment/moment.js"),moment__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__),styled_components__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/styles/index.ts"),_styles__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Pickers/styles.ts"),_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/global/ErrorText/index.ts"),_Button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/Button/index.ts"),_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/Pickers/PickerDropdown.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js");const DatePicker=props=>{const{placeholder,name,isRequired,label,isErrored,language,errorText,id,cancelButtonText="Cancel",updateButtonText="Update",disabled,displayFormat="YYYY-MM-DD",portalContainer,value,useTime,...rest}=props,DialogElement=document.querySelector('div[role="dialog"].DialogContent'),theme=(0,styled_components__WEBPACK_IMPORTED_MODULE_8__.DP)(),valueSentRef=react__WEBPACK_IMPORTED_MODULE_0__.useRef(null!=value?value:null),[localValue,setLocalValue]=react__WEBPACK_IMPORTED_MODULE_0__.useState(null!=value?value:null),[isOpen,setIsOpen]=react__WEBPACK_IMPORTED_MODULE_0__.useState();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.yb,{id:"".concat(useTime?"datetime":"date","-picker-container-").concat(null!=id?id:"").trim(),"aria-invalid":isErrored,dir:theme.direction,children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_2__.Gw,{htmlFor:props.id,className:"input-label",children:[label,label&&isRequired&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.Tr,{children:"*"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_3__.BX,{$isErrored:isErrored,disabled:props.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__.T,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__.C,{canClearSelection:!0,closeOnSelection:!1,disabled,locale:language||"en-US",maxDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).add(10,"years").toDate(),minDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).subtract(100,"years").toDate(),fill:!0,highlightCurrentDay:!0,inputProps:{placeholder:placeholder||displayFormat,name,id,"aria-disabled":disabled},dayPickerProps:{disabled,dir:theme.direction,components:{Dropdown:dropdownProps=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__.y,{...dropdownProps,disabled})}},showActionsBar:!1,footerElement:cancelButtonText||updateButtonText?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.qg,{children:[cancelButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{variant:"secondary",disabled,onClick:()=>{setLocalValue(null!=value?value:null),setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:cancelButtonText}),updateButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{disabled:(null!=value?value:null)===localValue,onClick:()=>{var _rest$onChange;null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange||_rest$onChange.call(rest,localValue,!0),valueSentRef.current=localValue,setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:updateButtonText})]}):void 0,popoverProps:{hasBackdrop:!0,canEscapeKeyClose:!0,minimal:!1,placement:"ltr"===theme.direction?"bottom-start":"bottom-end",usePortal:!0,onClosed:()=>{var _rest$onChange2;valueSentRef.current!==localValue&&(null===(_rest$onChange2=rest.onChange)||void 0===_rest$onChange2||_rest$onChange2.call(rest,localValue,!0),valueSentRef.current=localValue)},portalContainer:null!=portalContainer?portalContainer:DialogElement||void 0,...void 0!==isOpen?{isOpen}:{}},parseDate:dateString=>dateString?moment__WEBPACK_IMPORTED_MODULE_1___default()(dateString).toDate():new Date,formatDate:date=>date?moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format(displayFormat):"",...useTime?{timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1},showTimezoneSelect:!1,disableTimezoneSelect:!0}:{},...rest,onChange:date=>{setLocalValue(date)},value:null!=localValue?localValue:""})}),isErrored&&errorText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__.y,{children:errorText})]})},__WEBPACK_DEFAULT_EXPORT__=DatePicker;try{DatePicker.displayName="DatePicker",DatePicker.__docgenInfo={description:"Datepicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.\nAll the date formats passed as attribute's values must be valid ISO Date format (opens new window).",displayName:"DatePicker",props:{isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"Id of the date picker",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"name of the date picker",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the picker",name:"label",required:!1,type:{name:"string"}},language:{defaultValue:null,description:"",name:"language",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"Placeholder text to display in empty input fields.\nRecommended practice is to indicate the expected date format.",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select\nWhether the date input is non-interactive.",name:"disabled",required:!1,type:{name:"boolean"}},portalContainer:{defaultValue:null,description:"",name:"portalContainer",required:!1,type:{name:"HTMLElement"}},cancelButtonText:{defaultValue:null,description:"",name:"cancelButtonText",required:!1,type:{name:"string"}},updateButtonText:{defaultValue:null,description:"",name:"updateButtonText",required:!1,type:{name:"string"}},displayFormat:{defaultValue:null,description:"",name:"displayFormat",required:!1,type:{name:"string"}},useTime:{defaultValue:null,description:"",name:"useTime",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/DatePicker.tsx#DatePicker"]={docgenInfo:DatePicker.__docgenInfo,name:"DatePicker",path:"src/components/Pickers/DatePicker.tsx#DatePicker"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/storybook-static/stories-DateRangePicker-stories.01f3e3fc.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[15852],{"./src/stories/DateRangePicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Contiguous:()=>Contiguous,Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _storybook_preview_api__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("storybook/internal/preview-api"),_components_Pickers_DateRangePicker__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Pickers/DateRangePicker.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/DateRangePicker",component:_components_Pickers_DateRangePicker__WEBPACK_IMPORTED_MODULE_2__.U,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:function Render(props){const[{value},updateArgs]=(0,_storybook_preview_api__WEBPACK_IMPORTED_MODULE_1__.useArgs)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components_Pickers_DateRangePicker__WEBPACK_IMPORTED_MODULE_2__.U,{...props,value,onChange:selectedRange=>{console.log("onChange",selectedRange),updateArgs({value:selectedRange})}})},args:{id:"date-picker-input",label:"Date Range Picker"}},Contiguous={render:function Render(props){const[{value},updateArgs]=(0,_storybook_preview_api__WEBPACK_IMPORTED_MODULE_1__.useArgs)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components_Pickers_DateRangePicker__WEBPACK_IMPORTED_MODULE_2__.U,{...props,contiguousCalendarMonths:!1,value,onChange:selectedRange=>{console.log("onChange",selectedRange),updateArgs({value:selectedRange})}})},args:{id:"date-picker-input",label:"Date Range Picker"}},__namedExportsOrder=["Primary","Contiguous"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      value\n    }, updateArgs] = useArgs();\n    return <DateRangePicker {...props} value={value} onChange={(selectedRange: DateRange) => {\n      console.log('onChange', selectedRange);\n      updateArgs({\n        value: selectedRange\n      });\n    }} />;\n  },\n  args: {\n    id: 'date-picker-input',\n    label: 'Date Range Picker'\n  }\n}",...Primary.parameters?.docs?.source}}},Contiguous.parameters={...Contiguous.parameters,docs:{...Contiguous.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      value\n    }, updateArgs] = useArgs();\n    return <DateRangePicker {...props} contiguousCalendarMonths={false} value={value} onChange={(selectedRange: DateRange) => {\n      console.log('onChange', selectedRange);\n      updateArgs({\n        value: selectedRange\n      });\n    }} />;\n  },\n  args: {\n    id: 'date-picker-input',\n    label: 'Date Range Picker'\n  }\n}",...Contiguous.parameters?.docs?.source}}}},"./src/components/Pickers/DateRangePicker.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,U:()=>DateRangePicker});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@blueprintjs/core/lib/esm/context/overlays/overlaysProvider.js"),_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@blueprintjs/datetime2/lib/esm/components/date-range-input3/dateRangeInput3.js"),moment__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/moment/moment.js"),moment__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__),styled_components__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/styles/index.ts"),_styles__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Pickers/styles.ts"),_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/global/ErrorText/index.ts"),_Button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/Button/index.ts"),_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/Pickers/PickerDropdown.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js");const DateRangePicker=props=>{var _ref,_ref$,_localValue$,_ref2,_ref2$,_localValue$2;const{placeholder,name,isRequired,label,isErrored,errorText,id,disabled,cancelButtonText="Cancel",updateButtonText="Update",language,displayFormat="YYYY-MM-DD",portalContainer,value,useTime,...rest}=props,DialogElement=document.querySelector('div[role="dialog"].DialogContent'),theme=(0,styled_components__WEBPACK_IMPORTED_MODULE_8__.DP)(),valueSentRef=react__WEBPACK_IMPORTED_MODULE_0__.useRef(null!=value?value:[null,null]),[localValue,setLocalValue]=react__WEBPACK_IMPORTED_MODULE_0__.useState(null!=value?value:[null,null]),[isOpen,setIsOpen]=react__WEBPACK_IMPORTED_MODULE_0__.useState();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.yb,{id:"".concat(useTime?"datetime":"date","-range-picker-container-").concat(null!=id?id:"").trim(),"aria-invalid":isErrored,dir:theme.direction,children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_2__.Gw,{htmlFor:props.id,className:"input-label",children:[label,label&&isRequired&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.Tr,{children:"*"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_3__.BX,{$inputLength:displayFormat.length-(useTime?1:0),$isErrored:isErrored,disabled:props.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__.T,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__.d,{closeOnSelection:!1,locale:language||"en-US",maxDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).add(10,"years").toDate(),minDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).subtract(100,"years").toDate(),fill:!0,highlightCurrentDay:!0,shortcuts:!1,startInputProps:{placeholder:placeholder||displayFormat,name,id:"start-".concat(id),"aria-disabled":disabled},endInputProps:{placeholder:placeholder||displayFormat,name,id:"end-".concat(id),"aria-disabled":disabled},dayPickerProps:{disabled,dir:theme.direction,components:{Dropdown:dropdownProps=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__.y,{...dropdownProps,disabled})}},footerElement:cancelButtonText||updateButtonText?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.qg,{children:[cancelButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{variant:"secondary",disabled,onClick:()=>{setLocalValue(null!=value?value:[null,null]),setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:cancelButtonText}),updateButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{disabled:(null===(_ref=null!=value?value:[null,null])||void 0===_ref||null===(_ref$=_ref[0])||void 0===_ref$?void 0:_ref$.toISOString())===(null==localValue||null===(_localValue$=localValue[0])||void 0===_localValue$?void 0:_localValue$.toISOString())&&(null===(_ref2=null!=value?value:[null,null])||void 0===_ref2||null===(_ref2$=_ref2[1])||void 0===_ref2$?void 0:_ref2$.toISOString())===(null==localValue||null===(_localValue$2=localValue[1])||void 0===_localValue$2?void 0:_localValue$2.toISOString()),onClick:()=>{var _rest$onChange;null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange||_rest$onChange.call(rest,localValue),valueSentRef.current=localValue,setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:updateButtonText})]}):void 0,popoverProps:{hasBackdrop:!0,canEscapeKeyClose:!0,minimal:!1,placement:"ltr"===theme.direction?"bottom-start":"bottom-end",usePortal:!0,onClosed:()=>{var _valueSentRef$current,_valueSentRef$current2,_localValue$3,_valueSentRef$current3,_valueSentRef$current4,_localValue$4,_rest$onChange2;(null===(_valueSentRef$current=valueSentRef.current)||void 0===_valueSentRef$current||null===(_valueSentRef$current2=_valueSentRef$current[0])||void 0===_valueSentRef$current2?void 0:_valueSentRef$current2.toISOString())===(null==localValue||null===(_localValue$3=localValue[0])||void 0===_localValue$3?void 0:_localValue$3.toISOString())&&(null===(_valueSentRef$current3=valueSentRef.current)||void 0===_valueSentRef$current3||null===(_valueSentRef$current4=_valueSentRef$current3[1])||void 0===_valueSentRef$current4?void 0:_valueSentRef$current4.toISOString())===(null==localValue||null===(_localValue$4=localValue[1])||void 0===_localValue$4?void 0:_localValue$4.toISOString())||(null===(_rest$onChange2=rest.onChange)||void 0===_rest$onChange2||_rest$onChange2.call(rest,localValue),valueSentRef.current=localValue)},portalContainer:null!=portalContainer?portalContainer:DialogElement||void 0,...void 0!==isOpen?{isOpen}:{}},parseDate:dateString=>dateString?moment__WEBPACK_IMPORTED_MODULE_1___default()(dateString).toDate():new Date,formatDate:date=>date?moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format(displayFormat):"",...useTime?{timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1}}:{},...rest,onChange:date=>{setLocalValue(date)},value:localValue})}),isErrored&&errorText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__.y,{children:errorText})]})},__WEBPACK_DEFAULT_EXPORT__=DateRangePicker;try{DateRangePicker.displayName="DateRangePicker",DateRangePicker.__docgenInfo={description:"DateRangePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.\nAll the date formats passed as attribute's values must be valid ISO Date format (opens new window).",displayName:"DateRangePicker",props:{isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"Id of the date picker",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"name of the date picker",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the picker",name:"label",required:!1,type:{name:"string"}},language:{defaultValue:null,description:"",name:"language",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"Placeholder text to display in empty input fields.\nRecommended practice is to indicate the expected date format.",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select\nWhether the text inputs are non-interactive.",name:"disabled",required:!1,type:{name:"boolean"}},portalContainer:{defaultValue:null,description:"",name:"portalContainer",required:!1,type:{name:"HTMLElement"}},cancelButtonText:{defaultValue:null,description:"",name:"cancelButtonText",required:!1,type:{name:"string"}},updateButtonText:{defaultValue:null,description:"",name:"updateButtonText",required:!1,type:{name:"string"}},displayFormat:{defaultValue:null,description:"",name:"displayFormat",required:!1,type:{name:"string"}},useTime:{defaultValue:null,description:"",name:"useTime",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/DateRangePicker.tsx#DateRangePicker"]={docgenInfo:DateRangePicker.__docgenInfo,name:"DateRangePicker",path:"src/components/Pickers/DateRangePicker.tsx#DateRangePicker"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/storybook-static/stories-DateTimePicker-stories.d41eee2d.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[82150],{"./src/stories/DateTimePicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>DateTimePicker_stories});__webpack_require__("./node_modules/react/index.js");var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),DatePicker=__webpack_require__("./src/components/Pickers/DatePicker.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const DateTimePicker=props=>{const{displayFormat="YYYY-MM-DD hh:mm A",...rest}=props;return(0,jsx_runtime.jsx)(DatePicker.A,{...rest,displayFormat,useTime:!0})};try{DateTimePicker.displayName="DateTimePicker",DateTimePicker.__docgenInfo={description:"DateTimePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.\nAll the date formats passed as attribute's values must be valid ISO Date format (opens new window).",displayName:"DateTimePicker",props:{isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"Id of the date picker",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"name of the date picker",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the picker",name:"label",required:!1,type:{name:"string"}},language:{defaultValue:null,description:"",name:"language",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"Placeholder text to display in empty input fields.\nRecommended practice is to indicate the expected date format.",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select\nWhether the date input is non-interactive.",name:"disabled",required:!1,type:{name:"boolean"}},portalContainer:{defaultValue:null,description:"",name:"portalContainer",required:!1,type:{name:"HTMLElement"}},cancelButtonText:{defaultValue:null,description:"",name:"cancelButtonText",required:!1,type:{name:"string"}},updateButtonText:{defaultValue:null,description:"",name:"updateButtonText",required:!1,type:{name:"string"}},displayFormat:{defaultValue:null,description:"",name:"displayFormat",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/DateTimePicker.tsx#DateTimePicker"]={docgenInfo:DateTimePicker.__docgenInfo,name:"DateTimePicker",path:"src/components/Pickers/DateTimePicker.tsx#DateTimePicker"})}catch(__react_docgen_typescript_loader_error){}const DateTimePicker_stories={title:"Components/DateTimePicker",component:DateTimePicker,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:function Render(props){const[{value},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsx)(DateTimePicker,{...props,value,onChange:dateString=>{console.log("onChange",dateString),updateArgs({value:dateString})}})},args:{id:"date-picker-input",label:"Date Time Picker"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      value\n    }, updateArgs] = useArgs();\n    return <DateTimePicker {...props} value={value} onChange={(dateString: string | null) => {\n      console.log('onChange', dateString);\n      updateArgs({\n        value: dateString\n      });\n    }} />;\n  },\n  args: {\n    id: 'date-picker-input',\n    label: 'Date Time Picker'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Pickers/DatePicker.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,l:()=>DatePicker});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@blueprintjs/core/lib/esm/context/overlays/overlaysProvider.js"),_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@blueprintjs/datetime2/lib/esm/components/date-input3/dateInput3.js"),moment__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/moment/moment.js"),moment__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__),styled_components__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/styles/index.ts"),_styles__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Pickers/styles.ts"),_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/global/ErrorText/index.ts"),_Button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/Button/index.ts"),_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/Pickers/PickerDropdown.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js");const DatePicker=props=>{const{placeholder,name,isRequired,label,isErrored,language,errorText,id,cancelButtonText="Cancel",updateButtonText="Update",disabled,displayFormat="YYYY-MM-DD",portalContainer,value,useTime,...rest}=props,DialogElement=document.querySelector('div[role="dialog"].DialogContent'),theme=(0,styled_components__WEBPACK_IMPORTED_MODULE_8__.DP)(),valueSentRef=react__WEBPACK_IMPORTED_MODULE_0__.useRef(null!=value?value:null),[localValue,setLocalValue]=react__WEBPACK_IMPORTED_MODULE_0__.useState(null!=value?value:null),[isOpen,setIsOpen]=react__WEBPACK_IMPORTED_MODULE_0__.useState();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.yb,{id:"".concat(useTime?"datetime":"date","-picker-container-").concat(null!=id?id:"").trim(),"aria-invalid":isErrored,dir:theme.direction,children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_2__.Gw,{htmlFor:props.id,className:"input-label",children:[label,label&&isRequired&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.Tr,{children:"*"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_3__.BX,{$isErrored:isErrored,disabled:props.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__.T,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__.C,{canClearSelection:!0,closeOnSelection:!1,disabled,locale:language||"en-US",maxDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).add(10,"years").toDate(),minDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).subtract(100,"years").toDate(),fill:!0,highlightCurrentDay:!0,inputProps:{placeholder:placeholder||displayFormat,name,id,"aria-disabled":disabled},dayPickerProps:{disabled,dir:theme.direction,components:{Dropdown:dropdownProps=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__.y,{...dropdownProps,disabled})}},showActionsBar:!1,footerElement:cancelButtonText||updateButtonText?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.qg,{children:[cancelButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{variant:"secondary",disabled,onClick:()=>{setLocalValue(null!=value?value:null),setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:cancelButtonText}),updateButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{disabled:(null!=value?value:null)===localValue,onClick:()=>{var _rest$onChange;null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange||_rest$onChange.call(rest,localValue,!0),valueSentRef.current=localValue,setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:updateButtonText})]}):void 0,popoverProps:{hasBackdrop:!0,canEscapeKeyClose:!0,minimal:!1,placement:"ltr"===theme.direction?"bottom-start":"bottom-end",usePortal:!0,onClosed:()=>{var _rest$onChange2;valueSentRef.current!==localValue&&(null===(_rest$onChange2=rest.onChange)||void 0===_rest$onChange2||_rest$onChange2.call(rest,localValue,!0),valueSentRef.current=localValue)},portalContainer:null!=portalContainer?portalContainer:DialogElement||void 0,...void 0!==isOpen?{isOpen}:{}},parseDate:dateString=>dateString?moment__WEBPACK_IMPORTED_MODULE_1___default()(dateString).toDate():new Date,formatDate:date=>date?moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format(displayFormat):"",...useTime?{timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1},showTimezoneSelect:!1,disableTimezoneSelect:!0}:{},...rest,onChange:date=>{setLocalValue(date)},value:null!=localValue?localValue:""})}),isErrored&&errorText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__.y,{children:errorText})]})},__WEBPACK_DEFAULT_EXPORT__=DatePicker;try{DatePicker.displayName="DatePicker",DatePicker.__docgenInfo={description:"Datepicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.\nAll the date formats passed as attribute's values must be valid ISO Date format (opens new window).",displayName:"DatePicker",props:{isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"Id of the date picker",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"name of the date picker",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the picker",name:"label",required:!1,type:{name:"string"}},language:{defaultValue:null,description:"",name:"language",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"Placeholder text to display in empty input fields.\nRecommended practice is to indicate the expected date format.",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select\nWhether the date input is non-interactive.",name:"disabled",required:!1,type:{name:"boolean"}},portalContainer:{defaultValue:null,description:"",name:"portalContainer",required:!1,type:{name:"HTMLElement"}},cancelButtonText:{defaultValue:null,description:"",name:"cancelButtonText",required:!1,type:{name:"string"}},updateButtonText:{defaultValue:null,description:"",name:"updateButtonText",required:!1,type:{name:"string"}},displayFormat:{defaultValue:null,description:"",name:"displayFormat",required:!1,type:{name:"string"}},useTime:{defaultValue:null,description:"",name:"useTime",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/DatePicker.tsx#DatePicker"]={docgenInfo:DatePicker.__docgenInfo,name:"DatePicker",path:"src/components/Pickers/DatePicker.tsx#DatePicker"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/storybook-static/stories-DateTimeRangePicker-stories.c62aa45e.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[66881],{"./src/stories/DateTimeRangePicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>DateTimeRangePicker_stories});__webpack_require__("./node_modules/react/index.js");var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),DateRangePicker=__webpack_require__("./src/components/Pickers/DateRangePicker.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const DateTimeRangePicker=props=>{const{displayFormat="YYYY-MM-DD hh:mm A",...rest}=props;return(0,jsx_runtime.jsx)(DateRangePicker.A,{...rest,displayFormat,useTime:!0})};try{DateTimeRangePicker.displayName="DateTimeRangePicker",DateTimeRangePicker.__docgenInfo={description:"DateTimeRangePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.\nAll the date formats passed as attribute's values must be valid ISO Date format (opens new window).",displayName:"DateTimeRangePicker",props:{isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"Id of the date picker",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"name of the date picker",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the picker",name:"label",required:!1,type:{name:"string"}},language:{defaultValue:null,description:"",name:"language",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"Placeholder text to display in empty input fields.\nRecommended practice is to indicate the expected date format.",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select\nWhether the text inputs are non-interactive.",name:"disabled",required:!1,type:{name:"boolean"}},portalContainer:{defaultValue:null,description:"",name:"portalContainer",required:!1,type:{name:"HTMLElement"}},cancelButtonText:{defaultValue:null,description:"",name:"cancelButtonText",required:!1,type:{name:"string"}},updateButtonText:{defaultValue:null,description:"",name:"updateButtonText",required:!1,type:{name:"string"}},displayFormat:{defaultValue:null,description:"",name:"displayFormat",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/DateTimeRangePicker.tsx#DateTimeRangePicker"]={docgenInfo:DateTimeRangePicker.__docgenInfo,name:"DateTimeRangePicker",path:"src/components/Pickers/DateTimeRangePicker.tsx#DateTimeRangePicker"})}catch(__react_docgen_typescript_loader_error){}const DateTimeRangePicker_stories={title:"Components/DateTimeRangePicker",component:DateTimeRangePicker,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:function Render(props){const[{value},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsx)(DateTimeRangePicker,{...props,value,onChange:selectedRange=>{updateArgs({value:selectedRange})}})},args:{id:"date-picker-input",label:"Date Time Range Picker"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      value\n    }, updateArgs] = useArgs();\n    return <DateTimeRangePicker {...props} value={value} onChange={(selectedRange: DateRange) => {\n      updateArgs({\n        value: selectedRange\n      });\n    }} />;\n  },\n  args: {\n    id: 'date-picker-input',\n    label: 'Date Time Range Picker'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Pickers/DateRangePicker.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,U:()=>DateRangePicker});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@blueprintjs/core/lib/esm/context/overlays/overlaysProvider.js"),_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@blueprintjs/datetime2/lib/esm/components/date-range-input3/dateRangeInput3.js"),moment__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/moment/moment.js"),moment__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__),styled_components__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/styles/index.ts"),_styles__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Pickers/styles.ts"),_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/global/ErrorText/index.ts"),_Button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/Button/index.ts"),_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/Pickers/PickerDropdown.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js");const DateRangePicker=props=>{var _ref,_ref$,_localValue$,_ref2,_ref2$,_localValue$2;const{placeholder,name,isRequired,label,isErrored,errorText,id,disabled,cancelButtonText="Cancel",updateButtonText="Update",language,displayFormat="YYYY-MM-DD",portalContainer,value,useTime,...rest}=props,DialogElement=document.querySelector('div[role="dialog"].DialogContent'),theme=(0,styled_components__WEBPACK_IMPORTED_MODULE_8__.DP)(),valueSentRef=react__WEBPACK_IMPORTED_MODULE_0__.useRef(null!=value?value:[null,null]),[localValue,setLocalValue]=react__WEBPACK_IMPORTED_MODULE_0__.useState(null!=value?value:[null,null]),[isOpen,setIsOpen]=react__WEBPACK_IMPORTED_MODULE_0__.useState();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.yb,{id:"".concat(useTime?"datetime":"date","-range-picker-container-").concat(null!=id?id:"").trim(),"aria-invalid":isErrored,dir:theme.direction,children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_2__.Gw,{htmlFor:props.id,className:"input-label",children:[label,label&&isRequired&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.Tr,{children:"*"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_3__.BX,{$inputLength:displayFormat.length-(useTime?1:0),$isErrored:isErrored,disabled:props.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_core__WEBPACK_IMPORTED_MODULE_9__.T,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_blueprintjs_datetime2__WEBPACK_IMPORTED_MODULE_10__.d,{closeOnSelection:!1,locale:language||"en-US",maxDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).add(10,"years").toDate(),minDate:moment__WEBPACK_IMPORTED_MODULE_1___default()(new Date).subtract(100,"years").toDate(),fill:!0,highlightCurrentDay:!0,shortcuts:!1,startInputProps:{placeholder:placeholder||displayFormat,name,id:"start-".concat(id),"aria-disabled":disabled},endInputProps:{placeholder:placeholder||displayFormat,name,id:"end-".concat(id),"aria-disabled":disabled},dayPickerProps:{disabled,dir:theme.direction,components:{Dropdown:dropdownProps=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_PickerDropdown__WEBPACK_IMPORTED_MODULE_6__.y,{...dropdownProps,disabled})}},footerElement:cancelButtonText||updateButtonText?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_3__.qg,{children:[cancelButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{variant:"secondary",disabled,onClick:()=>{setLocalValue(null!=value?value:[null,null]),setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:cancelButtonText}),updateButtonText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_5__.$,{disabled:(null===(_ref=null!=value?value:[null,null])||void 0===_ref||null===(_ref$=_ref[0])||void 0===_ref$?void 0:_ref$.toISOString())===(null==localValue||null===(_localValue$=localValue[0])||void 0===_localValue$?void 0:_localValue$.toISOString())&&(null===(_ref2=null!=value?value:[null,null])||void 0===_ref2||null===(_ref2$=_ref2[1])||void 0===_ref2$?void 0:_ref2$.toISOString())===(null==localValue||null===(_localValue$2=localValue[1])||void 0===_localValue$2?void 0:_localValue$2.toISOString()),onClick:()=>{var _rest$onChange;null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange||_rest$onChange.call(rest,localValue),valueSentRef.current=localValue,setIsOpen(!1),setTimeout((()=>{setIsOpen(void 0)}),0)},children:updateButtonText})]}):void 0,popoverProps:{hasBackdrop:!0,canEscapeKeyClose:!0,minimal:!1,placement:"ltr"===theme.direction?"bottom-start":"bottom-end",usePortal:!0,onClosed:()=>{var _valueSentRef$current,_valueSentRef$current2,_localValue$3,_valueSentRef$current3,_valueSentRef$current4,_localValue$4,_rest$onChange2;(null===(_valueSentRef$current=valueSentRef.current)||void 0===_valueSentRef$current||null===(_valueSentRef$current2=_valueSentRef$current[0])||void 0===_valueSentRef$current2?void 0:_valueSentRef$current2.toISOString())===(null==localValue||null===(_localValue$3=localValue[0])||void 0===_localValue$3?void 0:_localValue$3.toISOString())&&(null===(_valueSentRef$current3=valueSentRef.current)||void 0===_valueSentRef$current3||null===(_valueSentRef$current4=_valueSentRef$current3[1])||void 0===_valueSentRef$current4?void 0:_valueSentRef$current4.toISOString())===(null==localValue||null===(_localValue$4=localValue[1])||void 0===_localValue$4?void 0:_localValue$4.toISOString())||(null===(_rest$onChange2=rest.onChange)||void 0===_rest$onChange2||_rest$onChange2.call(rest,localValue),valueSentRef.current=localValue)},portalContainer:null!=portalContainer?portalContainer:DialogElement||void 0,...void 0!==isOpen?{isOpen}:{}},parseDate:dateString=>dateString?moment__WEBPACK_IMPORTED_MODULE_1___default()(dateString).toDate():new Date,formatDate:date=>date?moment__WEBPACK_IMPORTED_MODULE_1___default()(date).format(displayFormat):"",...useTime?{timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1}}:{},...rest,onChange:date=>{setLocalValue(date)},value:localValue})}),isErrored&&errorText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_global_ErrorText__WEBPACK_IMPORTED_MODULE_4__.y,{children:errorText})]})},__WEBPACK_DEFAULT_EXPORT__=DateRangePicker;try{DateRangePicker.displayName="DateRangePicker",DateRangePicker.__docgenInfo={description:"DateRangePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.\nAll the date formats passed as attribute's values must be valid ISO Date format (opens new window).",displayName:"DateRangePicker",props:{isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"Id of the date picker",name:"id",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"name of the date picker",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the picker",name:"label",required:!1,type:{name:"string"}},language:{defaultValue:null,description:"",name:"language",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"Placeholder text to display in empty input fields.\nRecommended practice is to indicate the expected date format.",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select\nWhether the text inputs are non-interactive.",name:"disabled",required:!1,type:{name:"boolean"}},portalContainer:{defaultValue:null,description:"",name:"portalContainer",required:!1,type:{name:"HTMLElement"}},cancelButtonText:{defaultValue:null,description:"",name:"cancelButtonText",required:!1,type:{name:"string"}},updateButtonText:{defaultValue:null,description:"",name:"updateButtonText",required:!1,type:{name:"string"}},displayFormat:{defaultValue:null,description:"",name:"displayFormat",required:!1,type:{name:"string"}},useTime:{defaultValue:null,description:"",name:"useTime",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/DateRangePicker.tsx#DateRangePicker"]={docgenInfo:DateRangePicker.__docgenInfo,name:"DateRangePicker",path:"src/components/Pickers/DateRangePicker.tsx#DateRangePicker"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/storybook-static/{stories-Drawer-stories.97f5c37d.iframe.bundle.js → stories-Drawer-stories.fc669d5f.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[53416],{"./src/stories/Drawer.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Drawer_stories});__webpack_require__("./node_modules/react/index.js");var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),Button=__webpack_require__("./src/components/Button/index.ts"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-dialog/dist/index.mjs"),styles=__webpack_require__("./src/styles/index.ts"),keyframes=__webpack_require__("./src/styles/keyframes.ts");const DrawerSizeMap={right:{x:"0",right:"0",top:"0"},left:{x:"0",left:"0",top:"0"}},DrawerSizeWidth={small:"424px",default:"600px",medium:"720px",large:"800px","x-large":"1200px"};var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7;const DialogOverlay=(0,styled_components_browser_esm.Ay)(dist.hJ)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  ","\n"])),styles.io),DialogContent=(0,styled_components_browser_esm.Ay)(dist.UC)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  ","\n  max-width: ",";\n  height: ",";\n  position: fixed;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  top: ",";\n  bottom: ",";\n  left: ",";\n  right: ",";\n  animation-duration: ",";\n  animation-timing-function: ",";\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),styles.td,(_ref=>{let{size}=_ref;return DrawerSizeWidth[size]}),(_ref2=>{let{isFullHeight}=_ref2;return isFullHeight?"100vh":"unset"}),(_ref3=>{let{placement}=_ref3;return DrawerSizeMap[placement].top}),(_ref4=>{let{placement}=_ref4;return DrawerSizeMap[placement].bottom}),(_ref5=>{let{placement}=_ref5;return DrawerSizeMap[placement].left}),(_ref6=>{let{placement}=_ref6;return DrawerSizeMap[placement].right}),(_ref7=>{let{theme}=_ref7;return theme.transitions.duration.standard}),(_ref8=>{let{theme}=_ref8;return theme.transitions.easing.easeIn}),(_ref9=>{let{placement}=_ref9;return DrawerSizeMap[placement].right?keyframes.bB:keyframes.cN}),(_ref10=>{let{placement}=_ref10;return DrawerSizeMap[placement].right?keyframes.On:keyframes.tW})),CloseIconHolder=styled_components_browser_esm.Ay.button(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  display: grid;\n  place-content: center;\n  position: absolute;\n  height: 24px;\n  width: 24px;\n  padding: 0;\n  margin: 0;\n  background-color: ",";\n  border: none;\n  left: -24px;\n  top: 0px;\n  cursor: pointer;\n\n  ","\n"])),(_ref11=>{let{theme}=_ref11;return theme.colors.text.primary}),(_ref12=>{let{theme}=_ref12;return"dark"===theme.mode&&(0,styled_components_browser_esm.AH)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n      background-color: ",";\n    "])),(_ref13=>{let{theme}=_ref13;return theme.colors.fill.inverse}))})),DialogClose=(0,styled_components_browser_esm.Ay)(dist.bm)(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  left: ",";\n  right: ",";\n"])),(_ref14=>{let{placement}=_ref14;return"right"===placement?"-24px":"unset"}),(_ref15=>{let{placement}=_ref15;return"left"===placement?"-24px":"unset"})),DialogRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)([""]))),DialogPortal=(0,styled_components_browser_esm.Ay)(dist.ZL)(_templateObject7||(_templateObject7=(0,taggedTemplateLiteral.A)([""])));var Cross=__webpack_require__("./src/components/Icons/Cross.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Drawer=_ref=>{let{isOpen,children,hideDismissIcon,customClass="",size="default",isFullHeight=!0,placement="right",clickOutToClose=!1,onDismiss}=_ref;const theme=(0,styled_components_browser_esm.DP)(),modPlacement="rtl"===theme.direction?"right"===placement?"left":"right":placement;return(0,jsx_runtime.jsx)(DialogRoot,{open:isOpen,onOpenChange:newState=>{newState||null==onDismiss||onDismiss()},children:(0,jsx_runtime.jsxs)(DialogPortal,{children:[(0,jsx_runtime.jsx)(DialogOverlay,{forceMount:!0,className:"DialogOverlay",onClick:()=>{clickOutToClose&&(null==onDismiss||onDismiss())}}),(0,jsx_runtime.jsxs)(DialogContent,{forceMount:!0,className:"DialogContent ".concat(null!=customClass?customClass:"").trim(),isFullHeight,size,placement:modPlacement,dir:theme.direction,children:[!hideDismissIcon&&(0,jsx_runtime.jsx)(DialogClose,{asChild:!0,placement:modPlacement,children:(0,jsx_runtime.jsx)(CloseIconHolder,{"aria-label":"Close",children:(0,jsx_runtime.jsx)(Cross.A,{fill:theme.colors.text.inverse})})}),children]})]})})},Drawer_Drawer=Drawer;try{Drawer.displayName="Drawer",Drawer.__docgenInfo={description:"Drawer component is used to show a drawer to the user. It is used to show additional information or actions. It can be used to show a menu, a form, or any other content.",displayName:"Drawer",props:{children:{defaultValue:null,description:"The children to be displayed in the drawer",name:"children",required:!1,type:{name:"ReactNode"}},isOpen:{defaultValue:null,description:"Whether the drawer is open",name:"isOpen",required:!1,type:{name:"boolean"}},placement:{defaultValue:{value:"right"},description:"The placement of the drawer",name:"placement",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'}]}},size:{defaultValue:{value:"default"},description:"The size of the drawer",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"default"'},{value:'"medium"'},{value:'"large"'},{value:'"x-large"'}]}},isFullHeight:{defaultValue:{value:"true"},description:"Whether the drawer is full height",name:"isFullHeight",required:!1,type:{name:"boolean"}},clickOutToClose:{defaultValue:{value:"false"},description:"Should the drawer close when clicking outside",name:"clickOutToClose",required:!1,type:{name:"boolean"}},hideDismissIcon:{defaultValue:null,description:"Should we hide the dismiss icon",name:"hideDismissIcon",required:!1,type:{name:"boolean"}},customClass:{defaultValue:{value:""},description:"Custom class to be added to the drawer",name:"customClass",required:!1,type:{name:"string"}},onDismiss:{defaultValue:null,description:"Function to be called when the drawer is dismissed",name:"onDismiss",required:!1,type:{name:"(() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Drawer/Drawer.tsx#Drawer"]={docgenInfo:Drawer.__docgenInfo,name:"Drawer",path:"src/components/Drawer/Drawer.tsx#Drawer"})}catch(__react_docgen_typescript_loader_error){}const Drawer_stories={title:"Components/Drawer",component:Drawer_Drawer,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:function Render(props){const[{isOpen},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Button.$,{variant:"primary",onClick:()=>updateArgs({isOpen:!0}),children:"Open Drawer"}),(0,jsx_runtime.jsxs)(Drawer_Drawer,{...props,isOpen,onDismiss:()=>{updateArgs({isOpen:!1})},children:[(0,jsx_runtime.jsxs)(styles.Wu,{children:[(0,jsx_runtime.jsx)(styles.ZB,{children:"Title goes here"}),(0,jsx_runtime.jsx)(styles.BT,{children:"This is a small description"}),(0,jsx_runtime.jsx)(styles.c5,{children:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore excepturi velit ut, ea earum ipsum aspernatur modi ex ipsa repudiandae eaque amet sequi eligendi deserunt libero nobis asperiores necessitatibus!"})]}),(0,jsx_runtime.jsxs)(styles.w,{children:[(0,jsx_runtime.jsx)(Button.$,{variant:"secondary",onClick:()=>updateArgs({isOpen:!1}),children:"Close"}),(0,jsx_runtime.jsx)(Button.$,{variant:"primary",onClick:()=>updateArgs({isOpen:!1}),children:"Ok"})]})]})]})},args:{isOpen:!1}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:'{\n  render: function Render(props) {\n    const [{\n      isOpen\n    }, updateArgs] = useArgs();\n    return <>\n        <Button variant="primary" onClick={() => updateArgs({\n        isOpen: true\n      })}>\n          Open Drawer\n        </Button>\n        <Drawer {...props} isOpen={isOpen} onDismiss={() => {\n        updateArgs({\n          isOpen: false\n        });\n      }}>\n          <CardContent>\n            <CardTitle>Title goes here</CardTitle>\n            <CardDescription>This is a small description</CardDescription>\n            <CardText>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta,\n              dolore excepturi velit ut, ea earum ipsum aspernatur modi ex ipsa\n              repudiandae eaque amet sequi eligendi deserunt libero nobis\n              asperiores necessitatibus!\n            </CardText>\n          </CardContent>\n          <CardActions>\n            <Button variant="secondary" onClick={() => updateArgs({\n            isOpen: false\n          })}>\n              Close\n            </Button>\n            <Button variant="primary" onClick={() => updateArgs({\n            isOpen: false\n          })}>\n              Ok\n            </Button>\n          </CardActions>\n        </Drawer>\n      </>;\n  },\n  args: {\n    isOpen: false\n  }\n}',...Primary.parameters?.docs?.source}}}},"./src/components/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Button_Button});var react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const ButtonSizeMap={large:{height:"45px",size:"16px"},mini:{height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}};var _templateObject;const StyledButton=styled_components_browser_esm.Ay.button(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  font-weight: ",";\n  font-family: ",";\n  border-radius: 4px;\n  display: ",";\n  border: 1px solid\n    ",";\n  background: linear-gradient(\n    180deg,\n    ","\n      2.56%,\n    ","\n      95.75%\n  );\n  color: ",";\n  height: ",";\n  line-height: 1.3;\n  font-size: ",";\n  cursor: ",";\n  white-space: nowrap;\n  padding: 0 12px;\n  &:hover {\n    background: ",";\n  }\n  &:active {\n    background: ",";\n    border-color: ",";\n  }\n  &:disabled {\n    color: ",";\n    border-color: ",";\n    background: linear-gradient(\n      180deg,\n      ","\n        4.39%,\n      ","\n        94.46%\n    );\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontWeight["semi-bold"]}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{$inline}=_ref4;return $inline?"inline-block":"block"}),(_ref5=>{let{theme,variant}=_ref5;return theme.components.button[variant].borderColor}),(_ref6=>{let{theme,variant}=_ref6;return theme.components.button[variant].backgroundFrom}),(_ref7=>{let{theme,variant}=_ref7;return theme.components.button[variant].backgroundTo}),(_ref8=>{let{theme,variant}=_ref8;return theme.components.button[variant].color}),(_ref9=>{let{size}=_ref9;return ButtonSizeMap[size].height}),(_ref10=>{let{size}=_ref10;return ButtonSizeMap[size].size}),(_ref11=>{let{disabled}=_ref11;return disabled?"not-allowed":"pointer"}),(_ref12=>{let{theme,variant}=_ref12;return theme.components.button[variant].hoverColor}),(_ref13=>{let{theme,variant}=_ref13;return theme.components.button[variant].activeBackgroundColor}),(_ref14=>{let{theme,variant}=_ref14;return theme.components.button[variant].activeBorderColor}),(_ref15=>{let{theme,variant}=_ref15;return theme.components.button[variant].disabledColor}),(_ref16=>{let{theme,variant}=_ref16;return theme.components.button[variant].disabledBorderColor}),(_ref17=>{let{theme,variant}=_ref17;return theme.components.button[variant].disabledBackgroundFrom}),(_ref18=>{let{theme,variant}=_ref18;return theme.components.button[variant].disabledBackgroundTo}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=react.forwardRef(((_ref,forwardedRef)=>{let{size="normal",variant="primary",children="",loading=!1,inline=!0,...props}=_ref;return react.useEffect((()=>{"string"==typeof children||props["aria-label"]||console.warn("The `aria-label` prop is required when the children of the Button are not a string. This is to ensure that assistive technologies can announce the content of the button. Please provide a valid `aria-describedby` prop to the Button component.")}),[]),(0,jsx_runtime.jsx)(StyledButton,{size,variant,$inline:inline,disabled:props.disabled||loading,"aria-disabled":props.disabled||loading,"aria-label":"string"==typeof children?children:void 0,role:"button",...props,ref:forwardedRef,children:loading?(0,jsx_runtime.jsx)(Loader,{}):children})})),Loader=()=>(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:"..."}),Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"Button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.",displayName:"Button",props:{size:{defaultValue:{value:"normal"},description:"The size of the button",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"mini"'},{value:'"normal"'}]}},variant:{defaultValue:{value:"primary"},description:"The variant of the button",name:"variant",required:!1,type:{name:"enum",value:[{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"danger"'}]}},children:{defaultValue:{value:""},description:"The children to be displayed in the button",name:"children",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:{value:"false"},description:"Whether the button is loading",name:"loading",required:!1,type:{name:"boolean"}},inline:{defaultValue:{value:"true"},description:"Whether the button is inline",name:"inline",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>_Button__WEBPACK_IMPORTED_MODULE_0__.A});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Button/Button.tsx")}}]);
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[53416],{"./src/stories/Drawer.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Drawer_stories});__webpack_require__("./node_modules/react/index.js");var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),Button=__webpack_require__("./src/components/Button/index.ts"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-dialog/dist/index.mjs"),styles=__webpack_require__("./src/styles/index.ts"),keyframes=__webpack_require__("./src/styles/keyframes.ts");const DrawerSizeMap={right:{x:"0",right:"0",top:"0"},left:{x:"0",left:"0",top:"0"}},DrawerSizeWidth={small:"424px",default:"600px",medium:"720px",large:"800px","x-large":"1200px"};var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7;const DialogOverlay=(0,styled_components_browser_esm.Ay)(dist.hJ)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  ","\n"])),styles.io),DialogContent=(0,styled_components_browser_esm.Ay)(dist.UC)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  ","\n  max-width: ",";\n  height: ",";\n  position: fixed;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  top: ",";\n  bottom: ",";\n  left: ",";\n  right: ",";\n  animation-duration: ",";\n  animation-timing-function: ",";\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),styles.td,(_ref=>{let{size}=_ref;return DrawerSizeWidth[size]}),(_ref2=>{let{isFullHeight}=_ref2;return isFullHeight?"100vh":"unset"}),(_ref3=>{let{placement}=_ref3;return DrawerSizeMap[placement].top}),(_ref4=>{let{placement}=_ref4;return DrawerSizeMap[placement].bottom}),(_ref5=>{let{placement}=_ref5;return DrawerSizeMap[placement].left}),(_ref6=>{let{placement}=_ref6;return DrawerSizeMap[placement].right}),(_ref7=>{let{theme}=_ref7;return theme.transitions.duration.standard}),(_ref8=>{let{theme}=_ref8;return theme.transitions.easing.easeIn}),(_ref9=>{let{placement}=_ref9;return DrawerSizeMap[placement].right?keyframes.bB:keyframes.cN}),(_ref10=>{let{placement}=_ref10;return DrawerSizeMap[placement].right?keyframes.On:keyframes.tW})),CloseIconHolder=styled_components_browser_esm.Ay.button(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  display: grid;\n  place-content: center;\n  position: absolute;\n  height: 24px;\n  width: 24px;\n  padding: 0;\n  margin: 0;\n  background-color: ",";\n  border: none;\n  left: -24px;\n  top: 0px;\n  cursor: pointer;\n\n  ","\n"])),(_ref11=>{let{theme}=_ref11;return theme.colors.text.primary}),(_ref12=>{let{theme}=_ref12;return"dark"===theme.mode&&(0,styled_components_browser_esm.AH)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n      background-color: ",";\n    "])),(_ref13=>{let{theme}=_ref13;return theme.colors.fill.inverse}))})),DialogClose=(0,styled_components_browser_esm.Ay)(dist.bm)(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  left: ",";\n  right: ",";\n"])),(_ref14=>{let{placement}=_ref14;return"right"===placement?"-24px":"unset"}),(_ref15=>{let{placement}=_ref15;return"left"===placement?"-24px":"unset"})),DialogRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)([""]))),DialogPortal=(0,styled_components_browser_esm.Ay)(dist.ZL)(_templateObject7||(_templateObject7=(0,taggedTemplateLiteral.A)([""])));var Cross=__webpack_require__("./src/components/Icons/Cross.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Drawer=_ref=>{let{isOpen,children,hideDismissIcon,customClass="",size="default",isFullHeight=!0,placement="right",clickOutToClose=!1,onDismiss}=_ref;const theme=(0,styled_components_browser_esm.DP)(),modPlacement="rtl"===theme.direction?"right"===placement?"left":"right":placement;return(0,jsx_runtime.jsx)(DialogRoot,{open:isOpen,onOpenChange:newState=>{newState||null==onDismiss||onDismiss()},children:(0,jsx_runtime.jsxs)(DialogPortal,{children:[(0,jsx_runtime.jsx)(DialogOverlay,{forceMount:!0,className:"DialogOverlay",onClick:()=>{clickOutToClose&&(null==onDismiss||onDismiss())}}),(0,jsx_runtime.jsxs)(DialogContent,{forceMount:!0,className:"DialogContent ".concat(null!=customClass?customClass:"").trim(),isFullHeight,size,placement:modPlacement,dir:theme.direction,children:[!hideDismissIcon&&(0,jsx_runtime.jsx)(DialogClose,{asChild:!0,placement:modPlacement,children:(0,jsx_runtime.jsx)(CloseIconHolder,{"aria-label":"Close",children:(0,jsx_runtime.jsx)(Cross.A,{fill:theme.colors.text.inverse})})}),children]})]})})},Drawer_Drawer=Drawer;try{Drawer.displayName="Drawer",Drawer.__docgenInfo={description:"Drawer component is used to show a drawer to the user. It is used to show additional information or actions. It can be used to show a menu, a form, or any other content.",displayName:"Drawer",props:{children:{defaultValue:null,description:"The children to be displayed in the drawer",name:"children",required:!1,type:{name:"ReactNode"}},isOpen:{defaultValue:null,description:"Whether the drawer is open",name:"isOpen",required:!1,type:{name:"boolean"}},placement:{defaultValue:{value:"right"},description:"The placement of the drawer",name:"placement",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'}]}},size:{defaultValue:{value:"default"},description:"The size of the drawer",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"default"'},{value:'"medium"'},{value:'"large"'},{value:'"x-large"'}]}},isFullHeight:{defaultValue:{value:"true"},description:"Whether the drawer is full height",name:"isFullHeight",required:!1,type:{name:"boolean"}},clickOutToClose:{defaultValue:{value:"false"},description:"Should the drawer close when clicking outside",name:"clickOutToClose",required:!1,type:{name:"boolean"}},hideDismissIcon:{defaultValue:null,description:"Should we hide the dismiss icon",name:"hideDismissIcon",required:!1,type:{name:"boolean"}},customClass:{defaultValue:{value:""},description:"Custom class to be added to the drawer",name:"customClass",required:!1,type:{name:"string"}},onDismiss:{defaultValue:null,description:"Function to be called when the drawer is dismissed",name:"onDismiss",required:!1,type:{name:"(() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Drawer/Drawer.tsx#Drawer"]={docgenInfo:Drawer.__docgenInfo,name:"Drawer",path:"src/components/Drawer/Drawer.tsx#Drawer"})}catch(__react_docgen_typescript_loader_error){}const Drawer_stories={title:"Components/Drawer",component:Drawer_Drawer,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:function Render(props){const[{isOpen},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Button.$,{variant:"primary",onClick:()=>updateArgs({isOpen:!0}),children:"Open Drawer"}),(0,jsx_runtime.jsxs)(Drawer_Drawer,{...props,isOpen,onDismiss:()=>{updateArgs({isOpen:!1})},children:[(0,jsx_runtime.jsxs)(styles.Wu,{children:[(0,jsx_runtime.jsx)(styles.ZB,{children:"Title goes here"}),(0,jsx_runtime.jsx)(styles.BT,{children:"This is a small description"}),(0,jsx_runtime.jsx)(styles.c5,{children:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, dolore excepturi velit ut, ea earum ipsum aspernatur modi ex ipsa repudiandae eaque amet sequi eligendi deserunt libero nobis asperiores necessitatibus!"})]}),(0,jsx_runtime.jsxs)(styles.w,{children:[(0,jsx_runtime.jsx)(Button.$,{variant:"secondary",onClick:()=>updateArgs({isOpen:!1}),children:"Close"}),(0,jsx_runtime.jsx)(Button.$,{variant:"primary",onClick:()=>updateArgs({isOpen:!1}),children:"Ok"})]})]})]})},args:{isOpen:!1}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:'{\n  render: function Render(props) {\n    const [{\n      isOpen\n    }, updateArgs] = useArgs();\n    return <>\n        <Button variant="primary" onClick={() => updateArgs({\n        isOpen: true\n      })}>\n          Open Drawer\n        </Button>\n        <Drawer {...props} isOpen={isOpen} onDismiss={() => {\n        updateArgs({\n          isOpen: false\n        });\n      }}>\n          <CardContent>\n            <CardTitle>Title goes here</CardTitle>\n            <CardDescription>This is a small description</CardDescription>\n            <CardText>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta,\n              dolore excepturi velit ut, ea earum ipsum aspernatur modi ex ipsa\n              repudiandae eaque amet sequi eligendi deserunt libero nobis\n              asperiores necessitatibus!\n            </CardText>\n          </CardContent>\n          <CardActions>\n            <Button variant="secondary" onClick={() => updateArgs({\n            isOpen: false\n          })}>\n              Close\n            </Button>\n            <Button variant="primary" onClick={() => updateArgs({\n            isOpen: false\n          })}>\n              Ok\n            </Button>\n          </CardActions>\n        </Drawer>\n      </>;\n  },\n  args: {\n    isOpen: false\n  }\n}',...Primary.parameters?.docs?.source}}}},"./src/components/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Button_Button});var react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const ButtonSizeMap={large:{height:"45px",size:"16px"},mini:{height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}};var _templateObject;const StyledButton=styled_components_browser_esm.Ay.button(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  font-weight: ",";\n  font-family: ",";\n  border-radius: 4px;\n  display: ",";\n  border: 1px solid\n    ",";\n  background: linear-gradient(\n    180deg,\n    ","\n      2.56%,\n    ","\n      95.75%\n  );\n  color: ",";\n  height: ",";\n  line-height: 1.3;\n  font-size: ",";\n  cursor: ",";\n  white-space: nowrap;\n  padding: 0 12px;\n  &:hover {\n    background: ",";\n  }\n  &:active {\n    background: ",";\n    border-color: ",";\n  }\n  &:disabled {\n    color: ",";\n    border-color: ",";\n    background: linear-gradient(\n      180deg,\n      ","\n        4.39%,\n      ","\n        94.46%\n    );\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontWeight["semi-bold"]}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{$inline}=_ref4;return $inline?"inline-block":"block"}),(_ref5=>{let{theme,$variant}=_ref5;return theme.components.button[$variant].borderColor}),(_ref6=>{let{theme,$variant}=_ref6;return theme.components.button[$variant].backgroundFrom}),(_ref7=>{let{theme,$variant}=_ref7;return theme.components.button[$variant].backgroundTo}),(_ref8=>{let{theme,$variant}=_ref8;return theme.components.button[$variant].color}),(_ref9=>{let{$size}=_ref9;return ButtonSizeMap[$size].height}),(_ref10=>{let{$size}=_ref10;return ButtonSizeMap[$size].size}),(_ref11=>{let{disabled}=_ref11;return disabled?"not-allowed":"pointer"}),(_ref12=>{let{theme,$variant}=_ref12;return theme.components.button[$variant].hoverColor}),(_ref13=>{let{theme,$variant}=_ref13;return theme.components.button[$variant].activeBackgroundColor}),(_ref14=>{let{theme,$variant}=_ref14;return theme.components.button[$variant].activeBorderColor}),(_ref15=>{let{theme,$variant}=_ref15;return theme.components.button[$variant].disabledColor}),(_ref16=>{let{theme,$variant}=_ref16;return theme.components.button[$variant].disabledBorderColor}),(_ref17=>{let{theme,$variant}=_ref17;return theme.components.button[$variant].disabledBackgroundFrom}),(_ref18=>{let{theme,$variant}=_ref18;return theme.components.button[$variant].disabledBackgroundTo}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=react.forwardRef(((_ref,forwardedRef)=>{let{size="normal",variant="primary",children="",loading=!1,inline=!0,...props}=_ref;return react.useEffect((()=>{"string"==typeof children||props["aria-label"]||console.warn("The `aria-label` prop is required when the children of the Button are not a string. This is to ensure that assistive technologies can announce the content of the button. Please provide a valid `aria-describedby` prop to the Button component.")}),[]),(0,jsx_runtime.jsx)(StyledButton,{$size:size,$variant:variant,$inline:inline,disabled:props.disabled||loading,"aria-disabled":props.disabled||loading,"aria-label":"string"==typeof children?children:void 0,role:"button",...props,ref:forwardedRef,children:loading?(0,jsx_runtime.jsx)(Loader,{}):children})})),Loader=()=>(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:"..."}),Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"Button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.",displayName:"Button",props:{size:{defaultValue:{value:"normal"},description:"The size of the button",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"mini"'},{value:'"normal"'}]}},variant:{defaultValue:{value:"primary"},description:"The variant of the button",name:"variant",required:!1,type:{name:"enum",value:[{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"danger"'}]}},children:{defaultValue:{value:""},description:"The children to be displayed in the button",name:"children",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:{value:"false"},description:"Whether the button is loading",name:"loading",required:!1,type:{name:"boolean"}},inline:{defaultValue:{value:"true"},description:"Whether the button is inline",name:"inline",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>_Button__WEBPACK_IMPORTED_MODULE_0__.A});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Button/Button.tsx")}}]);

package/storybook-static/{stories-Input-stories.b7b880e6.iframe.bundle.js → stories-Input-stories.b3b16ad8.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[27669],{"./src/stories/Input.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _components_Input__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Input/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Input",component:_components_Input__WEBPACK_IMPORTED_MODULE_1__.p,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components_Input__WEBPACK_IMPORTED_MODULE_1__.p,{...props}),args:{forceInputDir:"ltr",label:"First Name",placeholder:"Enter your first name",isRequired:!1,isErrored:!1,disabled:!1,startLabel:"https://",endLabel:".com"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: props => <Input {...props} />,\n  args: {\n    forceInputDir: 'ltr',\n    label: 'First Name',\n    placeholder: 'Enter your first name',\n    isRequired: false,\n    isErrored: false,\n    disabled: false,\n    // startAdornment: 'https://',\n    // endAdornment: '.com',\n    startLabel: 'https://',\n    endLabel: '.com'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Input/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p:()=>Input_Input,f:()=>Input_TextArea});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,react=__webpack_require__("./node_modules/react/index.js"),styles=__webpack_require__("./src/styles/index.ts"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const StyledTextArea=styled_components_browser_esm.Ay.textarea(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  resize: none !important;\n  border: unset;\n  outline: unset;\n  padding: unset;\n  margin: unset;\n  box-shadow: none !important;\n  line-height: ",";\n  font-weight: ",";\n  font-size: ",";\n  font-family: ",";\n  background-color: ",";\n  color: ",";\n  direction: "," !important;\n  &::placeholder {\n    font-family: ",";\n    font-size: ",";\n    color: ",";\n  }\n  &:focus,\n  &:active {\n    box-shadow: none !important;\n  }\n  &:disabled {\n    // background-color: ",";\n    // color: ",";\n    opacity: 0.6;\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.typography.primary.lineHeight}),(_ref2=>{let{theme}=_ref2;return theme.typography.primary.fontWeight}),(_ref3=>{let{theme}=_ref3;return theme.typography.primary.fontSize}),(_ref4=>{let{theme}=_ref4;return theme.typography.fontFamily}),(_ref5=>{let{theme}=_ref5;return theme.colors.fill.surface}),(_ref6=>{let{theme}=_ref6;return theme.colors.text.primary}),(_ref7=>{let{theme,$forceInputDir}=_ref7;return $forceInputDir||theme.direction}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontFamily}),(_ref9=>{let{theme}=_ref9;return theme.typography.primary.fontSize}),(_ref10=>{let{theme}=_ref10;return theme.colors.text.placeholder}),(_ref11=>{let{theme}=_ref11;return theme.colors.fill.disabled}),(_ref12=>{let{theme}=_ref12;return theme.colors.text.disabled})),StyledInput=styled_components_browser_esm.Ay.input(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  flex: 1;\n  border: unset;\n  outline: unset;\n  padding: unset;\n  margin: unset;\n  line-height: ",";\n  font-weight: ",";\n  font-size: ",";\n  font-family: ",";\n  background-color: ",";\n  color: ",";\n  direction: "," !important;\n  &::placeholder {\n    font-family: ",";\n    font-size: ",";\n    color: ",";\n  }\n  &:disabled {\n    // background-color: ",";\n    // color: ",";\n    opacity: 0.6;\n  }\n"])),(_ref13=>{let{theme}=_ref13;return theme.typography.primary.lineHeight}),(_ref14=>{let{theme}=_ref14;return theme.typography.primary.fontWeight}),(_ref15=>{let{theme}=_ref15;return theme.typography.primary.fontSize}),(_ref16=>{let{theme}=_ref16;return theme.typography.fontFamily}),(_ref17=>{let{theme}=_ref17;return theme.colors.fill.surface}),(_ref18=>{let{theme}=_ref18;return theme.colors.text.primary}),(_ref19=>{let{theme,$forceInputDir}=_ref19;return $forceInputDir||theme.direction}),(_ref20=>{let{theme}=_ref20;return theme.typography.fontFamily}),(_ref21=>{let{theme}=_ref21;return theme.typography.primary.fontSize}),(_ref22=>{let{theme}=_ref22;return theme.colors.text.placeholder}),(_ref23=>{let{theme}=_ref23;return theme.colors.fill.disabled}),(_ref24=>{let{theme}=_ref24;return theme.colors.text.disabled})),StyledInputHolder=styled_components_browser_esm.Ay.div(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  display: flex;\n  flex: 1;\n  gap: 4px;\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  direction: "," !important;\n  div.end-adornment {\n    display: grid;\n    place-content: center;\n  }\n  div.start-adornment {\n    display: grid;\n    place-content: center;\n  }\n  div.end-max-length {\n    text-align: "," !important;\n  }\n"])),(_ref25=>{let{theme}=_ref25;return theme.typography.fontFamily}),(_ref26=>{let{theme}=_ref26;return theme.typography.primary.fontSize}),(_ref27=>{let{theme}=_ref27;return theme.typography.primary.lineHeight}),(_ref28=>{let{theme}=_ref28;return theme.colors.text.primary}),(_ref29=>{let{theme,$forceInputDir}=_ref29;return $forceInputDir||theme.direction}),(_ref30=>{let{theme,$forceInputDir}=_ref30;return"rtl"===($forceInputDir||theme.direction)?"left":"right"})),EndMaxLength=styled_components_browser_esm.Ay.div(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  font-size: ",";\n  margin-left: 4px;\n  align-self: ",";\n  direction: ",";\n"])),(_ref31=>{let{theme}=_ref31;return theme.typography.secondary.fontSize}),(_ref32=>{let{isTa}=_ref32;return isTa?"flex-end":"center"}),(_ref33=>{let{theme}=_ref33;return theme.direction})),StyledInputContainer=styled_components_browser_esm.Ay.div(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  padding: 6px 12px;\n  display: flex;\n  border: 1px solid\n    ",";\n  background-color: ",";\n  border-radius: 4px;\n  transition: all 0.2s ease-in-out;\n  direction: "," !important;\n  &:hover {\n    border-color: ",";\n  }\n  &:focus-within {\n    box-shadow: ","\n      0px 0px 0px 1px;\n    border-color: ",";\n  }\n"])),(_ref34=>{let{theme,$isErrored}=_ref34;return $isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref35=>{let{theme}=_ref35;return theme.colors.fill.surface}),(_ref36=>{let{theme,$forceInputDir}=_ref36;return $forceInputDir||theme.direction}),(_ref37=>{let{theme,disabled,$isErrored}=_ref37;return disabled?theme.colors.border.normal:$isErrored?theme.colors.border.error:theme.colors.border.hover}),(_ref38=>{let{theme,$isErrored}=_ref38;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref39=>{let{theme,$isErrored}=_ref39;return $isErrored?theme.colors.border.error:theme.colors.border.active})),StyledInputBase=styled_components_browser_esm.Ay.div(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)(["\n  display: ",";\n  direction: ",";\n  label.input-label {\n    margin: 0 2px 4px 2px;\n  }\n  span.input-helper {\n    margin: 2px 2px 0 2px;\n    display: block;\n  }\n"])),(_ref40=>{let{$inline}=_ref40;return $inline?"inline-block":"block"}),(_ref41=>{let{theme}=_ref41;return theme.direction}));var ErrorText=__webpack_require__("./src/global/ErrorText/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Input=react.forwardRef(((_ref,forwardedRef)=>{let{label,inline,startLabel,startAdornment,endLabel,endAdornment,isRequired,isErrored,showCount,inputStyle,style,errorText,maxLength,labelProps,containerProps,forceInputDir,...props}=_ref;return(0,jsx_runtime.jsxs)(StyledInputBase,{$inline:inline,$isErrored:isErrored,disabled:props.disabled,style,children:[label&&(0,jsx_runtime.jsxs)(styles.Gw,{htmlFor:props.id,className:"input-label",...labelProps,children:[label,label&&isRequired&&(0,jsx_runtime.jsx)(styles.Tr,{children:"*"})]}),(0,jsx_runtime.jsxs)(StyledInputContainer,{className:"input-container",disabled:props.disabled,$isErrored:isErrored,...containerProps,$forceInputDir:forceInputDir,children:[startLabel&&(0,jsx_runtime.jsx)("div",{className:"start-label",children:startLabel}),(0,jsx_runtime.jsxs)(StyledInputHolder,{className:"input-basic",$forceInputDir:forceInputDir,children:[startAdornment&&(0,jsx_runtime.jsx)("div",{className:"start-adornment",children:startAdornment}),(0,jsx_runtime.jsx)(StyledInput,{maxLength,...props,"aria-invalid":isErrored,ref:forwardedRef,style:inputStyle,$forceInputDir:forceInputDir}),showCount&&(maxLength||0)>0&&(0,jsx_runtime.jsx)("div",{className:"end-max-length",children:"".concat("string"==typeof props.value?props.value.length:"".concat(props.value||"").length,"/").concat(maxLength||0)}),endAdornment&&(0,jsx_runtime.jsx)("div",{className:"end-adornment",children:endAdornment})]}),endLabel&&(0,jsx_runtime.jsx)("div",{className:"end-label",children:endLabel})]}),isErrored&&errorText&&(0,jsx_runtime.jsx)(ErrorText.y,{children:errorText})]})})),Input_Input=Input;try{Input.displayName="Input",Input.__docgenInfo={description:"Input displays a single-line input box on the user interface and enables assigning a value to it. It is used to take user input for small text data.",displayName:"Input",props:{id:{defaultValue:null,description:"Id of the button",name:"id",required:!1,type:{name:"string"}},inline:{defaultValue:null,description:"Label of the button",name:"inline",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"Id of the button",name:"label",required:!1,type:{name:"string"}},isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},startLabel:{defaultValue:null,description:"",name:"startLabel",required:!1,type:{name:"any"}},startAdornment:{defaultValue:null,description:"",name:"startAdornment",required:!1,type:{name:"any"}},endLabel:{defaultValue:null,description:"",name:"endLabel",required:!1,type:{name:"any"}},endAdornment:{defaultValue:null,description:"",name:"endAdornment",required:!1,type:{name:"any"}},showCount:{defaultValue:null,description:"Whether to show character count",name:"showCount",required:!1,type:{name:"boolean"}},inputStyle:{defaultValue:null,description:"",name:"inputStyle",required:!1,type:{name:"CSSProperties"}},maxLength:{defaultValue:null,description:"The max length of the input",name:"maxLength",required:!1,type:{name:"number"}},forceInputDir:{defaultValue:null,description:"",name:"forceInputDir",required:!1,type:{name:"enum",value:[{value:'"ltr"'},{value:'"rtl"'}]}},labelProps:{defaultValue:null,description:"",name:"labelProps",required:!1,type:{name:"LabelProps"}},containerProps:{defaultValue:null,description:"",name:"containerProps",required:!1,type:{name:"HTMLAttributes<HTMLDivElement>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.tsx#Input"]={docgenInfo:Input.__docgenInfo,name:"Input",path:"src/components/Input/Input.tsx#Input"})}catch(__react_docgen_typescript_loader_error){}const TextArea=react.forwardRef(((_ref,ref)=>{let{label,inline,startLabel,startAdornment,endLabel,endAdornment,isRequired,isErrored,showCount,inputStyle,style,errorText,maxLength,forceInputDir,...props}=_ref;return(0,jsx_runtime.jsxs)(StyledInputBase,{$inline:inline,$isErrored:isErrored,disabled:props.disabled,style,children:[(0,jsx_runtime.jsxs)(styles.Gw,{htmlFor:props.id,className:"input-label",children:[label,label&&isRequired&&(0,jsx_runtime.jsx)(styles.Tr,{children:"*"})]}),(0,jsx_runtime.jsxs)(StyledInputContainer,{className:"input-container",disabled:props.disabled,$isErrored:isErrored,children:[startLabel&&(0,jsx_runtime.jsx)("div",{className:"start-label",children:startLabel}),(0,jsx_runtime.jsxs)(StyledInputHolder,{className:"input-basic",style:{flexDirection:"column"},$forceInputDir:forceInputDir,children:[startAdornment&&(0,jsx_runtime.jsx)("div",{className:"start-adornment",children:startAdornment}),(0,jsx_runtime.jsx)(StyledTextArea,{maxLength,...props,"aria-invalid":isErrored,ref,style:inputStyle,$forceInputDir:forceInputDir}),showCount&&(maxLength||0)>0&&(0,jsx_runtime.jsx)(EndMaxLength,{isTa:!0,className:"end-max-length",children:"".concat("string"==typeof props.value?props.value.length:"".concat(props.value||"").length,"/").concat(maxLength||0)}),endAdornment&&(0,jsx_runtime.jsx)("div",{className:"end-adornment",children:endAdornment})]}),endLabel&&(0,jsx_runtime.jsx)("div",{className:"end-label",children:endLabel})]}),isErrored&&errorText&&(0,jsx_runtime.jsx)(ErrorText.y,{children:errorText})]})})),Input_TextArea=TextArea;try{TextArea.displayName="TextArea",TextArea.__docgenInfo={description:"TextArea displays a multi-line input box on the user interface and enables assigning a value to it. It is used to take user input for large text data.",displayName:"TextArea",props:{id:{defaultValue:null,description:"Id of the button",name:"id",required:!1,type:{name:"string"}},inline:{defaultValue:null,description:"Label of the button",name:"inline",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"Id of the button",name:"label",required:!1,type:{name:"string"}},isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},startLabel:{defaultValue:null,description:"",name:"startLabel",required:!1,type:{name:"any"}},startAdornment:{defaultValue:null,description:"",name:"startAdornment",required:!1,type:{name:"any"}},endLabel:{defaultValue:null,description:"",name:"endLabel",required:!1,type:{name:"any"}},endAdornment:{defaultValue:null,description:"",name:"endAdornment",required:!1,type:{name:"any"}},showCount:{defaultValue:null,description:"Whether to show character count",name:"showCount",required:!1,type:{name:"boolean"}},inputStyle:{defaultValue:null,description:"",name:"inputStyle",required:!1,type:{name:"CSSProperties"}},maxLength:{defaultValue:null,description:"The max length of the input",name:"maxLength",required:!1,type:{name:"number"}},forceInputDir:{defaultValue:null,description:"",name:"forceInputDir",required:!1,type:{name:"enum",value:[{value:'"ltr"'},{value:'"rtl"'}]}},labelProps:{defaultValue:null,description:"",name:"labelProps",required:!1,type:{name:"LabelProps"}},containerProps:{defaultValue:null,description:"",name:"containerProps",required:!1,type:{name:"HTMLAttributes<HTMLDivElement>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/TextArea.tsx#TextArea"]={docgenInfo:TextArea.__docgenInfo,name:"TextArea",path:"src/components/Input/TextArea.tsx#TextArea"})}catch(__react_docgen_typescript_loader_error){}},"./src/global/ErrorText/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{y:()=>ErrorText_ErrorText});var _templateObject,taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js")),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const StyledErrorText=styled_components_browser_esm.Ay.span(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  color: ",";\n  font-family: ",";\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 20px;\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.colors.text.error}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily})),ErrorText=props=>{var _props$className;return(0,jsx_runtime.jsx)(StyledErrorText,{"aria-live":"polite",role:"status",...props,className:"input-helper ".concat(null!==(_props$className=props.className)&&void 0!==_props$className?_props$className:"").trim(),children:props.children})},ErrorText_ErrorText=ErrorText;try{StyledErrorText.displayName="StyledErrorText",StyledErrorText.__docgenInfo={description:"",displayName:"StyledErrorText",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"void | WebTarget"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"void | WebTarget"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/global/ErrorText/ErrorText.tsx#StyledErrorText"]={docgenInfo:StyledErrorText.__docgenInfo,name:"StyledErrorText",path:"src/global/ErrorText/ErrorText.tsx#StyledErrorText"})}catch(__react_docgen_typescript_loader_error){}try{ErrorText.displayName="ErrorText",ErrorText.__docgenInfo={description:"ErrorText is a component that displays an error message on the user interface.",displayName:"ErrorText",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/global/ErrorText/ErrorText.tsx#ErrorText"]={docgenInfo:ErrorText.__docgenInfo,name:"ErrorText",path:"src/global/ErrorText/ErrorText.tsx#ErrorText"})}catch(__react_docgen_typescript_loader_error){}}}]);
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[27669],{"./src/stories/Input.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _components_Input__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Input/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Input",component:_components_Input__WEBPACK_IMPORTED_MODULE_1__.p,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components_Input__WEBPACK_IMPORTED_MODULE_1__.p,{...props}),args:{forceInputDir:"ltr",label:"First Name",placeholder:"Enter your first name",isRequired:!1,isErrored:!1,disabled:!1,startLabel:"https://",endLabel:".com"}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: props => <Input {...props} />,\n  args: {\n    forceInputDir: 'ltr',\n    label: 'First Name',\n    placeholder: 'Enter your first name',\n    isRequired: false,\n    isErrored: false,\n    disabled: false,\n    // startAdornment: 'https://',\n    // endAdornment: '.com',\n    startLabel: 'https://',\n    endLabel: '.com'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Input/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p:()=>Input_Input,f:()=>Input_TextArea});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,react=__webpack_require__("./node_modules/react/index.js"),styles=__webpack_require__("./src/styles/index.ts"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const StyledTextArea=styled_components_browser_esm.Ay.textarea(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  resize: none !important;\n  border: unset;\n  outline: unset;\n  padding: unset;\n  margin: unset;\n  box-shadow: none !important;\n  line-height: ",";\n  font-weight: ",";\n  font-size: ",";\n  font-family: ",";\n  background-color: ",";\n  color: ",";\n  direction: "," !important;\n  &::placeholder {\n    font-family: ",";\n    font-size: ",";\n    color: ",";\n  }\n  &:focus,\n  &:active {\n    box-shadow: none !important;\n  }\n  &:disabled {\n    // background-color: ",";\n    // color: ",";\n    opacity: 0.6;\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.typography.primary.lineHeight}),(_ref2=>{let{theme}=_ref2;return theme.typography.primary.fontWeight}),(_ref3=>{let{theme}=_ref3;return theme.typography.primary.fontSize}),(_ref4=>{let{theme}=_ref4;return theme.typography.fontFamily}),(_ref5=>{let{theme}=_ref5;return theme.colors.fill.surface}),(_ref6=>{let{theme}=_ref6;return theme.colors.text.primary}),(_ref7=>{let{theme,$forceInputDir}=_ref7;return $forceInputDir||theme.direction}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontFamily}),(_ref9=>{let{theme}=_ref9;return theme.typography.primary.fontSize}),(_ref10=>{let{theme}=_ref10;return theme.colors.text.placeholder}),(_ref11=>{let{theme}=_ref11;return theme.colors.fill.disabled}),(_ref12=>{let{theme}=_ref12;return theme.colors.text.disabled})),StyledInput=styled_components_browser_esm.Ay.input(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  flex: 1;\n  border: unset;\n  outline: unset;\n  padding: unset;\n  margin: unset;\n  line-height: ",";\n  font-weight: ",";\n  font-size: ",";\n  font-family: ",";\n  background-color: ",";\n  color: ",";\n  direction: "," !important;\n  &::placeholder {\n    font-family: ",";\n    font-size: ",";\n    color: ",";\n  }\n  &:disabled {\n    // background-color: ",";\n    // color: ",";\n    opacity: 0.6;\n  }\n"])),(_ref13=>{let{theme}=_ref13;return theme.typography.primary.lineHeight}),(_ref14=>{let{theme}=_ref14;return theme.typography.primary.fontWeight}),(_ref15=>{let{theme}=_ref15;return theme.typography.primary.fontSize}),(_ref16=>{let{theme}=_ref16;return theme.typography.fontFamily}),(_ref17=>{let{theme}=_ref17;return theme.colors.fill.surface}),(_ref18=>{let{theme}=_ref18;return theme.colors.text.primary}),(_ref19=>{let{theme,$forceInputDir}=_ref19;return $forceInputDir||theme.direction}),(_ref20=>{let{theme}=_ref20;return theme.typography.fontFamily}),(_ref21=>{let{theme}=_ref21;return theme.typography.primary.fontSize}),(_ref22=>{let{theme}=_ref22;return theme.colors.text.placeholder}),(_ref23=>{let{theme}=_ref23;return theme.colors.fill.disabled}),(_ref24=>{let{theme}=_ref24;return theme.colors.text.disabled})),StyledInputHolder=styled_components_browser_esm.Ay.div(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  display: flex;\n  flex: 1;\n  gap: 4px;\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  direction: "," !important;\n  div.end-adornment {\n    display: grid;\n    place-content: center;\n  }\n  div.start-adornment {\n    display: grid;\n    place-content: center;\n  }\n  div.end-max-length {\n    text-align: "," !important;\n  }\n"])),(_ref25=>{let{theme}=_ref25;return theme.typography.fontFamily}),(_ref26=>{let{theme}=_ref26;return theme.typography.primary.fontSize}),(_ref27=>{let{theme}=_ref27;return theme.typography.primary.lineHeight}),(_ref28=>{let{theme}=_ref28;return theme.colors.text.primary}),(_ref29=>{let{theme,$forceInputDir}=_ref29;return $forceInputDir||theme.direction}),(_ref30=>{let{theme,$forceInputDir}=_ref30;return"rtl"===($forceInputDir||theme.direction)?"left":"right"})),EndMaxLength=styled_components_browser_esm.Ay.div(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  font-size: ",";\n  margin-left: 4px;\n  align-self: ",";\n  direction: ",";\n"])),(_ref31=>{let{theme}=_ref31;return theme.typography.secondary.fontSize}),(_ref32=>{let{isTa}=_ref32;return isTa?"flex-end":"center"}),(_ref33=>{let{theme}=_ref33;return theme.direction})),StyledInputContainer=styled_components_browser_esm.Ay.div(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  padding: 6px 12px;\n  display: flex;\n  border: 1px solid\n    ",";\n  background-color: ",";\n  border-radius: 4px;\n  transition: all 0.2s ease-in-out;\n  direction: "," !important;\n  &:hover {\n    border-color: ",";\n  }\n  &:focus-within {\n    box-shadow: ","\n      0px 0px 0px 1px;\n    border-color: ",";\n  }\n"])),(_ref34=>{let{theme,$isErrored}=_ref34;return $isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref35=>{let{theme}=_ref35;return theme.colors.fill.surface}),(_ref36=>{let{theme,$forceInputDir}=_ref36;return $forceInputDir||theme.direction}),(_ref37=>{let{theme,disabled,$isErrored}=_ref37;return disabled?theme.colors.border.normal:$isErrored?theme.colors.border.error:theme.colors.border.hover}),(_ref38=>{let{theme,$isErrored}=_ref38;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref39=>{let{theme,$isErrored}=_ref39;return $isErrored?theme.colors.border.error:theme.colors.border.active})),StyledInputBase=styled_components_browser_esm.Ay.div(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)(["\n  display: ",";\n  direction: ",";\n  label.input-label {\n    margin: 0 2px 4px 2px;\n  }\n  span.input-helper {\n    margin: 2px 2px 0 2px;\n    display: block;\n  }\n"])),(_ref40=>{let{$inline}=_ref40;return $inline?"inline-block":"block"}),(_ref41=>{let{theme}=_ref41;return theme.direction}));var ErrorText=__webpack_require__("./src/global/ErrorText/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Input=react.forwardRef(((_ref,forwardedRef)=>{let{label,inline,startLabel,startAdornment,endLabel,endAdornment,isRequired,isErrored,showCount,inputStyle,style,errorText,maxLength,labelProps,containerProps,forceInputDir,...props}=_ref;return(0,jsx_runtime.jsxs)(StyledInputBase,{$inline:inline,$isErrored:isErrored,disabled:props.disabled,style,children:[label&&(0,jsx_runtime.jsxs)(styles.Gw,{htmlFor:props.id,className:"input-label",...labelProps,children:[label,label&&isRequired&&(0,jsx_runtime.jsx)(styles.Tr,{children:"*"})]}),(0,jsx_runtime.jsxs)(StyledInputContainer,{className:"input-container",disabled:props.disabled,$isErrored:isErrored,...containerProps,$forceInputDir:forceInputDir,children:[startLabel&&(0,jsx_runtime.jsx)("div",{className:"start-label",children:startLabel}),(0,jsx_runtime.jsxs)(StyledInputHolder,{className:"input-basic",$forceInputDir:forceInputDir,children:[startAdornment&&(0,jsx_runtime.jsx)("div",{className:"start-adornment",children:startAdornment}),(0,jsx_runtime.jsx)(StyledInput,{maxLength,...props,"aria-invalid":isErrored,ref:forwardedRef,style:inputStyle,$forceInputDir:forceInputDir}),showCount&&(maxLength||0)>0&&(0,jsx_runtime.jsx)("div",{className:"end-max-length",children:"".concat("string"==typeof props.value?props.value.length:"".concat(props.value||"").length,"/").concat(maxLength||0)}),endAdornment&&(0,jsx_runtime.jsx)("div",{className:"end-adornment",children:endAdornment})]}),endLabel&&(0,jsx_runtime.jsx)("div",{className:"end-label",children:endLabel})]}),isErrored&&errorText&&(0,jsx_runtime.jsx)(ErrorText.y,{children:errorText})]})})),Input_Input=Input;try{Input.displayName="Input",Input.__docgenInfo={description:"Input displays a single-line input box on the user interface and enables assigning a value to it. It is used to take user input for small text data.",displayName:"Input",props:{id:{defaultValue:null,description:"Id of the button",name:"id",required:!1,type:{name:"string"}},inline:{defaultValue:null,description:"Label of the button",name:"inline",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"Id of the button",name:"label",required:!1,type:{name:"string"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},startLabel:{defaultValue:null,description:"",name:"startLabel",required:!1,type:{name:"any"}},startAdornment:{defaultValue:null,description:"",name:"startAdornment",required:!1,type:{name:"any"}},endLabel:{defaultValue:null,description:"",name:"endLabel",required:!1,type:{name:"any"}},endAdornment:{defaultValue:null,description:"",name:"endAdornment",required:!1,type:{name:"any"}},showCount:{defaultValue:null,description:"Whether to show character count",name:"showCount",required:!1,type:{name:"boolean"}},inputStyle:{defaultValue:null,description:"",name:"inputStyle",required:!1,type:{name:"CSSProperties"}},maxLength:{defaultValue:null,description:"The max length of the input",name:"maxLength",required:!1,type:{name:"number"}},forceInputDir:{defaultValue:null,description:"",name:"forceInputDir",required:!1,type:{name:"enum",value:[{value:'"ltr"'},{value:'"rtl"'}]}},labelProps:{defaultValue:null,description:"",name:"labelProps",required:!1,type:{name:"LabelProps"}},containerProps:{defaultValue:null,description:"",name:"containerProps",required:!1,type:{name:"HTMLAttributes<HTMLDivElement>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.tsx#Input"]={docgenInfo:Input.__docgenInfo,name:"Input",path:"src/components/Input/Input.tsx#Input"})}catch(__react_docgen_typescript_loader_error){}const TextArea=react.forwardRef(((_ref,ref)=>{let{label,inline,startLabel,startAdornment,endLabel,endAdornment,isRequired,isErrored,showCount,inputStyle,style,errorText,maxLength,forceInputDir,...props}=_ref;return(0,jsx_runtime.jsxs)(StyledInputBase,{$inline:inline,$isErrored:isErrored,disabled:props.disabled,style,children:[(0,jsx_runtime.jsxs)(styles.Gw,{htmlFor:props.id,className:"input-label",children:[label,label&&isRequired&&(0,jsx_runtime.jsx)(styles.Tr,{children:"*"})]}),(0,jsx_runtime.jsxs)(StyledInputContainer,{className:"input-container",disabled:props.disabled,$isErrored:isErrored,children:[startLabel&&(0,jsx_runtime.jsx)("div",{className:"start-label",children:startLabel}),(0,jsx_runtime.jsxs)(StyledInputHolder,{className:"input-basic",style:{flexDirection:"column"},$forceInputDir:forceInputDir,children:[startAdornment&&(0,jsx_runtime.jsx)("div",{className:"start-adornment",children:startAdornment}),(0,jsx_runtime.jsx)(StyledTextArea,{maxLength,...props,"aria-invalid":isErrored,ref,style:inputStyle,$forceInputDir:forceInputDir}),showCount&&(maxLength||0)>0&&(0,jsx_runtime.jsx)(EndMaxLength,{isTa:!0,className:"end-max-length",children:"".concat("string"==typeof props.value?props.value.length:"".concat(props.value||"").length,"/").concat(maxLength||0)}),endAdornment&&(0,jsx_runtime.jsx)("div",{className:"end-adornment",children:endAdornment})]}),endLabel&&(0,jsx_runtime.jsx)("div",{className:"end-label",children:endLabel})]}),isErrored&&errorText&&(0,jsx_runtime.jsx)(ErrorText.y,{children:errorText})]})})),Input_TextArea=TextArea;try{TextArea.displayName="TextArea",TextArea.__docgenInfo={description:"TextArea displays a multi-line input box on the user interface and enables assigning a value to it. It is used to take user input for large text data.",displayName:"TextArea",props:{id:{defaultValue:null,description:"Id of the button",name:"id",required:!1,type:{name:"string"}},inline:{defaultValue:null,description:"Label of the button",name:"inline",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"Id of the button",name:"label",required:!1,type:{name:"string"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},isRequired:{defaultValue:null,description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},startLabel:{defaultValue:null,description:"",name:"startLabel",required:!1,type:{name:"any"}},startAdornment:{defaultValue:null,description:"",name:"startAdornment",required:!1,type:{name:"any"}},endLabel:{defaultValue:null,description:"",name:"endLabel",required:!1,type:{name:"any"}},endAdornment:{defaultValue:null,description:"",name:"endAdornment",required:!1,type:{name:"any"}},showCount:{defaultValue:null,description:"Whether to show character count",name:"showCount",required:!1,type:{name:"boolean"}},inputStyle:{defaultValue:null,description:"",name:"inputStyle",required:!1,type:{name:"CSSProperties"}},maxLength:{defaultValue:null,description:"The max length of the input",name:"maxLength",required:!1,type:{name:"number"}},forceInputDir:{defaultValue:null,description:"",name:"forceInputDir",required:!1,type:{name:"enum",value:[{value:'"ltr"'},{value:'"rtl"'}]}},labelProps:{defaultValue:null,description:"",name:"labelProps",required:!1,type:{name:"LabelProps"}},containerProps:{defaultValue:null,description:"",name:"containerProps",required:!1,type:{name:"HTMLAttributes<HTMLDivElement>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/TextArea.tsx#TextArea"]={docgenInfo:TextArea.__docgenInfo,name:"TextArea",path:"src/components/Input/TextArea.tsx#TextArea"})}catch(__react_docgen_typescript_loader_error){}},"./src/global/ErrorText/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{y:()=>ErrorText_ErrorText});var _templateObject,taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js")),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const StyledErrorText=styled_components_browser_esm.Ay.span(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  color: ",";\n  font-family: ",";\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 20px;\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.colors.text.error}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily})),ErrorText=props=>{var _props$className;return(0,jsx_runtime.jsx)(StyledErrorText,{"aria-live":"polite",role:"status",...props,className:"input-helper ".concat(null!==(_props$className=props.className)&&void 0!==_props$className?_props$className:"").trim(),children:props.children})},ErrorText_ErrorText=ErrorText;try{StyledErrorText.displayName="StyledErrorText",StyledErrorText.__docgenInfo={description:"",displayName:"StyledErrorText",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"void | WebTarget"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"void | WebTarget"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/global/ErrorText/ErrorText.tsx#StyledErrorText"]={docgenInfo:StyledErrorText.__docgenInfo,name:"StyledErrorText",path:"src/global/ErrorText/ErrorText.tsx#StyledErrorText"})}catch(__react_docgen_typescript_loader_error){}try{ErrorText.displayName="ErrorText",ErrorText.__docgenInfo={description:"ErrorText is a component that displays an error message on the user interface.",displayName:"ErrorText",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/global/ErrorText/ErrorText.tsx#ErrorText"]={docgenInfo:ErrorText.__docgenInfo,name:"ErrorText",path:"src/global/ErrorText/ErrorText.tsx#ErrorText"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/storybook-static/stories-Menu-stories.ffa097b6.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[48190],{"./src/stories/Menu.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CustomRenderer:()=>CustomRenderer,Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _components_Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Button/index.ts"),_components_Menu__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Menu/index.ts"),_components_Typography__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Typography/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Menu",component:_components_Menu__WEBPACK_IMPORTED_MODULE_2__.W1,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Menu__WEBPACK_IMPORTED_MODULE_2__.W1,{...props}),args:{side:"bottom",align:"center",trigger:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{tabIndex:-1,variant:"primary",children:"Open Menu"}),value:{id:"2",name:"Option 2"},showArrow:!0,options:[{id:"1",name:"Option 1"},{id:"2",name:"Option 2 Selected"},{id:"3",name:"Option 3"},{id:"4",name:"Option Disabled",disabled:!0},{id:"5",name:"Option 2"},{id:"6",name:"Option 3"}]}},CustomRenderer={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Menu__WEBPACK_IMPORTED_MODULE_2__.W1,{...props}),args:{side:"bottom",align:"center",trigger:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{tabIndex:-1,variant:"primary",children:"Open Menu"}),itemComponent:(item,props)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_components_Menu__WEBPACK_IMPORTED_MODULE_2__.DB,{...props,style:{fontFamily:"sans-serif",padding:"5px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"8px"},children:[item.name,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Typography__WEBPACK_IMPORTED_MODULE_3__.o,{children:item.name.slice(0,1)})]}),value:{id:"2",name:"Option 2"},showArrow:!0,options:[{id:"1",name:"Option 1"},{id:"2",name:"Option 2 Selected"},{id:"3",name:"Option 3"},{id:"4",name:"Option Disabled",disabled:!0},{id:"5",name:"Option 2"},{id:"6",name:"Option 3"}]}},__namedExportsOrder=["Primary","CustomRenderer"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: props => <Menu {...props} />,\n  args: {\n    side: 'bottom',\n    align: 'center',\n    trigger: <Button tabIndex={-1} variant=\"primary\">\n        Open Menu\n      </Button>,\n    value: {\n      id: '2',\n      name: 'Option 2'\n    },\n    showArrow: true,\n    options: [{\n      id: '1',\n      name: 'Option 1'\n    }, {\n      id: '2',\n      name: 'Option 2 Selected'\n    }, {\n      id: '3',\n      name: 'Option 3'\n    }, {\n      id: '4',\n      name: 'Option Disabled',\n      disabled: true\n    }, {\n      id: '5',\n      name: 'Option 2'\n    }, {\n      id: '6',\n      name: 'Option 3'\n    }]\n  }\n}",...Primary.parameters?.docs?.source}}},CustomRenderer.parameters={...CustomRenderer.parameters,docs:{...CustomRenderer.parameters?.docs,source:{originalSource:"{\n  render: props => <Menu {...props} />,\n  args: {\n    side: 'bottom',\n    align: 'center',\n    trigger: <Button tabIndex={-1} variant=\"primary\">\n        Open Menu\n      </Button>,\n    itemComponent: (item, props) => <RadixMenuItem {...props} style={{\n      fontFamily: 'sans-serif',\n      padding: '5px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: '8px'\n    }}>\n        {item.name}\n        <Typography>{(item.name as string).slice(0, 1)}</Typography>\n      </RadixMenuItem>,\n    value: {\n      id: '2',\n      name: 'Option 2'\n    },\n    showArrow: true,\n    options: [{\n      id: '1',\n      name: 'Option 1'\n    }, {\n      id: '2',\n      name: 'Option 2 Selected'\n    }, {\n      id: '3',\n      name: 'Option 3'\n    }, {\n      id: '4',\n      name: 'Option Disabled',\n      disabled: true\n    }, {\n      id: '5',\n      name: 'Option 2'\n    }, {\n      id: '6',\n      name: 'Option 3'\n    }]\n  }\n}",...CustomRenderer.parameters?.docs?.source}}}},"./src/components/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Button_Button});var react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const ButtonSizeMap={large:{height:"45px",size:"16px"},mini:{height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}};var _templateObject;const StyledButton=styled_components_browser_esm.Ay.button(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  font-weight: ",";\n  font-family: ",";\n  border-radius: 4px;\n  display: ",";\n  border: 1px solid\n    ",";\n  background: linear-gradient(\n    180deg,\n    ","\n      2.56%,\n    ","\n      95.75%\n  );\n  color: ",";\n  height: ",";\n  line-height: 1.3;\n  font-size: ",";\n  cursor: ",";\n  white-space: nowrap;\n  padding: 0 12px;\n  &:hover {\n    background: ",";\n  }\n  &:active {\n    background: ",";\n    border-color: ",";\n  }\n  &:disabled {\n    color: ",";\n    border-color: ",";\n    background: linear-gradient(\n      180deg,\n      ","\n        4.39%,\n      ","\n        94.46%\n    );\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontWeight["semi-bold"]}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{$inline}=_ref4;return $inline?"inline-block":"block"}),(_ref5=>{let{theme,$variant}=_ref5;return theme.components.button[$variant].borderColor}),(_ref6=>{let{theme,$variant}=_ref6;return theme.components.button[$variant].backgroundFrom}),(_ref7=>{let{theme,$variant}=_ref7;return theme.components.button[$variant].backgroundTo}),(_ref8=>{let{theme,$variant}=_ref8;return theme.components.button[$variant].color}),(_ref9=>{let{$size}=_ref9;return ButtonSizeMap[$size].height}),(_ref10=>{let{$size}=_ref10;return ButtonSizeMap[$size].size}),(_ref11=>{let{disabled}=_ref11;return disabled?"not-allowed":"pointer"}),(_ref12=>{let{theme,$variant}=_ref12;return theme.components.button[$variant].hoverColor}),(_ref13=>{let{theme,$variant}=_ref13;return theme.components.button[$variant].activeBackgroundColor}),(_ref14=>{let{theme,$variant}=_ref14;return theme.components.button[$variant].activeBorderColor}),(_ref15=>{let{theme,$variant}=_ref15;return theme.components.button[$variant].disabledColor}),(_ref16=>{let{theme,$variant}=_ref16;return theme.components.button[$variant].disabledBorderColor}),(_ref17=>{let{theme,$variant}=_ref17;return theme.components.button[$variant].disabledBackgroundFrom}),(_ref18=>{let{theme,$variant}=_ref18;return theme.components.button[$variant].disabledBackgroundTo}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=react.forwardRef(((_ref,forwardedRef)=>{let{size="normal",variant="primary",children="",loading=!1,inline=!0,...props}=_ref;return react.useEffect((()=>{"string"==typeof children||props["aria-label"]||console.warn("The `aria-label` prop is required when the children of the Button are not a string. This is to ensure that assistive technologies can announce the content of the button. Please provide a valid `aria-describedby` prop to the Button component.")}),[]),(0,jsx_runtime.jsx)(StyledButton,{$size:size,$variant:variant,$inline:inline,disabled:props.disabled||loading,"aria-disabled":props.disabled||loading,"aria-label":"string"==typeof children?children:void 0,role:"button",...props,ref:forwardedRef,children:loading?(0,jsx_runtime.jsx)(Loader,{}):children})})),Loader=()=>(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:"..."}),Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"Button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.",displayName:"Button",props:{size:{defaultValue:{value:"normal"},description:"The size of the button",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"mini"'},{value:'"normal"'}]}},variant:{defaultValue:{value:"primary"},description:"The variant of the button",name:"variant",required:!1,type:{name:"enum",value:[{value:'"link"'},{value:'"primary"'},{value:'"secondary"'},{value:'"danger"'}]}},children:{defaultValue:{value:""},description:"The children to be displayed in the button",name:"children",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:{value:"false"},description:"Whether the button is loading",name:"loading",required:!1,type:{name:"boolean"}},inline:{defaultValue:{value:"true"},description:"Whether the button is inline",name:"inline",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>_Button__WEBPACK_IMPORTED_MODULE_0__.A});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Button/Button.tsx")},"./src/components/Menu/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{W1:()=>Menu_Menu,DB:()=>dist.q7});var dist=__webpack_require__("./node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs"),styled_components_browser_esm=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js")),styles=__webpack_require__("./src/styles/index.ts"),Menu_styles=__webpack_require__("./src/components/Menu/styles.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Menu=props=>{const{isOpen,trigger,closeMenuCallback,idAccessor="id",nameAccessor="name",onSelect,itemComponent,showArrow=!1,options=[],value,side="bottom",align="center",sideOffset=4,alignOffset,arrowPadding,avoidCollisions}=props,theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsxs)(Menu_styles.$E,{open:isOpen,onOpenChange:newState=>{newState||null==closeMenuCallback||closeMenuCallback()},children:[(0,jsx_runtime.jsx)(Menu_styles.ty,{asChild:!0,children:(0,jsx_runtime.jsx)(styles.Yk,{children:trigger})}),(0,jsx_runtime.jsx)(Menu_styles.dc,{children:(0,jsx_runtime.jsxs)(Menu_styles.SQ,{side,sideOffset,align,alignOffset,arrowPadding,avoidCollisions,className:"DropdownMenuContent",children:[options.map((option=>itemComponent?itemComponent(option,{disabled:null==option?void 0:option.disabled,className:"DropdownMenuItem",key:null==option?void 0:option[idAccessor],onSelect:()=>null==onSelect?void 0:onSelect(option),isSelected:(null==value?void 0:value[idAccessor])===(null==option?void 0:option[idAccessor])}):(0,jsx_runtime.jsx)(Menu_styles._2,{id:null==option?void 0:option[idAccessor],disabled:null==option?void 0:option.disabled,dir:theme.direction,className:"DropdownMenuItem",onSelect:()=>null==onSelect?void 0:onSelect(option),$isSelected:(null==value?void 0:value[idAccessor])===(null==option?void 0:option[idAccessor]),children:null==option?void 0:option[nameAccessor]},null==option?void 0:option[idAccessor]))),showArrow&&(0,jsx_runtime.jsx)(Menu_styles.eW,{className:"DropdownMenuArrow"})]})})]})},Menu_Menu=Menu;try{Menu.displayName="Menu",Menu.__docgenInfo={description:"Menu is a container for Menu Item components.\nMenu item is a component to define each row of a menu components. It takes in prefix, suffix and default slot to place content either at beginning or end or middle of the row respectively.",displayName:"Menu",props:{side:{defaultValue:null,description:"",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"bottom"'},{value:'"left"'},{value:'"right"'}]}},sideOffset:{defaultValue:null,description:"",name:"sideOffset",required:!1,type:{name:"number"}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'}]}},alignOffset:{defaultValue:null,description:"",name:"alignOffset",required:!1,type:{name:"number"}},arrowPadding:{defaultValue:null,description:"",name:"arrowPadding",required:!1,type:{name:"number"}},avoidCollisions:{defaultValue:null,description:"",name:"avoidCollisions",required:!1,type:{name:"boolean"}},value:{defaultValue:null,description:"value of menu",name:"value",required:!1,type:{name:"DefaultMenuItemProps"}},onSelect:{defaultValue:null,description:"Called when a menu item is selected",name:"onSelect",required:!1,type:{name:"((option: T) => void)"}},closeMenuCallback:{defaultValue:null,description:"",name:"closeMenuCallback",required:!1,type:{name:"(() => void)"}},itemComponent:{defaultValue:null,description:"",name:"itemComponent",required:!1,type:{name:"((item: T, props?: MenuItemProps) => ReactNode)"}},options:{defaultValue:null,description:"options for menu button",name:"options",required:!1,type:{name:"T[]"}},trigger:{defaultValue:null,description:"The children or label",name:"trigger",required:!0,type:{name:"ReactNode"}},highlightedIndex:{defaultValue:null,description:"Is the button inline\n@deprecated",name:"highlightedIndex",required:!1,type:{name:"number | null"}},idAccessor:{defaultValue:null,description:"id Accessor of menu",name:"idAccessor",required:!1,type:{name:"string"}},nameAccessor:{defaultValue:null,description:"name Accessor of menu",name:"nameAccessor",required:!1,type:{name:"string"}},isOpen:{defaultValue:null,description:"Is the button inline",name:"isOpen",required:!1,type:{name:"boolean"}},showArrow:{defaultValue:null,description:"should show the Arrow?",name:"showArrow",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Menu/Menu.tsx#Menu"]={docgenInfo:Menu.__docgenInfo,name:"Menu",path:"src/components/Menu/Menu.tsx#Menu"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Menu/styles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$E:()=>DropdownMenuRoot,SQ:()=>DropdownMenuContent,_2:()=>DropdownMenuItem,dc:()=>DropdownMenuPortal,eW:()=>DropdownMenuArrow,iJ:()=>DropdownMenuSeperator,ty:()=>DropdownMenuTrigger});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs"),styled_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/styles/keyframes.ts"),_themes__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/themes/index.ts");const DropdownMenuRoot=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.bL)(_templateObject||(_templateObject=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)([""]))),DropdownMenuTrigger=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.l9)(_templateObject2||(_templateObject2=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  &:disabled {\n    cursor: not-allowed;\n  }\n"]))),DropdownMenuPortal=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.ZL)(_templateObject3||(_templateObject3=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)([""]))),DropdownMenuArrow=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.i3)(_templateObject4||(_templateObject4=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  fill: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.colors.border.light})),DropdownMenuSeperator=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.mB)(_templateObject5||(_templateObject5=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  border-bottom: ",";\n"])),(_ref2=>{let{theme}=_ref2;return"1px solid ".concat(theme.colors.border.light)})),DropdownMenuContent=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.UC)(_templateObject6||(_templateObject6=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  padding: 8px;\n  position: relative;\n  z-index: ",";\n  border-radius: 6px;\n  border: 1px solid ",";\n  background: ",";\n  direction: ",";\n  box-shadow:\n    "," 0px 2px 3px,\n    "," 0px 4px 20px;\n  &[data-side='top'],\n  &[data-side='top'] {\n    animation-name: ",";\n  }\n  &[data-side='right'],\n  &[data-side='right'] {\n    animation-name: ",";\n  }\n  &[data-side='bottom'],\n  &[data-side='bottom'] {\n    animation-name: ",";\n  }\n  &[data-side='left'],\n  &[data-side='left'] {\n    animation-name: ",";\n  }\n  .DropdownMenuSeparator:last-child {\n    display: none;\n  }\n  animation-duration: ",";\n  animation-timing-function: ",";\n  will-change: transform, opacity;\n"])),(_ref3=>{let{theme}=_ref3;return theme.zIndex.popover||_themes__WEBPACK_IMPORTED_MODULE_1__.Mu.popover}),(_ref4=>{let{theme}=_ref4;return theme.colors.border.light}),(_ref5=>{let{theme}=_ref5;return theme.colors.fill.surface}),(_ref6=>{let{theme}=_ref6;return theme.direction}),(_ref7=>{let{theme}=_ref7;return(0,_themes__WEBPACK_IMPORTED_MODULE_1__.Yi)(theme.colors.shadow,.06)}),(_ref8=>{let{theme}=_ref8;return(0,_themes__WEBPACK_IMPORTED_MODULE_1__.Yi)(theme.colors.shadow,.16)}),_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__.zl,_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__.wy,_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__.cc,_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__.hF,(_ref9=>{let{theme}=_ref9;return theme.transitions.duration.standard}),(_ref10=>{let{theme}=_ref10;return theme.transitions.easing.easeIn})),DropdownMenuItem=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_radix_ui_react_dropdown_menu__WEBPACK_IMPORTED_MODULE_3__.q7)(_templateObject7||(_templateObject7=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  padding: 8px 12px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  direction: ",";\n  outline: none;\n  background: ",";\n  cursor: ",";\n  opacity: ",";\n  &:focus,\n  &:hover {\n    background: ",";\n  }\n"])),(_ref11=>{let{theme}=_ref11;return theme.typography.fontFamily}),(_ref12=>{let{theme}=_ref12;return theme.typography.primary.fontSize}),(_ref13=>{let{theme}=_ref13;return theme.typography.primary.lineHeight}),(_ref14=>{let{theme}=_ref14;return theme.colors.text.primary}),(_ref15=>{let{theme}=_ref15;return theme.direction}),(_ref16=>{let{$isSelected,theme}=_ref16;return $isSelected?"dark"===theme.mode?theme.colors.fill.medium:theme.colors.fill.hilight:"inherit"}),(_ref17=>{let{disabled}=_ref17;return disabled?"not-allowed":"pointer"}),(_ref18=>{let{disabled}=_ref18;return disabled?"0.5":"inherit"}),(_ref19=>{let{disabled,theme}=_ref19;return disabled?"dark"===theme.mode?"transparent":theme.colors.fill.disabled:"dark"===theme.mode?theme.colors.fill.medium:theme.colors.fill.hilight}))},"./src/components/Typography/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Typography_Typography});var _templateObject,react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js");const StyledTypography=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js").Ay.span(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n  color: ",";\n  font-family: ",";\n  font-weight: ",";\n  font-size: ",";\n  line-height: ",";\n  text-transform: ",";\n  -webkit-font-smoothing: antialiased;\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.colors.text.primary}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{theme,weight}=_ref4;return theme.typography.fontWeight[weight]}),(_ref5=>{let{theme,variant}=_ref5;return theme.typography[variant].fontSize}),(_ref6=>{let{theme,variant}=_ref6;return theme.typography[variant].lineHeight}),(_ref7=>{let{variant}=_ref7;return"caption"===variant?"uppercase":"none"}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Typography=react.forwardRef(((_ref,forwardedRef)=>{let{children,variant="primary",weight="regular",...rest}=_ref;return(0,jsx_runtime.jsx)(StyledTypography,{variant,weight,ref:forwardedRef,...rest,children})})),Typography_Typography=Typography;try{Typography.displayName="Typography",Typography.__docgenInfo={description:"Typography component is used to show text to the user. It can be used to show a heading, a paragraph, or any other text.",displayName:"Typography",props:{children:{defaultValue:null,description:"The children or label",name:"children",required:!1,type:{name:"ReactNode"}},variant:{defaultValue:{value:"primary"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"heading"'},{value:'"heading1"'},{value:'"heading2"'},{value:'"heading3"'},{value:'"heading4"'},{value:'"caption"'}]}},weight:{defaultValue:{value:"regular"},description:"",name:"weight",required:!1,type:{name:"enum",value:[{value:'"bold"'},{value:'"regular"'},{value:'"semi-bold"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Typography/Typography.tsx#Typography"]={docgenInfo:Typography.__docgenInfo,name:"Typography",path:"src/components/Typography/Typography.tsx#Typography"})}catch(__react_docgen_typescript_loader_error){}}}]);