@feminab/box-ui 0.1.0 → 0.1.3

package/storybook-static/stories-Page-stories.ab66c885.iframe.bundle.js

@@ -0,0 +1,2 @@
+/*! For license information please see stories-Page-stories.ab66c885.iframe.bundle.js.LICENSE.txt */
+(self.webpackChunk_feminab_box_ui=self.webpackChunk_feminab_box_ui||[]).push([[290],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/react/cjs/react-jsx-runtime.production.js":(__unused_webpack_module,exports)=>{"use strict";var REACT_ELEMENT_TYPE=Symbol.for("react.transitional.element"),REACT_FRAGMENT_TYPE=Symbol.for("react.fragment");function jsxProd(type,config,maybeKey){var key=null;if(void 0!==maybeKey&&(key=""+maybeKey),void 0!==config.key&&(key=""+config.key),"key"in config)for(var propName in maybeKey={},config)"key"!==propName&&(maybeKey[propName]=config[propName]);else maybeKey=config;return config=maybeKey.ref,{$$typeof:REACT_ELEMENT_TYPE,type,key,ref:void 0!==config?config:null,props:maybeKey}}exports.Fragment=REACT_FRAGMENT_TYPE,exports.jsx=jsxProd,exports.jsxs=jsxProd},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.js")},"./src/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$:()=>Button});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const buttonVariantClasses={primary:{default:"btn-primary",hover:"btn-primary-hover",focus:"btn-primary-focus shadow-grayDark",disabled:"btn-primary-disabled"},secondary:{default:"btn-secondary",hover:"btn-secondary-hover",focus:"btn-secondary-focus shadow-grayDark",disabled:"btn-secondary-disabled"},secondaryGray:{default:"btn-secondaryGray",hover:"btn-secondaryGray-hover",focus:"btn-secondaryGray-focus shadow-grayDark",disabled:"btn-secondaryGray-disabled"},tertiary:{default:"btn-tertiary",hover:"btn-tertiary-hover",focus:"btn-tertiary-focus shadow-grayDark",disabled:"btn-tertiary-disabled"},tertiaryGray:{default:"btn-tertiaryGray",hover:"btn-tertiaryGray-hover",focus:"btn-tertiaryGray-focus shadow-grayDark",disabled:"btn-tertiaryGray-disabled"}},buttonSizeClasses={sm:"btn-sm",md:"btn-md",lg:"btn-lg",xl:"btn-xl","2xl":"btn-2xl"},buttonIconSizeClasses={sm:"btn-icon-sm",md:"btn-icon-md",lg:"btn-icon-lg",xl:"btn-icon-xl","2xl":"btn-icon-2xl"},Button=_ref=>{let{children,className,variant="primary",size="md",disabled,LeadingIcon,TrailingIcon,IconOnly,...buttonProps}=_ref;const buttonVariantClassName=buttonVariantClasses[variant],buttonIconSizeClassName=buttonIconSizeClasses[size],setClassName=(icon,additionalClass)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(icon.props.className,additionalClass)}):icon;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("button",{type:"button",className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("btn-base",className,{[buttonSizeClasses[size]]:!IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonIconSizeClassName,"justify-center")]:IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.default,buttonVariantClassName.hover,buttonVariantClassName.focus)]:!disabled,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.disabled,"cursor-not-allowed")]:disabled}),...buttonProps,children:[LeadingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(LeadingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"mr-2":"2xl"!==size,"mr-3":"2xl"===size}))}),children,IconOnly&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:(icon=IconOnly,(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)&&"size"in icon.props?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{size:20}):icon)}),TrailingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(TrailingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"ml-2":"2xl"!==size,"ml-3":"2xl"===size}))})]});var icon};Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{variant:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'secondaryGray' | 'tertiary' | 'tertiaryGray'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'secondaryGray'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'tertiaryGray'"}]},description:"",defaultValue:{value:'"primary"',computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'sm' | 'md' | 'lg' | 'xl' | '2xl'",elements:[{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"},{name:"literal",value:"'xl'"},{name:"literal",value:"'2xl'"}]},description:"",defaultValue:{value:'"md"',computed:!1}},children:{required:!1,tsType:{name:"union",raw:"string | ReactElement",elements:[{name:"string"},{name:"ReactElement"}]},description:""},className:{required:!1,tsType:{name:"string"},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},IconOnly:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement<React.HTMLProps<HTMLElement>>",elements:[{name:"ReactHTMLProps",raw:"React.HTMLProps<HTMLElement>",elements:[{name:"HTMLElement"}]}]},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""}},composes:["ButtonHTMLAttributes"]}},"./src/Header.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Y:()=>Header});__webpack_require__("./node_modules/react/index.js");var _Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const Header=_ref=>{let{user,onLogin,onLogout,onCreateAccount}=_ref;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("header",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:"storybook-header",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{children:"Acme"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{children:user?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("span",{className:"welcome",children:["Welcome, ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("b",{children:user.name}),"!"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{size:"sm",onClick:onLogout,children:"Log out"})]}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{size:"sm",onClick:onLogin,children:"Log in"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{variant:"primary",size:"sm",onClick:onCreateAccount,children:"Sign up"})]})})]})})};Header.__docgenInfo={description:"",methods:[],displayName:"Header",props:{user:{required:!1,tsType:{name:"signature",type:"object",raw:"{\n  name: string;\n}",signature:{properties:[{key:"name",value:{name:"string",required:!0}}]}},description:""},onLogin:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onLogout:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onCreateAccount:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""}}}},"./src/stories/Page.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{LoggedIn:()=>LoggedIn,LoggedOut:()=>LoggedOut,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Page_stories});var dist=__webpack_require__("./node_modules/@storybook/test/dist/index.mjs"),react=__webpack_require__("./node_modules/react/index.js"),Header=__webpack_require__("./src/Header.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Page=()=>{const[user,setUser]=react.useState();return(0,jsx_runtime.jsxs)("article",{children:[(0,jsx_runtime.jsx)(Header.Y,{user,onLogin:()=>setUser({name:"Jane Doe"}),onLogout:()=>setUser(void 0),onCreateAccount:()=>setUser({name:"Jane Doe"})}),(0,jsx_runtime.jsxs)("section",{className:"storybook-page",children:[(0,jsx_runtime.jsx)("h2",{children:"Pages in Storybook"}),(0,jsx_runtime.jsxs)("p",{children:["We recommend building UIs with a"," ",(0,jsx_runtime.jsx)("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:(0,jsx_runtime.jsx)("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),(0,jsx_runtime.jsx)("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),(0,jsx_runtime.jsxs)("ul",{children:[(0,jsx_runtime.jsx)("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),(0,jsx_runtime.jsx)("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),(0,jsx_runtime.jsxs)("p",{children:["Get a guided tutorial on component-driven development at"," ",(0,jsx_runtime.jsx)("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",rel:"noopener noreferrer",children:"Storybook tutorials"}),". Read more in the"," ",(0,jsx_runtime.jsx)("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),(0,jsx_runtime.jsxs)("div",{className:"tip-wrapper",children:[(0,jsx_runtime.jsx)("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",(0,jsx_runtime.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:(0,jsx_runtime.jsx)("g",{fill:"none",fillRule:"evenodd",children:(0,jsx_runtime.jsx)("path",{d:"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})};Page.__docgenInfo={description:"",methods:[],displayName:"Page"};const Page_stories={title:"Example/Page",component:Page,parameters:{layout:"fullscreen"}},LoggedOut={},LoggedIn={play:async _ref=>{let{canvasElement}=_ref;const canvas=(0,dist.ux)(canvasElement),loginButton=canvas.getByRole("button",{name:/Log in/i});await(0,dist.E3)(loginButton).toBeInTheDocument(),await dist.Q4.click(loginButton),await(0,dist.E3)(loginButton).not.toBeInTheDocument();const logoutButton=canvas.getByRole("button",{name:/Log out/i});await(0,dist.E3)(logoutButton).toBeInTheDocument()}},__namedExportsOrder=["LoggedOut","LoggedIn"];LoggedOut.parameters={...LoggedOut.parameters,docs:{...LoggedOut.parameters?.docs,source:{originalSource:"{}",...LoggedOut.parameters?.docs?.source}}},LoggedIn.parameters={...LoggedIn.parameters,docs:{...LoggedIn.parameters?.docs,source:{originalSource:"{\n  play: async ({\n    canvasElement\n  }) => {\n    const canvas = within(canvasElement);\n    const loginButton = canvas.getByRole('button', {\n      name: /Log in/i\n    });\n    await expect(loginButton).toBeInTheDocument();\n    await userEvent.click(loginButton);\n    await expect(loginButton).not.toBeInTheDocument();\n    const logoutButton = canvas.getByRole('button', {\n      name: /Log out/i\n    });\n    await expect(logoutButton).toBeInTheDocument();\n  }\n}",...LoggedIn.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-Paginate-stories.086f736a.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_feminab_box_ui=self.webpackChunk_feminab_box_ui||[]).push([[660],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/stories/Paginate.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DesktopPagination:()=>DesktopPagination,MobilePagination:()=>MobilePagination,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Paginate_stories});var react=__webpack_require__("./node_modules/react/index.js"),StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}const dist_clsx=function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n};function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}var usePagination=function usePagination(_ref){var currentPage=_ref.currentPage,setCurrentPage=_ref.setCurrentPage,_ref$truncableText=_ref.truncableText,truncableText=void 0===_ref$truncableText?"...":_ref$truncableText,_ref$truncableClassNa=_ref.truncableClassName,truncableClassName=void 0===_ref$truncableClassNa?"":_ref$truncableClassNa,totalPages=_ref.totalPages,edgePageCount=_ref.edgePageCount,middlePagesSiblingCount=_ref.middlePagesSiblingCount,pages=Array(totalPages).fill(0).map((function(_,i){return i+1})),hasPreviousPage=currentPage>1,hasNextPage=currentPage<totalPages,isReachedToFirst=currentPage<=middlePagesSiblingCount,isReachedToLast=currentPage+middlePagesSiblingCount>=totalPages,middlePages=react.useMemo((function(){var middlePageCount=2*middlePagesSiblingCount+1;return isReachedToFirst?pages.slice(0,middlePageCount):isReachedToLast?pages.slice(-middlePageCount):pages.slice(currentPage-middlePagesSiblingCount,currentPage+middlePagesSiblingCount+1)}),[currentPage,pages]),previousPages=react.useMemo((function(){return isReachedToFirst||function getAllPreviousPages(){return pages.slice(0,middlePages[0]-1)}().length<1?[]:pages.slice(0,edgePageCount).filter((function(p){return!middlePages.includes(p)}))}),[currentPage,pages]),getAllNextPages=react.useMemo((function(){return pages.slice(middlePages[middlePages.length-1],pages[pages.length])}),[pages,middlePages]),nextPages=react.useMemo((function(){return isReachedToLast||getAllNextPages.length<1?[]:pages.slice(pages.length-edgePageCount,pages.length).filter((function(p){return!middlePages.includes(p)}))}),[middlePages,pages]),isPreviousTruncable=react.useMemo((function(){return middlePages[0]>previousPages[previousPages.length-1]+1}),[previousPages,middlePages]),isNextTruncable=react.useMemo((function(){return middlePages[middlePages.length-1]+1<nextPages[0]}),[nextPages,middlePages]);return{currentPage,setCurrentPage,truncableText,truncableClassName,pages,hasPreviousPage,hasNextPage,previousPages,isPreviousTruncable,middlePages,isNextTruncable,nextPages}},TruncableElement=function TruncableElement(_ref3){var prev=_ref3.prev,pagination=react.useContext(PaginationContext),isPreviousTruncable=pagination.isPreviousTruncable,isNextTruncable=pagination.isNextTruncable,truncableText=pagination.truncableText,truncableClassName=pagination.truncableClassName;return isPreviousTruncable&&!0===prev||isNextTruncable&&!prev?react.createElement("li",{className:truncableClassName||void 0},truncableText):null},defaultState={currentPage:0,setCurrentPage:function setCurrentPage(){},truncableText:"...",truncableClassName:"",pages:[],hasPreviousPage:!1,hasNextPage:!1,previousPages:[],isPreviousTruncable:!1,middlePages:[],isNextTruncable:!1,nextPages:[]},PaginationContext=react.createContext(defaultState),Pagination=function Pagination(_ref5){var dataTestId=_ref5.dataTestId,paginationProps=_objectWithoutPropertiesLoose(_ref5,["dataTestId"]),pagination=usePagination(paginationProps);return react.createElement(PaginationContext.Provider,{value:pagination},react.createElement("div",{className:paginationProps.className,"data-testid":dataTestId},paginationProps.children))};Pagination.PrevButton=function PrevButton(_ref){var _as$props$children,className=_ref.className,children=_ref.children,dataTestId=_ref.dataTestId,_ref$as=_ref.as,as=void 0===_ref$as?react.createElement("button",null):_ref$as,buttonProps=_objectWithoutPropertiesLoose(_ref,["className","children","dataTestId","as"]),pagination=react.useContext(PaginationContext),previous=function previous(){pagination.currentPage+1>1&&pagination.setCurrentPage(pagination.currentPage-1)},disabled=0===pagination.currentPage;return react.createElement(as.type,Object.assign({},buttonProps,as.props,{className:dist_clsx(className,as.props.className),onClick:function onClick(){return previous()},tabIndex:disabled?"-1":0,disabled,"data-testid":dataTestId,onKeyPress:function onKeyPress(event){event.preventDefault(),"Enter"!==event.key||disabled||previous()}}),null!=(_as$props$children=as.props.children)?_as$props$children:children)},Pagination.NextButton=function NextButton(_ref2){var _as$props$children2,className=_ref2.className,children=_ref2.children,dataTestId=_ref2.dataTestId,_ref2$as=_ref2.as,as=void 0===_ref2$as?react.createElement("button",null):_ref2$as,buttonProps=_objectWithoutPropertiesLoose(_ref2,["className","children","dataTestId","as"]),pagination=react.useContext(PaginationContext),next=function next(){pagination.currentPage+1<pagination.pages.length&&pagination.setCurrentPage(pagination.currentPage+1)},disabled=pagination.currentPage===pagination.pages.length-1;return react.createElement(as.type,Object.assign({},buttonProps,as.props,{className:dist_clsx(className,as.props.className),onClick:function onClick(){return next()},tabIndex:disabled?"-1":0,disabled,"data-testid":dataTestId,onKeyPress:function onKeyPress(event){event.preventDefault(),"Enter"!==event.key||disabled||next()}}),null!=(_as$props$children2=as.props.children)?_as$props$children2:children)},Pagination.PageButton=function PageButton(_ref4){var _ref4$as=_ref4.as,as=void 0===_ref4$as?react.createElement("a",null):_ref4$as,className=_ref4.className,dataTestIdActive=_ref4.dataTestIdActive,dataTestIdInactive=_ref4.dataTestIdInactive,activeClassName=_ref4.activeClassName,inactiveClassName=_ref4.inactiveClassName,renderExtraProps=_ref4.renderExtraProps,pagination=react.useContext(PaginationContext),renderPageButton=function renderPageButton(page){var _clsx;return react.createElement("li",{key:page},react.createElement(as.type,Object.assign({"data-testid":dist_clsx((_clsx={},_clsx[""+dataTestIdActive]=dataTestIdActive&&pagination.currentPage+1===page,_clsx[dataTestIdInactive+"-"+page]=dataTestIdActive&&pagination.currentPage+1!==page,_clsx))||void 0,tabIndex:0,onKeyPress:function onKeyPress(event){"Enter"===event.key&&pagination.setCurrentPage(page-1)},onClick:function onClick(){return pagination.setCurrentPage(page-1)},className:dist_clsx(className,pagination.currentPage+1===page?activeClassName:inactiveClassName)},as.props,renderExtraProps?renderExtraProps(page):{}),page))};return react.createElement(react.Fragment,null,pagination.previousPages.map(renderPageButton),react.createElement(TruncableElement,{prev:!0}),pagination.middlePages.map(renderPageButton),react.createElement(TruncableElement,null),pagination.nextPages.map(renderPageButton))};var fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Paginate=_ref=>{let{totalPages,page,isMobile,className,setPage}=_ref;const handlePageChange=page=>{setPage(page)},ArrowLeft=fi.kRp,ArrowRight=fi.dyV;return isMobile?(0,jsx_runtime.jsxs)("div",{className:classnames_default()("flex w-full h-10 items-center",className),children:[(0,jsx_runtime.jsx)(ArrowLeft,{size:20,className:classnames_default()("mr-3 text-gray-500 dark:text-white",{"cursor-pointer":0!==page,"opacity-50":0===page}),onClick:()=>{page>0&&handlePageChange(page-1)}}),(0,jsx_runtime.jsx)("div",{className:"flex justify-center flex-grow text-sm text-gray-700 select-none dark:text-white",children:`Page ${page} of ${totalPages}`}),(0,jsx_runtime.jsx)(ArrowRight,{size:20,className:classnames_default()("ml-3 text-gray-500 dark:text-white",{"cursor-pointer":page!==totalPages-1,"opacity-50":page===totalPages-1}),onClick:()=>{page<totalPages-1&&handlePageChange(page+1)}})]}):(0,jsx_runtime.jsxs)(Pagination,{className:classnames_default()("flex w-full items-center h-10 text-sm select-none",className),currentPage:page,totalPages,edgePageCount:2,setCurrentPage:handlePageChange,truncableText:"...",middlePagesSiblingCount:2,truncableClassName:"w-10 px-0.5 text-center dark:text-gray-500",children:[(0,jsx_runtime.jsxs)(Pagination.PrevButton,{className:classnames_default()("h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none",{"cursor-pointer":0!==page,"opacity-50":0===page}),children:[(0,jsx_runtime.jsx)(ArrowLeft,{size:20,className:classnames_default()("mr-3")}),"Previous"]}),(0,jsx_runtime.jsx)("div",{className:"flex items-center justify-center flex-grow list-none",children:(0,jsx_runtime.jsx)(Pagination.PageButton,{activeClassName:"bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white",inactiveClassName:"text-gray-500",className:"flex items-center justify-center h-10 w-10 rounded-full cursor-pointer font-medium"})}),(0,jsx_runtime.jsxs)(Pagination.NextButton,{className:classnames_default()("h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none",{"cursor-pointer":page!==totalPages-1,"opacity-50":page===totalPages-1}),children:["Next",(0,jsx_runtime.jsx)(ArrowRight,{size:20,className:classnames_default()("ml-3")})]})]})};Paginate.__docgenInfo={description:"",methods:[],displayName:"Paginate",props:{totalPages:{required:!0,tsType:{name:"number"},description:""},page:{required:!0,tsType:{name:"number"},description:""},setPage:{required:!0,tsType:{name:"signature",type:"function",raw:"(page: number) => void",signature:{arguments:[{type:{name:"number"},name:"page"}],return:{name:"void"}}},description:""},isMobile:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!0,tsType:{name:"string"},description:""}}};const Paginate_stories={title:"Example/Pagination",component:Paginate,parameters:{layout:"centered"},tags:["autodocs"]},DesktopPagination={args:{darkMode:!1,totalPages:10},render:args=>{const[currentPage,setCurrentPage]=(0,react.useState)(0);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)(Paginate,{className:"",isMobile:!1,totalPages:args.totalPages,page:currentPage,setPage:setCurrentPage})})}},MobilePagination={args:{darkMode:!1,totalPages:10},render:args=>{const[currentPage,setCurrentPage]=(0,react.useState)(0);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)(Paginate,{className:"",isMobile:!0,totalPages:args.totalPages,page:currentPage,setPage:setCurrentPage})})}},__namedExportsOrder=["DesktopPagination","MobilePagination"];DesktopPagination.parameters={...DesktopPagination.parameters,docs:{...DesktopPagination.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false,\n    totalPages: 10\n  },\n  render: args => {\n    const [currentPage, setCurrentPage] = useState<number>(0);\n    return <StoryLayout {...args}>\n        <Paginate className="" isMobile={false} totalPages={args.totalPages} page={currentPage} setPage={setCurrentPage} />\n      </StoryLayout>;\n  }\n}',...DesktopPagination.parameters?.docs?.source}}},MobilePagination.parameters={...MobilePagination.parameters,docs:{...MobilePagination.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false,\n    totalPages: 10\n  },\n  render: args => {\n    const [currentPage, setCurrentPage] = useState<number>(0);\n    return <StoryLayout {...args}>\n        <Paginate className="" isMobile={true} totalPages={args.totalPages} page={currentPage} setPage={setCurrentPage} />\n      </StoryLayout>;\n  }\n}',...MobilePagination.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-Select-stories.4c04edb3.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_feminab_box_ui=self.webpackChunk_feminab_box_ui||[]).push([[707],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/data/images/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>images});const images={logo:"https://media-hosting.imagekit.io/0ec1ca8b900e4e8b/logo.svg?Expires=1838348369&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=pCHsmoIdugCAGgRQuivkSFGORbcd0DMZjw-l9LQlxqEs77-19RpmN8TrGsMdYdKwLic46nDsKt44NPaRyu~mxJDKX7I0acu5x53nLqrjh-fs6s8VATv5eHASNeV83rLF3LXgXwMkXubchLy79xPaEHKlRlvJgcqrjZd3cE4C8QXC0KIG4dSjtkd0rECwtweKFuh1BrJIwcKIxiu5cEJUKgDvi4TUS22KVFh4c52c9CjBGa0ulrxxyZHMj2eXff-uQBkecyW-QYillwmsuz2i5PFf6Ud~9JZ2xYOBWwrq4VRSY-8p~c6Czqagg-w6gqyk-3xEM-f-cDfor~11~xwtTg__",IN:"https://kapowaz.github.io/circle-flags/flags/in.svg",BE:"https://kapowaz.github.io/circle-flags/flags/be.svg",DE:"https://kapowaz.github.io/circle-flags/flags/de.svg",FR:"https://kapowaz.github.io/circle-flags/flags/fr.svg",IT:"https://kapowaz.github.io/circle-flags/flags/it.svg",NL:"https://kapowaz.github.io/circle-flags/flags/nl.svg",RU:"https://kapowaz.github.io/circle-flags/flags/ru.svg",US:"https://kapowaz.github.io/circle-flags/flags/us.svg"}},"./src/stories/Select.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,SelectWithIcon:()=>SelectWithIcon,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Select_stories});var react=__webpack_require__("./node_modules/react/index.js"),useFocusRing=__webpack_require__("./node_modules/@react-aria/focus/dist/useFocusRing.mjs"),useHover=__webpack_require__("./node_modules/@react-aria/interactions/dist/useHover.mjs"),react_dom=__webpack_require__("./node_modules/react-dom/index.js"),use_active_press=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-active-press.js");function use_by_comparator_l(e,r){return null!==e&&null!==r&&"object"==typeof e&&"object"==typeof r&&"id"in e&&"id"in r?e.id===r.id:e===r}var use_event=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-event.js");var use_iso_morphic_effect=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js");var use_disposables=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-disposables.js"),use_element_size=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-element-size.js"),disposables=__webpack_require__("./node_modules/@headlessui/react/dist/utils/disposables.js"),owner=__webpack_require__("./node_modules/@headlessui/react/dist/utils/owner.js"),use_is_top_layer=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-is-top-layer.js");let f=new Map,use_inert_others_u=new Map;function h(t){var e;let r=null!=(e=use_inert_others_u.get(t))?e:0;return use_inert_others_u.set(t,r+1),0!==r||(f.set(t,{"aria-hidden":t.getAttribute("aria-hidden"),inert:t.inert}),t.setAttribute("aria-hidden","true"),t.inert=!0),()=>use_inert_others_m(t)}function use_inert_others_m(t){var i;let r=null!=(i=use_inert_others_u.get(t))?i:1;if(1===r?use_inert_others_u.delete(t):use_inert_others_u.set(t,r-1),1!==r)return;let e=f.get(t);e&&(null===e["aria-hidden"]?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e["aria-hidden"]),t.inert=e.inert,f.delete(t))}function y(t,{allowed:r,disallowed:e}={}){let i=(0,use_is_top_layer.S)(t,"inert-others");(0,use_iso_morphic_effect.s)((()=>{var d,c;if(!i)return;let a=(0,disposables.e)();for(let n of null!=(d=null==e?void 0:e())?d:[])n&&a.add(h(n));let s=null!=(c=null==r?void 0:r())?c:[];for(let n of s){if(!n)continue;let l=(0,owner.T)(n);if(!l)continue;let o=n.parentElement;for(;o&&o!==l.body;){for(let p of o.children)s.some((E=>p.contains(E)))||a.add(h(p));o=o.parentElement}}return a.dispose}),[i,r,e])}var use_latest_value=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-latest-value.js"),use_on_disappear=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-on-disappear.js"),use_outside_click=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-outside-click.js"),use_owner=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-owner.js"),use_resolve_button_type=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-resolve-button-type.js"),use_scroll_lock=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-scroll-lock.js"),use_sync_refs=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-sync-refs.js");let a=/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;function get_text_value_o(e){var r,i;let n=null!=(r=e.innerText)?r:"",t=e.cloneNode(!0);if(!(t instanceof HTMLElement))return n;let u=!1;for(let f of t.querySelectorAll('[hidden],[aria-hidden],[role="img"]'))f.remove(),u=!0;let l=u?null!=(i=t.innerText)?i:"":n;return a.test(l)&&(l=l.replace(a,"")),l}function use_text_value_s(c){let t=(0,react.useRef)(""),r=(0,react.useRef)("");return(0,use_event._)((()=>{let e=c.current;if(!e)return"";let u=e.innerText;if(t.current===u)return r.current;let n=function get_text_value_g(e){let n=e.getAttribute("aria-label");if("string"==typeof n)return n.trim();let t=e.getAttribute("aria-labelledby");if(t){let u=t.split(" ").map((l=>{let r=document.getElementById(l);if(r){let i=r.getAttribute("aria-label");return"string"==typeof i?i.trim():get_text_value_o(r).trim()}return null})).filter(Boolean);if(u.length>0)return u.join(", ")}return get_text_value_o(e).trim()}(e).trim().toLowerCase();return t.current=u,r.current=n,n}))}function t(e){return[e.screenX,e.screenY]}function use_tracked_pointer_u(){let e=(0,react.useRef)([-1,-1]);return{wasMoved(r){let n=t(r);return(e.current[0]!==n[0]||e.current[1]!==n[1])&&(e.current=n,!0)},update(r){e.current=t(r)}}}var use_transition=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-transition.js");let e=(0,react.createContext)(void 0);function disabled_a(){return(0,react.useContext)(e)}var floating=__webpack_require__("./node_modules/@headlessui/react/dist/internal/floating.js");function form_e(i={},s=null,t=[]){for(let[r,n]of Object.entries(i))form_o(t,form_f(s,r),n);return t}function form_f(i,s){return i?i+"["+s+"]":s}function form_o(i,s,t){if(Array.isArray(t))for(let[r,n]of t.entries())form_o(i,form_f(s,r.toString()),n);else t instanceof Date?i.push([s,t.toISOString()]):"boolean"==typeof t?i.push([s,t?"1":"0"]):"string"==typeof t?i.push([s,t]):"number"==typeof t?i.push([s,`${t}`]):null==t?i.push([s,""]):form_e(t,s,i)}var render=__webpack_require__("./node_modules/@headlessui/react/dist/utils/render.js"),internal_hidden=__webpack_require__("./node_modules/@headlessui/react/dist/internal/hidden.js");let form_fields_f=(0,react.createContext)(null);function form_fields_c({children:t}){let e=(0,react.useContext)(form_fields_f);if(!e)return react.createElement(react.Fragment,null,t);let{target:r}=e;return r?(0,react_dom.createPortal)(react.createElement(react.Fragment,null,t),r):null}function j({data:t,form:e,disabled:r,onReset:n,overrides:F}){let[i,a]=(0,react.useState)(null),p=(0,use_disposables.L)();return(0,react.useEffect)((()=>{if(n&&i)return p.addEventListener(i,"reset",n)}),[i,e,n]),react.createElement(form_fields_c,null,react.createElement(C,{setForm:a,formId:e}),form_e(t).map((([s,v])=>react.createElement(internal_hidden.j,{features:internal_hidden.u.Hidden,...(0,render.oE)({key:s,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:e,disabled:r,name:s,value:v,...F})}))))}function C({setForm:t,formId:e}){return(0,react.useEffect)((()=>{if(e){let r=document.getElementById(e);r&&t(r)}}),[t,e]),e?null:react.createElement(internal_hidden.j,{features:internal_hidden.u.Hidden,as:"input",type:"hidden",hidden:!0,readOnly:!0,ref:r=>{if(!r)return;let n=r.closest("form");n&&t(n)}})}function frozen_l(o,e){let[n,t]=(0,react.useState)(e);return!o&&n!==e&&t(e),o?n:e}let id_e=(0,react.createContext)(void 0);function id_u(){return(0,react.useContext)(id_e)}var open_closed=__webpack_require__("./node_modules/@headlessui/react/dist/internal/open-closed.js"),bugs=__webpack_require__("./node_modules/@headlessui/react/dist/utils/bugs.js");var i,calculate_active_index_c=((i=calculate_active_index_c||{})[i.First=0]="First",i[i.Previous=1]="Previous",i[i.Next=2]="Next",i[i.Last=3]="Last",i[i.Specific=4]="Specific",i[i.Nothing=5]="Nothing",i);function calculate_active_index_f(l,n){let t=n.resolveItems();if(t.length<=0)return null;let r=n.resolveActiveIndex(),s=null!=r?r:-1;switch(l.focus){case 0:for(let e=0;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 1:-1===s&&(s=t.length);for(let e=s-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 2:for(let e=s+1;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 3:for(let e=t.length-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 4:for(let e=0;e<t.length;++e)if(n.resolveId(t[e],e,t)===l.id)return e;return r;case 5:return null;default:!function calculate_active_index_u(l){throw new Error("Unexpected object: "+l)}(l)}}var focus_management=__webpack_require__("./node_modules/@headlessui/react/dist/utils/focus-management.js"),match=__webpack_require__("./node_modules/@headlessui/react/dist/utils/match.js");let description_a=(0,react.createContext)(null);function description_f(){let r=(0,react.useContext)(description_a);if(null===r){let e=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(e,description_f),e}return r}description_a.displayName="DescriptionContext";let _=(0,render.FX)((function description_C(r,e){let d=(0,react.useId)(),t=disabled_a(),{id:i=`headlessui-description-${d}`,...l}=r,n=description_f(),s=(0,use_sync_refs.P)(e);(0,use_iso_morphic_effect.s)((()=>n.register(i)),[i,n.register]);let o=t||!1,p=(0,react.useMemo)((()=>({...n.slot,disabled:o})),[n.slot,o]),D={ref:s,...n.props,id:i};return(0,render.Ci)()({ourProps:D,theirProps:l,slot:p,defaultTag:"p",name:n.name||"Description"})}));Object.assign(_,{});var keyboard=__webpack_require__("./node_modules/@headlessui/react/dist/components/keyboard.js");let label_c=(0,react.createContext)(null);function label_P(){let r=(0,react.useContext)(label_c);if(null===r){let l=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(l,label_P),l}return r}function I(r){var a,e,o;let l=null!=(e=null==(a=(0,react.useContext)(label_c))?void 0:a.value)?e:void 0;return(null!=(o=null==r?void 0:r.length)?o:0)>0?[l,...r].filter(Boolean).join(" "):l}function label_K({inherit:r=!1}={}){let l=I(),[a,e]=(0,react.useState)([]),o=r?[l,...a].filter(Boolean):a;return[o.length>0?o.join(" "):void 0,(0,react.useMemo)((()=>function(t){let s=(0,use_event._)((i=>(e((p=>[...p,i])),()=>e((p=>{let u=p.slice(),d=u.indexOf(i);return-1!==d&&u.splice(d,1),u}))))),m=(0,react.useMemo)((()=>({register:s,slot:t.slot,name:t.name,props:t.props,value:t.value})),[s,t.slot,t.name,t.props,t.value]);return react.createElement(label_c.Provider,{value:m},t.children)}),[e])]}label_c.displayName="LabelContext";let label_U=(0,render.FX)((function G(r,l){var y;let a=(0,react.useId)(),e=label_P(),o=id_u(),g=disabled_a(),{id:t=`headlessui-label-${a}`,htmlFor:s=(null!=o?o:null==(y=e.props)?void 0:y.htmlFor),passive:m=!1,...i}=r,p=(0,use_sync_refs.P)(l);(0,use_iso_morphic_effect.s)((()=>e.register(t)),[t,e.register]);let u=(0,use_event._)((L=>{let b=L.currentTarget;if(b instanceof HTMLLabelElement&&L.preventDefault(),e.props&&"onClick"in e.props&&"function"==typeof e.props.onClick&&e.props.onClick(L),b instanceof HTMLLabelElement){let n=document.getElementById(b.htmlFor);if(n){let E=n.getAttribute("disabled");if("true"===E||""===E)return;let x=n.getAttribute("aria-disabled");if("true"===x||""===x)return;(n instanceof HTMLInputElement&&("radio"===n.type||"checkbox"===n.type)||"radio"===n.role||"checkbox"===n.role||"switch"===n.role)&&n.click(),n.focus({preventScroll:!0})}}})),d=g||!1,C=(0,react.useMemo)((()=>({...e.slot,disabled:d})),[e.slot,d]),f={ref:p,...e.props,id:t,htmlFor:s,onClick:u};return m&&("onClick"in f&&(delete f.htmlFor,delete f.onClick),"onClick"in i&&delete i.onClick),(0,render.Ci)()({ourProps:f,theirProps:i,slot:C,defaultTag:s?"label":"div",name:e.name||"Label"})})),Q=Object.assign(label_U,{});var portal=__webpack_require__("./node_modules/@headlessui/react/dist/components/portal/portal.js"),gt=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(gt||{}),Lt=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(Lt||{}),St=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(St||{}),Et=(n=>(n[n.OpenListbox=0]="OpenListbox",n[n.CloseListbox=1]="CloseListbox",n[n.GoToOption=2]="GoToOption",n[n.Search=3]="Search",n[n.ClearSearch=4]="ClearSearch",n[n.RegisterOption=5]="RegisterOption",n[n.UnregisterOption=6]="UnregisterOption",n[n.SetButtonElement=7]="SetButtonElement",n[n.SetOptionsElement=8]="SetOptionsElement",n))(Et||{});function be(e,i=o=>o){let o=null!==e.activeOptionIndex?e.options[e.activeOptionIndex]:null,r=(0,focus_management.wl)(i(e.options.slice()),(m=>m.dataRef.current.domRef.current)),a=o?r.indexOf(o):null;return-1===a&&(a=null),{options:r,activeOptionIndex:a}}let Pt={1:e=>e.dataRef.current.disabled||1===e.listboxState?e:{...e,activeOptionIndex:null,listboxState:1,__demoMode:!1},0(e){if(e.dataRef.current.disabled||0===e.listboxState)return e;let i=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,r=e.options.findIndex((a=>o(a.dataRef.current.value)));return-1!==r&&(i=r),{...e,listboxState:0,activeOptionIndex:i,__demoMode:!1}},2(e,i){var m,x,d,p,n;if(e.dataRef.current.disabled||1===e.listboxState)return e;let o={...e,searchQuery:"",activationTrigger:null!=(m=i.trigger)?m:1,__demoMode:!1};if(i.focus===calculate_active_index_c.Nothing)return{...o,activeOptionIndex:null};if(i.focus===calculate_active_index_c.Specific)return{...o,activeOptionIndex:e.options.findIndex((u=>u.id===i.id))};if(i.focus===calculate_active_index_c.Previous){let u=e.activeOptionIndex;if(null!==u){let P=e.options[u].dataRef.current.domRef,t=calculate_active_index_f(i,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:s=>s.id,resolveDisabled:s=>s.dataRef.current.disabled});if(null!==t){let s=e.options[t].dataRef.current.domRef;if((null==(x=P.current)?void 0:x.previousElementSibling)===s.current||null===(null==(d=s.current)?void 0:d.previousElementSibling))return{...o,activeOptionIndex:t}}}}else if(i.focus===calculate_active_index_c.Next){let u=e.activeOptionIndex;if(null!==u){let P=e.options[u].dataRef.current.domRef,t=calculate_active_index_f(i,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:s=>s.id,resolveDisabled:s=>s.dataRef.current.disabled});if(null!==t){let s=e.options[t].dataRef.current.domRef;if((null==(p=P.current)?void 0:p.nextElementSibling)===s.current||null===(null==(n=s.current)?void 0:n.nextElementSibling))return{...o,activeOptionIndex:t}}}}let r=be(e),a=calculate_active_index_f(i,{resolveItems:()=>r.options,resolveActiveIndex:()=>r.activeOptionIndex,resolveId:u=>u.id,resolveDisabled:u=>u.dataRef.current.disabled});return{...o,...r,activeOptionIndex:a}},3:(e,i)=>{if(e.dataRef.current.disabled||1===e.listboxState)return e;let r=""!==e.searchQuery?0:1,a=e.searchQuery+i.value.toLowerCase(),x=(null!==e.activeOptionIndex?e.options.slice(e.activeOptionIndex+r).concat(e.options.slice(0,e.activeOptionIndex+r)):e.options).find((p=>{var n;return!p.dataRef.current.disabled&&(null==(n=p.dataRef.current.textValue)?void 0:n.startsWith(a))})),d=x?e.options.indexOf(x):-1;return-1===d||d===e.activeOptionIndex?{...e,searchQuery:a}:{...e,searchQuery:a,activeOptionIndex:d,activationTrigger:1}},4:e=>e.dataRef.current.disabled||1===e.listboxState||""===e.searchQuery?e:{...e,searchQuery:""},5:(e,i)=>{let o={id:i.id,dataRef:i.dataRef},r=be(e,(a=>[...a,o]));return null===e.activeOptionIndex&&e.dataRef.current.isSelected(i.dataRef.current.value)&&(r.activeOptionIndex=r.options.indexOf(o)),{...e,...r}},6:(e,i)=>{let o=be(e,(r=>{let a=r.findIndex((m=>m.id===i.id));return-1!==a&&r.splice(a,1),r}));return{...e,...o,activationTrigger:1}},7:(e,i)=>e.buttonElement===i.element?e:{...e,buttonElement:i.element},8:(e,i)=>e.optionsElement===i.element?e:{...e,optionsElement:i.element}},Te=(0,react.createContext)(null);function Z(e){let i=(0,react.useContext)(Te);if(null===i){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,Z),o}return i}Te.displayName="ListboxActionsContext";let ee=(0,react.createContext)(null);function listbox_Q(e){let i=(0,react.useContext)(ee);if(null===i){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,listbox_Q),o}return i}function Rt(e,i){return(0,match.Y)(i.type,Pt,e,i)}ee.displayName="ListboxDataContext";let At=react.Fragment;let Le=(0,react.createContext)(!1),Ct=render.Ac.RenderStrategy|render.Ac.Static;let wt=react.Fragment;let Ut=(0,render.FX)((function ht(e,i){var me;let o=disabled_a(),{value:r,defaultValue:a,form:m,name:x,onChange:d,by:p,invalid:n=!1,disabled:u=o||!1,horizontal:P=!1,multiple:t=!1,__demoMode:s=!1,...F}=e;const M=P?"horizontal":"vertical";let h=(0,use_sync_refs.P)(i),D=function use_default_value_l(e){let[t]=(0,react.useState)(e);return t}(a),[O=(t?[]:void 0),g]=function T(l,r,c){let[i,s]=(0,react.useState)(c),e=void 0!==l,t=(0,react.useRef)(e),u=(0,react.useRef)(!1),d=(0,react.useRef)(!1);return!e||t.current||u.current?!e&&t.current&&!d.current&&(d.current=!0,t.current=e,console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.")):(u.current=!0,t.current=e,console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.")),[e?l:i,(0,use_event._)((n=>(e||s(n),null==r?void 0:r(n))))]}(r,d,D),[R,y]=(0,react.useReducer)(Rt,{dataRef:(0,react.createRef)(),listboxState:s?0:1,options:[],searchQuery:"",activeOptionIndex:null,activationTrigger:1,optionsVisible:!1,buttonElement:null,optionsElement:null,__demoMode:s}),B=(0,react.useRef)({static:!1,hold:!1}),w=(0,react.useRef)(new Map),_=function use_by_comparator_u(e=use_by_comparator_l){return(0,react.useCallback)(((r,t)=>{if("string"==typeof e){let o=e;return(null==r?void 0:r[o])===(null==t?void 0:t[o])}return e(r,t)}),[e])}(p),b=(0,react.useCallback)((f=>(0,match.Y)(c.mode,{1:()=>O.some((S=>_(S,f))),0:()=>_(O,f)})),[O]),c=(0,react.useMemo)((()=>({...R,value:O,disabled:u,invalid:n,mode:t?1:0,orientation:M,compare:_,isSelected:b,optionsPropsRef:B,listRef:w})),[O,u,n,t,R,w]);(0,use_iso_morphic_effect.s)((()=>{R.dataRef.current=c}),[c]);let N=0===c.listboxState;(0,use_outside_click.j)(N,[c.buttonElement,c.optionsElement],((f,S)=>{var C;y({type:1}),(0,focus_management.Bm)(S,focus_management.MZ.Loose)||(f.preventDefault(),null==(C=c.buttonElement)||C.focus())}));let L=(0,react.useMemo)((()=>({open:0===c.listboxState,disabled:u,invalid:n,value:O})),[c,u,O,n]),H=(0,use_event._)((f=>{let S=c.options.find((C=>C.id===f));S&&K(S.dataRef.current.value)})),te=(0,use_event._)((()=>{if(null!==c.activeOptionIndex){let{dataRef:f,id:S}=c.options[c.activeOptionIndex];K(f.current.value),y({type:2,focus:calculate_active_index_c.Specific,id:S})}})),oe=(0,use_event._)((()=>y({type:0}))),X=(0,use_event._)((()=>y({type:1}))),J=(0,use_disposables.L)(),ne=(0,use_event._)(((f,S,C)=>{J.dispose(),J.microTask((()=>f===calculate_active_index_c.Specific?y({type:2,focus:calculate_active_index_c.Specific,id:S,trigger:C}):y({type:2,focus:f,trigger:C})))})),ie=(0,use_event._)(((f,S)=>(y({type:5,id:f,dataRef:S}),()=>y({type:6,id:f})))),K=(0,use_event._)((f=>(0,match.Y)(c.mode,{0:()=>null==g?void 0:g(f),1(){let S=c.value.slice(),C=S.findIndex((Re=>_(Re,f)));return-1===C?S.push(f):S.splice(C,1),null==g?void 0:g(S)}}))),re=(0,use_event._)((f=>y({type:3,value:f}))),$=(0,use_event._)((()=>y({type:4}))),q=(0,use_event._)((f=>{y({type:7,element:f})})),l=(0,use_event._)((f=>{y({type:8,element:f})})),I=(0,react.useMemo)((()=>({onChange:K,registerOption:ie,goToOption:ne,closeListbox:X,openListbox:oe,selectActiveOption:te,selectOption:H,search:re,clearSearch:$,setButtonElement:q,setOptionsElement:l})),[]),[G,le]=label_K({inherit:!0}),Se={ref:h},Ee=(0,react.useCallback)((()=>{if(void 0!==D)return null==g?void 0:g(D)}),[g,D]),Pe=(0,render.Ci)();return react.createElement(le,{value:G,props:{htmlFor:null==(me=c.buttonElement)?void 0:me.id},slot:{open:0===c.listboxState,disabled:u}},react.createElement(floating.St,null,react.createElement(Te.Provider,{value:I},react.createElement(ee.Provider,{value:c},react.createElement(open_closed.El,{value:(0,match.Y)(c.listboxState,{0:open_closed.Uw.Open,1:open_closed.Uw.Closed})},null!=x&&null!=O&&react.createElement(j,{disabled:u,data:{[x]:O},form:m,onReset:Ee}),Pe({ourProps:Se,theirProps:F,slot:L,defaultTag:At,name:"Listbox"}))))))})),Nt=(0,render.FX)((function _t(e,i){var N;let o=listbox_Q("Listbox.Button"),r=Z("Listbox.Button"),a=(0,react.useId)(),m=id_u(),{id:x=m||`headlessui-listbox-button-${a}`,disabled:d=o.disabled||!1,autoFocus:p=!1,...n}=e,u=(0,use_sync_refs.P)(i,(0,floating.Xc)(),r.setButtonElement),P=(0,floating.TI)(),t=(0,use_event._)((L=>{switch(L.key){case keyboard.D.Enter:!function form_p(i){var t,r;let s=null!=(t=null==i?void 0:i.form)?t:i.closest("form");if(s){for(let n of s.elements)if(n!==i&&("INPUT"===n.tagName&&"submit"===n.type||"BUTTON"===n.tagName&&"submit"===n.type||"INPUT"===n.nodeName&&"image"===n.type))return void n.click();null==(r=s.requestSubmit)||r.call(s)}}(L.currentTarget);break;case keyboard.D.Space:case keyboard.D.ArrowDown:L.preventDefault(),(0,react_dom.flushSync)((()=>r.openListbox())),o.value||r.goToOption(calculate_active_index_c.First);break;case keyboard.D.ArrowUp:L.preventDefault(),(0,react_dom.flushSync)((()=>r.openListbox())),o.value||r.goToOption(calculate_active_index_c.Last)}})),s=(0,use_event._)((L=>{if(L.key===keyboard.D.Space)L.preventDefault()})),F=(0,use_event._)((L=>{var H;if((0,bugs.l)(L.currentTarget))return L.preventDefault();0===o.listboxState?((0,react_dom.flushSync)((()=>r.closeListbox())),null==(H=o.buttonElement)||H.focus({preventScroll:!0})):(L.preventDefault(),r.openListbox())})),M=(0,use_event._)((L=>L.preventDefault())),h=I([x]),D=function U(){var r,e;return null!=(e=null==(r=(0,react.useContext)(description_a))?void 0:r.value)?e:void 0}(),{isFocusVisible:O,focusProps:g}=(0,useFocusRing.o)({autoFocus:p}),{isHovered:R,hoverProps:y}=(0,useHover.M)({isDisabled:d}),{pressed:B,pressProps:w}=(0,use_active_press.Z)({disabled:d}),_=(0,react.useMemo)((()=>({open:0===o.listboxState,active:B||0===o.listboxState,disabled:d,invalid:o.invalid,value:o.value,hover:R,focus:O,autofocus:p})),[o.listboxState,o.value,d,R,O,B,o.invalid,p]),b=(0,render.v6)(P(),{ref:u,id:x,type:(0,use_resolve_button_type.c)(e,o.buttonElement),"aria-haspopup":"listbox","aria-controls":null==(N=o.optionsElement)?void 0:N.id,"aria-expanded":0===o.listboxState,"aria-labelledby":h,"aria-describedby":D,disabled:d||void 0,autoFocus:p,onKeyDown:t,onKeyUp:s,onKeyPress:M,onClick:F},g,y,w);return(0,render.Ci)()({ourProps:b,theirProps:n,slot:_,defaultTag:"button",name:"Listbox.Button"})})),Ht=Q,Gt=(0,render.FX)((function Ft(e,i){var $,q;let o=(0,react.useId)(),{id:r=`headlessui-listbox-options-${o}`,anchor:a,portal:m=!1,modal:x=!0,transition:d=!1,...p}=e,n=(0,floating.zn)(a),[u,P]=(0,react.useState)(null);n&&(m=!0);let t=listbox_Q("Listbox.Options"),s=Z("Listbox.Options"),F=(0,use_owner.g)(t.optionsElement),M=(0,open_closed.O_)(),[h,D]=(0,use_transition.p)(d,u,null!==M?(M&open_closed.Uw.Open)===open_closed.Uw.Open:0===t.listboxState);(0,use_on_disappear.O)(h,t.buttonElement,s.closeListbox);let O=!t.__demoMode&&(x&&0===t.listboxState);(0,use_scroll_lock.K)(O,F),y(!t.__demoMode&&(x&&0===t.listboxState),{allowed:(0,react.useCallback)((()=>[t.buttonElement,t.optionsElement]),[t.buttonElement,t.optionsElement])});let B=!function use_did_element_move_s(n,t){let e=(0,react.useRef)({left:0,top:0});if((0,use_iso_morphic_effect.s)((()=>{if(!t)return;let r=t.getBoundingClientRect();r&&(e.current=r)}),[n,t]),null==t||!n||t===document.activeElement)return!1;let o=t.getBoundingClientRect();return o.top!==e.current.top||o.left!==e.current.left}(0!==t.listboxState,t.buttonElement)&&h,_=frozen_l(h&&1===t.listboxState,t.value),b=(0,use_event._)((l=>t.compare(_,l))),c=(0,react.useMemo)((()=>{var I;if(null==n||null==(I=null==n?void 0:n.to)||!I.includes("selection"))return null;let l=t.options.findIndex((G=>b(G.dataRef.current.value)));return-1===l&&(l=0),l}),[n,t.options]),N=(()=>{if(null==n)return;if(null===c)return{...n,inner:void 0};let l=Array.from(t.listRef.current.values());return{...n,inner:{listRef:{current:l},index:c}}})(),[L,H]=(0,floating.UF)(N),te=(0,floating.G3)(),oe=(0,use_sync_refs.P)(i,n?L:null,s.setOptionsElement,P),X=(0,use_disposables.L)();(0,react.useEffect)((()=>{var I;let l=t.optionsElement;l&&0===t.listboxState&&l!==(null==(I=(0,owner.T)(l))?void 0:I.activeElement)&&(null==l||l.focus({preventScroll:!0}))}),[t.listboxState,t.optionsElement]);let J=(0,use_event._)((l=>{var I,G;switch(X.dispose(),l.key){case keyboard.D.Space:if(""!==t.searchQuery)return l.preventDefault(),l.stopPropagation(),s.search(l.key);case keyboard.D.Enter:if(l.preventDefault(),l.stopPropagation(),null!==t.activeOptionIndex){let{dataRef:le}=t.options[t.activeOptionIndex];s.onChange(le.current.value)}0===t.mode&&((0,react_dom.flushSync)((()=>s.closeListbox())),null==(I=t.buttonElement)||I.focus({preventScroll:!0}));break;case(0,match.Y)(t.orientation,{vertical:keyboard.D.ArrowDown,horizontal:keyboard.D.ArrowRight}):return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.Next);case(0,match.Y)(t.orientation,{vertical:keyboard.D.ArrowUp,horizontal:keyboard.D.ArrowLeft}):return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.Previous);case keyboard.D.Home:case keyboard.D.PageUp:return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.First);case keyboard.D.End:case keyboard.D.PageDown:return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.Last);case keyboard.D.Escape:return l.preventDefault(),l.stopPropagation(),(0,react_dom.flushSync)((()=>s.closeListbox())),void(null==(G=t.buttonElement)||G.focus({preventScroll:!0}));case keyboard.D.Tab:l.preventDefault(),l.stopPropagation(),(0,react_dom.flushSync)((()=>s.closeListbox())),(0,focus_management.p9)(t.buttonElement,l.shiftKey?focus_management.BD.Previous:focus_management.BD.Next);break;default:1===l.key.length&&(s.search(l.key),X.setTimeout((()=>s.clearSearch()),350))}})),ne=null==($=t.buttonElement)?void 0:$.id,ie=(0,react.useMemo)((()=>({open:0===t.listboxState})),[t.listboxState]),K=(0,render.v6)(n?te():{},{id:r,ref:oe,"aria-activedescendant":null===t.activeOptionIndex||null==(q=t.options[t.activeOptionIndex])?void 0:q.id,"aria-multiselectable":1===t.mode||void 0,"aria-labelledby":ne,"aria-orientation":t.orientation,onKeyDown:J,role:"listbox",tabIndex:0===t.listboxState?0:void 0,style:{...p.style,...H,"--button-width":(0,use_element_size.L)(t.buttonElement,!0).width},...(0,use_transition.B)(D)}),re=(0,render.Ci)();return react.createElement(portal.ZL,{enabled:!!m&&(e.static||h)},react.createElement(ee.Provider,{value:1===t.mode?t:{...t,isSelected:b}},re({ourProps:K,theirProps:p,slot:ie,defaultTag:"div",features:Ct,visible:B,name:"Listbox.Options"})))})),Vt=(0,render.FX)((function Bt(e,i){let o=(0,react.useId)(),{id:r=`headlessui-listbox-option-${o}`,disabled:a=!1,value:m,...x}=e,d=!0===(0,react.useContext)(Le),p=listbox_Q("Listbox.Option"),n=Z("Listbox.Option"),u=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===r,P=p.isSelected(m),t=(0,react.useRef)(null),s=use_text_value_s(t),F=(0,use_latest_value.Y)({disabled:a,value:m,domRef:t,get textValue(){return s()}}),M=(0,use_sync_refs.P)(i,t,(b=>{b?p.listRef.current.set(r,b):p.listRef.current.delete(r)}));(0,use_iso_morphic_effect.s)((()=>{if(!p.__demoMode&&0===p.listboxState&&u&&0!==p.activationTrigger)return(0,disposables.e)().requestAnimationFrame((()=>{var b,c;null==(c=null==(b=t.current)?void 0:b.scrollIntoView)||c.call(b,{block:"nearest"})}))}),[t,u,p.__demoMode,p.listboxState,p.activationTrigger,p.activeOptionIndex]),(0,use_iso_morphic_effect.s)((()=>{if(!d)return n.registerOption(r,F)}),[F,r,d]);let h=(0,use_event._)((b=>{var c;if(a)return b.preventDefault();n.onChange(m),0===p.mode&&((0,react_dom.flushSync)((()=>n.closeListbox())),null==(c=p.buttonElement)||c.focus({preventScroll:!0}))})),D=(0,use_event._)((()=>{if(a)return n.goToOption(calculate_active_index_c.Nothing);n.goToOption(calculate_active_index_c.Specific,r)})),O=use_tracked_pointer_u(),g=(0,use_event._)((b=>{O.update(b),!a&&(u||n.goToOption(calculate_active_index_c.Specific,r,0))})),R=(0,use_event._)((b=>{O.wasMoved(b)&&(a||u||n.goToOption(calculate_active_index_c.Specific,r,0))})),y=(0,use_event._)((b=>{O.wasMoved(b)&&(a||u&&n.goToOption(calculate_active_index_c.Nothing))})),B=(0,react.useMemo)((()=>({active:u,focus:u,selected:P,disabled:a,selectedOption:P&&d})),[u,P,a,d]),w=d?{}:{id:r,ref:M,role:"option",tabIndex:!0===a?void 0:-1,"aria-disabled":!0===a||void 0,"aria-selected":P,disabled:void 0,onClick:h,onFocus:D,onPointerEnter:g,onMouseEnter:g,onPointerMove:R,onMouseMove:R,onPointerLeave:y,onMouseLeave:y},_=(0,render.Ci)();return!P&&d?null:_({ourProps:w,theirProps:x,slot:B,defaultTag:"div",name:"Listbox.Option"})})),Kt=(0,render.FX)((function kt(e,i){let{options:o,placeholder:r,...a}=e,x={ref:(0,use_sync_refs.P)(i)},d=listbox_Q("ListboxSelectedOption"),p=(0,react.useMemo)((()=>({})),[]),n=void 0===d.value||null===d.value||1===d.mode&&Array.isArray(d.value)&&0===d.value.length,u=(0,render.Ci)();return react.createElement(Le.Provider,{value:!0},u({ourProps:x,theirProps:{...a,children:react.createElement(react.Fragment,null,r&&n?r:o)},slot:p,defaultTag:wt,name:"ListboxSelectedOption"}))})),Mo=Object.assign(Ut,{Button:Nt,Label:Ht,Options:Gt,Option:Vt,SelectedOption:Kt});var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Select=_ref=>{let{options,selectedOption,setSelectedOption,placeholder,LeadingIcon,width}=_ref;const ArrowDown=fi.fK4,Check=fi.YrT;return(0,jsx_runtime.jsx)("div",{className:classnames_default()("relative inline-block",width),children:(0,jsx_runtime.jsx)(Mo,{value:selectedOption&&selectedOption.value,onChange:setSelectedOption,children:_ref2=>{let{open}=_ref2;return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)(Nt,{className:classnames_default()("shadow-sm flex items-center text-md border border-gray-300 dark:border-gray-500 h-11 px-3.5 rounded-lg bg-white dark:bg-gray-800","focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20 whitespace-nowrap",{"text-gray-900 dark:text-white":selectedOption,"text-gray-500 dark:text-gray-300":!selectedOption},width),children:[LeadingIcon&&(0,jsx_runtime.jsx)("div",{className:"w-5 h-5 mr-2 overflow-hidden",children:(icon=LeadingIcon,iconSize=20,additionalClass=classnames_default()("text-gray-400"),(0,react.isValidElement)(icon)&&"size"in icon.props?(0,react.cloneElement)(icon,{size:iconSize,className:classnames_default()(icon.props.className,additionalClass)}):icon)}),selectedOption?selectedOption.label:placeholder,(0,jsx_runtime.jsx)(ArrowDown,{size:20,className:classnames_default()("text-gray-500 dark:text-gray-300 transform duration-100 ease-out",{"-rotate-180":open,"ml-auto":width,"ml-3.5":!width})})]}),(0,jsx_runtime.jsx)(Gt,{className:"absolute z-10 inline-flex flex-col w-full bg-white border border-gray-300 rounded-lg shadow-lg top-13 dark:border-gray-500 dark:bg-gray-800",children:null==options?void 0:options.map(((option,index)=>(0,jsx_runtime.jsx)(Vt,{as:react.Fragment,value:option.value,children:_ref3=>{let{focus,selected}=_ref3;return(0,jsx_runtime.jsxs)("li",{className:classnames_default()(classnames_default()("flex items-center pl-3.5 pr-3 justify-between h-11 text-gray-900 dark:text-white text-md cursor-pointer hover:bg-primary-25 dark:hover:bg-gray-100 dark:hover:bg-opacity-10 whitespace-nowrap",{"bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10":focus,"rounded-t-lg":0===index,"rounded-b-lg":index===options.length-1})),children:[(0,jsx_runtime.jsx)("div",{className:"flex items-center",children:option.label}),selected&&(0,jsx_runtime.jsx)(Check,{className:"ml-5 text-primary-600 dark:text-white"})]})}},option.value)))})]});var icon,iconSize,additionalClass}})})};Select.__docgenInfo={description:"",methods:[],displayName:"Select",props:{placeholder:{required:!0,tsType:{name:"string"},description:""},options:{required:!1,tsType:{name:"Array",elements:[{name:"IOption"}],raw:"IOption[]"},description:""},selectedOption:{required:!1,tsType:{name:"union",raw:"IOption | undefined",elements:[{name:"IOption"},{name:"undefined"}]},description:""},setSelectedOption:{required:!0,tsType:{name:"signature",type:"function",raw:"(option: string) => void",signature:{arguments:[{type:{name:"string"},name:"option"}],return:{name:"void"}}},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},width:{required:!1,tsType:{name:"string"},description:""}}};var StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),data_images=__webpack_require__("./src/data/images/index.tsx");const countries=[{city:"Ahmedabad",countryISO:"IN"},{city:"Amsterdam",countryISO:"NL"},{city:"Rome",countryISO:"IT"},{city:"Berlin",countryISO:"DE"},{city:"Paris",countryISO:"FR"},{city:"Washington",countryISO:"US"},{city:"Moscow",countryISO:"RU"},{city:"Brussels",countryISO:"BE"}].map((country=>({value:country.countryISO,label:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("img",{src:data_images.z[country.countryISO],alt:country.countryISO.toLowerCase(),className:"w-5 h-5 mr-2"})," ",`${country.city}, ${country.countryISO}`]})}))),prices=[{label:"Any price",value:"-1"},{label:"Below 50",value:"0"},{label:"50 - 100",value:"50"},{label:"100 - 200",value:"100"},{label:"200 - 300",value:"200"},{label:"300 - 400",value:"300"},{label:"400 - 500",value:"400"},{label:"500 - 600",value:"500"}],Select_stories={title:"Example/Select",component:Select,parameters:{layout:"centered"},tags:["autodocs"]},Default={args:{darkMode:!1},render:args=>{const[selectedCountry,setSelectedCountry]=(0,react.useState)(countries[0]);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"flex",children:(0,jsx_runtime.jsx)(Select,{options:countries,selectedOption:selectedCountry,setSelectedOption:country=>{const option=countries.find((obj=>obj.value===country));setSelectedCountry(option)},placeholder:"Select country",width:"w-50"})})}},SelectWithIcon={args:{darkMode:!1},render:args=>{const[selectedPrice,setSelectedPrice]=(0,react.useState)(prices[0]);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"flex",children:(0,jsx_runtime.jsx)(Select,{options:prices,selectedOption:selectedPrice,setSelectedOption:price=>{const option=prices.find((obj=>obj.value===price));setSelectedPrice(option)},placeholder:"Select a price",LeadingIcon:(0,jsx_runtime.jsx)(fi.z8N,{}),width:"w-50"})})}},__namedExportsOrder=["Default","SelectWithIcon"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [selectedCountry, setSelectedCountry] = useState<IOption>(countries[0]);\n    const handleSelectedCountry = (country: string) => {\n      const option = countries.find(obj => obj.value === country) as IOption;\n      setSelectedCountry(option);\n    };\n    return <StoryLayout {...args} className="flex">\n                <Select options={countries} selectedOption={selectedCountry} setSelectedOption={handleSelectedCountry} placeholder="Select country" width="w-50" />\n            </StoryLayout>;\n  }\n}',...Default.parameters?.docs?.source}}},SelectWithIcon.parameters={...SelectWithIcon.parameters,docs:{...SelectWithIcon.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [selectedPrice, setSelectedPrice] = useState<IOption>(prices[0]);\n    const handleSelectedPrice = (price: string) => {\n      const option = prices.find(obj => obj.value === price) as IOption;\n      setSelectedPrice(option);\n    };\n    return <StoryLayout {...args} className="flex">\n                <Select options={prices} selectedOption={selectedPrice} setSelectedOption={handleSelectedPrice} placeholder="Select a price" LeadingIcon={<FiDollarSign />} width="w-50" />\n            </StoryLayout>;\n  }\n}',...SelectWithIcon.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-SideNav-stories.272a4362.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_feminab_box_ui=self.webpackChunk_feminab_box_ui||[]).push([[785],{"./src/stories/SideNav.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_Nav_SideNav__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Nav/SideNav.tsx"),_StoryLayout__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/StoryLayout.tsx"),_data_navItems__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/data/navItems.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/SideNav",component:_Nav_SideNav__WEBPACK_IMPORTED_MODULE_1__.f},Default={args:{darkMode:!1},render:args=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!0);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"flex flex-col h-screen",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Nav_SideNav__WEBPACK_IMPORTED_MODULE_1__.f,{...args,navItemsTop:_data_navItems__WEBPACK_IMPORTED_MODULE_3__.p,navItemsBottom:_data_navItems__WEBPACK_IMPORTED_MODULE_3__.B,open,setOpen,username:"Veronica Woods",email:"veronica@example.com"})})}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [open, setOpen] = useState<boolean>(true);\n    return <StoryLayout {...args} className="flex flex-col h-screen">\n        <SideNav {...args} navItemsTop={navItemsTop} navItemsBottom={navItemsBottom} open={open} setOpen={setOpen} username="Veronica Woods" email="veronica@example.com" />\n      </StoryLayout>;\n  }\n}',...Default.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-TextInput-stories.cfa81131.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_feminab_box_ui=self.webpackChunk_feminab_box_ui||[]).push([[550],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/TextInput.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{k:()=>TextInput});var react=__webpack_require__("./node_modules/react/index.js"),Typography=__webpack_require__("./src/Typography.tsx"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const TextInput=_ref=>{let{type,value,label,placeholder,error,helperText,disabled,LeadingIcon,TrailingIcon,leadingText,handleChange}=_ref;const{setClassName}={setClassName:(icon,additionalClass)=>(0,react.isValidElement)(icon)?(0,react.cloneElement)(icon,{className:classnames_default()(icon.props.className,additionalClass)}):icon};return(0,jsx_runtime.jsxs)("div",{children:[label&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"medium",customColor:"text-gray-700 dark:text-white",className:"mb-1.5",children:label}),(0,jsx_runtime.jsxs)("div",{className:classnames_default()("relative",{"flex items-center":leadingText}),children:[(0,jsx_runtime.jsxs)("div",{className:"h-11 absolute shadow-sm rounded-lg w-full flex justify-between items-center px-3.5 pointer-events-none",children:[LeadingIcon?setClassName(LeadingIcon,"text-gray-500"):(0,jsx_runtime.jsx)("div",{}),TrailingIcon&&setClassName(TrailingIcon,classnames_default()({"text-error-500":error,"text-gray-400":!error}))]}),leadingText&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"regular",className:classnames_default()("flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500",{"bg-gray-50 dark:bg-gray-700":disabled,"dark:bg-gray-800":!disabled}),children:leadingText}),(0,jsx_runtime.jsx)("input",{type,value,placeholder,onChange:handleChange,disabled,className:classnames_default()("w-full select-none text-gray-900 dark:text-white text-md border h-11 px-2",{"pl-9":LeadingIcon,"pr-9":TrailingIcon,"rounded-l-0 rounded-r-lg":leadingText,"rounded-lg":!leadingText,"border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20":!error,"border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100":error,"bg-white dark:bg-gray-800":!disabled,"bg-gray-50 dark:bg-gray-700":disabled})})]}),error&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"regular",className:"mt-1.5 text-error-500",children:error}),helperText&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"regular",className:"mt-1.5 text-gray-500",children:helperText})]})};TextInput.__docgenInfo={description:"",methods:[],displayName:"TextInput",props:{type:{required:!0,tsType:{name:"union",raw:'"email" | "text"',elements:[{name:"literal",value:'"email"'},{name:"literal",value:'"text"'}]},description:""},value:{required:!0,tsType:{name:"string"},description:""},placeholder:{required:!0,tsType:{name:"string"},description:""},error:{required:!1,tsType:{name:"string"},description:""},label:{required:!1,tsType:{name:"string"},description:""},helperText:{required:!1,tsType:{name:"string"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},leadingText:{required:!1,tsType:{name:"string"},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},handleChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.ChangeEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ReactChangeEvent",raw:"React.ChangeEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]},name:"event"}],return:{name:"void"}}},description:""}}}},"./src/Typography.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Typography});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const TypographyVariantClasses={xs:"text-xs",sm:"text-sm",md:"text-md",lg:"text-lg",xl:"text-xl",h6:"text-h6",h5:"text-h5",h4:"text-h4",h3:"text-h3",h2:"text-h2",h1:"text-h1"},TypographyWeightClasses={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},Typography=_ref=>{let{variant="md",customWeight="regular",customColor,className,children}=_ref;const TypographyVariantClassName=TypographyVariantClasses[variant],TypographyWeightClassName=TypographyWeightClasses[customWeight],Component=["h1","h2","h3","h4","h5","h6"].includes(null!=variant?variant:"p")?variant:"p";return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(TypographyVariantClassName,TypographyWeightClassName,className,{"tracking-tight":["h1","h2","h3"].includes(variant),"text-black dark:text-white":!customColor},customColor),children})};Typography.__docgenInfo={description:"",methods:[],displayName:"Typography",props:{variant:{required:!1,tsType:{name:"union",raw:'| "xs"\n| "sm"\n| "md"\n| "lg"\n| "xl"\n| "h6"\n| "h5"\n| "h4"\n| "h3"\n| "h2"\n| "h1"',elements:[{name:"literal",value:'"xs"'},{name:"literal",value:'"sm"'},{name:"literal",value:'"md"'},{name:"literal",value:'"lg"'},{name:"literal",value:'"xl"'},{name:"literal",value:'"h6"'},{name:"literal",value:'"h5"'},{name:"literal",value:'"h4"'},{name:"literal",value:'"h3"'},{name:"literal",value:'"h2"'},{name:"literal",value:'"h1"'}]},description:"",defaultValue:{value:'"md"',computed:!1}},customWeight:{required:!1,tsType:{name:"union",raw:'"regular" | "medium" | "semibold" | "bold"',elements:[{name:"literal",value:'"regular"'},{name:"literal",value:'"medium"'},{name:"literal",value:'"semibold"'},{name:"literal",value:'"bold"'}]},description:"",defaultValue:{value:'"regular"',computed:!1}},customColor:{required:!1,tsType:{name:"string"},description:""},customClass:{required:!1,tsType:{name:"string"},description:""},className:{required:!1,tsType:{name:"string"},description:""},children:{required:!0,tsType:{name:"union",raw:"string | React.ReactNode",elements:[{name:"string"},{name:"ReactReactNode",raw:"React.ReactNode"}]},description:""}}}},"./src/stories/TextInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,LeadingTextInput:()=>LeadingTextInput,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_TextInput__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/TextInput.tsx"),_StoryLayout__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/StoryLayout.tsx"),react_icons_fi__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/TextInput",component:_TextInput__WEBPACK_IMPORTED_MODULE_1__.k},Default={args:{darkMode:!1},render:args=>{const[text1,setText1]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(args.value),handleChange=e=>{setText1(e.target.value)};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"email",value:text1,handleChange,label:"Email",placeholder:"veronica@example.com",helperText:"This is a hint text to help the user.",LeadingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.pHD,{}),TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.lrG,{}),disabled:args.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"mb-4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"email",value:text1,handleChange,label:"Email",placeholder:"veronica@example.com",helperText:"This is a hint text to help the user.",error:"This is an error message.",LeadingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.pHD,{}),TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.lrG,{}),disabled:args.disabled})]})}},LeadingTextInput={args:{darkMode:!1},render:args=>{const[text1,setText1]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(args.value),handleChange=e=>{setText1(e.target.value)};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"text",value:text1,handleChange,label:"Website",placeholder:"example.com",leadingText:"https://",helperText:"This is a hint text to help the user.",TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.lrG,{}),disabled:args.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"mb-4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"text",value:text1,handleChange,label:"Website",placeholder:"example.com",leadingText:"https://",error:"This is an error message.",TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.y3G,{}),disabled:args.disabled})]})}},__namedExportsOrder=["Default","LeadingTextInput"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [text1, setText1] = useState<string>(args.value);\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setText1(e.target.value);\n    };\n    return <StoryLayout {...args}>\n        <TextInput type="email" value={text1} handleChange={handleChange} label="Email" placeholder="veronica@example.com" helperText="This is a hint text to help the user." LeadingIcon={<FiMail />} TrailingIcon={<FiHelpCircle />} disabled={args.disabled} />\n        <div className="mb-4" />\n        <TextInput type="email" value={text1} handleChange={handleChange} label="Email" placeholder="veronica@example.com" helperText="This is a hint text to help the user." error="This is an error message." LeadingIcon={<FiMail />} TrailingIcon={<FiHelpCircle />} disabled={args.disabled} />\n      </StoryLayout>;\n  }\n}',...Default.parameters?.docs?.source}}},LeadingTextInput.parameters={...LeadingTextInput.parameters,docs:{...LeadingTextInput.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [text1, setText1] = useState<string>(args.value);\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setText1(e.target.value);\n    };\n    return <StoryLayout {...args}>\n        <TextInput type="text" value={text1} handleChange={handleChange} label="Website" placeholder="example.com" leadingText="https://" helperText="This is a hint text to help the user." TrailingIcon={<FiHelpCircle />} disabled={args.disabled} />\n        <div className="mb-4" />\n        <TextInput type="text" value={text1} handleChange={handleChange} label="Website" placeholder="example.com" leadingText="https://" error="This is an error message." TrailingIcon={<FiAlertCircle />} disabled={args.disabled} />\n      </StoryLayout>;\n  }\n}',...LeadingTextInput.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-Typography-stories.a31da7ce.iframe.bundle.js

@@ -0,0 +1,2 @@
+/*! For license information please see stories-Typography-stories.a31da7ce.iframe.bundle.js.LICENSE.txt */
+(self.webpackChunk_feminab_box_ui=self.webpackChunk_feminab_box_ui||[]).push([[244],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/react/cjs/react-jsx-runtime.production.js":(__unused_webpack_module,exports)=>{"use strict";var REACT_ELEMENT_TYPE=Symbol.for("react.transitional.element"),REACT_FRAGMENT_TYPE=Symbol.for("react.fragment");function jsxProd(type,config,maybeKey){var key=null;if(void 0!==maybeKey&&(key=""+maybeKey),void 0!==config.key&&(key=""+config.key),"key"in config)for(var propName in maybeKey={},config)"key"!==propName&&(maybeKey[propName]=config[propName]);else maybeKey=config;return config=maybeKey.ref,{$$typeof:REACT_ELEMENT_TYPE,type,key,ref:void 0!==config?config:null,props:maybeKey}}exports.Fragment=REACT_FRAGMENT_TYPE,exports.jsx=jsxProd,exports.jsxs=jsxProd},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.js")},"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/Typography.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{o:()=>Typography});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const TypographyVariantClasses={xs:"text-xs",sm:"text-sm",md:"text-md",lg:"text-lg",xl:"text-xl",h6:"text-h6",h5:"text-h5",h4:"text-h4",h3:"text-h3",h2:"text-h2",h1:"text-h1"},TypographyWeightClasses={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},Typography=_ref=>{let{variant="md",customWeight="regular",customColor,className,children}=_ref;const TypographyVariantClassName=TypographyVariantClasses[variant],TypographyWeightClassName=TypographyWeightClasses[customWeight],Component=["h1","h2","h3","h4","h5","h6"].includes(null!=variant?variant:"p")?variant:"p";return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(TypographyVariantClassName,TypographyWeightClassName,className,{"tracking-tight":["h1","h2","h3"].includes(variant),"text-black dark:text-white":!customColor},customColor),children})};Typography.__docgenInfo={description:"",methods:[],displayName:"Typography",props:{variant:{required:!1,tsType:{name:"union",raw:'| "xs"\n| "sm"\n| "md"\n| "lg"\n| "xl"\n| "h6"\n| "h5"\n| "h4"\n| "h3"\n| "h2"\n| "h1"',elements:[{name:"literal",value:'"xs"'},{name:"literal",value:'"sm"'},{name:"literal",value:'"md"'},{name:"literal",value:'"lg"'},{name:"literal",value:'"xl"'},{name:"literal",value:'"h6"'},{name:"literal",value:'"h5"'},{name:"literal",value:'"h4"'},{name:"literal",value:'"h3"'},{name:"literal",value:'"h2"'},{name:"literal",value:'"h1"'}]},description:"",defaultValue:{value:'"md"',computed:!1}},customWeight:{required:!1,tsType:{name:"union",raw:'"regular" | "medium" | "semibold" | "bold"',elements:[{name:"literal",value:'"regular"'},{name:"literal",value:'"medium"'},{name:"literal",value:'"semibold"'},{name:"literal",value:'"bold"'}]},description:"",defaultValue:{value:'"regular"',computed:!1}},customColor:{required:!1,tsType:{name:"string"},description:""},customClass:{required:!1,tsType:{name:"string"},description:""},className:{required:!1,tsType:{name:"string"},description:""},children:{required:!0,tsType:{name:"union",raw:"string | React.ReactNode",elements:[{name:"string"},{name:"ReactReactNode",raw:"React.ReactNode"}]},description:""}}}},"./src/stories/Typography.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{TypographyDynamic:()=>TypographyDynamic,TypographyHeadings:()=>TypographyHeadings,TypographyText:()=>TypographyText,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _Typography__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Typography.tsx"),_StoryLayout__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/StoryLayout.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/Typography",component:_Typography__WEBPACK_IMPORTED_MODULE_1__.o,parameters:{layout:"centered"}},TypographyDynamic={args:{variant:"h1",customColor:"",customWeight:"regular",className:"",darkMode:!1},render:args=>{var _args$variant;const isHeading=["h1","h2","h3","h4","h5","h6"].includes(null!==(_args$variant=args.variant)&&void 0!==_args$variant?_args$variant:"p");return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"space-y-2",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,children:[isHeading?"Display":"Text"," ",args.variant," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("br",{})," ",args.customWeight]})})}},TypographyHeadings={args:{customWeight:"regular",className:"",darkMode:!1},parameters:{controls:{exclude:["variant","customColor","className"]}},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"space-y-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h1",children:"Display h1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h2",children:"Display h2"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h3",children:"Display h3"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h4",children:"Display h4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h5",children:"Display h5"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h6",children:"Display h6"})]})},TypographyText={args:{customWeight:"regular",className:"",darkMode:!1},parameters:{controls:{exclude:["variant","customColor","className"]}},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"space-y-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"xl",children:"Text xl"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"lg",children:"Text lg"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"md",children:"Text md"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"sm",children:"Text sm"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"xs",children:"Text xs"})]})},__namedExportsOrder=["TypographyDynamic","TypographyHeadings","TypographyText"];TypographyDynamic.parameters={...TypographyDynamic.parameters,docs:{...TypographyDynamic.parameters?.docs,source:{originalSource:'{\n  args: {\n    variant: "h1",\n    customColor: "",\n    //text-primary-600 dark:text-white\n    customWeight: "regular",\n    className: "",\n    darkMode: false\n  },\n  render: args => {\n    const isHeading = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(args.variant ?? "p");\n    return <StoryLayout {...args} className="space-y-2">\n        <Typography {...args}>\n          {isHeading ? "Display" : "Text"} {args.variant} <br />{" "}\n          {args.customWeight}\n        </Typography>\n      </StoryLayout>;\n  }\n}',...TypographyDynamic.parameters?.docs?.source}}},TypographyHeadings.parameters={...TypographyHeadings.parameters,docs:{...TypographyHeadings.parameters?.docs,source:{originalSource:'{\n  args: {\n    customWeight: "regular",\n    className: "",\n    darkMode: false\n  },\n  parameters: {\n    controls: {\n      exclude: ["variant", "customColor", "className"]\n    }\n  },\n  render: args => <StoryLayout {...args} className="space-y-2">\n      <Typography {...args} variant="h1">\n        Display h1\n      </Typography>\n\n      <Typography {...args} variant="h2">\n        Display h2\n      </Typography>\n\n      <Typography {...args} variant="h3">\n        Display h3\n      </Typography>\n\n      <Typography {...args} variant="h4">\n        Display h4\n      </Typography>\n\n      <Typography {...args} variant="h5">\n        Display h5\n      </Typography>\n\n      <Typography {...args} variant="h6">\n        Display h6\n      </Typography>\n    </StoryLayout>\n}',...TypographyHeadings.parameters?.docs?.source}}},TypographyText.parameters={...TypographyText.parameters,docs:{...TypographyText.parameters?.docs,source:{originalSource:'{\n  args: {\n    customWeight: "regular",\n    className: "",\n    darkMode: false\n  },\n  parameters: {\n    controls: {\n      exclude: ["variant", "customColor", "className"]\n    }\n  },\n  render: args => {\n    return <StoryLayout {...args} className="space-y-2">\n        <Typography {...args} variant="xl">\n          Text xl\n        </Typography>\n        <Typography {...args} variant="lg">\n          Text lg\n        </Typography>\n        <Typography {...args} variant="md">\n          Text md\n        </Typography>\n        <Typography {...args} variant="sm">\n          Text sm\n        </Typography>\n        <Typography {...args} variant="xs">\n          Text xs\n        </Typography>\n      </StoryLayout>;\n  }\n}',...TypographyText.parameters?.docs?.source}}}}}]);

package/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
     "./src/styles/**/*.css",
-    "./.storybook/**/*.{js,jsx,ts,tsx,mdx}"
+    "./.storybook/**/*.{js,jsx,ts,tsx,mdx}",
   ],  theme: {
     colors:{
       "transparent": "transparent",

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -21,9 +21,12 @@
     "isolatedModules": true,
     "noEmit": true,
     "declaration": true,
-    "declarationMap": true,
+    "declarationMap": true
   },
   "include": [
-    "src"
+    "src",
+    "jest.config.js",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
   ]
 }

package/tsdx.config.js

@@ -0,0 +1,14 @@
+const postcss = require('rollup-plugin-postcss');
+
+module.exports = {
+  rollup(config, options) {
+    config.plugins.push(
+      postcss({
+        extract: true, // or false if you want to inline
+        modules: false,
+        use: ['sass'],
+      })
+    );
+    return config;
+  },
+};

package/dist/Page.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Page: React.FC;
-//# sourceMappingURL=Page.d.ts.map

package/dist/Page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["src/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EA+DxB,CAAC"}

package/dist/stories/Header.stories.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ user, onLogin, onLogout, onCreateAccount }: import("../Header").HeaderProps) => import("react").JSX.Element;
-    tags: string[];
-    parameters: {
-        layout: string;
-    };
-    args: {
-        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export default meta;
-declare type Story = StoryObj<typeof meta>;
-export declare const LoggedIn: Story;
-export declare const LoggedOut: Story;
-//# sourceMappingURL=Header.stories.d.ts.map

package/dist/stories/Header.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../src/stories/Header.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcM,CAAA;AAEhB,eAAe,IAAI,CAAC;AACpB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC"}

package/dist/stories/Page.stories.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").FC<{}>;
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-declare type Story = StoryObj<typeof meta>;
-export declare const LoggedOut: Story;
-export declare const LoggedIn: Story;
-//# sourceMappingURL=Page.stories.d.ts.map

package/dist/stories/Page.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../src/stories/Page.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;CAOM,CAAA;AAEhB,eAAe,IAAI,CAAC;AACpB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC;AAGnC,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC"}

package/src/Page.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-
-import { Header } from './Header';
-
-type User = {
-  name: string;
-};
-
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
-
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
-
-      <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
-};