freemium-ui 2.0.64 → 2.0.66

package/storybook-static/stories-Loader-stories.bc37f5c2.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[5894],{"./src/stories/Loader.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Round:()=>Round,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Loader",component:__webpack_require__("./src/components/Loader/index.ts").a,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Round={args:{size:"medium",speed:"medium"}},__namedExportsOrder=["Round"];Round.parameters={...Round.parameters,docs:{...Round.parameters?.docs,source:{originalSource:"{\n  args: {\n    size: 'medium',\n    speed: 'medium'\n  }\n}",...Round.parameters?.docs?.source}}}},"./src/components/Loader/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>Loader_Loader});__webpack_require__("./node_modules/react/index.js");var 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"),keyframes=__webpack_require__("./src/styles/keyframes.ts");const BorderWidthMap={mini:2,small:2.5,medium:4,big:5},SpeedVariantMap={slow:1,medium:.7,fast:.4},SizeDimentionMap={mini:12,small:16,medium:24,big:32};var _templateObject;const StyledLoader=styled_components_browser_esm.Ay.div(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  position: relative;\n  border: ","px solid\n    ",";\n  border-radius: 50%;\n  border-top: ","px solid\n    ",";\n  width: ","px;\n  height: ","px;\n  animation: "," ","s linear infinite;\n"])),(_ref=>{let{size}=_ref;return BorderWidthMap[size]}),(_ref2=>{let{theme}=_ref2;return theme.colors.common.accent}),(_ref3=>{let{size}=_ref3;return BorderWidthMap[size]}),(_ref4=>{let{theme}=_ref4;return theme.colors.text.inverse}),(_ref5=>{let{size}=_ref5;return SizeDimentionMap[size]}),(_ref6=>{let{size}=_ref6;return SizeDimentionMap[size]}),keyframes.e$,(_ref7=>{let{speed}=_ref7;return SpeedVariantMap[speed]}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Loader=props=>{const{size="medium",speed="medium"}=props,theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsx)(StyledLoader,{dir:theme.direction,className:"fui-loader",speed,size})},Loader_Loader=Loader;try{Loader.displayName="Loader",Loader.__docgenInfo={description:"Loader Component can be used to indicate loading of a Page / Section of a page.",displayName:"Loader",props:{size:{defaultValue:null,description:"Size of Select input",name:"size",required:!1,type:{name:"enum",value:[{value:'"big"'},{value:'"small"'},{value:'"medium"'},{value:'"mini"'}]}},speed:{defaultValue:null,description:"Speed of Select input",name:"speed",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"slow"'},{value:'"fast"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Loader/Loader.tsx#Loader"]={docgenInfo:Loader.__docgenInfo,name:"Loader",path:"src/components/Loader/Loader.tsx#Loader"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/storybook-static/stories-Menu-stories.6dd5b4bd.iframe.bundle.js

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

package/storybook-static/stories-Modal-stories.71c5a3b5.iframe.bundle.js

@@ -0,0 +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"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-dialog/dist/index.mjs"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),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){}var Button=__webpack_require__("./src/components/Button/index.ts");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:'"primary"'},{value:'"secondary"'},{value:'"link"'},{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-MultiSelectDropdown-stories.0831f92e.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[9317],{"./node_modules/@radix-ui/react-avatar/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{H4:()=>$cddcb0b647441e34$export$fb8d7f40caaeea67,_V:()=>$cddcb0b647441e34$export$3e431a229df88919,bL:()=>$cddcb0b647441e34$export$be92b6f5f03c0fe9});var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/extends.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_radix_ui_react_context__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@radix-ui/react-context/dist/index.mjs"),_radix_ui_react_use_callback_ref__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs"),_radix_ui_react_use_layout_effect__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs"),_radix_ui_react_primitive__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@radix-ui/react-primitive/dist/index.mjs");const[$cddcb0b647441e34$var$createAvatarContext,$cddcb0b647441e34$export$90370d16b488820f]=(0,_radix_ui_react_context__WEBPACK_IMPORTED_MODULE_1__.A)("Avatar"),[$cddcb0b647441e34$var$AvatarProvider,$cddcb0b647441e34$var$useAvatarContext]=$cddcb0b647441e34$var$createAvatarContext("Avatar"),$cddcb0b647441e34$export$e2255cf6045e8d47=(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(((props,forwardedRef)=>{const{__scopeAvatar,...avatarProps}=props,[imageLoadingStatus,setImageLoadingStatus]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("idle");return(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)($cddcb0b647441e34$var$AvatarProvider,{scope:__scopeAvatar,imageLoadingStatus,onImageLoadingStatusChange:setImageLoadingStatus},(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_radix_ui_react_primitive__WEBPACK_IMPORTED_MODULE_2__.sG.span,(0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__.A)({},avatarProps,{ref:forwardedRef})))})),$cddcb0b647441e34$export$2cd8ae1985206fe8=(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(((props,forwardedRef)=>{const{__scopeAvatar,src,onLoadingStatusChange=()=>{},...imageProps}=props,context=$cddcb0b647441e34$var$useAvatarContext("AvatarImage",__scopeAvatar),imageLoadingStatus=function $cddcb0b647441e34$var$useImageLoadingStatus(src){const[loadingStatus,setLoadingStatus]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("idle");return(0,_radix_ui_react_use_layout_effect__WEBPACK_IMPORTED_MODULE_5__.N)((()=>{if(!src)return void setLoadingStatus("error");let isMounted=!0;const image=new window.Image,updateStatus=status=>()=>{isMounted&&setLoadingStatus(status)};return setLoadingStatus("loading"),image.onload=updateStatus("loaded"),image.onerror=updateStatus("error"),image.src=src,()=>{isMounted=!1}}),[src]),loadingStatus}(src),handleLoadingStatusChange=(0,_radix_ui_react_use_callback_ref__WEBPACK_IMPORTED_MODULE_4__.c)((status=>{onLoadingStatusChange(status),context.onImageLoadingStatusChange(status)}));return(0,_radix_ui_react_use_layout_effect__WEBPACK_IMPORTED_MODULE_5__.N)((()=>{"idle"!==imageLoadingStatus&&handleLoadingStatusChange(imageLoadingStatus)}),[imageLoadingStatus,handleLoadingStatusChange]),"loaded"===imageLoadingStatus?(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_radix_ui_react_primitive__WEBPACK_IMPORTED_MODULE_2__.sG.img,(0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__.A)({},imageProps,{ref:forwardedRef,src})):null})),$cddcb0b647441e34$export$69fffb6a9571fbfe=(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(((props,forwardedRef)=>{const{__scopeAvatar,delayMs,...fallbackProps}=props,context=$cddcb0b647441e34$var$useAvatarContext("AvatarFallback",__scopeAvatar),[canRender,setCanRender]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(void 0===delayMs);return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{if(void 0!==delayMs){const timerId=window.setTimeout((()=>setCanRender(!0)),delayMs);return()=>window.clearTimeout(timerId)}}),[delayMs]),canRender&&"loaded"!==context.imageLoadingStatus?(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_radix_ui_react_primitive__WEBPACK_IMPORTED_MODULE_2__.sG.span,(0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__.A)({},fallbackProps,{ref:forwardedRef})):null}));const $cddcb0b647441e34$export$be92b6f5f03c0fe9=$cddcb0b647441e34$export$e2255cf6045e8d47,$cddcb0b647441e34$export$3e431a229df88919=$cddcb0b647441e34$export$2cd8ae1985206fe8,$cddcb0b647441e34$export$fb8d7f40caaeea67=$cddcb0b647441e34$export$69fffb6a9571fbfe},"./src/stories/MultiSelectDropdown.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>MultiSelectDropdown_stories});var _templateObject,_templateObject2,react=__webpack_require__("./node_modules/react/index.js"),styles=__webpack_require__("./src/components/Dropdown/styles.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 InlineContainer=styled_components_browser_esm.Ay.div(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  flex: 1;\n  gap: 8px;\n  display: flex;\n  flex-wrap: wrap;\n  direction: ",";\n  input {\n    color: ",";\n    min-width: 150px;\n    flex: 1;\n    display: inline-block;\n    outline: none;\n    padding: 0 8px;\n    margin: 0;\n    border: none;\n    background: none;\n    font-weight: 500;\n    font-family: ",";\n    font-size: ",";\n    line-height: ",";\n  }\n"])),(_ref=>{let{theme}=_ref;return theme.direction}),(_ref2=>{let{theme}=_ref2;return theme.colors.text.primary}),(_ref3=>{let{theme}=_ref3;return theme.typography.fontFamily}),(_ref4=>{let{theme}=_ref4;return theme.typography.primary.fontSize}),(_ref5=>{let{theme}=_ref5;return theme.typography.primary.lineHeight}));styled_components_browser_esm.Ay.span(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)([""])));var downshift_esm=__webpack_require__("./node_modules/downshift/dist/downshift.esm.js"),ErrorText=__webpack_require__("./src/global/ErrorText/index.ts"),src_styles=__webpack_require__("./src/styles/index.ts"),Icons=__webpack_require__("./src/components/Icons/index.ts"),TickIcon=__webpack_require__("./src/components/Icons/TickIcon.tsx"),Loader=__webpack_require__("./src/components/Loader/index.ts"),Tag=__webpack_require__("./src/components/Tag/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const MultiSelectDropdown=_ref=>{var _getCustomMessage;let{itemIdentifier="id",label,id,items=[],onChange,placeholder,readOnly=!1,disabled=!1,isRequired=!1,itemToString,name,filterKey,width,useComboboxProps,useMultipleSelectionProps,emptyItemsText,getCustomMessage,onCustomValueAdd,customValues,inputValue:iV,hideClear,hideArrow,removeSelectedItem:rSelectedItem,defaultSelectedItems=[],handleInputChange,isErrored,isMenuLoading,errorText,InputProps,itemComponent,isDynamicMenu,locale,maxAllowedLength,minAllowedLength,hideChips=!1,hideSelectedItem=!1,onBackSpace}=_ref;const theme=(0,styled_components_browser_esm.DP)(),[inputValue,setInputValue]=react.useState(null!=iV?iV:""),{getSelectedItemProps,getDropdownProps,selectedItems,removeSelectedItem,setSelectedItems,addSelectedItem}=(0,downshift_esm.mH)({initialSelectedItems:defaultSelectedItems,onStateChange:_ref2=>{let{selectedItems:newSelectedItems,type}=_ref2;switch(type){case downshift_esm.mH.stateChangeTypes.FunctionSetSelectedItems:case downshift_esm.mH.stateChangeTypes.SelectedItemKeyDownBackspace:case downshift_esm.mH.stateChangeTypes.SelectedItemKeyDownDelete:case downshift_esm.mH.stateChangeTypes.DropdownKeyDownBackspace:case downshift_esm.mH.stateChangeTypes.FunctionRemoveSelectedItem:case downshift_esm.mH.stateChangeTypes.FunctionAddSelectedItem:newSelectedItems&&(null==onChange||onChange(newSelectedItems))}},...useMultipleSelectionProps}),localItems=react.useMemo((()=>items.filter((i=>{const key="string"==typeof i?i:null==i?void 0:i[filterKey||itemIdentifier];return!(hideSelectedItem&&selectedItems.some((slItm=>(null==itemToString?void 0:itemToString(slItm))===(null==itemToString?void 0:itemToString(i)))))&&(!inputValue||key.toLowerCase().includes(inputValue.toLowerCase()))}))),[items,inputValue,filterKey,itemIdentifier,hideSelectedItem,selectedItems,itemToString]),{isOpen,closeMenu,getToggleButtonProps,getLabelProps,getMenuProps,getInputProps,highlightedIndex,getItemProps}=(0,downshift_esm.Bp)({id,items:localItems,itemToString:item=>item&&itemToString?itemToString(item,"downshift"):"",selectedItem:null,inputValue,stateReducer:(state,actionAndChanges)=>{const{changes,type}=actionAndChanges;switch(type){case downshift_esm.Bp.stateChangeTypes.InputKeyDownEnter:case downshift_esm.Bp.stateChangeTypes.ItemClick:return{...changes,isOpen:!inputValue};default:return changes}},onStateChange:_ref3=>{let{inputValue:newInputValue,type,selectedItem:newSelectedItem}=_ref3;switch(type){case downshift_esm.Bp.stateChangeTypes.InputKeyDownEnter:case downshift_esm.Bp.stateChangeTypes.ItemClick:case downshift_esm.Bp.stateChangeTypes.InputBlur:newSelectedItem&&(selectedItems.find((sDI=>(null==sDI?void 0:sDI[itemIdentifier])===(null==newSelectedItem?void 0:newSelectedItem[itemIdentifier])))?removeSelectedItem(newSelectedItem):addSelectedItem(newSelectedItem),setInputValue(""),null==handleInputChange||handleInputChange(""));break;case downshift_esm.Bp.stateChangeTypes.InputChange:setInputValue(null!=newInputValue?newInputValue:""),null==handleInputChange||handleInputChange(null!=newInputValue?newInputValue:""),localItems.length||newInputValue||closeMenu()}},...useComboboxProps}),isOpenFlag=!disabled&&!readOnly&&isOpen,downshiftInputProps=getInputProps(getDropdownProps({preventKeyAction:isOpen,name,disabled,readOnly,dir:theme.direction})),addCustomValue=inputValue=>{if(inputValue&&customValues&&onCustomValueAdd&&highlightedIndex<0){const newItemToAdd=onCustomValueAdd({inputValue,customValues:!0});addSelectedItem(newItemToAdd),setInputValue("")}};return(0,jsx_runtime.jsxs)(styles.RZ,{width,children:[(0,jsx_runtime.jsxs)(src_styles.Gw,{className:"input-label",...getLabelProps({disabled,readOnly,dir:theme.direction}),children:[label,label&&isRequired&&(0,jsx_runtime.jsx)(src_styles.Tr,{children:"*"})]}),(0,jsx_runtime.jsxs)(styles.g$,{disabled,$isErrored:!!isErrored,"aria-invalid":isErrored,className:"dropdown-toggle-button",children:[(0,jsx_runtime.jsxs)(InlineContainer,{children:[!hideChips&&selectedItems.map(((selectedItemForRender,index)=>{var _itemToString;return(0,jsx_runtime.jsx)(Tag.v,{...getSelectedItemProps({selectedItem:selectedItemForRender,index,dir:theme.direction}),"aria-disabled":disabled,"aria-readonly":readOnly,iconProps:{"aria-disabled":disabled,disabled},onClose:e=>{disabled||readOnly||(e.stopPropagation(),removeSelectedItem(selectedItemForRender))},children:null!==(_itemToString=null==itemToString?void 0:itemToString(selectedItemForRender))&&void 0!==_itemToString?_itemToString:""},"selected-item-".concat(index))})),(0,jsx_runtime.jsx)("input",{placeholder,...downshiftInputProps,...InputProps,onKeyDown:event=>{var _downshiftInputProps$,_InputProps$onKeyDown;"Backspace"!==event.key||inputValue||(removeSelectedItem(selectedItems[selectedItems.length-1]),null==onBackSpace||onBackSpace()),"Enter"===event.key&&addCustomValue(inputValue),null==downshiftInputProps||null===(_downshiftInputProps$=downshiftInputProps.onKeyDown)||void 0===_downshiftInputProps$||_downshiftInputProps$.call(downshiftInputProps,event),null==InputProps||null===(_InputProps$onKeyDown=InputProps.onKeyDown)||void 0===_InputProps$onKeyDown||_InputProps$onKeyDown.call(InputProps,event)},onClick:event=>{var _downshiftInputProps$2,_InputProps$onClick;null==downshiftInputProps||null===(_downshiftInputProps$2=downshiftInputProps.onClick)||void 0===_downshiftInputProps$2||_downshiftInputProps$2.call(downshiftInputProps,event),null==InputProps||null===(_InputProps$onClick=InputProps.onClick)||void 0===_InputProps$onClick||_InputProps$onClick.call(InputProps,event),localItems.length||inputValue||closeMenu()}})]}),!hideClear&&(0,jsx_runtime.jsx)(src_styles.K0,{"aria-label":"Clear",onClick:event=>{setSelectedItems([]),setInputValue(""),event.stopPropagation(),event.preventDefault()},children:(0,jsx_runtime.jsx)(Icons.w0,{fill:theme.colors.text.primary})}),!hideArrow&&(0,jsx_runtime.jsx)(src_styles.K0,{...getToggleButtonProps({disabled,readOnly,dir:theme.direction}),children:(0,jsx_runtime.jsx)(styles._4,{$isOpen:isOpenFlag,fill:theme.colors.text.primary,width:8,height:8})})]}),!readOnly&&!disabled&&(0,jsx_runtime.jsx)(styles.qT,{$isOpen:isOpen,...getMenuProps({disabled,readOnly,dir:theme.direction}),children:isMenuLoading?(0,jsx_runtime.jsx)(styles.z$,{children:(0,jsx_runtime.jsx)(Loader.a,{})}):(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[isOpen&&(0===localItems.length||customValues)&&(0,jsx_runtime.jsx)(styles.ck,{readOnly:!0,children:customValues?(0,jsx_runtime.jsx)(styles.Ri,{tabIndex:0,onClick:event=>{var _downshiftInputProps$3;event.stopPropagation(),addCustomValue(inputValue),inputValue&&(null==downshiftInputProps||null===(_downshiftInputProps$3=downshiftInputProps.onClick)||void 0===_downshiftInputProps$3||_downshiftInputProps$3.call(downshiftInputProps,event))},children:null!==(_getCustomMessage=null==getCustomMessage?void 0:getCustomMessage(inputValue))&&void 0!==_getCustomMessage?_getCustomMessage:"Click to add"}):null!=emptyItemsText?emptyItemsText:"No items"}),isOpen&&localItems.map(((item,index)=>{var _itemIdentifier,_item$itemIdentifier,_itemToString2;const key="string"==typeof item?"".concat(item).concat(index).trim():"".concat(null!==(_itemIdentifier=null==item?void 0:item[itemIdentifier])&&void 0!==_itemIdentifier?_itemIdentifier:"").concat(index).trim(),isSelected=selectedItems.map((sI=>null==sI?void 0:sI[itemIdentifier])).filter(Boolean).indexOf(null!==(_item$itemIdentifier=null==item?void 0:item[itemIdentifier])&&void 0!==_item$itemIdentifier?_item$itemIdentifier:"")>-1;return(0,jsx_runtime.jsx)(styles.ck,{$isHilighted:highlightedIndex===index,$isSelected:isSelected,...getItemProps({item,index,dir:theme.direction}),children:itemComponent?itemComponent(item):(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[null!==(_itemToString2=null==itemToString?void 0:itemToString(item))&&void 0!==_itemToString2?_itemToString2:"",isSelected&&(0,jsx_runtime.jsx)(TickIcon.A,{fill:theme.colors.common.accent})]})},key)}))]})}),isErrored&&errorText&&(0,jsx_runtime.jsx)(ErrorText.y,{children:errorText})]})},MultiSelectDropdown_MultiSelectDropdown=MultiSelectDropdown;try{MultiSelectDropdown.displayName="MultiSelectDropdown",MultiSelectDropdown.__docgenInfo={description:"MultiSelectDropdown displays a list or drop-down box that enables selection of an option or multiple options from an available list of values.",displayName:"MultiSelectDropdown",props:{items:{defaultValue:{value:"[]"},description:"dropdown item content",name:"items",required:!1,type:{name:"T[]"}},itemIdentifier:{defaultValue:{value:"id"},description:"Id of the item",name:"itemIdentifier",required:!1,type:{name:"string"}},defaultSelectedItems:{defaultValue:{value:"[]"},description:"selected item of dropdown",name:"defaultSelectedItems",required:!1,type:{name:"T[]"}},onChange:{defaultValue:null,description:"Called when select an option or input value change",name:"onChange",required:!1,type:{name:"((item: T[]) => void)"}},itemToString:{defaultValue:null,description:"",name:"itemToString",required:!1,type:{name:'((item: T, type?: "display" | "list-item" | "downshift") => string)'}},itemComponent:{defaultValue:null,description:"Fuction to give the string representation of the item",name:"itemComponent",required:!1,type:{name:"((item: T) => ReactNode)"}},readOnly:{defaultValue:{value:"false"},description:"Is the dropdown readonly",name:"readOnly",required:!1,type:{name:"boolean"}},disabled:{defaultValue:{value:"false"},description:"Whether disabled select",name:"disabled",required:!1,type:{name:"boolean"}},name:{defaultValue:null,description:"name of the drowpdown",name:"name",required:!1,type:{name:"string"}},width:{defaultValue:null,description:"width of the multi select drowpdown",name:"width",required:!1,type:{name:"string"}},filterKey:{defaultValue:null,description:"",name:"filterKey",required:!1,type:{name:"string"}},getCustomMessage:{defaultValue:null,description:"",name:"getCustomMessage",required:!1,type:{name:"((inoutValue: string) => string)"}},emptyItemsText:{defaultValue:null,description:"Empty items text box",name:"emptyItemsText",required:!1,type:{name:"string"}},hideClear:{defaultValue:null,description:"Whether to allow hide or clear when click",name:"hideClear",required:!1,type:{name:"boolean"}},hideArrow:{defaultValue:null,description:"Whether to hide or show arrow",name:"hideArrow",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"Error text to be shown",name:"errorText",required:!1,type:{name:"string"}},isErrored:{defaultValue:null,description:"Is this a error field?",name:"isErrored",required:!1,type:{name:"boolean"}},isRequired:{defaultValue:{value:"false"},description:"Is this a required field?",name:"isRequired",required:!1,type:{name:"boolean"}},isMenuLoading:{defaultValue:null,description:"Is menu loading?",name:"isMenuLoading",required:!1,type:{name:"boolean"}},inputValue:{defaultValue:null,description:"",name:"inputValue",required:!1,type:{name:"string | null"}},handleInputChange:{defaultValue:null,description:"",name:"handleInputChange",required:!1,type:{name:"((inputValue: string) => void)"}},onCustomValueAdd:{defaultValue:null,description:"",name:"onCustomValueAdd",required:!1,type:{name:"((item: { inputValue: string; customValues: boolean; }) => T)"}},removeSelectedItem:{defaultValue:null,description:"",name:"removeSelectedItem",required:!1,type:{name:"((item: T, index: number) => void)"}},customValues:{defaultValue:null,description:"Is this custom value",name:"customValues",required:!1,type:{name:"boolean"}},id:{defaultValue:null,description:"id of the drowpdown",name:"id",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"label for the drowpdown",name:"label",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},useMultipleSelectionProps:{defaultValue:null,description:"",name:"useMultipleSelectionProps",required:!1,type:{name:"UseMultipleSelectionProps<T>"}},useComboboxProps:{defaultValue:null,description:"",name:"useComboboxProps",required:!1,type:{name:"UseComboboxProps<T>"}},InputProps:{defaultValue:null,description:"",name:"InputProps",required:!1,type:{name:"InputHTMLAttributes<HTMLInputElement>"}},onBackSpace:{defaultValue:null,description:"",name:"onBackSpace",required:!1,type:{name:"(() => void)"}},maxAllowedLength:{defaultValue:null,description:"",name:"maxAllowedLength",required:!1,type:{name:"number"}},isDynamicMenu:{defaultValue:null,description:"",name:"isDynamicMenu",required:!1,type:{name:"boolean"}},minAllowedLength:{defaultValue:null,description:"",name:"minAllowedLength",required:!1,type:{name:"number"}},locale:{defaultValue:null,description:"",name:"locale",required:!1,type:{name:"{ createText: string; deleteText: string; }"}},hideChips:{defaultValue:{value:"false"},description:"",name:"hideChips",required:!1,type:{name:"boolean"}},hideSelectedItem:{defaultValue:{value:"false"},description:"",name:"hideSelectedItem",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MultiSelectDropdown/MultiSelectDropdown.tsx#MultiSelectDropdown"]={docgenInfo:MultiSelectDropdown.__docgenInfo,name:"MultiSelectDropdown",path:"src/components/MultiSelectDropdown/MultiSelectDropdown.tsx#MultiSelectDropdown"})}catch(__react_docgen_typescript_loader_error){}var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api");const MultiSelectDropdown_stories={title:"Components/MultiSelectDropdown",component:MultiSelectDropdown_MultiSelectDropdown,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={render:function Render(props){const[{defaultSelectedItems,items},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return(0,jsx_runtime.jsx)(MultiSelectDropdown_MultiSelectDropdown,{...props,defaultSelectedItems,items,onChange:selectedItems=>{console.log(selectedItems),updateArgs({defaultSelectedItems:selectedItems})},onCustomValueAdd:val=>{const newData={id:items.length+1,name:val.inputValue,email:"".concat(val.inputValue,"@example.com")};return updateArgs({items:[...items,newData]}),newData}})},args:{width:"312px",label:"User",defaultSelectedItems:[{id:3,name:"Alister",email:"aashenhurst2@tinypic.com",gender:"Male"},{id:4,name:"Bab",email:"bgrahl3@businessweek.com",gender:"Agender"},{id:6,name:"Galina",email:"gleason5@yahoo.co.jp",gender:"Female"}],isRequired:!0,placeholder:"Select an user",isErrored:!1,errorText:"This field is required",customValues:!0,emptyItemsText:"No users found here",readOnly:!1,getCustomMessage:inputValue=>inputValue.length>=3?"Add ".concat(inputValue," as a new user"):"Type at least 3 characters to search",itemIdentifier:"id",name:"users",id:"users-dropdown",itemToString:item=>null==item?void 0:item.name,items:[{id:1,name:"Mickey",email:"mfernandes0@comcast.net",gender:"Male"},{id:2,name:"Noreen",email:"nandrew1@1688.com",gender:"Female"},{id:3,name:"Alister",email:"aashenhurst2@tinypic.com",gender:"Male"},{id:4,name:"Bab",email:"bgrahl3@businessweek.com",gender:"Agender"},{id:5,name:"Rogerio",email:"rrevill4@issuu.com",gender:"Male"},{id:6,name:"Galina",email:"gleason5@yahoo.co.jp",gender:"Female"},{id:7,name:"Ranice",email:"rreeve6@pagesperso-orange.fr",gender:"Female"},{id:8,name:"Brenda",email:"bsircombe7@lulu.com",gender:"Agender"},{id:9,name:"Aggie",email:"azumfelde8@imageshack.us",gender:"Female"},{id:10,name:"Guthrie",email:"gsullivan9@pinterest.com",gender:"Male"},{id:11,name:"Esma",email:"evedenyakina@cyberchimps.com",gender:"Female"},{id:12,name:"Nevil",email:"nhymusb@home.pl",gender:"Male"},{id:13,name:"Gar",email:"gboothmanc@reddit.com",gender:"Male"},{id:14,name:"Way",email:"wcareyd@indiatimes.com",gender:"Male"},{id:15,name:"Sosanna",email:"seshe@wix.com",gender:"Female"},{id:16,name:"Enrika",email:"edickonf@cnet.com",gender:"Female"},{id:17,name:"Major",email:"mhottong@berkeley.edu",gender:"Male"},{id:18,name:"Rozanne",email:"rambrosonih@huffingtonpost.com",gender:"Female"},{id:19,name:"Willy",email:"wblackhursti@si.edu",gender:"Male"},{id:20,name:"Felice",email:"fhaycroftj@booking.com",gender:"Male"}],filterKey:"name",hideChips:!1,hideSelectedItem:!1}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    const [{\n      defaultSelectedItems,\n      items\n    }, updateArgs] = useArgs();\n    return <MultiSelectDropdown {...props} defaultSelectedItems={defaultSelectedItems} items={items} onChange={selectedItems => {\n      console.log(selectedItems);\n      updateArgs({\n        defaultSelectedItems: selectedItems\n      });\n    }} onCustomValueAdd={val => {\n      const newData = {\n        id: items.length + 1,\n        name: val.inputValue,\n        email: `${val.inputValue}@example.com`\n      };\n      updateArgs({\n        items: [...items, newData]\n      });\n      return newData;\n    }} />;\n  },\n  args: {\n    width: '312px',\n    label: 'User',\n    defaultSelectedItems: [{\n      id: 3,\n      name: 'Alister',\n      email: 'aashenhurst2@tinypic.com',\n      gender: 'Male'\n    }, {\n      id: 4,\n      name: 'Bab',\n      email: 'bgrahl3@businessweek.com',\n      gender: 'Agender'\n    }, {\n      id: 6,\n      name: 'Galina',\n      email: 'gleason5@yahoo.co.jp',\n      gender: 'Female'\n    }],\n    isRequired: true,\n    placeholder: 'Select an user',\n    isErrored: false,\n    errorText: 'This field is required',\n    customValues: true,\n    emptyItemsText: 'No users found here',\n    readOnly: false,\n    getCustomMessage: inputValue => inputValue.length >= 3 ? `Add ${inputValue} as a new user` : 'Type at least 3 characters to search',\n    itemIdentifier: 'id',\n    name: 'users',\n    id: 'users-dropdown',\n    itemToString: (item: any) => item?.name,\n    items: users,\n    filterKey: 'name',\n    hideChips: false,\n    hideSelectedItem: false\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Dropdown/styles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{H:()=>SelectViewport,H5:()=>SelectRoot,Iu:()=>StyledSelect,OY:()=>ArrowHolder,RZ:()=>DropdownContainer,Ri:()=>TextAddButton,TR:()=>SelectLabel,Vp:()=>SelectPortal,_4:()=>StyledChevronUp,bq:()=>SelectTrigger,ck:()=>ListItem,eb:()=>SelectItem,g$:()=>DropdownToggleButton,gC:()=>SelectContent,h:()=>SelectItemText,h3:()=>SelectItemIndicator,qT:()=>ItemsContainer,r4:()=>EmptyPlaceholder,s3:()=>SelectGroup,uD:()=>SelectLabelDivider,wB:()=>SelectIcon,yv:()=>SelectValue,z$:()=>LoaderContainer});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,_templateObject17,_templateObject18,_templateObject19,_templateObject20,_templateObject21,_templateObject22,_templateObject23,_templateObject24,_templateObject25,_templateObject26,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@radix-ui/react-select/dist/index.mjs"),styled_components__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/styles/keyframes.ts"),_themes__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/themes/index.ts"),_Icons__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Icons/index.ts");const StyledChevronUp=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_Icons__WEBPACK_IMPORTED_MODULE_2__.rX)(_templateObject||(_templateObject=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  transform: rotate(",");\n  transition: transform 0.2s ease-in-out;\n"])),(_ref=>{let{$isOpen}=_ref;return $isOpen?"0deg":"-180deg"})),DropdownContainer=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject2||(_templateObject2=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  position: relative;\n  width: ",";\n  direction: ",";\n  div.input-container {\n    padding-right: 8px;\n  }\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"])),(_ref2=>{let{width}=_ref2;return width||"auto"}),(_ref3=>{let{theme}=_ref3;return theme.direction})),DropdownToggleButton=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject3||(_templateObject3=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  outline: none;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  border: 1px solid\n    ",";\n  background-color: ",";\n  border-radius: 4px;\n  transition: all 0.2s ease-in-out;\n  direction: ",";\n  &:hover {\n    border-color: ",";\n  }\n  &:focus-within,\n  &:focus {\n    box-shadow: ","\n      0px 0px 0px 1px;\n    border-color: ",";\n  }\n"])),(_ref4=>{let{theme}=_ref4;return theme.typography.fontFamily}),(_ref5=>{let{theme}=_ref5;return theme.typography.primary.fontSize}),(_ref6=>{let{theme}=_ref6;return theme.typography.primary.lineHeight}),(_ref7=>{let{theme}=_ref7;return theme.colors.text.primary}),(_ref8=>{let{theme,disabled,$isErrored}=_ref8;return disabled?theme.colors.border.disabled:$isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref9=>{let{theme,disabled}=_ref9;return disabled?theme.colors.fill.disabled:theme.colors.fill.surface}),(_ref10=>{let{theme}=_ref10;return theme.direction}),(_ref11=>{let{theme,disabled,$isErrored}=_ref11;return disabled?theme.colors.border.disabled:$isErrored?theme.colors.border.error:theme.colors.border.hover}),(_ref12=>{let{theme,$isErrored,disabled}=_ref12;return disabled?"transparent":$isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref13=>{let{theme,$isErrored,disabled}=_ref13;return disabled?"transparent":$isErrored?theme.colors.border.error:theme.colors.border.active})),ItemsContainer=(styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.span(_templateObject4||(_templateObject4=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  color: ",";\n  margin-right: 8px;\n  max-width: 256px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"])),(_ref14=>{let{theme}=_ref14;return theme.direction}),(_ref15=>{let{isP,theme}=_ref15;return isP?theme.colors.text.placeholder:"inherit"})),styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.ul(_templateObject5||(_templateObject5=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  position: absolute;\n  width: calc(100% - 16px);\n  padding: 8px;\n  margin: 4px 0 0 0;\n  overflow: auto;\n  scrollbar-width: thin;\n  max-height: 200px;\n  display: ",";\n  list-style: none;\n  z-index: ",";\n  border-radius: 6px;\n  border: 1px solid ",";\n  background: ",";\n  box-shadow:\n    "," 0px 2px 3px,\n    "," 0px 4px 20px;\n  max-height: 200px;\n"])),(_ref16=>{let{theme}=_ref16;return theme.direction}),(_ref17=>{let{$isOpen}=_ref17;return $isOpen?"block":"none"}),(_ref18=>{let{theme}=_ref18;return theme.zIndex.dropdown||_themes__WEBPACK_IMPORTED_MODULE_1__.Mu.dropdown}),(_ref19=>{let{theme}=_ref19;return theme.colors.border.light}),(_ref20=>{let{theme}=_ref20;return theme.colors.fill.surface}),(_ref21=>{let{theme}=_ref21;return(0,_themes__WEBPACK_IMPORTED_MODULE_1__.Yi)(theme.colors.shadow,.06)}),(_ref22=>{let{theme}=_ref22;return(0,_themes__WEBPACK_IMPORTED_MODULE_1__.Yi)(theme.colors.shadow,.16)}))),ListItem=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.li(_templateObject6||(_templateObject6=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  padding: 8px 12px;\n  border-radius: 4px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  justify-content: space-between;\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  background: ",";\n  &:hover {\n    background: ",";\n  }\n"])),(_ref23=>{let{theme}=_ref23;return theme.direction}),(_ref24=>{let{theme}=_ref24;return theme.typography.fontFamily}),(_ref25=>{let{theme}=_ref25;return theme.typography.primary.fontSize}),(_ref26=>{let{theme}=_ref26;return theme.typography.primary.lineHeight}),(_ref27=>{let{theme}=_ref27;return theme.colors.text.primary}),(_ref28=>{let{theme,$isHilighted,$isSelected}=_ref28;return $isHilighted||$isSelected?"dark"===theme.mode?theme.colors.fill.medium:theme.colors.fill.hilight:"inherit"}),(_ref29=>{let{theme,$isSelected,readOnly}=_ref29;return readOnly?"inherit":$isSelected&&"dark"!==theme.mode?theme.colors.fill.hilight:theme.colors.fill.medium})),TextAddButton=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject7||(_templateObject7=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  cursor: pointer;\n  color: ",";\n  direction: ",";\n"])),(_ref30=>{let{theme}=_ref30;return theme.colors.text.link}),(_ref31=>{let{theme}=_ref31;return theme.direction})),LoaderContainer=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject8||(_templateObject8=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  min-height: 128px;\n  display: grid;\n  place-content: center;\n  direction: ",";\n"])),(_ref32=>{let{theme}=_ref32;return theme.direction})),ArrowHolder=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject9||(_templateObject9=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n  direction: ",";\n"])),(_ref33=>{let{theme}=_ref33;return theme.direction})),StyledSelect=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject10||(_templateObject10=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n"])),(_ref34=>{let{theme}=_ref34;return theme.direction})),EmptyPlaceholder=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.div(_templateObject11||(_templateObject11=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  height: ",";\n"])),(_ref35=>{let{theme}=_ref35;return"calc(1.5 * ".concat(theme.typography.primary.fontSize,")")})),SelectRoot=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.bL)(_templateObject12||(_templateObject12=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)([""]))),SelectGroup=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.YJ)(_templateObject13||(_templateObject13=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)([""]))),SelectValue=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.WT)(_templateObject14||(_templateObject14=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  flex: 1;\n"]))),SelectPortal=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.ZL)(_templateObject15||(_templateObject15=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)([""]))),SelectItem=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.q7)(_templateObject16||(_templateObject16=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  padding: 8px 12px;\n  border-radius: 4px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  justify-content: space-between;\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  position: relative;\n  user-select: none;\n  outline: none;\n  &[data-disabled] {\n    background-color: inherit;\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n  &[data-state='checked'] {\n    background-color: ",";\n  }\n  &[data-highlighted] {\n    background-color: ",";\n  }\n"])),(_ref36=>{let{theme}=_ref36;return theme.direction}),(_ref37=>{let{theme}=_ref37;return theme.typography.fontFamily}),(_ref38=>{let{theme}=_ref38;return theme.typography.primary.fontSize}),(_ref39=>{let{theme}=_ref39;return theme.typography.primary.lineHeight}),(_ref40=>{let{theme}=_ref40;return theme.colors.text.primary}),(_ref41=>{let{theme}=_ref41;return"dark"===theme.mode?theme.colors.fill.medium:theme.colors.fill.hilight}),(_ref42=>{let{theme}=_ref42;return"dark"===theme.mode?theme.colors.fill.medium:theme.colors.fill.hover})),SelectLabelDivider=styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay.hr(_templateObject17||(_templateObject17=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  flex: 1;\n  height: 0px;\n  border-style: solid;\n  border-top: unset;\n  border-right: unset;\n  border-left: unset;\n  border-bottom: 1px solid ",";\n  margin: 0;\n"])),(_ref43=>{let{theme}=_ref43;return theme.colors.border.light})),SelectLabel=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.JU)(_templateObject18||(_templateObject18=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  padding: 8px 12px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n"])),(_ref44=>{let{theme}=_ref44;return theme.direction}),(_ref45=>{let{theme}=_ref45;return theme.typography.fontFamily}),(_ref46=>{let{theme}=_ref46;return theme.typography.secondary.fontSize}),(_ref47=>{let{theme}=_ref47;return theme.typography.secondary.lineHeight}),(_ref48=>{let{theme}=_ref48;return theme.colors.text.placeholder})),SelectContent=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.UC)(_templateObject19||(_templateObject19=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  padding: 8px;\n  overflow: auto;\n  list-style: none;\n  position: relative;\n  z-index: ",";\n  border-radius: 6px;\n  border: 1px solid ",";\n  background: ",";\n  box-shadow:\n    "," 0px 2px 3px,\n    "," 0px 4px 20px;\n  width: ",";\n  max-height: min(var(--radix-select-content-available-height), 232px);\n  animation-duration: ",";\n  animation-timing-function: ",";\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),(_ref49=>{let{theme}=_ref49;return theme.direction}),(_ref50=>{let{theme}=_ref50;return theme.zIndex.dropdown||_themes__WEBPACK_IMPORTED_MODULE_1__.Mu.dropdown}),(_ref51=>{let{theme}=_ref51;return theme.colors.border.light}),(_ref52=>{let{theme}=_ref52;return theme.colors.fill.surface}),(_ref53=>{let{theme}=_ref53;return(0,_themes__WEBPACK_IMPORTED_MODULE_1__.Yi)(theme.colors.shadow,.06)}),(_ref54=>{let{theme}=_ref54;return(0,_themes__WEBPACK_IMPORTED_MODULE_1__.Yi)(theme.colors.shadow,.16)}),(_ref55=>{let{$matchButtonWidth}=_ref55;return $matchButtonWidth?"var(--radix-select-trigger-width)":"auto"}),(_ref56=>{let{theme}=_ref56;return theme.transitions.duration.standard}),(_ref57=>{let{theme}=_ref57;return theme.transitions.easing.easeIn}),_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__.QZ,_styles_keyframes__WEBPACK_IMPORTED_MODULE_0__.Xn),SelectItemText=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.p4)(_templateObject20||(_templateObject20=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  display: flex;\n  align-items: center;\n"])),(_ref58=>{let{theme}=_ref58;return theme.direction})),SelectViewport=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.LM)(_templateObject21||(_templateObject21=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  scrollbar-width: thin !important;\n"])),(_ref59=>{let{theme}=_ref59;return theme.direction})),SelectItemIndicator=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.VF)(_templateObject22||(_templateObject22=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)([""]))),SelectIcon=((0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.PP)(_templateObject23||(_templateObject23=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  display: grid;\n  place-content: center;\n  margin-bottom: 8px;\n"])),(_ref60=>{let{theme}=_ref60;return theme.direction})),(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.wn)(_templateObject24||(_templateObject24=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  display: grid;\n  place-content: center;\n  margin-top: 8px;\n  transform: rotate(-180deg);\n"])),(_ref61=>{let{theme}=_ref61;return theme.direction})),(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.In)(_templateObject25||(_templateObject25=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  cursor: pointer;\n  transform: rotate(-180deg);\n  transition: transform 0.2s ease-in-out;\n  display: grid;\n  place-content: center;\n"])),(_ref62=>{let{theme}=_ref62;return theme.direction}))),SelectTrigger=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.Ay)(_radix_ui_react_select__WEBPACK_IMPORTED_MODULE_5__.l9)(_templateObject26||(_templateObject26=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.A)(["\n  direction: ",";\n  font-family: ",";\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  width: ",";\n  padding: 6px 12px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: space-between;\n  outline: none;\n  border: 1px solid\n    ",";\n  background-color: ",";\n  border-radius: 4px;\n  transition: all 0.2s ease-in-out;\n  span:first-child {\n    flex: 1;\n    text-align: ",";\n  }\n  &:hover {\n    border-color: ",";\n  }\n  &:focus,\n  &[data-state='open'] {\n    box-shadow: ","\n      0px 0px 0px 1px;\n    border-color: ",";\n  }\n  &[data-placeholder] {\n    color: ",";\n    white-space: nowrap;\n  }\n  &[data-state='open'] {\n    .SelectIcon {\n      transform: rotate(0deg);\n    }\n  }\n  &[data-disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n"])),(_ref63=>{let{theme}=_ref63;return theme.direction}),(_ref64=>{let{theme}=_ref64;return theme.typography.fontFamily}),(_ref65=>{let{theme}=_ref65;return theme.typography.primary.fontSize}),(_ref66=>{let{theme}=_ref66;return theme.typography.primary.lineHeight}),(_ref67=>{let{theme}=_ref67;return theme.colors.text.primary}),(_ref68=>{let{width}=_ref68;return width||"100%"}),(_ref69=>{let{theme,$isErrored}=_ref69;return $isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref70=>{let{theme}=_ref70;return theme.colors.fill.surface}),(_ref71=>{let{theme}=_ref71;return"ltr"===theme.direction?"left":"right"}),(_ref72=>{let{theme,disabled,$isErrored}=_ref72;return disabled?theme.colors.border.normal:$isErrored?theme.colors.border.error:theme.colors.border.hover}),(_ref73=>{let{theme,$isErrored}=_ref73;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref74=>{let{theme,$isErrored}=_ref74;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref75=>{let{theme}=_ref75;return theme.colors.text.placeholder}))},"./src/components/Loader/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>Loader_Loader});__webpack_require__("./node_modules/react/index.js");var 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"),keyframes=__webpack_require__("./src/styles/keyframes.ts");const BorderWidthMap={mini:2,small:2.5,medium:4,big:5},SpeedVariantMap={slow:1,medium:.7,fast:.4},SizeDimentionMap={mini:12,small:16,medium:24,big:32};var _templateObject;const StyledLoader=styled_components_browser_esm.Ay.div(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  position: relative;\n  border: ","px solid\n    ",";\n  border-radius: 50%;\n  border-top: ","px solid\n    ",";\n  width: ","px;\n  height: ","px;\n  animation: "," ","s linear infinite;\n"])),(_ref=>{let{size}=_ref;return BorderWidthMap[size]}),(_ref2=>{let{theme}=_ref2;return theme.colors.common.accent}),(_ref3=>{let{size}=_ref3;return BorderWidthMap[size]}),(_ref4=>{let{theme}=_ref4;return theme.colors.text.inverse}),(_ref5=>{let{size}=_ref5;return SizeDimentionMap[size]}),(_ref6=>{let{size}=_ref6;return SizeDimentionMap[size]}),keyframes.e$,(_ref7=>{let{speed}=_ref7;return SpeedVariantMap[speed]}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Loader=props=>{const{size="medium",speed="medium"}=props,theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsx)(StyledLoader,{dir:theme.direction,className:"fui-loader",speed,size})},Loader_Loader=Loader;try{Loader.displayName="Loader",Loader.__docgenInfo={description:"Loader Component can be used to indicate loading of a Page / Section of a page.",displayName:"Loader",props:{size:{defaultValue:null,description:"Size of Select input",name:"size",required:!1,type:{name:"enum",value:[{value:'"big"'},{value:'"small"'},{value:'"medium"'},{value:'"mini"'}]}},speed:{defaultValue:null,description:"Speed of Select input",name:"speed",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"slow"'},{value:'"fast"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Loader/Loader.tsx#Loader"]={docgenInfo:Loader.__docgenInfo,name:"Loader",path:"src/components/Loader/Loader.tsx#Loader"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Tag/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{v:()=>Tag_Tag});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,react=__webpack_require__("./node_modules/react/index.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),Cross=__webpack_require__("./src/components/Icons/Cross.tsx"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-avatar/dist/index.mjs");const AvatarRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  overflow: hidden;\n  user-select: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 100%;\n"]))),AvatarImage=(0,styled_components_browser_esm.Ay)(dist._V)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n"]))),AvatarFallback=(0,styled_components_browser_esm.Ay)(dist.H4)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.colors.text.primary}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontFamily}),(_ref3=>{let{theme}=_ref3;return theme.typography.secondary.fontSize}),(_ref4=>{let{theme}=_ref4;return theme.typography.secondary.fontWeight}),(_ref5=>{let{theme}=_ref5;return theme.typography.secondary.lineHeight})),IconHolder=styled_components_browser_esm.Ay.button(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  border: none;\n  cursor: pointer;\n  padding: 6px;\n  display: flex;\n  border-radius: 50%;\n  &:focus,\n  &:hover {\n    background-color: ",";\n  }\n"])),(_ref6=>{let{theme}=_ref6;return"dark"===theme.mode?theme.colors.fill.hover:theme.colors.fill.surface})),StyledTag=styled_components_browser_esm.Ay.span(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  padding: 4px 6px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  direction: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n  color: ",";\n  background-color: ",";\n  border: 1px solid\n    ",";\n  &:hover {\n    border-color: ",";\n  }\n"])),(_ref7=>{let{theme}=_ref7;return theme.direction}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontFamily}),(_ref9=>{let{theme}=_ref9;return theme.typography.secondary.fontSize}),(_ref10=>{let{theme}=_ref10;return theme.typography.fontWeight["semi-bold"]}),(_ref11=>{let{theme}=_ref11;return theme.typography.secondary.lineHeight}),(_ref12=>{let{theme}=_ref12;return theme.colors.text.primary}),(_ref13=>{let{theme}=_ref13;return theme.colors.fill.base}),(_ref14=>{let{theme,$showBorder}=_ref14;return $showBorder?theme.colors.border.normal:"transparent"}),(_ref15=>{let{theme}=_ref15;return theme.colors.border.hover}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Tag=react.forwardRef(((props,forwardedRef)=>{const{children,iconProps,onClose,showBorder=!1,hideClose=!1,avatarImgAlt,avatarImgSrc,avatarText,style,state,iconSVGProps,...rest}=props,theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsxs)(StyledTag,{$showBorder:showBorder,style,className:"StyledTag",dir:theme.direction,...rest,ref:forwardedRef,children:[avatarImgSrc||avatarText?(0,jsx_runtime.jsxs)(AvatarRoot,{className:"AvatarRoot",children:[(0,jsx_runtime.jsx)(AvatarImage,{className:"AvatarImage",src:avatarImgSrc,alt:avatarImgAlt}),(0,jsx_runtime.jsx)(AvatarFallback,{className:"AvatarFallback",delayMs:600,children:avatarText})]}):(0,jsx_runtime.jsx)("div",{}),children,hideClose?(0,jsx_runtime.jsx)("div",{}):(0,jsx_runtime.jsx)(IconHolder,{...iconProps,onClick:onClose,children:(0,jsx_runtime.jsx)(Cross.A,{...iconSVGProps,fill:"dark"===theme.mode?theme.colors.text.inverse:theme.colors.text.primary})})]})})),Tag_Tag=Tag;try{Tag.displayName="Tag",Tag.__docgenInfo={description:"Tag component is used to show a tag to the user. It is used to show a label or a category",displayName:"Tag",props:{state:{defaultValue:null,description:"State of the tag",name:"state",required:!1,type:{name:"enum",value:[{value:'"error"'},{value:'"default"'},{value:'"transparent"'}]}},showBorder:{defaultValue:null,description:"Show border around the tag",name:"showBorder",required:!1,type:{name:"boolean"}},hideClose:{defaultValue:null,description:"Show border around the tag",name:"hideClose",required:!1,type:{name:"boolean"}},avatarImgSrc:{defaultValue:null,description:"Image source for the avatar",name:"avatarImgSrc",required:!1,type:{name:"string"}},avatarImgAlt:{defaultValue:null,description:"Image alt for the avatar",name:"avatarImgAlt",required:!1,type:{name:"string"}},avatarText:{defaultValue:null,description:"Text for the avatar",name:"avatarText",required:!1,type:{name:"string"}},onClose:{defaultValue:null,description:"Function to be called when the tag is closed",name:"onClose",required:!1,type:{name:"MouseEventHandler<HTMLButtonElement>"}},children:{defaultValue:null,description:"Children of the tag",name:"children",required:!1,type:{name:"ReactNode"}},iconProps:{defaultValue:null,description:"Props for the icon",name:"iconProps",required:!1,type:{name:"ButtonHTMLAttributes<HTMLButtonElement>"}},iconSVGProps:{defaultValue:null,description:"",name:"iconSVGProps",required:!1,type:{name:"SVGProps<SVGSVGElement>"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Tag/Tag.tsx#Tag"]={docgenInfo:Tag.__docgenInfo,name:"Tag",path:"src/components/Tag/Tag.tsx#Tag"})}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-Palette-mdx.fcfc170d.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[17886],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{R:()=>useMDXComponents,x:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const emptyComponents={},MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext(emptyComponents);function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((function(){return"function"==typeof components?components(contextComponents):{...contextComponents,...components}}),[contextComponents,components])}function MDXProvider(properties){let allComponents;return allComponents=properties.disableParentContext?"function"==typeof properties.components?properties.components(emptyComponents):properties.components||emptyComponents:useMDXComponents(properties.components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},properties.children)}},"./src/stories/Palette.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>MDXContent});__webpack_require__("./node_modules/react/index.js");var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");function _createMdxContent(props){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.W8,{title:"Palette"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.rE,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Elephant",colors:{E900:"#12344d",E800:"#264966",E700:"#345c7c",E600:"#447093",E500:"#527fa5",E400:"#6b92b6",E300:"#83a6c8",E200:"#a2c0de",E100:"#bedbf5",E50:"#dff0ff"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Smoke",colors:{S900:"#27313a",S800:"#384551",S700:"#475867",S600:"#576c7d",S500:"#647a8e",S400:"#7b8e9f",S300:"#92a2b1",S200:"#b1bdc8",S100:"#cfd7df",S75:"#e6e8eb",S50:"#ebeff3",S25:"#f5f7f9",S10:"#f7f9fa"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Jungle",colors:{J900:"#005c3f",J800:"#00795b",J700:"#008969",J600:"#009a79",J500:"#00a886",J400:"#1cb697",J300:"#4dc4aa",J200:"#82d5c2",J100:"#b4e5da",J50:"#e0f5f1"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Azure",colors:{A900:"#283da5",A800:"#2c5cc5",A700:"#2e6ed8",A600:"#2f80eb",A500:"#2e8efa",A400:"#459ffc",A300:"#64b0fc",A200:"#90c6fe",A100:"#bbdcfe",A50:"#e5f2fd"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Persimmon",colors:{P900:"#c82124",P800:"#d72d30",P700:"#e43538",P600:"#f73f3e",P500:"#ff473e",P400:"#ff5959",P300:"#f2797b",P200:"#f89fa1",P100:"#ffd0d6",P50:"#ffecf0"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Casablanca",colors:{C900:"#d7461f",C800:"#e16023",C700:"#e86f25",C600:"#ef7e27",C500:"#f48928",C400:"#f69a3c",C300:"#f8ab59",C200:"#fac386",C100:"#fddbb5",C50:"#fef1e1"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_2__.Jl,{title:"Common colors",colors:{black:"#000000",white:"#ffffff"}})]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim_mjs__WEBPACK_IMPORTED_MODULE_3__.R)(),...props.components};return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(MDXLayout,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_createMdxContent,{...props})}):_createMdxContent()}},"./node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);

package/storybook-static/stories-Popover-stories.a73b43ee.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,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:'"primary"'},{value:'"secondary"'},{value:'"link"'},{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"),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"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),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,autoCloseDuration,clickOutToClose,transformOrigin}=_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-QuillEditor-stories.689c6f64.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[86217],{"./src/stories/QuillEditor.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>QuillEditor_stories});var _templateObject,_templateObject2,_templateObject3,_templateObject4,react=__webpack_require__("./node_modules/react/index.js"),lib=__webpack_require__("./node_modules/react-quill/lib/index.js"),lib_default=__webpack_require__.n(lib),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 LinkText=styled_components_browser_esm.Ay.span(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  color: ",";\n  &:hover {\n    text-decoration: underline;\n  }\n  cursor: pointer;\n"])),(_ref=>{let{theme}=_ref;return theme.colors.text.link})),QuillContainer=styled_components_browser_esm.Ay.div(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  border: 1px solid\n    ",";\n  background-color: ",";\n  border-radius: 4px;\n  transition: all 0.2s ease-in-out;\n  &:hover {\n    border-color: ",";\n  }\n  &:focus-within {\n    box-shadow: ","\n      0px 0px 0px 1px;\n    border-color: ",";\n  }\n  .quill {\n    height: fit-content;\n    display: flex;\n    flex-direction: column-reverse;\n  }\n  .ql-toolbar {\n    padding: 8px;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    button.mini-button {\n      background: none;\n      border: none;\n      cursor: pointer;\n      display: inline-block;\n      height: 24px;\n      padding: 3px 5px;\n      width: 28px;\n    }\n    .ql-spacer {\n      flex: 1;\n    }\n    .ql-formats {\n      display: inline-block;\n      vertical-align: middle;\n      .ql-stroke {\n        stroke: ",";\n        fill: none;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        stroke-width: 2;\n      }\n    }\n  }\n  .ql-hidden {\n    display: none;\n  }\n  .ql-container {\n    font-family: ",";\n    font-size: ",";\n    font-weight: ",";\n    color: ",";\n    position: relative;\n    .ql-editor {\n      min-height: 34px;\n      max-height: 550px;\n      line-height: 1.42;\n      outline: none;\n      overflow-y: auto;\n      padding: 16px;\n      tab-size: 4;\n      -moz-tab-size: 4;\n      text-align: left;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      p {\n        margin: 0;\n        padding: 0;\n        counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8\n          list-9;\n      }\n    }\n    .ql-blank::before {\n      content: attr(data-placeholder);\n      position: absolute;\n      pointer-events: none;\n      left: 15px;\n      right: 15px;\n      font-family: ",";\n      font-size: ",";\n      color: ",";\n    }\n    .ql-clipboard {\n      left: -100000px;\n      height: 1px;\n      overflow-y: hidden;\n      position: absolute;\n      top: 50%;\n    }\n    .ql-tooltip[data-mode='link']::before {\n      content: 'Enter link:';\n    }\n    .ql-tooltip {\n      background-color: ",";\n      border: 1px solid #ccc;\n      box-shadow: 0px 0px 5px #ddd;\n      color: #444;\n      padding: 5px 12px;\n      white-space: nowrap;\n      position: absolute;\n      transform: translateY(10px);\n      .ql-preview {\n        display: inline-block;\n        max-width: 200px;\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        vertical-align: top;\n      }\n      .ql-action {\n      }\n      .ql-remove {\n      }\n      &.ql-editing a.ql-action::after {\n        border-right: 0px;\n        padding-right: 0px;\n        content: 'Save';\n      }\n      &.ql-editing input[type='text'] {\n        display: inline-block !important;\n      }\n      input[type='text'] {\n        display: none;\n        border: 1px solid #ccc;\n        font-size: ",";\n        height: 26px;\n        margin: 0px;\n        padding: 3px 5px;\n        width: 170px;\n      }\n      a {\n        color: ",";\n      }\n    }\n  }\n"])),(_ref2=>{let{theme,$isErrored}=_ref2;return $isErrored?theme.colors.border.error:theme.colors.border.normal}),(_ref3=>{let{theme}=_ref3;return theme.colors.fill.surface}),(_ref4=>{let{theme,disabled,$isErrored}=_ref4;return disabled?theme.colors.border.normal:$isErrored?theme.colors.border.error:theme.colors.border.hover}),(_ref5=>{let{theme,$isErrored}=_ref5;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref6=>{let{theme,$isErrored}=_ref6;return $isErrored?theme.colors.border.error:theme.colors.border.active}),(_ref7=>{let{theme}=_ref7;return theme.colors.text.primary}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontFamily}),(_ref9=>{let{theme}=_ref9;return theme.typography.primary.fontSize}),(_ref10=>{let{theme}=_ref10;return theme.typography.fontWeight["semi-bold"]}),(_ref11=>{let{theme}=_ref11;return theme.colors.text.primary}),(_ref12=>{let{theme}=_ref12;return theme.typography.fontFamily}),(_ref13=>{let{theme}=_ref13;return theme.typography.primary.fontSize}),(_ref14=>{let{theme}=_ref14;return theme.colors.text.placeholder}),(_ref15=>{let{theme}=_ref15;return theme.colors.common.white}),(_ref16=>{let{theme}=_ref16;return theme.typography.primary.fontSize}),(_ref17=>{let{theme}=_ref17;return theme.colors.text.link})),PopoverAccordionContent=styled_components_browser_esm.Ay.div(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  padding: 12px;\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n"]))),PopoverContent=styled_components_browser_esm.Ay.div(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  display: flex;\n  background-color: ",";\n  flex-direction: column;\n  gap: 10px;\n"])),(_ref18=>{let{theme}=_ref18;return theme.colors.fill.surface}));var ErrorText=__webpack_require__("./src/global/ErrorText/index.ts"),Popover=__webpack_require__("./src/components/Popover/index.ts"),Accordion=__webpack_require__("./src/components/Accordion/index.ts"),Tag=__webpack_require__("./src/components/Tag/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const AlignStyle=lib.Quill.import("attributors/style/align");AlignStyle.whitelist=["left","center","right"],lib.Quill.register(AlignStyle,!0);const QuillToolbar=_ref=>{let{quill,placeholders}=_ref;return(0,jsx_runtime.jsxs)("div",{id:"ql-toolbar",children:[(0,jsx_runtime.jsxs)("span",{className:"ql-formats",children:[(0,jsx_runtime.jsx)("button",{className:"ql-bold mini-button"}),(0,jsx_runtime.jsx)("button",{className:"ql-italic mini-button"}),(0,jsx_runtime.jsx)("button",{className:"ql-underline mini-button"})]}),(0,jsx_runtime.jsx)("span",{className:"ql-formats",children:(0,jsx_runtime.jsx)("button",{className:"ql-list mini-button",value:"bullet"})}),(0,jsx_runtime.jsxs)("span",{className:"ql-formats",children:[(0,jsx_runtime.jsx)("button",{className:"ql-align mini-button",value:""}),(0,jsx_runtime.jsx)("button",{className:"ql-align mini-button",value:"center"}),(0,jsx_runtime.jsx)("button",{className:"ql-align mini-button",value:"right"})]}),(0,jsx_runtime.jsx)("span",{className:"ql-formats",children:(0,jsx_runtime.jsx)("button",{className:"ql-link mini-button"})}),(0,jsx_runtime.jsx)(Popover.AM,{trigger:(0,jsx_runtime.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,jsx_runtime.jsxs)("g",{clipPath:"url(#clip0_3716_21092)",children:[(0,jsx_runtime.jsx)("path",{d:"M7.815 7.909C8.85214 6.85614 8.85214 5.15114 7.815 4.09042C6.77786 3.03757 5.08857 3.03757 4.04357 4.09042L1.27786 6.89542C0.240714 7.94828 0.240714 9.65328 1.27786 10.714C2.315 11.7669 4.00429 11.7669 5.04929 10.714L7.815 7.909Z",fill:"#459FFC"}),(0,jsx_runtime.jsx)("path",{d:"M10.7217 10.7062C11.7588 9.65333 11.7588 7.94833 10.7217 6.88761L7.95599 4.08261C6.91885 3.02975 5.22956 3.02975 4.18456 4.08261C4.02742 4.23975 3.9017 4.40475 3.7917 4.58547C3.16313 5.62261 3.2967 6.99761 4.18456 7.89333L6.95027 10.6983C7.98742 11.7512 9.6767 11.7512 10.7217 10.6983V10.7062Z",fill:"#459FFC"}),(0,jsx_runtime.jsx)("path",{d:"M8.58593 5.97718C8.58593 5.37218 8.38164 4.74361 7.97307 4.24075C7.93378 4.18575 7.87878 4.13075 7.83164 4.07575C7.32878 3.55718 6.66878 3.2979 6.00878 3.29004C5.34878 3.29004 4.68878 3.55718 4.18593 4.07575C4.13878 4.1229 4.08378 4.1779 4.0445 4.24075C3.62807 4.74361 3.43164 5.37218 3.43164 5.97718C3.43164 6.66075 3.68307 7.35218 4.18593 7.87075L6.00878 9.74861L7.83164 7.87075C8.3345 7.35218 8.58593 6.66075 8.58593 5.97718Z",fill:"#12344D"}),(0,jsx_runtime.jsx)("path",{d:"M2.64492 2.7C3.24992 2.7 3.74492 2.205 3.74492 1.6C3.74492 0.995 3.24992 0.5 2.64492 0.5C2.03992 0.5 1.54492 0.995 1.54492 1.6C1.54492 2.205 2.03992 2.7 2.64492 2.7Z",fill:"#12344D"}),(0,jsx_runtime.jsx)("path",{d:"M9.37148 2.7C9.97648 2.7 10.4715 2.205 10.4715 1.6C10.4715 0.995 9.97648 0.5 9.37148 0.5C8.76648 0.5 8.27148 0.995 8.27148 1.6C8.27148 2.205 8.76648 2.7 9.37148 2.7Z",fill:"#12344D"})]}),(0,jsx_runtime.jsx)("defs",{children:(0,jsx_runtime.jsx)("clipPath",{id:"clip0_3716_21092",children:(0,jsx_runtime.jsx)("rect",{width:"11",height:"11",fill:"white",transform:"translate(0.5 0.5)"})})})]}),children:"Coilot Menu"}),(0,jsx_runtime.jsx)("span",{className:"ql-spacer"}),(0,jsx_runtime.jsx)(Popover.AM,{trigger:(0,jsx_runtime.jsx)(LinkText,{children:"Personalize"}),side:"bottom",align:"end",children:(0,jsx_runtime.jsx)(PopoverContent,{onClick:e=>e.stopPropagation(),children:(0,jsx_runtime.jsx)(Accordion.n,{style:{width:"256px"},options:placeholders,renderContent:option=>(0,jsx_runtime.jsx)(PopoverAccordionContent,{children:option.options.map((subOption=>(0,jsx_runtime.jsx)(Tag.v,{hideClose:!0,onClick:()=>{(placeholderText=>{if(!quill)return null;const editor=null==quill?void 0:quill.getEditor();if(editor){var _editor$getSelection$,_editor$getSelection;const cursorPosition=null!==(_editor$getSelection$=null==editor||null===(_editor$getSelection=editor.getSelection())||void 0===_editor$getSelection?void 0:_editor$getSelection.index)&&void 0!==_editor$getSelection$?_editor$getSelection$:0;console.log("insertPlaceholder",{placeholderText,quill,editor,cursorPosition}),editor.insertText(cursorPosition,placeholderText),editor.setSelection(cursorPosition+placeholderText.length,0)}})(subOption.placeholder)},children:subOption.name},subOption.id)))})})})})]})},QuillEditor=props=>{const{disabled,errorText,isErrored,placeholder,placeholders}=props,[value,setValue]=react.useState(""),[quill,setQill]=react.useState(),contentEditorRef=react.useCallback((ref=>{setQill(ref)}),[]);return(0,jsx_runtime.jsxs)(QuillContainer,{disabled,$isErrored:isErrored,children:[(0,jsx_runtime.jsx)(lib_default(),{placeholder,theme:"snow",value,onChange:setValue,ref:contentEditorRef,modules:{toolbar:{handlers:{},container:"#ql-toolbar"}},formats:["bold","italic","underline","list","align","link"]}),(0,jsx_runtime.jsx)(QuillToolbar,{quill,placeholders}),isErrored&&errorText&&(0,jsx_runtime.jsx)(ErrorText.y,{children:errorText})]})},QuillEditor_QuillEditor=QuillEditor;try{QuillToolbar.displayName="QuillToolbar",QuillToolbar.__docgenInfo={description:"",displayName:"QuillToolbar",props:{quill:{defaultValue:null,description:"",name:"quill",required:!1,type:{name:"ReactQuill"}},placeholders:{defaultValue:null,description:"",name:"placeholders",required:!0,type:{name:"QuillPlaceholderType[] | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/QuillEditor/QuillEditor.tsx#QuillToolbar"]={docgenInfo:QuillToolbar.__docgenInfo,name:"QuillToolbar",path:"src/components/QuillEditor/QuillEditor.tsx#QuillToolbar"})}catch(__react_docgen_typescript_loader_error){}try{QuillEditor.displayName="QuillEditor",QuillEditor.__docgenInfo={description:"QuillEditor is a component used for rich text editing.",displayName:"QuillEditor",props:{disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},isErrored:{defaultValue:null,description:"",name:"isErrored",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},placeholders:{defaultValue:null,description:"",name:"placeholders",required:!1,type:{name:"QuillPlaceholderType[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/QuillEditor/QuillEditor.tsx#QuillEditor"]={docgenInfo:QuillEditor.__docgenInfo,name:"QuillEditor",path:"src/components/QuillEditor/QuillEditor.tsx#QuillEditor"})}catch(__react_docgen_typescript_loader_error){}const QuillEditor_stories={title:"Components/QuillEditor",component:QuillEditor_QuillEditor,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{disabled:{control:"boolean"}}},Primary={args:{isErrored:!1,errorText:"",placeholder:"Type something",placeholders:[{id:"account",name:"Account",options:[{id:"company_name",name:"Company name",placeholder:"{{account.company_name}}"}]},{id:"nps",name:"NPS",options:[{id:"rating",name:"Rating",placeholder:"{{nps.rating}}"}]},{id:"csat",name:"CSAT",options:[{id:"rating",name:"Rating",placeholder:"{{csat.rating}}"},{id:"rating_label",name:"Rating label",placeholder:"{{csat.rating_label}}"}]},{id:"ces",name:"CES",options:[{id:"rating",name:"Rating",placeholder:"{{ces.rating}}"},{id:"rating_label",name:"Rating label",placeholder:"{{ces.rating_label}}"}]},{id:"contact",name:"Contact",options:[{id:"first_name",name:"First name",placeholder:"{{contact.first_name}}"},{id:"last_name",name:"Last name",placeholder:"{{contact.last_name}}"},{id:"full_name",name:"Full name",placeholder:"{{contact.full_name}}"},{id:"work_email",name:"Work email",placeholder:"{{contact.work_email}}"}]}]}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  args: {\n    isErrored: false,\n    errorText: '',\n    placeholder: 'Type something',\n    placeholders: [{\n      id: 'account',\n      name: 'Account',\n      options: [{\n        id: 'company_name',\n        name: 'Company name',\n        placeholder: '{{account.company_name}}'\n      }]\n    }, {\n      id: 'nps',\n      name: 'NPS',\n      options: [{\n        id: 'rating',\n        name: 'Rating',\n        placeholder: '{{nps.rating}}'\n      }]\n    }, {\n      id: 'csat',\n      name: 'CSAT',\n      options: [{\n        id: 'rating',\n        name: 'Rating',\n        placeholder: '{{csat.rating}}'\n      }, {\n        id: 'rating_label',\n        name: 'Rating label',\n        placeholder: '{{csat.rating_label}}'\n      }]\n    }, {\n      id: 'ces',\n      name: 'CES',\n      options: [{\n        id: 'rating',\n        name: 'Rating',\n        placeholder: '{{ces.rating}}'\n      }, {\n        id: 'rating_label',\n        name: 'Rating label',\n        placeholder: '{{ces.rating_label}}'\n      }]\n    }, {\n      id: 'contact',\n      name: 'Contact',\n      options: [{\n        id: 'first_name',\n        name: 'First name',\n        placeholder: '{{contact.first_name}}'\n      }, {\n        id: 'last_name',\n        name: 'Last name',\n        placeholder: '{{contact.last_name}}'\n      }, {\n        id: 'full_name',\n        name: 'Full name',\n        placeholder: '{{contact.full_name}}'\n      }, {\n        id: 'work_email',\n        name: 'Work email',\n        placeholder: '{{contact.work_email}}'\n      }]\n    }]\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Accordion/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{n:()=>Accordion_Accordion});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,react=__webpack_require__("./node_modules/react/index.js"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-accordion/dist/index.mjs"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),keyframes=__webpack_require__("./src/styles/keyframes.ts"),Icons=__webpack_require__("./src/components/Icons/index.ts");const AccordionRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  border-radius: 6px;\n  background-color: ",";\n  box-shadow: 0px 2px 9px ",";\n"])),(_ref=>{let{theme}=_ref;return theme.colors.fill.surface}),(_ref2=>{let{theme}=_ref2;return theme.colors.border.normal})),AccordionItem=(0,styled_components_browser_esm.Ay)(dist.q7)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  overflow: hidden;\n  margin-top: 1px;\n  direction: ",";\n  &:first-child {\n    margin-top: 0;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n  }\n  &:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n  &:focus-within {\n    position: relative;\n    z-index: 1;\n    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);\n  }\n"])),(_ref3=>{let{theme}=_ref3;return theme.direction})),AccordionHeader=(0,styled_components_browser_esm.Ay)(dist.Y9)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  display: flex;\n  margin: 0;\n"]))),AccordionTrigger=(0,styled_components_browser_esm.Ay)(dist.l9)(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  font-family: ",";\n  color: ",";\n  line-height: ",";\n  font-size: ",";\n  font-weight: ",";\n  padding: 0 20px;\n  height: 45px;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ",";\n  border: unset;\n  .AccordionChevron {\n    fill: ",";\n    transform: rotate(0deg);\n    transition: transform;\n    transition-duration: ",";\n    transition-timing-function: ",";\n  }\n  &:hover {\n    background-color: ",";\n  }\n  &[data-disabled] {\n    color: ",";\n    cursor: not-allowed;\n    pointer-events: none;\n    .AccordionChevron {\n      fill: ",";\n    }\n  }\n  &[data-state='open'] > .AccordionChevron {\n    transform: rotate(180deg);\n  }\n"])),(_ref4=>{let{theme}=_ref4;return theme.typography.fontFamily}),(_ref5=>{let{theme}=_ref5;return theme.colors.text.primary}),(_ref6=>{let{theme}=_ref6;return theme.typography.primary.lineHeight}),(_ref7=>{let{theme}=_ref7;return theme.typography.primary.fontSize}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontWeight.bold}),(_ref9=>{let{theme}=_ref9;return theme.colors.fill.surface}),(_ref10=>{let{theme}=_ref10;return theme.colors.text.primary}),(_ref11=>{let{theme}=_ref11;return theme.transitions.duration.standard}),(_ref12=>{let{theme}=_ref12;return theme.transitions.easing.easeIn}),(_ref13=>{let{theme}=_ref13;return theme.colors.fill.hover}),(_ref14=>{let{theme}=_ref14;return theme.colors.text.disabled}),(_ref15=>{let{theme}=_ref15;return theme.colors.text.disabled})),AccordionContent=(0,styled_components_browser_esm.Ay)(dist.UC)(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  overflow: hidden;\n  background-color: ",";\n  animation-duration: ",";\n  animation-timing-function: ",";\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),(_ref16=>{let{theme}=_ref16;return theme.colors.fill.surface}),(_ref17=>{let{theme}=_ref17;return theme.transitions.duration.standard}),(_ref18=>{let{theme}=_ref18;return theme.transitions.easing.easeIn}),keyframes.C9,keyframes.Vd);(0,styled_components_browser_esm.Ay)(Icons.rX)(_templateObject6||(_templateObject6=(0,taggedTemplateLiteral.A)(["\n  color: var(--violet-10);\n  transition-property: transform;\n  transition-duration: ",";\n  transition-timing-function: ",";\n"])),(_ref19=>{let{theme}=_ref19;return theme.transitions.duration.standard}),(_ref20=>{let{theme}=_ref20;return theme.transitions.easing.easeIn}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Accordion=_ref=>{let{idAccessor="id",nameAccessor="name",renderContent,hideIcon=!1,renderTitle,options=[],value,onChange,defaultValue,...props}=_ref;return(0,jsx_runtime.jsx)(AccordionRoot,{className:"AccordionRoot",type:"single",collapsible:!0,value,defaultValue,onValueChange:onChange,...props,children:options.map((option=>(0,jsx_runtime.jsxs)(AccordionItem,{className:"AccordionItem",value:null==option?void 0:option[idAccessor],disabled:null==option?void 0:option.disabled,children:[(0,jsx_runtime.jsx)(AccordionTriggerWrapper,{hideIcon,children:renderTitle?renderTitle(option):null==option?void 0:option[nameAccessor]}),(0,jsx_runtime.jsx)(AccordionContentWrapper,{children:renderContent?renderContent(option):null})]},null==option?void 0:option[idAccessor])))})},AccordionTriggerWrapper=react.forwardRef(((_ref2,forwardedRef)=>{let{children,className,hideIcon,...props}=_ref2;return(0,jsx_runtime.jsx)(AccordionHeader,{className:"AccordionHeader",children:(0,jsx_runtime.jsxs)(AccordionTrigger,{className:"AccordionTrigger ".concat(null!=className?className:"").trim(),...props,ref:forwardedRef,children:[children,!hideIcon&&(0,jsx_runtime.jsx)(Icons.rX,{className:"AccordionChevron"})]})})})),AccordionContentWrapper=react.forwardRef(((_ref3,forwardedRef)=>{let{children,className,...props}=_ref3;return(0,jsx_runtime.jsx)(AccordionContent,{className:"AccordionContent ".concat(null!=className?className:"").trim(),...props,ref:forwardedRef,children})})),Accordion_Accordion=Accordion;try{Accordion.displayName="Accordion",Accordion.__docgenInfo={description:"Accordion component from the design system.",displayName:"Accordion",props:{options:{defaultValue:{value:"[]"},description:"options for Tabs",name:"options",required:!1,type:{name:"T[]"}},renderContent:{defaultValue:null,description:"options for Tabs",name:"renderContent",required:!1,type:{name:"((accordianOption: T) => ReactNode)"}},renderTitle:{defaultValue:null,description:"options for Tabs",name:"renderTitle",required:!1,type:{name:"((accordianOption: T) => ReactNode)"}},idAccessor:{defaultValue:{value:"id"},description:"Id accessor of tabes",name:"idAccessor",required:!1,type:{name:"string"}},hideIcon:{defaultValue:{value:"false"},description:"Id accessor of tabes",name:"hideIcon",required:!1,type:{name:"boolean"}},nameAccessor:{defaultValue:{value:"name"},description:"Name accessor of tabes",name:"nameAccessor",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"value for tabs",name:"value",required:!1,type:{name:"string"}},defaultValue:{defaultValue:null,description:"default value of tabes",name:"defaultValue",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"Function to be called when the selected item changes",name:"onChange",required:!1,type:{name:"((value: string) => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Accordion/Accordion.tsx#Accordion"]={docgenInfo:Accordion.__docgenInfo,name:"Accordion",path:"src/components/Accordion/Accordion.tsx#Accordion"})}catch(__react_docgen_typescript_loader_error){}},"./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"),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"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),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,autoCloseDuration,clickOutToClose,transformOrigin}=_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/components/Tag/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{v:()=>Tag_Tag});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,react=__webpack_require__("./node_modules/react/index.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),Cross=__webpack_require__("./src/components/Icons/Cross.tsx"),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-avatar/dist/index.mjs");const AvatarRoot=(0,styled_components_browser_esm.Ay)(dist.bL)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  overflow: hidden;\n  user-select: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 100%;\n"]))),AvatarImage=(0,styled_components_browser_esm.Ay)(dist._V)(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n"]))),AvatarFallback=(0,styled_components_browser_esm.Ay)(dist.H4)(_templateObject3||(_templateObject3=(0,taggedTemplateLiteral.A)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.colors.text.primary}),(_ref2=>{let{theme}=_ref2;return theme.typography.fontFamily}),(_ref3=>{let{theme}=_ref3;return theme.typography.secondary.fontSize}),(_ref4=>{let{theme}=_ref4;return theme.typography.secondary.fontWeight}),(_ref5=>{let{theme}=_ref5;return theme.typography.secondary.lineHeight})),IconHolder=styled_components_browser_esm.Ay.button(_templateObject4||(_templateObject4=(0,taggedTemplateLiteral.A)(["\n  border: none;\n  cursor: pointer;\n  padding: 6px;\n  display: flex;\n  border-radius: 50%;\n  &:focus,\n  &:hover {\n    background-color: ",";\n  }\n"])),(_ref6=>{let{theme}=_ref6;return"dark"===theme.mode?theme.colors.fill.hover:theme.colors.fill.surface})),StyledTag=styled_components_browser_esm.Ay.span(_templateObject5||(_templateObject5=(0,taggedTemplateLiteral.A)(["\n  padding: 4px 6px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  direction: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n  color: ",";\n  background-color: ",";\n  border: 1px solid\n    ",";\n  &:hover {\n    border-color: ",";\n  }\n"])),(_ref7=>{let{theme}=_ref7;return theme.direction}),(_ref8=>{let{theme}=_ref8;return theme.typography.fontFamily}),(_ref9=>{let{theme}=_ref9;return theme.typography.secondary.fontSize}),(_ref10=>{let{theme}=_ref10;return theme.typography.fontWeight["semi-bold"]}),(_ref11=>{let{theme}=_ref11;return theme.typography.secondary.lineHeight}),(_ref12=>{let{theme}=_ref12;return theme.colors.text.primary}),(_ref13=>{let{theme}=_ref13;return theme.colors.fill.base}),(_ref14=>{let{theme,$showBorder}=_ref14;return $showBorder?theme.colors.border.normal:"transparent"}),(_ref15=>{let{theme}=_ref15;return theme.colors.border.hover}));var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Tag=react.forwardRef(((props,forwardedRef)=>{const{children,iconProps,onClose,showBorder=!1,hideClose=!1,avatarImgAlt,avatarImgSrc,avatarText,style,state,iconSVGProps,...rest}=props,theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsxs)(StyledTag,{$showBorder:showBorder,style,className:"StyledTag",dir:theme.direction,...rest,ref:forwardedRef,children:[avatarImgSrc||avatarText?(0,jsx_runtime.jsxs)(AvatarRoot,{className:"AvatarRoot",children:[(0,jsx_runtime.jsx)(AvatarImage,{className:"AvatarImage",src:avatarImgSrc,alt:avatarImgAlt}),(0,jsx_runtime.jsx)(AvatarFallback,{className:"AvatarFallback",delayMs:600,children:avatarText})]}):(0,jsx_runtime.jsx)("div",{}),children,hideClose?(0,jsx_runtime.jsx)("div",{}):(0,jsx_runtime.jsx)(IconHolder,{...iconProps,onClick:onClose,children:(0,jsx_runtime.jsx)(Cross.A,{...iconSVGProps,fill:"dark"===theme.mode?theme.colors.text.inverse:theme.colors.text.primary})})]})})),Tag_Tag=Tag;try{Tag.displayName="Tag",Tag.__docgenInfo={description:"Tag component is used to show a tag to the user. It is used to show a label or a category",displayName:"Tag",props:{state:{defaultValue:null,description:"State of the tag",name:"state",required:!1,type:{name:"enum",value:[{value:'"error"'},{value:'"default"'},{value:'"transparent"'}]}},showBorder:{defaultValue:null,description:"Show border around the tag",name:"showBorder",required:!1,type:{name:"boolean"}},hideClose:{defaultValue:null,description:"Show border around the tag",name:"hideClose",required:!1,type:{name:"boolean"}},avatarImgSrc:{defaultValue:null,description:"Image source for the avatar",name:"avatarImgSrc",required:!1,type:{name:"string"}},avatarImgAlt:{defaultValue:null,description:"Image alt for the avatar",name:"avatarImgAlt",required:!1,type:{name:"string"}},avatarText:{defaultValue:null,description:"Text for the avatar",name:"avatarText",required:!1,type:{name:"string"}},onClose:{defaultValue:null,description:"Function to be called when the tag is closed",name:"onClose",required:!1,type:{name:"MouseEventHandler<HTMLButtonElement>"}},children:{defaultValue:null,description:"Children of the tag",name:"children",required:!1,type:{name:"ReactNode"}},iconProps:{defaultValue:null,description:"Props for the icon",name:"iconProps",required:!1,type:{name:"ButtonHTMLAttributes<HTMLButtonElement>"}},iconSVGProps:{defaultValue:null,description:"",name:"iconSVGProps",required:!1,type:{name:"SVGProps<SVGSVGElement>"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Tag/Tag.tsx#Tag"]={docgenInfo:Tag.__docgenInfo,name:"Tag",path:"src/components/Tag/Tag.tsx#Tag"})}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-Radio-stories.44d77c99.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[17204],{"./src/stories/Radio.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Radio_stories});__webpack_require__("./node_modules/react/index.js");var styles=__webpack_require__("./src/components/Radio/styles.ts"),src_styles=__webpack_require__("./src/styles/index.ts"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Radio=_ref=>{let{checked,className,disabled,id,isRequired,label,name,readOnly,...htmlAttributes}=_ref;const theme=(0,styled_components_browser_esm.DP)();return(0,jsx_runtime.jsx)(styles.Bz,{className:"RadioGroupRoot ".concat(null!=className?className:"").trim(),id,name,"aria-label":label||"Radio button",value:checked?"default":"",required:isRequired,disabled,"aria-readonly":readOnly,dir:theme.direction,...htmlAttributes,children:(0,jsx_runtime.jsxs)(styles.LI,{children:[(0,jsx_runtime.jsx)(styles.CU,{checked,"aria-checked":checked,className:"RadioGroupItem",disabled,"aria-readonly":readOnly,value:"default",id:"default",children:(0,jsx_runtime.jsx)(styles.kl,{className:"RadioGroupIndicator"})}),label&&(0,jsx_runtime.jsxs)(src_styles.l1,{className:"RadioLabel",disabled,"aria-readonly":readOnly,"aria-label":label,htmlFor:id,children:[label,label&&isRequired&&(0,jsx_runtime.jsx)(src_styles.Tr,{children:"*"})]})]})})},Radio_Radio=Radio;try{Radio.displayName="Radio",Radio.__docgenInfo={description:"Radio displays a radio button on the user interface and enables assigning a state (selected or deselected) to it. In the selected state, the button displayed is highlighted. fw-radio provides child elements for fw-radio-group, to populate the Radio Group component’s list.",displayName:"Radio",props:{checked:{defaultValue:null,description:"Is the Radio button selected",name:"checked",required:!1,type:{name:"boolean"}},readOnly:{defaultValue:null,description:"Whether disabled select",name:"readOnly",required:!1,type:{name:"boolean"}},isRequired:{defaultValue:null,description:"Whether disabled select",name:"isRequired",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"label for the radio button",name:"label",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Radio/Radio.tsx#Radio"]={docgenInfo:Radio.__docgenInfo,name:"Radio",path:"src/components/Radio/Radio.tsx#Radio"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__("./src/components/Radio/RadioGroup.tsx");const Radio_stories={title:"Components/Radio",component:Radio_Radio,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:function Render(props){return(0,jsx_runtime.jsx)(Radio_Radio,{...props})},args:{checked:!0,id:"email",label:"Send email",disabled:!1}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: function Render(props) {\n    return <Radio {...props} />;\n  },\n  args: {\n    checked: true,\n    id: 'email',\n    label: 'Send email',\n    disabled: false\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Radio/RadioGroup.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>RadioGroup});__webpack_require__("./node_modules/react/index.js");var _styles__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Radio/styles.ts"),_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/styles/index.ts"),_global_ErrorText__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/global/ErrorText/index.ts"),styled_components__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");const RadioGroup=_ref=>{let{options,defaultValue,idAccessor="id",nameAccessor="name",onChange,className,id,isErrored,errorText,disabled,isRequired,label,readOnly,value,...props}=_ref;const theme=(0,styled_components__WEBPACK_IMPORTED_MODULE_5__.DP)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_1__.gb,{children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_2__.Gw,{id,className:"input-label",children:[label,label&&isRequired&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.Tr,{children:"*"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_1__.Bz,{defaultValue,value,onValueChange:newValue=>{readOnly||disabled||null==onChange||onChange(newValue)},"aria-readonly":readOnly,id,"aria-label":label||"Radio Group","aria-labelledby":label?id:void 0,className:"RadioGroupRoot ".concat(null!=className?className:"").trim(),dir:theme.direction,...props,children:null==options?void 0:options.map((option=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_1__.LI,{className:"RadioContainer",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_1__.CU,{className:"RadioGroupItem",disabled:option.disabled,value:null==option?void 0:option[idAccessor],id:null==option?void 0:option[idAccessor],"aria-label":null==option?void 0:option[nameAccessor],children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_1__.kl,{className:"RadioGroupIndicator"})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.l1,{className:"RadioLabel",disabled:option.disabled,htmlFor:null==option?void 0:option[idAccessor],children:null==option?void 0:option[nameAccessor]})]},null==option?void 0:option[idAccessor])))}),isErrored&&errorText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_global_ErrorText__WEBPACK_IMPORTED_MODULE_3__.y,{children:errorText})]})};try{RadioGroup.displayName="RadioGroup",RadioGroup.__docgenInfo={description:"RadioGroup displays a group of options with radio buttons and enables selection of one option from the list.",displayName:"RadioGroup",props:{options:{defaultValue:null,description:"Select options",name:"options",required:!1,type:{name:"RadioItemProps[]"}},idAccessor:{defaultValue:{value:"id"},description:"Id accessor of radio button",name:"idAccessor",required:!1,type:{name:"string"}},nameAccessor:{defaultValue:{value:"name"},description:"Name accesssor of radio button",name:"nameAccessor",required:!1,type:{name:"string"}},isRequired:{defaultValue:null,description:"Whether disabled select",name:"isRequired",required:!1,type:{name:"boolean"}},readOnly:{defaultValue:null,description:"Whether disabled select",name:"readOnly",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"The description of the content",name:"label",required:!1,type:{name:"string"}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string"}},isErrored:{defaultValue:null,description:"",name:"isErrored",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Radio/RadioGroup.tsx#RadioGroup"]={docgenInfo:RadioGroup.__docgenInfo,name:"RadioGroup",path:"src/components/Radio/RadioGroup.tsx#RadioGroup"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Radio/styles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Bz:()=>RadioGroupRoot,CU:()=>RadioGroupItem,LI:()=>RadioContainer,gb:()=>StyledRadioGroup,kl:()=>RadioGroupIndicator});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@radix-ui/react-radio-group/dist/index.mjs"),styled_components__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const StyledRadioGroup=styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay.div(_templateObject||(_templateObject=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  direction: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.direction})),RadioGroupRoot=(0,styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay)(_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__.bL)(_templateObject2||(_templateObject2=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"]))),RadioGroupIndicator=(0,styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay)(_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__.C1)(_templateObject3||(_templateObject3=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  &::after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ",";\n  }\n"])),(_ref2=>{let{theme}=_ref2;return"dark"===theme.mode?theme.colors.common.black:theme.colors.common.white})),RadioGroupItem=(0,styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay)(_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__.q7)(_templateObject4||(_templateObject4=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  background-color: ",";\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid transparent;\n  padding: 0;\n  margin: 0;\n  outline-offset: 3px;\n  direction: ",";\n  background-color: ",";\n  &[data-state='unchecked'] {\n    border-color: ",";\n    background-color: unset;\n  }\n  &[data-disabled] {\n    border-color: ",";\n    background: ",";\n  }\n  &:hover:not([data-disabled]) {\n    box-shadow: 0 0 0 3px ","30;\n  }\n"])),(_ref3=>{let{theme}=_ref3;return"dark"===theme.mode?theme.colors.common.black:theme.colors.common.white}),(_ref4=>{let{theme}=_ref4;return theme.direction}),(_ref5=>{let{theme}=_ref5;return theme.colors.common.accent}),(_ref6=>{let{theme}=_ref6;return theme.colors.border.hover}),(_ref7=>{let{theme}=_ref7;return theme.colors.border.disabled}),(_ref8=>{let{theme}=_ref8;return"linear-gradient\n        (0deg, #cfd7df, #cfd7df),\n      linear-gradient(0deg, ".concat(theme.colors.fill.medium,", ").concat(theme.colors.fill.medium,")")}),(_ref9=>{let{theme}=_ref9;return theme.colors.border.hover})),RadioContainer=styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay.div(_templateObject5||(_templateObject5=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  display: flex;\n  align-items: center;\n  direction: ",";\n"])),(_ref10=>{let{theme}=_ref10;return theme.direction}))},"./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-RadioGroup-stories.71b97962.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[60969],{"./src/stories/RadioGroup.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_Radio_RadioGroup__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Radio/RadioGroup.tsx"),_storybook_preview_api__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("storybook/internal/preview-api"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/RadioGroup",component:_components_Radio_RadioGroup__WEBPACK_IMPORTED_MODULE_1__.z,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:function Render(props){const[{value},updateArgs]=(0,_storybook_preview_api__WEBPACK_IMPORTED_MODULE_2__.useArgs)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components_Radio_RadioGroup__WEBPACK_IMPORTED_MODULE_1__.z,{...props,value,onChange:v=>updateArgs({value:v})})},args:{disabled:!1,value:"opt1",label:"Radio Group",options:[{id:"default",name:"Default"},{id:"opt1",name:"Option 1"},{id:"opt2",name:"Option 2"}]}},__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 <RadioGroup {...props} value={value} onChange={v => updateArgs({\n      value: v\n    })} />;\n  },\n  args: {\n    disabled: false,\n    value: 'opt1',\n    label: 'Radio Group',\n    options: [{\n      id: 'default',\n      name: 'Default'\n    }, {\n      id: 'opt1',\n      name: 'Option 1'\n    }, {\n      id: 'opt2',\n      name: 'Option 2'\n    }]\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Radio/RadioGroup.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>RadioGroup});__webpack_require__("./node_modules/react/index.js");var _styles__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Radio/styles.ts"),_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/styles/index.ts"),_global_ErrorText__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/global/ErrorText/index.ts"),styled_components__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");const RadioGroup=_ref=>{let{options,defaultValue,idAccessor="id",nameAccessor="name",onChange,className,id,isErrored,errorText,disabled,isRequired,label,readOnly,value,...props}=_ref;const theme=(0,styled_components__WEBPACK_IMPORTED_MODULE_5__.DP)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_1__.gb,{children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_2__.Gw,{id,className:"input-label",children:[label,label&&isRequired&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.Tr,{children:"*"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_1__.Bz,{defaultValue,value,onValueChange:newValue=>{readOnly||disabled||null==onChange||onChange(newValue)},"aria-readonly":readOnly,id,"aria-label":label||"Radio Group","aria-labelledby":label?id:void 0,className:"RadioGroupRoot ".concat(null!=className?className:"").trim(),dir:theme.direction,...props,children:null==options?void 0:options.map((option=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_styles__WEBPACK_IMPORTED_MODULE_1__.LI,{className:"RadioContainer",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_1__.CU,{className:"RadioGroupItem",disabled:option.disabled,value:null==option?void 0:option[idAccessor],id:null==option?void 0:option[idAccessor],"aria-label":null==option?void 0:option[nameAccessor],children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_1__.kl,{className:"RadioGroupIndicator"})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_styles__WEBPACK_IMPORTED_MODULE_2__.l1,{className:"RadioLabel",disabled:option.disabled,htmlFor:null==option?void 0:option[idAccessor],children:null==option?void 0:option[nameAccessor]})]},null==option?void 0:option[idAccessor])))}),isErrored&&errorText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_global_ErrorText__WEBPACK_IMPORTED_MODULE_3__.y,{children:errorText})]})};try{RadioGroup.displayName="RadioGroup",RadioGroup.__docgenInfo={description:"RadioGroup displays a group of options with radio buttons and enables selection of one option from the list.",displayName:"RadioGroup",props:{options:{defaultValue:null,description:"Select options",name:"options",required:!1,type:{name:"RadioItemProps[]"}},idAccessor:{defaultValue:{value:"id"},description:"Id accessor of radio button",name:"idAccessor",required:!1,type:{name:"string"}},nameAccessor:{defaultValue:{value:"name"},description:"Name accesssor of radio button",name:"nameAccessor",required:!1,type:{name:"string"}},isRequired:{defaultValue:null,description:"Whether disabled select",name:"isRequired",required:!1,type:{name:"boolean"}},readOnly:{defaultValue:null,description:"Whether disabled select",name:"readOnly",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"The description of the content",name:"label",required:!1,type:{name:"string"}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string"}},isErrored:{defaultValue:null,description:"",name:"isErrored",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Radio/RadioGroup.tsx#RadioGroup"]={docgenInfo:RadioGroup.__docgenInfo,name:"RadioGroup",path:"src/components/Radio/RadioGroup.tsx#RadioGroup"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Radio/styles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Bz:()=>RadioGroupRoot,CU:()=>RadioGroupItem,LI:()=>RadioContainer,gb:()=>StyledRadioGroup,kl:()=>RadioGroupIndicator});var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@radix-ui/react-radio-group/dist/index.mjs"),styled_components__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const StyledRadioGroup=styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay.div(_templateObject||(_templateObject=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  direction: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.direction})),RadioGroupRoot=(0,styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay)(_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__.bL)(_templateObject2||(_templateObject2=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"]))),RadioGroupIndicator=(0,styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay)(_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__.C1)(_templateObject3||(_templateObject3=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  &::after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ",";\n  }\n"])),(_ref2=>{let{theme}=_ref2;return"dark"===theme.mode?theme.colors.common.black:theme.colors.common.white})),RadioGroupItem=(0,styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay)(_radix_ui_react_radio_group__WEBPACK_IMPORTED_MODULE_2__.q7)(_templateObject4||(_templateObject4=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  background-color: ",";\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid transparent;\n  padding: 0;\n  margin: 0;\n  outline-offset: 3px;\n  direction: ",";\n  background-color: ",";\n  &[data-state='unchecked'] {\n    border-color: ",";\n    background-color: unset;\n  }\n  &[data-disabled] {\n    border-color: ",";\n    background: ",";\n  }\n  &:hover:not([data-disabled]) {\n    box-shadow: 0 0 0 3px ","30;\n  }\n"])),(_ref3=>{let{theme}=_ref3;return"dark"===theme.mode?theme.colors.common.black:theme.colors.common.white}),(_ref4=>{let{theme}=_ref4;return theme.direction}),(_ref5=>{let{theme}=_ref5;return theme.colors.common.accent}),(_ref6=>{let{theme}=_ref6;return theme.colors.border.hover}),(_ref7=>{let{theme}=_ref7;return theme.colors.border.disabled}),(_ref8=>{let{theme}=_ref8;return"linear-gradient\n        (0deg, #cfd7df, #cfd7df),\n      linear-gradient(0deg, ".concat(theme.colors.fill.medium,", ").concat(theme.colors.fill.medium,")")}),(_ref9=>{let{theme}=_ref9;return theme.colors.border.hover})),RadioContainer=styled_components__WEBPACK_IMPORTED_MODULE_0__.Ay.div(_templateObject5||(_templateObject5=(0,_Users_basembulingam_Files_Code_Repo_freemium_ui_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_1__.A)(["\n  display: flex;\n  align-items: center;\n  direction: ",";\n"])),(_ref10=>{let{theme}=_ref10;return theme.direction}))},"./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-Reorder-stories.87ac0c5c.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkfreemium_ui=self.webpackChunkfreemium_ui||[]).push([[92416],{"./src/stories/Reorder.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_Reorder__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Reorder/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Reorder",component:_components_Reorder__WEBPACK_IMPORTED_MODULE_1__._,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{}},Primary={render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components_Reorder__WEBPACK_IMPORTED_MODULE_1__._,{...args}),args:{customRender:item=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{background:"#FFFFFF",border:"1px solid #EBEFF3",boxShadow:"0px 2px 4px rgba(18, 52, 77, 0.06)",borderRadius:"4px",padding:"8px 12px",fontSize:"14px",fontFamily:'-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Arial, sans-serif'},children:item.name}),items:[{id:1,name:"IES Holdings, Inc."},{id:2,name:"Sun Life Financial Inc."},{id:3,name:"SeaChange International, Inc."},{id:4,name:"New York & Company, Inc."},{id:5,name:"RenaissanceRe Holdings Ltd."},{id:6,name:"Cellectar Biosciences, Inc."}]}},__namedExportsOrder=["Primary"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  render: args => {\n    return <Reorder {...args} />;\n  },\n  args: {\n    customRender: item => <div style={{\n      background: '#FFFFFF',\n      border: '1px solid #EBEFF3',\n      boxShadow: '0px 2px 4px rgba(18, 52, 77, 0.06)',\n      borderRadius: '4px',\n      padding: '8px 12px',\n      fontSize: '14px',\n      fontFamily: `-apple-system, \".SFNSText-Regular\", \"San Francisco\", BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Lucida Grande\", Arial, sans-serif`\n    }}>\n        {item.name}\n      </div>,\n    items: ([{\n      id: 1,\n      name: 'IES Holdings, Inc.'\n    }, {\n      id: 2,\n      name: 'Sun Life Financial Inc.'\n    }, {\n      id: 3,\n      name: 'SeaChange International, Inc.'\n    }, {\n      id: 4,\n      name: 'New York & Company, Inc.'\n    }, {\n      id: 5,\n      name: 'RenaissanceRe Holdings Ltd.'\n    }, {\n      id: 6,\n      name: 'Cellectar Biosciences, Inc.'\n    }] as {\n      id: number;\n      name: string;\n    }[])\n  }\n}",...Primary.parameters?.docs?.source}}}},"./src/components/Reorder/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{_:()=>Reorder_Reorder});var core_esm=__webpack_require__("./node_modules/@dnd-kit/core/dist/core.esm.js"),modifiers_esm=__webpack_require__("./node_modules/@dnd-kit/modifiers/dist/modifiers.esm.js"),sortable_esm=__webpack_require__("./node_modules/@dnd-kit/sortable/dist/sortable.esm.js"),utilities_esm=__webpack_require__("./node_modules/@dnd-kit/utilities/dist/utilities.esm.js"),lodash=__webpack_require__("./node_modules/lodash/lodash.js"),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"),utils=__webpack_require__("./src/utils/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Drag=react.forwardRef(((props,forwardRef)=>{var _props$fill,_props$fill2,_props$fill3,_props$fill4,_props$fill5,_props$fill6;return(0,jsx_runtime.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...props,ref:forwardRef,children:[(0,jsx_runtime.jsx)("path",{d:"M4.83981 4.47195C4.33683 4.47519 3.88173 4.17426 3.68775 3.71019C3.49378 3.24611 3.59936 2.71083 3.95502 2.35517C4.31068 1.9995 4.84597 1.89392 5.31004 2.0879C5.77412 2.28188 6.07504 2.73698 6.07181 3.23995C6.07181 3.92037 5.52022 4.47195 4.83981 4.47195Z",fill:null!==(_props$fill=props.fill)&&void 0!==_props$fill?_props$fill:"currentcolor"}),(0,jsx_runtime.jsx)("path",{d:"M11.2397 4.47195C10.7367 4.47519 10.2816 4.17426 10.0877 3.71019C9.89368 3.24611 9.99926 2.71083 10.3549 2.35517C10.7106 1.9995 11.2459 1.89392 11.7099 2.0879C12.174 2.28188 12.4749 2.73698 12.4717 3.23995C12.4717 3.92037 11.9201 4.47195 11.2397 4.47195Z",fill:null!==(_props$fill2=props.fill)&&void 0!==_props$fill2?_props$fill2:"currentcolor"}),(0,jsx_runtime.jsx)("path",{d:"M4.83981 9.272C4.33683 9.27524 3.88173 8.97431 3.68775 8.51024C3.49378 8.04616 3.59936 7.51088 3.95502 7.15522C4.31068 6.79955 4.84597 6.69397 5.31004 6.88795C5.77412 7.08193 6.07504 7.53703 6.07181 8.04C6.07181 8.72042 5.52022 9.272 4.83981 9.272Z",fill:null!==(_props$fill3=props.fill)&&void 0!==_props$fill3?_props$fill3:"currentcolor"}),(0,jsx_runtime.jsx)("path",{d:"M11.2397 9.272C10.7367 9.27524 10.2816 8.97431 10.0877 8.51024C9.89368 8.04616 9.99926 7.51088 10.3549 7.15522C10.7106 6.79955 11.2459 6.69397 11.7099 6.88795C12.174 7.08193 12.4749 7.53703 12.4717 8.04C12.4717 8.72042 11.9201 9.272 11.2397 9.272Z",fill:null!==(_props$fill4=props.fill)&&void 0!==_props$fill4?_props$fill4:"currentcolor"}),(0,jsx_runtime.jsx)("path",{d:"M4.83981 14.0719C4.33683 14.0752 3.88173 13.7742 3.68775 13.3102C3.49378 12.8461 3.59936 12.3108 3.95502 11.9551C4.31068 11.5995 4.84597 11.4939 5.31004 11.6879C5.77412 11.8819 6.07504 12.337 6.07181 12.8399C6.07181 13.5203 5.52022 14.0719 4.83981 14.0719Z",fill:null!==(_props$fill5=props.fill)&&void 0!==_props$fill5?_props$fill5:"currentcolor"}),(0,jsx_runtime.jsx)("path",{d:"M11.2397 14.0719C10.7367 14.0752 10.2816 13.7742 10.0877 13.3102C9.89368 12.8461 9.99926 12.3108 10.3549 11.9551C10.7106 11.5995 11.2459 11.4939 11.7099 11.6879C12.174 11.8819 12.4749 12.337 12.4717 12.8399C12.4717 13.5203 11.9201 14.0719 11.2397 14.0719Z",fill:null!==(_props$fill6=props.fill)&&void 0!==_props$fill6?_props$fill6:"currentcolor"})]})})),Icons_Drag=Drag;try{Drag.displayName="Drag",Drag.__docgenInfo={description:"",displayName:"Drag",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Icons/Drag.tsx#Drag"]={docgenInfo:Drag.__docgenInfo,name:"Drag",path:"src/components/Icons/Drag.tsx#Drag"})}catch(__react_docgen_typescript_loader_error){}var _templateObject,_templateObject2,taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js");const ReorderContainer=styled_components_browser_esm.Ay.div(_templateObject||(_templateObject=(0,taggedTemplateLiteral.A)(["\n  direction: ",";\n"])),(_ref=>{let{theme}=_ref;return theme.direction})),ItemContainer=styled_components_browser_esm.Ay.div(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.A)(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  &:not(:last-child) {\n    margin-bottom: 12px;\n  }\n  button.ItemDragger {\n    margin: auto 4px;\n    cursor: ",";\n  }\n  div.CustomItem {\n    flex: 1;\n  }\n  opacity: ",";\n"])),(_ref2=>{let{disabled}=_ref2;return disabled?"not-allowed":"grab"}),(_ref3=>{let{disabled}=_ref3;return disabled?.5:1})),Reorder=props=>{const{items:i,customRender,onReorder,customFilter=()=>!0,className,showDragger=!0,disabled=!1}=props,[items,setItems]=react.useState([]),sensors=(0,core_esm.FR)((0,core_esm.MS)(core_esm.cA),(0,core_esm.MS)(core_esm.IG),(0,core_esm.MS)(core_esm.uN,{coordinateGetter:sortable_esm.JR}));return react.useEffect((()=>{i&&(0,lodash.isArray)(i)&&setItems(i.map((item=>({id:(0,utils.OX)(),data:item}))))}),[i]),(0,jsx_runtime.jsx)(ReorderContainer,{className:className||"",children:(0,jsx_runtime.jsx)(core_esm.Mp,{sensors,collisionDetection:core_esm.fp,onDragEnd:event=>{const{active,over}=event;if(active.id!==(null==over?void 0:over.id)){const allIds=items.map((item=>item.id)),oldIndex=allIds.indexOf(active.id.toString()),newIndex=allIds.indexOf((null==over?void 0:over.id.toString())||""),newLocalItems=(0,sortable_esm.be)(items,oldIndex,newIndex),newItems=(0,sortable_esm.be)(i,oldIndex,newIndex);setItems(newLocalItems),onReorder&&onReorder([...newItems])}},modifiers:[modifiers_esm.FN,modifiers_esm.Q_,modifiers_esm.Mk],children:(0,jsx_runtime.jsx)(sortable_esm.gB,{items,strategy:sortable_esm._G,children:items.filter((i=>customFilter(i.data))).map(((item,index)=>(0,jsx_runtime.jsx)(SortableItem,{customRender,item:item.data,disabled,itemIndex:index,showDragger,id:item.id},item.data.id.toString())))})})})},SortableItem=props=>{const theme=(0,styled_components_browser_esm.DP)(),{id,item,itemIndex,customRender,showDragger,disabled,key}=props,{attributes,listeners,setNodeRef,transform,transition}=(0,sortable_esm.gl)({id}),style={transform:utilities_esm.Ks.Translate.toString(transform),transition};return(0,react.createElement)(ItemContainer,{disabled,className:"ReorderItemContainer",ref:setNodeRef,style,...attributes,key},showDragger&&(0,jsx_runtime.jsx)(styles.K0,{className:"ItemDragger",disabled,...disabled?{}:listeners,children:(0,jsx_runtime.jsx)(Icons_Drag,{fill:theme.colors.text.primary})}),(0,jsx_runtime.jsx)("div",{className:"CustomItem",...showDragger?{}:listeners,children:customRender(item,itemIndex,listeners)}))},Reorder_Reorder=Reorder;try{Reorder.displayName="Reorder",Reorder.__docgenInfo={description:"Reorder is a component that enables reordering of items in a list. It provides a drag handle to reorder the items.",displayName:"Reorder",props:{items:{defaultValue:null,description:"Items of reorder",name:"items",required:!0,type:{name:"T[]"}},className:{defaultValue:null,description:"Class name of reorder",name:"className",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"Whether disabled select",name:"disabled",required:!1,type:{name:"boolean"}},showDragger:{defaultValue:null,description:"should show the Dragger?",name:"showDragger",required:!1,type:{name:"boolean"}},customFilter:{defaultValue:null,description:"",name:"customFilter",required:!1,type:{name:"((item: T) => boolean)"}},onReorder:{defaultValue:null,description:"",name:"onReorder",required:!1,type:{name:"((items: T[]) => void)"}},customRender:{defaultValue:null,description:"",name:"customRender",required:!0,type:{name:"(item: T, index: number, listeners?: DraggableSyntheticListeners) => ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Reorder/Reorder.tsx#Reorder"]={docgenInfo:Reorder.__docgenInfo,name:"Reorder",path:"src/components/Reorder/Reorder.tsx#Reorder"})}catch(__react_docgen_typescript_loader_error){}}}]);