freemium-ui 2.0.73 → 2.0.75

package/storybook-static/{stories-Modal-stories.6235daee.iframe.bundle.js → stories-Modal-stories.20fadbea.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[41850],{"./src/stories/Modal.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Modal_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 ModalSizeMap={"top-center":{from:{left:"50%",top:"16px",y:"-8px",x:"-50%"},enter:{left:"50%",top:"16px",y:"0",x:"-50%"},leave:{left:"50%",top:"16px",y:"8px",x:"-50%"}},"top-left":{from:{left:"16px",top:"16px",y:"-8px",x:"-8px"},enter:{left:"16px",top:"16px",y:"0",x:"0"},leave:{left:"16px",top:"16px",y:"8px",x:"8px"}},"top-right":{from:{right:"16px",top:"16px",y:"-8px",x:"8px"},enter:{right:"16px",top:"16px",y:"0",x:"0"},leave:{right:"16px",top:"16px",y:"8px",x:"-8px"}},"center-center":{from:{left:"50%",top:"50%",y:"-50%",x:"-50%"},enter:{left:"50%",top:"50%",y:"-50%",x:"-50%"},leave:{left:"50%",top:"50%",y:"-50%",x:"-50%"}},"center-left":{from:{left:"16px",top:"50%",y:"-50%",x:"-8px"},enter:{left:"16px",top:"50%",y:"-50%",x:"0"},leave:{left:"16px",top:"50%",y:"-50%",x:"8px"}},"center-right":{from:{right:"16px",top:"50%",y:"-50%",x:"8px"},enter:{right:"16px",top:"50%",y:"-50%",x:"0"},leave:{right:"16px",top:"50%",y:"-50%",x:"-8px"}},"bottom-center":{from:{left:"50%",bottom:"16px",y:"8px",x:"-50%"},enter:{left:"50%",bottom:"16px",y:"0px",x:"-50%"},leave:{left:"50%",bottom:"16px",y:"-8px",x:"-50%"}},"bottom-left":{from:{left:"16px",bottom:"16px",y:"8px",x:"-8px"},enter:{left:"16px",bottom:"16px",y:"0",x:"0"},leave:{left:"16px",bottom:"16px",y:"-8px",x:"8px"}},"bottom-right":{from:{right:"16px",bottom:"16px",y:"8px",x:"8px"},enter:{right:"16px",bottom:"16px",y:"0",x:"0"},leave:{right:"16px",bottom:"16px",y:"-8px",x:"-8px"}}},ModalSizeWidth={default:"512px",small:"424px",medium:"600px",large:"800px","x-large":"1200px"};var _templateObject,_templateObject2,_templateObject3,_templateObject4,themes=__webpack_require__("./src/themes/index.ts");const AnimationMap={"top-center":keyframes.PH,"top-left":keyframes.lA,"top-right":keyframes.O3,"center-center":keyframes.P9,"center-left":keyframes.DR,"center-right":keyframes.g2,"bottom-center":keyframes.bA,"bottom-left":keyframes.RV,"bottom-right":keyframes.oF},DialogRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)([""]))),DialogPortal=(0,styled_components_browser_esm.Ay)(dist.ZL)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)([""]))),DialogOverlay=(0,styled_components_browser_esm.Ay)(dist.hJ)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  ","\n"])),styles.io),DialogContent=(0,styled_components_browser_esm.Ay)(dist.UC)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  ","\n  border-radius: 8px;\n  max-width: ",";\n  width: ",";\n  max-height: 85vh;\n  position: fixed;\n  direction: ",";\n  z-index: ",";\n  transform: translate(\n    ",",\n    ","\n  );\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 ModalSizeWidth[size]}),(_ref2=>{let{fullWidth}=_ref2;return fullWidth?"100%":"unset"}),(_ref3=>{let{theme}=_ref3;return theme.direction}),(_ref4=>{let{theme}=_ref4;return theme.zIndex.modal||themes.Mu.modal}),(_ref5=>{let{align,position}=_ref5;return ModalSizeMap["".concat(align,"-").concat(position)].enter.x}),(_ref6=>{let{align,position}=_ref6;return ModalSizeMap["".concat(align,"-").concat(position)].enter.y}),(_ref7=>{let{align,position}=_ref7;return ModalSizeMap["".concat(align,"-").concat(position)].enter.top}),(_ref8=>{let{align,position}=_ref8;return ModalSizeMap["".concat(align,"-").concat(position)].enter.bottom}),(_ref9=>{let{align,position}=_ref9;return ModalSizeMap["".concat(align,"-").concat(position)].enter.left}),(_ref10=>{let{align,position}=_ref10;return ModalSizeMap["".concat(align,"-").concat(position)].enter.right}),(_ref11=>{let{theme}=_ref11;return theme.transitions.duration.standard}),(_ref12=>{let{theme}=_ref12;return theme.transitions.easing.easeIn}),(_ref13=>{let{align,position}=_ref13;return AnimationMap["".concat(align,"-").concat(position)]}),keyframes.Xn);var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Modal=_ref=>{let{isOpen,children,align="center",customClass="",fullWidth=!1,customModalContentStyles={},onDismiss,position="center",size}=_ref;const theme=(0,styled_components_browser_esm.DP)();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:()=>null==onDismiss?void 0:onDismiss()}),(0,jsx_runtime.jsx)(DialogContent,{forceMount:!0,dir:theme.direction,className:"DialogContent ".concat(null!=customClass?customClass:"").trim(),size:null!=size?size:"default",fullWidth,align,position,style:customModalContentStyles,children})]})})},Modal_Modal=Modal;try{Modal.displayName="Modal",Modal.__docgenInfo={description:"Modals are used as an overlay to display information. It can also be used as confirm boxes to take user inputs.",displayName:"Modal",props:{children:{defaultValue:null,description:"The children or label",name:"children",required:!1,type:{name:"ReactNode"}},isOpen:{defaultValue:null,description:"Is the button inline",name:"isOpen",required:!1,type:{name:"boolean"}},fullWidth:{defaultValue:{value:"false"},description:"Is the button inline",name:"fullWidth",required:!1,type:{name:"boolean"}},align:{defaultValue:{value:"center"},description:"Is the button inline",name:"align",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"bottom"'},{value:'"center"'}]}},position:{defaultValue:{value:"center"},description:"Is the button inline",name:"position",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'},{value:'"center"'}]}},size:{defaultValue:null,description:"Is the button inline",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"default"'},{value:'"medium"'},{value:'"large"'},{value:'"x-large"'}]}},onDismiss:{defaultValue:null,description:"How large should the button be?",name:"onDismiss",required:!1,type:{name:"(() => void)"}},customClass:{defaultValue:{value:""},description:"The children or label",name:"customClass",required:!1,type:{name:"string"}},customModalContentStyles:{defaultValue:{value:"{}"},description:"The children or label",name:"customModalContentStyles",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Modal/Modal.tsx#Modal"]={docgenInfo:Modal.__docgenInfo,name:"Modal",path:"src/components/Modal/Modal.tsx#Modal"})}catch(__react_docgen_typescript_loader_error){}const Modal_stories={title:"Components/Modal",component:Modal_Modal,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 Modal"}),(0,jsx_runtime.jsxs)(Modal_Modal,{...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.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,{style:{borderRadius:"8px"},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,fullWidth:!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 Modal\n        </Button>\n        <Modal {...props} isOpen={isOpen} onDismiss={() => {\n        updateArgs({\n          isOpen: false\n        });\n      }}>\n          <CardContent>\n            <CardTitle>Title goes here</CardTitle>\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 style={{\n          borderRadius: \'8px\'\n        }}>\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        </Modal>\n      </>;\n  },\n  args: {\n    isOpen: false,\n    fullWidth: 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([[41850],{"./src/stories/Modal.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Modal_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 ModalSizeMap={"top-center":{from:{left:"50%",top:"16px",y:"-8px",x:"-50%"},enter:{left:"50%",top:"16px",y:"0",x:"-50%"},leave:{left:"50%",top:"16px",y:"8px",x:"-50%"}},"top-left":{from:{left:"16px",top:"16px",y:"-8px",x:"-8px"},enter:{left:"16px",top:"16px",y:"0",x:"0"},leave:{left:"16px",top:"16px",y:"8px",x:"8px"}},"top-right":{from:{right:"16px",top:"16px",y:"-8px",x:"8px"},enter:{right:"16px",top:"16px",y:"0",x:"0"},leave:{right:"16px",top:"16px",y:"8px",x:"-8px"}},"center-center":{from:{left:"50%",top:"50%",y:"-50%",x:"-50%"},enter:{left:"50%",top:"50%",y:"-50%",x:"-50%"},leave:{left:"50%",top:"50%",y:"-50%",x:"-50%"}},"center-left":{from:{left:"16px",top:"50%",y:"-50%",x:"-8px"},enter:{left:"16px",top:"50%",y:"-50%",x:"0"},leave:{left:"16px",top:"50%",y:"-50%",x:"8px"}},"center-right":{from:{right:"16px",top:"50%",y:"-50%",x:"8px"},enter:{right:"16px",top:"50%",y:"-50%",x:"0"},leave:{right:"16px",top:"50%",y:"-50%",x:"-8px"}},"bottom-center":{from:{left:"50%",bottom:"16px",y:"8px",x:"-50%"},enter:{left:"50%",bottom:"16px",y:"0px",x:"-50%"},leave:{left:"50%",bottom:"16px",y:"-8px",x:"-50%"}},"bottom-left":{from:{left:"16px",bottom:"16px",y:"8px",x:"-8px"},enter:{left:"16px",bottom:"16px",y:"0",x:"0"},leave:{left:"16px",bottom:"16px",y:"-8px",x:"8px"}},"bottom-right":{from:{right:"16px",bottom:"16px",y:"8px",x:"8px"},enter:{right:"16px",bottom:"16px",y:"0",x:"0"},leave:{right:"16px",bottom:"16px",y:"-8px",x:"-8px"}}},ModalSizeWidth={default:"512px",small:"424px",medium:"600px",large:"800px","x-large":"1200px"};var _templateObject,_templateObject2,_templateObject3,_templateObject4,themes=__webpack_require__("./src/themes/index.ts");const AnimationMap={"top-center":keyframes.PH,"top-left":keyframes.lA,"top-right":keyframes.O3,"center-center":keyframes.P9,"center-left":keyframes.DR,"center-right":keyframes.g2,"bottom-center":keyframes.bA,"bottom-left":keyframes.RV,"bottom-right":keyframes.oF},DialogRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)([""]))),DialogPortal=(0,styled_components_browser_esm.Ay)(dist.ZL)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)([""]))),DialogOverlay=(0,styled_components_browser_esm.Ay)(dist.hJ)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  ","\n"])),styles.io),DialogContent=(0,styled_components_browser_esm.Ay)(dist.UC)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  ","\n  border-radius: 8px;\n  max-width: ",";\n  width: ",";\n  max-height: 85vh;\n  position: fixed;\n  direction: ",";\n  z-index: ",";\n  transform: translate(\n    ",",\n    ","\n  );\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 ModalSizeWidth[size]}),(_ref2=>{let{fullWidth}=_ref2;return fullWidth?"100%":"unset"}),(_ref3=>{let{theme}=_ref3;return theme.direction}),(_ref4=>{let{theme}=_ref4;return theme.zIndex.modal||themes.Mu.modal}),(_ref5=>{let{align,position}=_ref5;return ModalSizeMap["".concat(align,"-").concat(position)].enter.x}),(_ref6=>{let{align,position}=_ref6;return ModalSizeMap["".concat(align,"-").concat(position)].enter.y}),(_ref7=>{let{align,position}=_ref7;return ModalSizeMap["".concat(align,"-").concat(position)].enter.top}),(_ref8=>{let{align,position}=_ref8;return ModalSizeMap["".concat(align,"-").concat(position)].enter.bottom}),(_ref9=>{let{align,position}=_ref9;return ModalSizeMap["".concat(align,"-").concat(position)].enter.left}),(_ref10=>{let{align,position}=_ref10;return ModalSizeMap["".concat(align,"-").concat(position)].enter.right}),(_ref11=>{let{theme}=_ref11;return theme.transitions.duration.standard}),(_ref12=>{let{theme}=_ref12;return theme.transitions.easing.easeIn}),(_ref13=>{let{align,position}=_ref13;return AnimationMap["".concat(align,"-").concat(position)]}),keyframes.Xn);var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Modal=_ref=>{let{isOpen,children,align="center",customClass="",fullWidth=!1,customModalContentStyles={},onDismiss,position="center",size}=_ref;const theme=(0,styled_components_browser_esm.DP)();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:()=>null==onDismiss?void 0:onDismiss()}),(0,jsx_runtime.jsx)(DialogContent,{forceMount:!0,dir:theme.direction,className:"DialogContent ".concat(null!=customClass?customClass:"").trim(),size:null!=size?size:"default",fullWidth,align,position,style:customModalContentStyles,children})]})})},Modal_Modal=Modal;try{Modal.displayName="Modal",Modal.__docgenInfo={description:"Modals are used as an overlay to display information. It can also be used as confirm boxes to take user inputs.",displayName:"Modal",props:{children:{defaultValue:null,description:"The children or label",name:"children",required:!1,type:{name:"ReactNode"}},isOpen:{defaultValue:null,description:"Is the button inline",name:"isOpen",required:!1,type:{name:"boolean"}},fullWidth:{defaultValue:{value:"false"},description:"Is the button inline",name:"fullWidth",required:!1,type:{name:"boolean"}},align:{defaultValue:{value:"center"},description:"Is the button inline",name:"align",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"bottom"'},{value:'"center"'}]}},position:{defaultValue:{value:"center"},description:"Is the button inline",name:"position",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'},{value:'"center"'}]}},size:{defaultValue:null,description:"Is the button inline",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"default"'},{value:'"medium"'},{value:'"large"'},{value:'"x-large"'}]}},onDismiss:{defaultValue:null,description:"How large should the button be?",name:"onDismiss",required:!1,type:{name:"(() => void)"}},customClass:{defaultValue:{value:""},description:"The children or label",name:"customClass",required:!1,type:{name:"string"}},customModalContentStyles:{defaultValue:{value:"{}"},description:"The children or label",name:"customModalContentStyles",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Modal/Modal.tsx#Modal"]={docgenInfo:Modal.__docgenInfo,name:"Modal",path:"src/components/Modal/Modal.tsx#Modal"})}catch(__react_docgen_typescript_loader_error){}const Modal_stories={title:"Components/Modal",component:Modal_Modal,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 Modal"}),(0,jsx_runtime.jsxs)(Modal_Modal,{...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.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,{style:{borderRadius:"8px"},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,fullWidth:!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 Modal\n        </Button>\n        <Modal {...props} isOpen={isOpen} onDismiss={() => {\n        updateArgs({\n          isOpen: false\n        });\n      }}>\n          <CardContent>\n            <CardTitle>Title goes here</CardTitle>\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 style={{\n          borderRadius: \'8px\'\n        }}>\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        </Modal>\n      </>;\n  },\n  args: {\n    isOpen: false,\n    fullWidth: 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-Popover-stories.51ef97cf.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[76878],{"./src/stories/Popover.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_Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Button/index.ts"),_components_Popover__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Popover/index.ts"),_styles_globalStyles__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/styles/globalStyles.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Popover",component:_components_Popover__WEBPACK_IMPORTED_MODULE_2__.AM,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{hoverOutToClose:{control:"boolean"}}},Primary={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Popover__WEBPACK_IMPORTED_MODULE_2__.AM,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div",{style:{display:"flex",background:"inherit",padding:20,flexDirection:"column",gap:10,maxWidth:"300px",color:"inherit"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("p",{className:"Text",style:{marginBottom:10},children:"Dimensions"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("p",{className:"Text",style:{marginBottom:10},children:"Controls do not require any modification to your components. Stories for controls are: Convenient. Auto-generate controls based on React/Vue/Angular/etc. components. Portable. Reuse your interactive stories in documentation, tests, and even in designs. Rich. Customize the controls and interactive data to suit your exact needs. To use the Controls addon, you need to write your stories using args. Storybook will automatically generate UI controls based on your args and what it can infer about your component. Still, you can configure the controls further using argTypes, see below."})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles_globalStyles__WEBPACK_IMPORTED_MODULE_3__.A,{})]}),args:{side:"right",align:"center",arrow:!1,hoverOutToClose:!1,hoverToOpen:!1,avoidCollisions:!0,trigger:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{variant:"primary",children:"Open"})}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: props => <>\n      <Popover {...props}>\n        <div style={{\n        display: 'flex',\n        background: 'inherit',\n        padding: 20,\n        flexDirection: 'column',\n        gap: 10,\n        maxWidth: '300px',\n        color: 'inherit'\n      }}>\n          <p className=\"Text\" style={{\n          marginBottom: 10\n        }}>\n            Dimensions\n          </p>\n          <p className=\"Text\" style={{\n          marginBottom: 10\n        }}>\n            Controls do not require any modification to your components. Stories\n            for controls are: Convenient. Auto-generate controls based on\n            React/Vue/Angular/etc. components. Portable. Reuse your interactive\n            stories in documentation, tests, and even in designs. Rich.\n            Customize the controls and interactive data to suit your exact\n            needs. To use the Controls addon, you need to write your stories\n            using args. Storybook will automatically generate UI controls based\n            on your args and what it can infer about your component. Still, you\n            can configure the controls further using argTypes, see below.\n          </p>\n        </div>\n      </Popover>\n      <FreemiumUIGlobalStyles />\n    </>,\n  args: {\n    side: 'right',\n    align: 'center',\n    arrow: false,\n    hoverOutToClose: false,\n    hoverToOpen: false,\n    avoidCollisions: true,\n    trigger: <Button variant=\"primary\">Open</Button>\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")},"./src/components/Popover/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{AM:()=>Popover_Popover,iN:()=>PopoverClose});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,react=__webpack_require__("./node_modules/react/index.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),styles=__webpack_require__("./src/styles/index.ts"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-popover/dist/index.mjs"),keyframes=__webpack_require__("./src/styles/keyframes.ts"),themes=__webpack_require__("./src/themes/index.ts");const PopoverContent=(0,styled_components_browser_esm.Ay)(dist.UC)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  background: ",";\n  color: ",";\n  border-radius: 8px;\n  box-shadow:\n    "," 0px 10px 38px -10px,\n    "," 0px 10px 20px -15px;\n  animation-duration: ",";\n  animation-timing-function: ",";\n  will-change: transform, opacity;\n  &[data-state='open'][data-side='top'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='right'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='bottom'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='left'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n\n  ","\n"])),(_ref=>{let{theme}=_ref;return theme.colors.fill.surface}),(_ref2=>{let{theme}=_ref2;return theme.colors.text.primary}),(_ref3=>{let{theme}=_ref3;return(0,themes.Yi)(theme.colors.shadow,.35)}),(_ref4=>{let{theme}=_ref4;return(0,themes.Yi)(theme.colors.shadow,.2)}),(_ref5=>{let{theme}=_ref5;return theme.transitions.duration.standard}),(_ref6=>{let{theme}=_ref6;return theme.transitions.easing.easeIn}),keyframes.zl,keyframes.wy,keyframes.cc,keyframes.hF,keyframes.Xn,(_ref7=>{let{theme}=_ref7;return"dark"===theme.mode&&(0,styled_components_browser_esm.AH)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n      border: 1px solid ",";\n    "])),theme.colors.border.light)})),PopoverArrow=(0,styled_components_browser_esm.Ay)(dist.i3)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  fill: ",";\n"])),(_ref8=>{let{theme}=_ref8;return theme.colors.fill.surface})),PopoverRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)([""]))),PopoverTrigger=(0,styled_components_browser_esm.Ay)(dist.l9)(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)([""]))),PopoverPortal=(0,styled_components_browser_esm.Ay)(dist.ZL)(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)([""]))),PopoverClose=(0,styled_components_browser_esm.Ay)(dist.bm)(_templateObject7||(_templateObject7=(0,taggedTemplateLiteral.A)([""])));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Popover=_ref=>{var _ref2,_ref3,_ref4,_ref5;let{children,trigger,arrow,hoverOutToClose,align,hoverToOpen,avoidCollisions=!0,replaceTrigger=!1,side:s,disabled,onClose,popoverContentProps,popoverRootProps,anchorOrigin}=_ref;const[isOpen,setIsOpen]=react.useState(!1),side=null!==(_ref2=null!==(_ref3=null!==(_ref4=null!==(_ref5=null!=s?s:"bottom"===(null==anchorOrigin?void 0:anchorOrigin.vertical)&&anchorOrigin.horizontal?"bottom":void 0)&&void 0!==_ref5?_ref5:"top"===(null==anchorOrigin?void 0:anchorOrigin.vertical)&&anchorOrigin.horizontal?"top":void 0)&&void 0!==_ref4?_ref4:"center"===(null==anchorOrigin?void 0:anchorOrigin.vertical)&&"left"===anchorOrigin.horizontal?"left":void 0)&&void 0!==_ref3?_ref3:"center"===(null==anchorOrigin?void 0:anchorOrigin.vertical)&&"right"===anchorOrigin.horizontal?"right":void 0)&&void 0!==_ref2?_ref2:"bottom",theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsxs)(PopoverRoot,{open:isOpen,onOpenChange:op=>{setIsOpen(op)},...popoverRootProps,children:[replaceTrigger?(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:trigger}):(0,jsx_runtime.jsx)(PopoverTrigger,{dir:theme.direction,asChild:!0,className:"PopoverTrigger",disabled,children:(0,jsx_runtime.jsx)(styles.Yk,{className:"TriggerButtonWrapper",onMouseEnter:()=>{hoverToOpen&&setIsOpen(!0)},children:trigger})}),(0,jsx_runtime.jsx)(PopoverPortal,{children:(0,jsx_runtime.jsxs)(PopoverContent,{forceMount:!0,className:"PopoverContent","data-popover-content":!0,dir:theme.direction,onMouseLeave:()=>{hoverOutToClose&&(setIsOpen(!1),null==onClose||onClose())},onInteractOutside:()=>{setIsOpen(!1),null==onClose||onClose()},side,align,sideOffset:8,avoidCollisions,...popoverContentProps,children:[children,arrow&&(0,jsx_runtime.jsx)(PopoverArrow,{})]})})]})},Popover_Popover=Popover;try{Popover.displayName="Popover",Popover.__docgenInfo={description:"Popover need two slots popover-trigger and popover-content. By default on clicking the trigger the content will be displayed. The props can be used to change the position of the content, width of the component and the distance between the trigger and the content.",displayName:"Popover",props:{onClose:{defaultValue:null,description:"How large should the button be?",name:"onClose",required:!1,type:{name:"((event?: MouseEvent<HTMLDivElement, MouseEvent>) => void)"}},id:{defaultValue:null,description:"Which variant the button should be",name:"id",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"Which variant the button should be",name:"disabled",required:!1,type:{name:"boolean"}},replaceTrigger:{defaultValue:{value:"false"},description:"",name:"replaceTrigger",required:!1,type:{name:"boolean"}},popoverContentProps:{defaultValue:null,description:"",name:"popoverContentProps",required:!1,type:{name:"PopoverContentProps"}},popoverRootProps:{defaultValue:null,description:"",name:"popoverRootProps",required:!1,type:{name:"PopoverProps"}},trigger:{defaultValue:null,description:"The children or label",name:"trigger",required:!0,type:{name:"ReactNode"}},children:{defaultValue:null,description:"The children or label",name:"children",required:!1,type:{name:"ReactNode"}},hoverOutToClose:{defaultValue:null,description:"Is the button inline",name:"hoverOutToClose",required:!1,type:{name:"boolean"}},hoverToOpen:{defaultValue:null,description:"Is the button inline",name:"hoverToOpen",required:!1,type:{name:"boolean"}},arrow:{defaultValue:null,description:"Is the button inline",name:"arrow",required:!1,type:{name:"boolean"}},avoidCollisions:{defaultValue:{value:"true"},description:"Is the button inline",name:"avoidCollisions",required:!1,type:{name:"boolean"}},side:{defaultValue:null,description:"Is the button inline",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"bottom"'},{value:'"left"'},{value:'"right"'}]}},align:{defaultValue:null,description:"Is the button inline",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'}]}},anchorOrigin:{defaultValue:null,description:"Is the button inline\n@deprecated",name:"anchorOrigin",required:!1,type:{name:"Origin"}},transformOrigin:{defaultValue:null,description:"Is the button inline\n* @deprecated",name:"transformOrigin",required:!1,type:{name:"Origin"}},clickOutToClose:{defaultValue:null,description:"Is the button inline\n* @deprecated",name:"clickOutToClose",required:!1,type:{name:"boolean"}},autoCloseDuration:{defaultValue:null,description:"Is the button inline\n* @deprecated",name:"autoCloseDuration",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Popover/Popover.tsx#Popover"]={docgenInfo:Popover.__docgenInfo,name:"Popover",path:"src/components/Popover/Popover.tsx#Popover"})}catch(__react_docgen_typescript_loader_error){}},"./src/styles/globalStyles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _templateObject,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_themes__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/themes/index.ts");const __WEBPACK_DEFAULT_EXPORT__=(0,styled_components__WEBPACK_IMPORTED_MODULE_1__.DU)(_templateObject||(_templateObject=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_2__.A)(["\n\ndiv:has( > div[data-tooltip-content]){\n    z-index: "," !important;\n}\n\ndiv:has( > div[data-popover-content]){\n    z-index: "," !important;\n}\n\n    "])),(_ref=>{let{theme}=_ref;return theme.zIndex.tooltip||_themes__WEBPACK_IMPORTED_MODULE_0__.Mu.tooltip}),(_ref2=>{let{theme}=_ref2;return theme.zIndex.popover||_themes__WEBPACK_IMPORTED_MODULE_0__.Mu.popover}))}}]);

package/storybook-static/{stories-TextArea-stories.7575dd20.iframe.bundle.js → stories-TextArea-stories.2791db35.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[64373],{"./src/stories/TextArea.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/TextArea",component:_components_Input__WEBPACK_IMPORTED_MODULE_1__.f,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__.f,{...props}),args:{label:"Description",placeholder:"Enter your description",rows:3,maxLength:100,showCount:!0,isRequired:!1,isErrored:!1,disabled:!1}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: props => <TextArea {...props} />,\n  args: {\n    label: 'Description',\n    placeholder: 'Enter your description',\n    rows: 3,\n    maxLength: 100,\n    showCount: true,\n    isRequired: false,\n    isErrored: false,\n    disabled: false\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([[64373],{"./src/stories/TextArea.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/TextArea",component:_components_Input__WEBPACK_IMPORTED_MODULE_1__.f,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__.f,{...props}),args:{label:"Description",placeholder:"Enter your description",rows:3,maxLength:100,showCount:!0,isRequired:!1,isErrored:!1,disabled:!1}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: props => <TextArea {...props} />,\n  args: {\n    label: 'Description',\n    placeholder: 'Enter your description',\n    rows: 3,\n    maxLength: 100,\n    showCount: true,\n    isRequired: false,\n    isErrored: false,\n    disabled: false\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-TimePicker-stories.b0bd6351.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[20234],{"./src/stories/TimePicker.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>TimePicker_stories});var react=__webpack_require__("./node_modules/react/index.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),styles=__webpack_require__("./src/styles/index.ts"),Pickers_styles=__webpack_require__("./src/components/Pickers/styles.ts"),Dropdown=__webpack_require__("./src/components/Dropdown/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const items=[{id:"AM",name:"AM"},{id:"PM",name:"PM"}],TimePicker=props=>{var _items$find;const{isRequired,label,isErrored,errorText,id,disabled,precision="minute",useAmPm,value="",onChange}=props,theme=(0,styled_components_browser_esm.DP)(),[localValue,setLocalValue]=react.useState(["","","","",""]);react.useEffect((()=>{if(value){var _second$split$;const[hour="",minute="",second=""]=value.split(":"),milliseconds=null!==(_second$split$=null==second?void 0:second.split(".")[1])&&void 0!==_second$split$?_second$split$:"";setLocalValue([useAmPm&&Number(hour)>12?"".concat((Number(hour)-12).toString().padStart(2,"0")):hour,minute,second.split(".")[0],milliseconds,useAmPm?Number(hour)>12?"PM":"AM":""])}else setLocalValue(["","","","",""])}),[]);const updateTime=(type,stringValue)=>{const newLocalValue=[...localValue];switch(type){case"hours":newLocalValue[0]=stringValue;break;case"minutes":newLocalValue[1]=stringValue;break;case"seconds":newLocalValue[2]=stringValue;break;case"milliseconds":newLocalValue[3]=stringValue;break;case"AMPM":newLocalValue[4]=stringValue}const hours=newLocalValue[0],minutes=newLocalValue[1],seconds="second"===precision||"millisecond"===precision?newLocalValue[2]:void 0,milliseconds="millisecond"===precision?newLocalValue[3]:void 0;setLocalValue(newLocalValue);const newValue="".concat(useAmPm&&"PM"===newLocalValue[4]?Number(hours)+12:hours,":").concat(minutes).concat(seconds?":".concat(seconds):"").concat(milliseconds?".".concat(milliseconds):"");"Invalid Date"===new Date("2021-01-01T".concat(newValue,"Z")).toString()||null==onChange||onChange(newValue)},inputValidation=(val,type)=>{switch(type){case"hours":return val.length>2||useAmPm&&(Number(val)>12||Number(val)<0)||!useAmPm&&(Number(val)>23||Number(val)<0);case"minutes":case"seconds":return val.length>2||Number(val)>59||Number(val)<0;case"milliseconds":return val.length>3||Number(val)>999||Number(val)<0}};return(0,jsx_runtime.jsxs)(Pickers_styles.VC,{id:"datetime-picker-container-".concat(null!=id?id:"").trim(),children:[label&&(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)(Pickers_styles.yw,{children:[(0,jsx_runtime.jsx)(Pickers_styles.u7,{className:"time-picker-input picker-hours",type:"number",placeholder:useAmPm?"hh":"HH",disabled,dir:theme.direction,min:useAmPm?1:0,max:useAmPm?12:23,value:localValue[0],onChange:e=>{inputValidation(e.target.value,"hours")||setLocalValue((old=>[e.target.value,old[1],old[2],old[3],old[4]]))},onBlur:e=>{const numberValue=Number(e.target.value);updateTime("hours",numberValue<10?"0".concat(numberValue):numberValue.toString())},isErrored,"aria-invalid":isErrored}),(0,jsx_runtime.jsx)("span",{children:":"}),(0,jsx_runtime.jsx)(Pickers_styles.u7,{className:"time-picker-input picker-minutes",type:"number",placeholder:"mm",disabled,dir:theme.direction,min:0,max:59,value:localValue[1],onChange:e=>{inputValidation(e.target.value,"minutes")||setLocalValue((old=>[old[0],e.target.value,old[2],old[3],old[4]]))},onBlur:e=>{const numberValue=Number(e.target.value);updateTime("minutes",numberValue<10?"0".concat(numberValue):numberValue.toString())},isErrored,"aria-invalid":isErrored}),("millisecond"===precision||"second"===precision)&&(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{children:":"}),(0,jsx_runtime.jsx)(Pickers_styles.u7,{className:"time-picker-input picker-seconds",type:"number",placeholder:"ss",disabled,dir:theme.direction,min:0,max:59,value:localValue[2],onChange:e=>{inputValidation(e.target.value,"seconds")||setLocalValue((old=>[old[0],old[1],e.target.value,old[3],old[4]]))},onBlur:e=>{const numberValue=Number(e.target.value);updateTime("seconds",numberValue<10?"0".concat(numberValue):numberValue.toString())},isErrored,"aria-invalid":isErrored})]}),"millisecond"===precision&&(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{children:":"}),(0,jsx_runtime.jsx)(Pickers_styles.u7,{className:"time-picker-input picker-milliseconds",type:"number",placeholder:"SSS",disabled,dir:theme.direction,min:0,max:999,value:localValue[3],onChange:e=>{inputValidation(e.target.value,"milliseconds")||setLocalValue((old=>[old[0],old[1],old[2],e.target.value,old[4]]))},onBlur:e=>{const numberValue=Number(e.target.value.slice(0,3));updateTime("milliseconds",numberValue<10?"00".concat(numberValue):numberValue<100?"0".concat(numberValue):numberValue.toString())},isErrored,"aria-invalid":isErrored})]}),useAmPm&&(0,jsx_runtime.jsx)(Dropdown.ms,{itemToString:item=>{var _item$name;return null!==(_item$name=null==item?void 0:item.name)&&void 0!==_item$name?_item$name:""},placeholder:"--",style:{marginLeft:"4px"},showTick:!1,defaultSelectedItem:value&&null!==(_items$find=items.find((item=>item.id===localValue[4])))&&void 0!==_items$find?_items$find:null,width:"65px",itemIdentifier:"id",items,onChange:item=>{updateTime("AMPM","AM"===(null==item?void 0:item.id)?"AM":"PM")}})]})]})};try{TimePicker.displayName="TimePicker",TimePicker.__docgenInfo={description:"TimePicker 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.",displayName:"TimePicker",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:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"Whether disabled select",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"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((dateString: string | null) => void)"}},useAmPm:{defaultValue:null,description:"",name:"useAmPm",required:!1,type:{name:"boolean"}},precision:{defaultValue:null,description:"",name:"precision",required:!1,type:{name:"enum",value:[{value:'"millisecond"'},{value:'"minute"'},{value:'"second"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pickers/TimePicker.tsx#TimePicker"]={docgenInfo:TimePicker.__docgenInfo,name:"TimePicker",path:"src/components/Pickers/TimePicker.tsx#TimePicker"})}catch(__react_docgen_typescript_loader_error){}const TimePicker_stories={title:"Components/TimePicker",component:TimePicker,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)(TimePicker,{...props,value,onChange:dateString=>{console.log("TimePicker onChange",dateString),updateArgs({value:dateString})}})},args:{id:"date-picker-input",label:"Date Picker",precision:"millisecond",useAmPm:!0,value:"02:03:04.078"}},__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 <TimePicker {...props} value={value} onChange={(dateString: string | null) => {\n      console.log('TimePicker onChange', dateString);\n      updateArgs({\n        value: dateString\n      });\n    }} />;\n  },\n  args: {\n    id: 'date-picker-input',\n    label: 'Date Picker',\n    precision: 'millisecond',\n    useAmPm: true,\n    value: '02:03:04.078'\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Pickers/styles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{BX:()=>PickersBaseLine,VC:()=>TimePickerContainer,qg:()=>PickerFooter,u7:()=>TimePickerInput,yb:()=>PickerContainer,yw:()=>TimePickerHolder});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_3__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),styled_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_themes__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/themes/index.ts"),_Input__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Input/index.ts");const TimePickerContainer=styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay.div(_templateObject||(_templateObject=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  direction: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.direction})),TimePickerHolder=styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay.div(_templateObject2||(_templateObject2=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"]))),TimePickerInput=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay)(_Input__WEBPACK_IMPORTED_MODULE_1__.p)(_templateObject3||(_templateObject3=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  width: 24px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n  &.picker-milliseconds {\n    width: 32px;\n  }\n"]))),PickerFooter=(styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay.button(_templateObject4||(_templateObject4=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  border: unset;\n  padding: 6px 12px;\n  margin: unset;\n  background: unset;\n  cursor: pointer;\n  font-family: ",";\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 14px;\n  color: ",";\n  height: 32px;\n"])),(_ref2=>{let{theme}=_ref2;return theme.typography.fontFamily}),(_ref3=>{let{theme}=_ref3;return theme.colors.text.link})),styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay.div(_templateObject5||(_templateObject5=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  background: ",";\n  border: 1px solid ",";\n  border-bottom: none;\n  border-radius: 4px 4px 0px 0px;\n  direction: ",";\n  width: 100%;\n  padding: 8px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n"])),(_ref4=>{let{theme}=_ref4;return theme.colors.fill.base}),(_ref5=>{let{theme}=_ref5;return theme.colors.border.light}),(_ref6=>{let{theme}=_ref6;return theme.direction}))),PickerContainer=styled_components__WEBPACK_IMPORTED_MODULE_2__.Ay.div(_templateObject6||(_templateObject6=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  direction: ",";\n"])),(_ref7=>{let{theme}=_ref7;return theme.direction})),PickersBaseLine=(0,styled_components__WEBPACK_IMPORTED_MODULE_2__.DU)(_templateObject7||(_templateObject7=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_3__.A)(["\n  .bp5-date-range-input {\n    display: flex;\n    gap: 4px;\n    border: 1px solid\n      ",";\n    background-color: ",";\n    border-radius: 4px;\n    width: fit-content;\n    &:focus-within {\n      box-shadow: ","\n        0px 0px 0px 1px;\n      border-color: ",";\n    }\n    .bp5-input-group {\n      input.bp5-input {\n        width: ",";\n        border: unset !important;\n        outline: unset !important;\n        box-shadow: unset !important;\n        &#end-date-picker-input {\n          text-align: right;\n          padding-left: unset !important;\n        }\n        &#start-date-picker-input {\n          text-align: left;\n          padding-right: unset !important;\n        }\n      }\n    }\n    .bp5-input-group:has(.bp5-input#start-date-picker-input)::after {\n      content: '-';\n      padding-left: 6px;\n      font-family: ",";\n      font-size: ",";\n    color: ",";\n    }\n  }\n  .bp5-portal {\n    --rdp-accent-color: ",";\n    --rdp-accent-color-dark: #215db0;\n    .bp5-overlay {\n      .bp5-overlay-backdrop {\n        bottom: 0;\n        left: 0;\n        position: fixed;\n        right: 0;\n        top: 0;\n        opacity: 1;\n        overflow: auto;\n        user-select: none;\n      }\n      .bp5-overlay-content {\n        z-index: ",";\n        border: 1px solid ",";\n        box-shadow:\n          0px 2px 4px ",",\n          0px 2px 16px ",";\n        border-radius: 4px;\n        background: ",";\n        .bp5-popover {\n          .bp5-popover-content {\n            .bp5-datepicker {\n              &.bp5-daterangepicker {\n                .bp5-datepicker-content {\n                  width: 480px;\n                  .bp5-daterangepicker-calendars {\n                    display: flex;\n                  }\n                  .bp5-daterangepicker-timepickers {\n                    display: flex;\n                    justify-content: space-around;\n                    width: 100%;\n                    padding: 0 16px 16px 16px;\n                  }\n                  .rdp {\n                    .rdp-months {\n                      display: flex;\n                      gap: 16px;\n                      .rdp-month {\n                        flex: 1;\n                      }\n                      .rdp-month.rdp-caption_start {\n                        .rdp-caption {\n                          flex-direction: row-reverse;\n                        }\n                      }\n                      .rdp-month.rdp-caption_end {\n                        .rdp-caption {\n                          flex-direction: row;\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n              .bp5-datepicker-content {\n                align-items: center;\n                display: flex;\n                flex-direction: column;\n                width: 280px;\n                .rdp {\n                  width: 100%;\n                  padding: 16px;\n\n                  .rdp-month {\n                    display: flex;\n                    flex-direction: column;\n                    gap: 16px;\n                  }\n                  .rdp-caption {\n                    gap: 8px;\n                    display: flex;\n                    justify-content: space-between;\n                    .rdp-vhidden {\n                      display: none;\n                    }\n                    .rdp-caption_dropdowns {\n                      display: flex;\n                      align-items: center;\n                      button {\n                        background: linear-gradient(\n                          180deg,\n                          "," 2.56%,\n                          "," 95.75%\n                        );\n                        outline: none;\n                      }\n                      button.bp5-datepicker-month-select {\n                        border-radius: 4px 0 0 4px;\n                      }\n                      button.bp5-datepicker-year-select {\n                        border-radius: 0px 4px 4px 0px;\n                      }\n                    }\n                    .rdp-nav {\n                      display: flex;\n                      align-items: center;\n                      button.bp5-datepicker-nav-button {\n                        border: unset;\n                        padding: unset;\n                        margin: unset;\n                        background: unset;\n                        height: 24px;\n                        width: 24px;\n                        cursor: pointer;\n                        svg path {\n                          fill: ",";\n                        }\n                        span.bp5-icon {\n                          display: grid;\n                          place-content: center;\n                        }\n                      }\n                    }\n                  }\n                }\n                .bp5-datepicker-timepicker-wrapper {\n                  padding: 0 16px 16px 16px;\n                }\n                .bp5-timepicker {\n                  display: flex;\n                  align-items: center;\n                  gap: 8px;\n                  .bp5-timepicker-input-row {\n                    display: flex;\n                    align-items: center;\n                    gap: 4px;\n                  }\n                  .bp5-icon.bp5-icon-double-caret-vertical,\n                  .bp5-timepicker-arrow-row {\n                    display: none;\n                  }\n                }\n              }\n              .bp5-datepicker-footer {\n                background: ",";\n                padding: 8px;\n                display: flex;\n                flex-direction: row-reverse;\n                justify-content: space-between;\n                width: 100%;\n                border-top: 1px solid\n                  ",";\n                button.bp5-button {\n                  border: unset;\n                  padding: 6px 12px;\n                  margin: unset;\n                  background: unset;\n                  cursor: pointer;\n                  font-family: ",";\n                  font-weight: 500;\n                  line-height: 14px;\n                  font-size: 14px;\n                  color: ",";\n                  height: 32px;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n    * {\n      box-sizing: border-box;\n    }\n  }\n  input.bp5-timepicker-input,\n  input.bp5-input {\n    &[type='number'] {\n      width: fit-content;\n    }\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    font-weight: 500;\n    line-height: 20px;\n    font-family: ",";\n    border-radius: 4px;\n    transition: all 0.2s ease-in-out;\n    padding: 6px 12px !important;\n    outline: unset;\n    border: 1px solid\n      ",";\n    background-color: ",";\n    border-radius: 4px;\n    transition: all 0.2s ease-in-out;\n    &::placeholder {\n      font-family: ",";\n      font-size: ",";\n      color: ",";\n    }\n    &:hover {\n      border-color: ",";\n    }\n    &:focus {\n      box-shadow: ","\n        0px 0px 0px 1px;\n      border-color: ",";\n    }\n    &:disabled {\n      opacity: 0.6;\n      background-color: ",";\n    }\n\n    color: ",";\n  }\n  table.rdp-table {\n    thead,\n    tbody,\n    tr,\n    th,\n    td {\n      border: none;\n      margin: 0;\n      padding: 0;\n    }\n    td.rdp-cell {\n      text-align: center;\n    }\n    td:has(button.bp5-button.rdp-day.rdp-day_hovered),\n    td:has(button.bp5-button.rdp-day_range_middle) {\n      background: ",";\n      color: ",";\n    }\n    td:has(button.bp5-button.rdp-day_outside) {\n      color: "," !important;\n      background: unset !important;\n    }\n    td:has(button.bp5-button.rdp-day_range_end) {\n      background-image: linear-gradient(\n        to right,\n        ",",\n        ","\n      );\n    }\n    td:has(button.bp5-button.rdp-day_range_start) {\n      background-image: linear-gradient(\n        to left,\n        ",",\n        ","\n      );\n    }\n    width: 100%;\n    -webkit-border-vertical-spacing: 8px;\n    -webkit-border-horizontal-spacing: 0px;\n    border-collapse: unset;\n    font-size: 12px;\n    font-family: ",";\n    thead {\n      font-size: 12px;\n      font-weight: 500;\n      letter-spacing: 0px;\n      text-align: center;\n      color: ",";\n    }\n    button.rdp-day {\n      height: 24px;\n      width: 24px;\n      padding: 0px;\n      /* margin: 4px; */\n      font-size: 14px;\n      font-weight: 400;\n      letter-spacing: 0px;\n      text-align: center;\n      color: ",";\n      background: unset;\n      border-radius: 4px;\n      border: none;\n      &.rdp-day_today {\n        border: 1px solid rgb(207, 215, 223);\n        color: ",";\n      }\n      &.rdp-day_selected.rdp-day_hovered.rdp-day_range_end {\n        opacity: 50%;\n      }\n      &.rdp-day_hovered_end:not(.rdp-day_outside) {\n        background-color: var(--rdp-accent-color) !important;\n        color: "," !important;\n      }\n      &.rdp-day_range_end {\n      }\n      &.rdp-day_selected {\n        background-color: var(--rdp-accent-color);\n        color: ",";\n      }\n      &.rdp-day_range_middle {\n        background: unset;\n        color: ",";\n        border-radius: 0;\n      }\n      &.rdp-day_outside {\n        color: ",";\n        background: unset;\n      }\n      &.rdp-day_disabled {\n        background: none;\n        color: ",";\n        cursor: not-allowed;\n      }\n      &:not([disabled]):not(.rdp-day_selected):focus {\n        border: ",";\n      }\n      &:not([disabled]):not(.rdp-day_selected):hover {\n        background: ",";\n        border: ",";\n      }\n    }\n  }\n  .bp5-html-select {\n    select {\n      background: linear-gradient(\n        180deg,\n        "," 2.56%,\n        #f3f5f7 95.75%\n      );\n      border: 1px solid ",";\n      height: 34px;\n      padding: 6px 32px 6px 12px;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 20px;\n      border-radius: 4px;\n      color: ",";\n      appearance: none;\n      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy45OTk5OCA1LjY5OTg1QzMuODE0MTEgNS42OTgzNSAzLjYzNTYyIDUuNjI2OTUgMy40OTk5OCA1LjQ5OTg1TDAuMjA5OTg0IDIuMTk5ODVDMC4wNzMwMTkzIDIuMDY5NiAtMC4wMDQ1MTY2IDEuODg4ODYgLTAuMDA0NTE2NiAxLjY5OTg1Qy0wLjAwNDUxNjYgMS41MTA4NCAwLjA3MzAxOTMgMS4zMzAxIDAuMjA5OTg0IDEuMTk5ODVDMC4zNDAyMzcgMS4wNjI4OSAwLjUyMDk3MyAwLjk4NTM1MiAwLjcwOTk4NCAwLjk4NTM1MkMwLjg5ODk5NSAwLjk4NTM1MiAxLjA3OTczIDEuMDYyODkgMS4yMDk5OCAxLjE5OTg1TDMuOTk5OTggMy45OTk4NUw2Ljc5OTk4IDEuMjA5ODVDNi45MzAyNCAxLjA3Mjg5IDcuMTEwOTcgMC45OTUzNTIgNy4yOTk5OCAwLjk5NTM1MkM3LjQ4ODk5IDAuOTk1MzUyIDcuNjY5NzMgMS4wNzI4OSA3Ljc5OTk4IDEuMjA5ODVDNy45MzY5NSAxLjM0MDEgOC4wMTQ0OCAxLjUyMDg0IDguMDE0NDggMS43MDk4NUM4LjAxNDQ4IDEuODk4ODYgNy45MzY5NSAyLjA3OTYgNy43OTk5OCAyLjIwOTg1TDQuNDk5OTggNS40OTk4NUM0LjM2NDM1IDUuNjI2OTUgNC4xODU4NSA1LjY5ODM1IDMuOTk5OTggNS42OTk4NVoiIGZpbGw9IiMyNjQ5NjYiLz4KPC9zdmc+Cg==');\n      background-repeat: no-repeat;\n      background-position: right 0.7rem top 50%;\n      background-size: 0.65rem auto;\n    }\n    select[name='months'] {\n      border-radius: 4px 0px 0px 4px;\n    }\n    select[name='years'] {\n      border-radius: 0px 4px 4px 0px;\n    }\n  }\n"])),(_ref8=>{let{theme,$isErrored}=_ref8;return $isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref9=>{let{theme}=_ref9;return theme.colors.fill.surface}),(_ref10=>{let{theme,$isErrored}=_ref10;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref11=>{let{theme,$isErrored}=_ref11;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref12=>{let{$inputLength}=_ref12;return"".concat(9.5*(null!=$inputLength?$inputLength:10),"px")}),(_ref13=>{let{theme}=_ref13;return theme.typography.fontFamily}),(_ref14=>{let{theme}=_ref14;return theme.typography.primary.fontSize}),(_ref15=>{let{theme}=_ref15;return theme.colors.text.primary}),(_ref16=>{let{theme}=_ref16;return theme.colors.common.accent}),(_ref17=>{let{theme}=_ref17;return theme.zIndex.popover||_themes__WEBPACK_IMPORTED_MODULE_0__.Mu.popover}),(_ref18=>{let{theme}=_ref18;return theme.colors.border.light}),(_ref19=>{let{theme}=_ref19;return(0,_themes__WEBPACK_IMPORTED_MODULE_0__.Yi)(theme.colors.shadow,.06)}),(_ref20=>{let{theme}=_ref20;return(0,_themes__WEBPACK_IMPORTED_MODULE_0__.Yi)(theme.colors.shadow,.16)}),(_ref21=>{let{theme}=_ref21;return theme.colors.fill.surface}),(_ref22=>{let{theme}=_ref22;return theme.colors.fill.surface}),(_ref23=>{let{theme}=_ref23;return theme.colors.fill.hover}),(_ref24=>{let{theme}=_ref24;return theme.colors.text.primary}),(_ref25=>{let{theme}=_ref25;return theme.colors.fill.base}),(_ref26=>{let{theme}=_ref26;return"dark"===theme.mode?theme.colors.border.light:"unset"}),(_ref27=>{let{theme}=_ref27;return theme.typography.fontFamily}),(_ref28=>{let{theme}=_ref28;return theme.colors.text.link}),(_ref29=>{let{theme}=_ref29;return theme.typography.fontFamily}),(_ref30=>{let{theme,$isErrored}=_ref30;return $isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref31=>{let{theme}=_ref31;return theme.colors.fill.surface}),(_ref32=>{let{theme}=_ref32;return theme.typography.fontFamily}),(_ref33=>{let{theme}=_ref33;return theme.typography.caption.fontSize}),(_ref34=>{let{theme}=_ref34;return theme.colors.text.placeholder}),(_ref35=>{let{theme,disabled,$isErrored}=_ref35;return disabled?theme.colors.border.normal:$isErrored?theme.colors.border.error:theme.colors.border.hover}),(_ref36=>{let{theme,$isErrored}=_ref36;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref37=>{let{theme,$isErrored}=_ref37;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref38=>{let{theme}=_ref38;return"dark"===theme.mode?theme.colors.fill.surface:"unset"}),(_ref39=>{let{theme}=_ref39;return theme.colors.text.primary}),(_ref40=>{let{theme}=_ref40;return(0,_themes__WEBPACK_IMPORTED_MODULE_0__.Yi)(theme.colors.fill.hilight,"dark"===theme.mode?.5:1)}),(_ref41=>{let{theme}=_ref41;return theme.colors.text.primary}),(_ref42=>{let{theme}=_ref42;return theme.colors.text.placeholder}),(_ref43=>{let{theme}=_ref43;return(0,_themes__WEBPACK_IMPORTED_MODULE_0__.Yi)(theme.colors.fill.hilight,"dark"===theme.mode?.5:1)}),(_ref44=>{let{theme}=_ref44;return theme.colors.fill.surface}),(_ref45=>{let{theme}=_ref45;return(0,_themes__WEBPACK_IMPORTED_MODULE_0__.Yi)(theme.colors.fill.hilight,"dark"===theme.mode?.5:1)}),(_ref46=>{let{theme}=_ref46;return theme.colors.fill.surface}),(_ref47=>{let{theme}=_ref47;return theme.typography.fontFamily}),(_ref48=>{let{theme}=_ref48;return theme.colors.text.secondary}),(_ref49=>{let{theme}=_ref49;return theme.colors.text.primary}),(_ref50=>{let{theme}=_ref50;return theme.colors.text.primary}),(_ref51=>{let{theme}=_ref51;return theme.colors.text.inverse}),(_ref52=>{let{theme}=_ref52;return theme.colors.text.inverse}),(_ref53=>{let{theme}=_ref53;return theme.colors.text.primary}),(_ref54=>{let{theme}=_ref54;return theme.colors.text.placeholder}),(_ref55=>{let{theme}=_ref55;return"dark"===theme.mode?"rgba(171, 179, 191, 0.6)":"rgba(95, 107, 124, 0.6)"}),(_ref56=>{let{theme}=_ref56;return"dark"===theme.mode?"1px solid ".concat(theme.colors.border.light):"unset"}),(_ref57=>{let{theme}=_ref57;return"dark"===theme.mode?theme.colors.fill.medium:theme.colors.fill.hover}),(_ref58=>{let{theme}=_ref58;return"dark"===theme.mode?"1px solid ".concat(theme.colors.border.light):"unset"}),(_ref59=>{let{theme}=_ref59;return theme.colors.fill.surface}),(_ref60=>{let{theme}=_ref60;return theme.colors.border.normal}),(_ref61=>{let{theme}=_ref61;return theme.colors.text.primary}))}}]);

package/storybook-static/{stories-Toast-stories.259ad8a3.iframe.bundle.js → stories-Toast-stories.9213bc14.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[77960],{"./src/stories/Toast.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,UseToasts:()=>UseToasts,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_components_Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Button/index.ts"),_components_Toast_ToastContext__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Toast/ToastContext.ts"),_components_Toast_ToastItem__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Toast/ToastItem.tsx"),_components_Toast_use_toasts__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/Toast/use-toasts.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Toast",component:_components_Toast_ToastItem__WEBPACK_IMPORTED_MODULE_3__.z,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}};let count=1;const PrimaryStory=props=>{var _React$useContext,_props$type2,_props$delay2;const{addToast}=null!==(_React$useContext=react__WEBPACK_IMPORTED_MODULE_0__.useContext(_components_Toast_ToastContext__WEBPACK_IMPORTED_MODULE_2__.$))&&void 0!==_React$useContext?_React$useContext:{};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{style:{width:"fit-content"},onClick:()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"success",delay:1e4}),setTimeout((()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"error",delay:1e4}),setTimeout((()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"warning",delay:1e4}),setTimeout((()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"error",delay:1e4})}),1e3)}),1e3)}),1e3)},children:"Random"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{style:{width:"fit-content"},onClick:()=>{var _props$text,_props$type,_props$delay;addToast({text:null!==(_props$text=props.text)&&void 0!==_props$text?_props$text:"",type:null!==(_props$type=props.type)&&void 0!==_props$type?_props$type:"success",delay:null!==(_props$delay=props.delay)&&void 0!==_props$delay?_props$delay:30})},children:"Open ".concat(null!==(_props$type2=props.type)&&void 0!==_props$type2?_props$type2:"success"," toast (").concat((null!==(_props$delay2=props.delay)&&void 0!==_props$delay2?_props$delay2:3e3)/1e3,"s)")}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("code",{children:JSON.stringify(props,null,"\t")})]})},Primary={render:function Render(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(PrimaryStory,{delay:props.delay,type:props.type,text:props.text})},args:{id:"1",text:"Title 1",type:"success",delay:3e3,index:0}},UseToastsStory=props=>{var _props$type4,_props$delay4;const[,setToast]=(0,_components_Toast_use_toasts__WEBPACK_IMPORTED_MODULE_4__.Y)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{style:{width:"fit-content"},onClick:()=>{var _props$text2,_props$type3,_props$delay3;setToast({text:null!==(_props$text2=props.text)&&void 0!==_props$text2?_props$text2:"",type:null!==(_props$type3=props.type)&&void 0!==_props$type3?_props$type3:"success",delay:null!==(_props$delay3=props.delay)&&void 0!==_props$delay3?_props$delay3:30,showProgress:props.showProgress,fixed:props.fixed})},children:"Open ".concat(null!==(_props$type4=props.type)&&void 0!==_props$type4?_props$type4:"success"," toast (").concat((null!==(_props$delay4=props.delay)&&void 0!==_props$delay4?_props$delay4:3e3)/1e3,"s)")}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("code",{children:JSON.stringify(props,null,"\t")})]})},UseToasts={render:function Render(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(UseToastsStory,{...props})},args:{id:"1",text:"Title 1",type:"success",delay:3e3,index:0,showProgress:!0,fixed:!1}},__namedExportsOrder=["Primary","UseToasts"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    return <PrimaryStory delay={props.delay} type={props.type} text={props.text} />;\n  },\n  args: {\n    id: '1',\n    text: 'Title 1',\n    type: 'success',\n    delay: 3000,\n    index: 0\n  }\n}",...Primary.parameters?.docs?.source}}},UseToasts.parameters={...UseToasts.parameters,docs:{...UseToasts.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    return <UseToastsStory {...props} />;\n  },\n  args: {\n    id: '1',\n    text: 'Title 1',\n    type: 'success',\n    delay: 3000,\n    index: 0,\n    showProgress: true,\n    fixed: false\n  }\n}",...UseToasts.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([[77960],{"./src/stories/Toast.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,UseToasts:()=>UseToasts,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_components_Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Button/index.ts"),_components_Toast_ToastContext__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Toast/ToastContext.ts"),_components_Toast_ToastItem__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/Toast/ToastItem.tsx"),_components_Toast_use_toasts__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/Toast/use-toasts.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Toast",component:_components_Toast_ToastItem__WEBPACK_IMPORTED_MODULE_3__.z,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}};let count=1;const PrimaryStory=props=>{var _React$useContext,_props$type2,_props$delay2;const{addToast}=null!==(_React$useContext=react__WEBPACK_IMPORTED_MODULE_0__.useContext(_components_Toast_ToastContext__WEBPACK_IMPORTED_MODULE_2__.$))&&void 0!==_React$useContext?_React$useContext:{};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{style:{width:"fit-content"},onClick:()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"success",delay:1e4}),setTimeout((()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"error",delay:1e4}),setTimeout((()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"warning",delay:1e4}),setTimeout((()=>{addToast({text:"Toast - Ticket properties updated. Check audit-logs for more details - ".concat(count++),type:"error",delay:1e4})}),1e3)}),1e3)}),1e3)},children:"Random"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{style:{width:"fit-content"},onClick:()=>{var _props$text,_props$type,_props$delay;addToast({text:null!==(_props$text=props.text)&&void 0!==_props$text?_props$text:"",type:null!==(_props$type=props.type)&&void 0!==_props$type?_props$type:"success",delay:null!==(_props$delay=props.delay)&&void 0!==_props$delay?_props$delay:30})},children:"Open ".concat(null!==(_props$type2=props.type)&&void 0!==_props$type2?_props$type2:"success"," toast (").concat((null!==(_props$delay2=props.delay)&&void 0!==_props$delay2?_props$delay2:3e3)/1e3,"s)")}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("code",{children:JSON.stringify(props,null,"\t")})]})},Primary={render:function Render(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(PrimaryStory,{delay:props.delay,type:props.type,text:props.text})},args:{id:"1",text:"Title 1",type:"success",delay:3e3,index:0}},UseToastsStory=props=>{var _props$type4,_props$delay4;const[,setToast]=(0,_components_Toast_use_toasts__WEBPACK_IMPORTED_MODULE_4__.Y)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Button__WEBPACK_IMPORTED_MODULE_1__.$,{style:{width:"fit-content"},onClick:()=>{var _props$text2,_props$type3,_props$delay3;setToast({text:null!==(_props$text2=props.text)&&void 0!==_props$text2?_props$text2:"",type:null!==(_props$type3=props.type)&&void 0!==_props$type3?_props$type3:"success",delay:null!==(_props$delay3=props.delay)&&void 0!==_props$delay3?_props$delay3:30,showProgress:props.showProgress,fixed:props.fixed})},children:"Open ".concat(null!==(_props$type4=props.type)&&void 0!==_props$type4?_props$type4:"success"," toast (").concat((null!==(_props$delay4=props.delay)&&void 0!==_props$delay4?_props$delay4:3e3)/1e3,"s)")}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("code",{children:JSON.stringify(props,null,"\t")})]})},UseToasts={render:function Render(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(UseToastsStory,{...props})},args:{id:"1",text:"Title 1",type:"success",delay:3e3,index:0,showProgress:!0,fixed:!1}},__namedExportsOrder=["Primary","UseToasts"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    return <PrimaryStory delay={props.delay} type={props.type} text={props.text} />;\n  },\n  args: {\n    id: '1',\n    text: 'Title 1',\n    type: 'success',\n    delay: 3000,\n    index: 0\n  }\n}",...Primary.parameters?.docs?.source}}},UseToasts.parameters={...UseToasts.parameters,docs:{...UseToasts.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    return <UseToastsStory {...props} />;\n  },\n  args: {\n    id: '1',\n    text: 'Title 1',\n    type: 'success',\n    delay: 3000,\n    index: 0,\n    showProgress: true,\n    fixed: false\n  }\n}",...UseToasts.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")}}]);