-
Notifications
You must be signed in to change notification settings - Fork 1
/
components-file-import-stories.cdae0d7b.iframe.bundle.js
1 lines (1 loc) · 30.9 KB
/
components-file-import-stories.cdae0d7b.iframe.bundle.js
1
"use strict";(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[6716],{"./src/components/file-import/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Aborted:()=>Aborted,Error:()=>Error,Factory:()=>Factory,Loading:()=>Loading,Selected:()=>Selected,Success:()=>Success,default:()=>stories});var lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),react=__webpack_require__("../../node_modules/react/index.js"),transition=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js");const esm_DocumentTextIcon=react.forwardRef((function DocumentTextIcon(props,svgRef){return react.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:svgRef},props),react.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"}))}));var XIcon=__webpack_require__("../../node_modules/@heroicons/react/outline/esm/XIcon.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),file_input=__webpack_require__("./src/elements/file-input/index.js"),progress_bar=__webpack_require__("./src/elements/progress-bar/index.js"),validation_icon=__webpack_require__("./src/elements/validation/validation-icon.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const FILE_IMPORT_STATUS={idle:"idle",selected:"selected",loading:"loading",success:"success",aborted:"aborted",error:"error"},FileImportContext=(0,react.createContext)({status:FILE_IMPORT_STATUS.idle}),statusIconTransitionProps={enter:"yst-transition-opacity yst-ease-in-out yst-duration-1000 yst-delay-200",enterFrom:"yst-opacity-0",enterTo:"yst-opacity-100",leave:"yst-transition-opacity yst-ease-in-out yst-duration-200",leaveFrom:"yst-opacity-0",leaveTo:"yst-opacity-100",className:"yst-absolute"},createStatusConditionalRender=status=>{const HOC=({children})=>{const{status:currentStatus}=(0,react.useContext)(FileImportContext);return(0,jsx_runtime.jsx)(transition.e,{show:currentStatus===status,enter:"yst-transition-opacity yst-ease-in-out yst-duration-1000 yst-delay-200",enterFrom:"yst-opacity-0",enterTo:"yst-opacity-100",className:"yst-mt-6",children})};return HOC.propTypes={children:prop_types_default().node},HOC.displayName=`FileImport.${(0,lodash.capitalize)(status)}`,HOC},FileImport=(0,react.forwardRef)((({children="",id,name,selectLabel,dropLabel,screenReaderLabel,abortScreenReaderLabel,selectDescription,status,onChange,onAbort,feedbackTitle,feedbackDescription,progressMin,progressMax,progress},ref)=>{const isSelected=(0,react.useMemo)((()=>status===FILE_IMPORT_STATUS.selected),[status]),isLoading=(0,react.useMemo)((()=>status===FILE_IMPORT_STATUS.loading),[status]),isSuccess=(0,react.useMemo)((()=>status===FILE_IMPORT_STATUS.success),[status]),isAborted=(0,react.useMemo)((()=>status===FILE_IMPORT_STATUS.aborted),[status]),isError=(0,react.useMemo)((()=>status===FILE_IMPORT_STATUS.error),[status]),hasFeedback=(0,react.useMemo)((()=>(0,lodash.includes)([FILE_IMPORT_STATUS.selected,FILE_IMPORT_STATUS.loading,FILE_IMPORT_STATUS.success,FILE_IMPORT_STATUS.aborted,FILE_IMPORT_STATUS.error],status)),[status]),handleChange=(0,react.useCallback)((event=>{(0,lodash.isEmpty)(event.target.files)||onChange(event.target.files[0])}),[onChange]),handleDrop=(0,react.useCallback)((event=>{if(!(0,lodash.isEmpty)(event.dataTransfer.files)){const file=event.dataTransfer.files[0];file&&onChange(file)}}),[onChange]);return(0,jsx_runtime.jsx)(FileImportContext.Provider,{value:{status},children:(0,jsx_runtime.jsxs)("div",{className:"yst-file-import",children:[(0,jsx_runtime.jsx)(file_input.A,{ref,id,name,value:"",onChange:handleChange,onDrop:handleDrop,className:"yst-file-import__input","aria-labelledby":screenReaderLabel,disabled:isLoading,selectLabel,dropLabel,screenReaderLabel,selectDescription}),(0,jsx_runtime.jsx)(transition.e,{show:hasFeedback,enter:"yst-transition-opacity yst-ease-in-out yst-duration-1000 yst-delay-200",enterFrom:"yst-opacity-0",enterTo:"yst-opacity-100",children:(0,jsx_runtime.jsxs)("div",{className:"yst-file-import__feedback",children:[(0,jsx_runtime.jsxs)("header",{className:"yst-file-import__feedback-header",children:[(0,jsx_runtime.jsx)("div",{className:"yst-file-import__feedback-figure",children:(0,jsx_runtime.jsx)(esm_DocumentTextIcon,{})}),(0,jsx_runtime.jsxs)("div",{className:"yst-flex-1",children:[(0,jsx_runtime.jsx)("span",{className:"yst-file-import__feedback-title",children:feedbackTitle}),(0,jsx_runtime.jsx)("p",{className:"yst-file-import__feedback-description",children:feedbackDescription}),!(0,lodash.isNull)(progress)&&(0,jsx_runtime.jsx)(progress_bar.A,{min:progressMin,max:progressMax,progress,className:"yst-mt-1.5"})]}),(0,jsx_runtime.jsxs)("div",{className:"yst-relative yst-h-5 yst-w-5",children:[(0,jsx_runtime.jsx)(transition.e,{show:isSelected,...statusIconTransitionProps,children:(0,jsx_runtime.jsx)(validation_icon.A,{variant:"info",className:"yst-w-5 yst-h-5"})}),(0,jsx_runtime.jsx)(transition.e,{show:isLoading,...statusIconTransitionProps,children:(0,jsx_runtime.jsxs)("button",{type:"button",onClick:onAbort,className:"yst-file-import__abort-button",children:[(0,jsx_runtime.jsx)("span",{className:"yst-sr-only",children:abortScreenReaderLabel}),(0,jsx_runtime.jsx)(XIcon.A,{})]})}),(0,jsx_runtime.jsx)(transition.e,{show:isSuccess,...statusIconTransitionProps,children:(0,jsx_runtime.jsx)(validation_icon.A,{variant:"success",className:"yst-w-5 yst-h-5"})}),(0,jsx_runtime.jsx)(transition.e,{show:isAborted,...statusIconTransitionProps,children:(0,jsx_runtime.jsx)(validation_icon.A,{variant:"warning",className:"yst-w-5 yst-h-5"})}),(0,jsx_runtime.jsx)(transition.e,{show:isError,...statusIconTransitionProps,children:(0,jsx_runtime.jsx)(validation_icon.A,{variant:"error",className:"yst-w-5 yst-h-5"})})]})]}),children]})})]})})}));FileImport.displayName="FileImport",FileImport.propTypes={children:prop_types_default().node,id:prop_types_default().string.isRequired,name:prop_types_default().string.isRequired,selectLabel:prop_types_default().string.isRequired,dropLabel:prop_types_default().string.isRequired,screenReaderLabel:prop_types_default().string.isRequired,abortScreenReaderLabel:prop_types_default().string.isRequired,selectDescription:prop_types_default().string,feedbackTitle:prop_types_default().string.isRequired,feedbackDescription:prop_types_default().string,progressMin:prop_types_default().number,progressMax:prop_types_default().number,progress:prop_types_default().number,status:prop_types_default().oneOf((0,lodash.values)(FILE_IMPORT_STATUS)),onChange:prop_types_default().func.isRequired,onAbort:prop_types_default().func.isRequired},FileImport.defaultProps={children:null,selectDescription:"",feedbackDescription:"",progressMin:null,progressMax:null,progress:null,status:FILE_IMPORT_STATUS.idle},FileImport.Selected=createStatusConditionalRender(FILE_IMPORT_STATUS.selected),FileImport.Loading=createStatusConditionalRender(FILE_IMPORT_STATUS.loading),FileImport.Success=createStatusConditionalRender(FILE_IMPORT_STATUS.success),FileImport.Aborted=createStatusConditionalRender(FILE_IMPORT_STATUS.aborted),FileImport.Error=createStatusConditionalRender(FILE_IMPORT_STATUS.error);const file_import=FileImport;FileImport.__docgenInfo={description:'The FileImport component.\n\n@param {JSX.node} children The React children.\n@param {string} id The inputs id.\n@param {string} name The inputs name.\n@param {string} selectLabel The label for native select file functionality.\n@param {string} dropLabel The label for custom drop file functionality.\n@param {string} screenReaderLabel The screen reader label for the file select.\n@param {string} abortScreenReaderLabel The screen reader label for the abort button.\n@param {JSX.node} selectDescription The selectDescription.\n@param {"idle"|"loading"|"success"|"failure"} status The status the component should be in.\n@param {function(File)} onChange The callback for when a file is imported.\n@param {Function} onAbort The callback for when an file import is aborted.\n@param {string} feedbackTitle The import feedback title.\n@param {string} feedbackDescription The import feedback selectDescription.\n@param {number} progressMin The import progress min value.\n@param {number} progressMax The import progress max value.\n@param {number} progress The import progress.\n@returns {JSX.Element} The FileImport component.',methods:[],displayName:"FileImport",props:{children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},selectDescription:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},feedbackDescription:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},progressMin:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"number"},required:!1},progressMax:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"number"},required:!1},progress:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"number"},required:!1},status:{defaultValue:{value:'"idle"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"values( FILE_IMPORT_STATUS )"},required:!1},id:{description:"",type:{name:"string"},required:!0},name:{description:"",type:{name:"string"},required:!0},selectLabel:{description:"",type:{name:"string"},required:!0},dropLabel:{description:"",type:{name:"string"},required:!0},screenReaderLabel:{description:"",type:{name:"string"},required:!0},abortScreenReaderLabel:{description:"",type:{name:"string"},required:!0},feedbackTitle:{description:"",type:{name:"string"},required:!0},onChange:{description:"",type:{name:"func"},required:!0},onAbort:{description:"",type:{name:"func"},required:!0}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),elements_alert=__webpack_require__("./src/elements/alert/index.js"),success=__webpack_require__("./src/components/notifications/docs/success.md");const defaultArgs={selectLabel:"Select a file",dropLabel:"or drag and drop",screenReaderLabel:"Import a file",abortScreenReaderLabel:"Abort import",selectDescription:"CSV files only, up to 10MB",feedbackTitle:"file.csv",progressMin:0,progressMax:100,onChange:lodash.noop,onAbort:lodash.noop},Template=({endStatus,...args})=>{const[status,setStatus]=(0,react.useState)(FILE_IMPORT_STATUS.idle),[feedbackTitle,setFeedbackTitle]=(0,react.useState)(""),[feedbackDescription,setFeedbackDescription]=(0,react.useState)(""),[progress,setProgress]=(0,react.useState)(0);let abort=null;const handleChange=(0,react.useCallback)((async file=>{setStatus(FILE_IMPORT_STATUS.loading),setFeedbackTitle(file.name),setFeedbackDescription(`${Math.round(file.size.toString()/1024)}Kb`),await new Promise(((resolve,reject)=>{let internalProgress=0;const interval=setInterval((()=>{if(internalProgress>100)return clearInterval(interval),resolve();setProgress(internalProgress++)}),20);abort=()=>{clearInterval(interval),setStatus(FILE_IMPORT_STATUS.aborted),setProgress(0)}})).then((()=>setStatus(endStatus)))}),[setStatus,setFeedbackTitle,setFeedbackDescription,progress,setProgress]),handleAbort=(0,react.useCallback)((()=>{window.confirm("Are you sure you want to abort?")&&abort()}),[abort,setStatus,setFeedbackTitle,setFeedbackDescription,setProgress]);return(0,jsx_runtime.jsx)(file_import,{...args,feedbackTitle,feedbackDescription,status,progress,onChange:handleChange,onAbort:handleAbort})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(file_import.Success,{children:"Success message"}),(0,jsx_runtime.jsx)(file_import.Error,{children:"Error message"})]}),id:"file-import-1",name:"file-import-1",...defaultArgs,endStatus:FILE_IMPORT_STATUS.success}},Selected={parameters:{controls:{disable:!1},docs:{description:{story:"When file is selected.\n"}}},args:{children:(0,jsx_runtime.jsx)(file_import.Selected,{children:(0,jsx_runtime.jsx)(elements_alert.Ay,{variant:"info",role:"alert",children:"A file has been selected for import."})}),id:"file-import-selected",name:"file-import-selected",...defaultArgs,progress:60,status:FILE_IMPORT_STATUS.selected}},Loading={parameters:{controls:{disable:!1},docs:{description:{story:"When file is loading.\n"}}},args:{children:(0,jsx_runtime.jsx)(file_import.Loading,{children:(0,jsx_runtime.jsx)(elements_alert.Ay,{variant:"info",role:"alert",children:"The import is loading."})}),id:"file-import-loading",name:"file-import-loading",...defaultArgs,progress:60,status:FILE_IMPORT_STATUS.loading}},Aborted={parameters:{controls:{disable:!1},docs:{description:{story:"When file loading is aborted.\n"}}},args:{children:(0,jsx_runtime.jsx)(file_import.Aborted,{children:(0,jsx_runtime.jsx)(elements_alert.Ay,{variant:"warning",role:"alert",children:"The import was aborted."})}),id:"file-import-aborted",name:"file-import-aborted",...defaultArgs,progress:60,status:FILE_IMPORT_STATUS.aborted}},Success={parameters:{controls:{disable:!1},docs:{description:{story:success}}},args:{children:(0,jsx_runtime.jsxs)(file_import.Success,{children:[(0,jsx_runtime.jsx)(elements_alert.Ay,{variant:"success",role:"alert",className:"yst-mb-2",children:"SEO data successfully imported!"}),(0,jsx_runtime.jsxs)(elements_alert.Ay,{variant:"warning",role:"alert",children:["However, there were some slight problems with the following data:",(0,jsx_runtime.jsxs)("ul",{className:"yst-list-disc yst-ml-4 yst-mt-4 yst-space-y-2",children:[(0,jsx_runtime.jsx)("li",{children:"This went wrong"}),(0,jsx_runtime.jsx)("li",{children:"This also went wrong"})]})]})]}),id:"file-import-success",name:"file-import-success",...defaultArgs,progress:100,status:FILE_IMPORT_STATUS.success}},Error={parameters:{controls:{disable:!1},docs:{description:{story:"Error will appear when `status` prop is error.\n"}}},args:{children:(0,jsx_runtime.jsx)(file_import.Error,{children:(0,jsx_runtime.jsx)(elements_alert.Ay,{variant:"error",role:"alert",children:"Whoops! Something went terribly wrong."})}),id:"file-import-error",name:"file-import-error",...defaultArgs,progress:60,status:FILE_IMPORT_STATUS.error}},stories={title:"2) Components/File import",component:file_import,argTypes:{children:{control:"text"},status:{options:(0,lodash.values)(FILE_IMPORT_STATUS)},endStatus:{options:(0,lodash.values)(FILE_IMPORT_STATUS),type:"select",description:"The status to end the import with (only for testing)."}},parameters:{docs:{description:{component:"A file import component with ready-to-go informational views for all different upload states.\nThe `FileImport` component combines the `onDrop` and `onChange` callback from the `FileInput` into\na single `onChange` callback that will receive the uploaded [File](https://developer.mozilla.org/en-US/docs/Web/API/File).\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[Selected,Loading,Aborted,Success,Error]})}}}},"./src/elements/alert/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Ay:()=>__WEBPACK_DEFAULT_EXPORT__,_Z:()=>classNameMap,lE:()=>roleMap});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_validation__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/elements/validation/validation-icon.js"),_validation__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/validation/validation-message.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{info:"yst-alert--info",warning:"yst-alert--warning",success:"yst-alert--success",error:"yst-alert--error"}},roleMap={alert:"alert",status:"status"},Alert=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({children,role="status",as:Component="span",variant="info",className="",...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-alert",classNameMap.variant[variant],className),role:roleMap[role],...props,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_validation__WEBPACK_IMPORTED_MODULE_3__.A,{variant,className:"yst-alert__icon"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_validation__WEBPACK_IMPORTED_MODULE_4__.A,{as:"div",variant,className:"yst-alert__message",children})]}))),propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_5___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_5___default().elementType,variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf(Object.keys(classNameMap.variant)),className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string,role:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf(Object.keys(roleMap))};Alert.displayName="Alert",Alert.propTypes=propTypes,Alert.defaultProps={as:"span",variant:"info",className:"",role:"status"};const __WEBPACK_DEFAULT_EXPORT__=Alert;Alert.__docgenInfo={description:'@param {JSX.node} children Content of the Alert.\n@param {string} [role] The role of the Alert.\n@param {string|function} [as="span"] Base component.\n@param {string} [variant="info"] Alert variant. See `classNameMap` for the options.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Alert component.',methods:[],displayName:"Alert",props:{role:{defaultValue:{value:'"status"',computed:!1},description:"",type:{name:"enum",value:[{value:'"alert"',computed:!1},{value:'"status"',computed:!1}]},required:!1},as:{defaultValue:{value:'"span"',computed:!1},description:"",type:{name:"elementType"},required:!1},variant:{defaultValue:{value:'"info"',computed:!1},description:"",type:{name:"enum",value:[{value:'"info"',computed:!1},{value:'"warning"',computed:!1},{value:'"success"',computed:!1},{value:'"error"',computed:!1}]},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/file-input/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>file_input});var react=__webpack_require__("../../node_modules/react/index.js");const esm_DocumentAddIcon=react.forwardRef((function DocumentAddIcon(props,svgRef){return react.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:svgRef},props),react.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"}))}));var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),elements_link=__webpack_require__("./src/elements/link/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const FileInput=(0,react.forwardRef)((({id,name,value,selectLabel,dropLabel,screenReaderLabel,selectDescription,disabled,iconAs:IconComponent,onChange,onDrop,className,...props},ref)=>{const[isDragOver,setIsDragOver]=(0,react.useState)(!1),handleDragEnter=(0,react.useCallback)((event=>{event.preventDefault(),(0,lodash.isEmpty)(event.dataTransfer.items)||setIsDragOver(!0)}),[setIsDragOver]),handleDragLeave=(0,react.useCallback)((event=>{event.preventDefault(),setIsDragOver(!1)}),[setIsDragOver]),handleDragOver=(0,react.useCallback)((event=>{event.preventDefault()}),[]),handleDrop=(0,react.useCallback)((event=>{event.preventDefault(),setIsDragOver(!1),onDrop(event)}),[setIsDragOver,onDrop]);return(0,jsx_runtime.jsx)("div",{onDragEnter:handleDragEnter,onDragLeave:handleDragLeave,onDragOver:handleDragOver,onDrop:handleDrop,className:classnames_default()("yst-file-input",{"yst-is-drag-over":isDragOver,"yst-is-disabled":disabled,className}),children:(0,jsx_runtime.jsxs)("div",{className:"yst-file-input__content",children:[(0,jsx_runtime.jsx)(IconComponent,{className:"yst-file-input__icon"}),(0,jsx_runtime.jsxs)("div",{className:"yst-file-input__labels",children:[(0,jsx_runtime.jsx)("input",{ref,type:"file",id,name,value,onChange,className:"yst-file-input__input","aria-labelledby":screenReaderLabel,disabled,...props}),(0,jsx_runtime.jsx)(elements_link.A,{as:"label",htmlFor:id,className:"yst-file-input__select-label",children:selectLabel}),(0,jsx_runtime.jsx)("span",{children:" "}),dropLabel]}),selectDescription&&(0,jsx_runtime.jsx)("span",{children:selectDescription})]})})}));FileInput.displayName="FileInput",FileInput.propTypes={id:prop_types_default().string.isRequired,name:prop_types_default().string.isRequired,value:prop_types_default().string.isRequired,selectLabel:prop_types_default().string.isRequired,dropLabel:prop_types_default().string.isRequired,screenReaderLabel:prop_types_default().string.isRequired,selectDescription:prop_types_default().string,disabled:prop_types_default().bool,iconAs:prop_types_default().elementType,onChange:prop_types_default().func.isRequired,onDrop:prop_types_default().func,className:prop_types_default().string},FileInput.defaultProps={selectDescription:"",disabled:!1,iconAs:esm_DocumentAddIcon,className:"",onDrop:lodash.noop};const file_input=FileInput;FileInput.__docgenInfo={description:"File input with drag-and-drop support.\n\n@param {string} id Id.\n@param {string} name Name.\n@param {string} value Value.\n@param {string} selectLabel Label for default select button.\n@param {string} dropLabel Label for drop area.\n@param {string} screenReaderLabel Screen reader label.\n@param {string} selectDescription Description for select area.\n@param {boolean} disabled Disabled state.\n@param {JSX.Element} iconAs Icon to show in select area.\n@param {Function} onChange The callback for when a file is uploaded.\n@param {Function} onDrop The callback for when a file is dropped.\n@param {string} className Classname.\n@returns {JSX.Element} The FileInput component.",methods:[],displayName:"FileInput",props:{selectDescription:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},iconAs:{defaultValue:{value:"DocumentAddIcon",computed:!0},description:"",type:{name:"elementType"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},onDrop:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},id:{description:"",type:{name:"string"},required:!0},name:{description:"",type:{name:"string"},required:!0},value:{description:"",type:{name:"string"},required:!0},selectLabel:{description:"",type:{name:"string"},required:!0},dropLabel:{description:"",type:{name:"string"},required:!0},screenReaderLabel:{description:"",type:{name:"string"},required:!0},onChange:{description:"",type:{name:"func"},required:!0}}}},"./src/elements/link/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{default:"yst-link--default",primary:"yst-link--primary",error:"yst-link--error"}},Link=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({as:Component,variant,className,children,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-link",classNameMap.variant[variant],className),...props,children})));Link.displayName="Link",Link.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node.isRequired,variant:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(classNameMap.variant)),as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},Link.defaultProps={as:"a",variant:"default",className:""};const __WEBPACK_DEFAULT_EXPORT__=Link;Link.__docgenInfo={description:"@param {JSX.Element} [Component] The component to render as.\n@param {string} [variant] The variant of the link.\n@param {string} [className] The HTML classes.\n@param {JSX.node} children The content of the link.\n@param {Object} [props] The props.\n@returns {JSX.Element} The link.",methods:[],displayName:"Link",props:{as:{defaultValue:{value:'"a"',computed:!1},description:"",type:{name:"elementType"},required:!1},variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",value:[{value:'"default"',computed:!1},{value:'"primary"',computed:!1},{value:'"error"',computed:!1}]},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/progress-bar/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const ProgressBar=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({min,max,progress,className,...props},ref)=>{const percentage=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)((()=>progress/(max-min)*100),[min,max,progress]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{ref,"aria-hidden":"true",className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-progress-bar",className),...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:"yst-progress-bar__progress",style:{width:`${percentage}%`}})})}));ProgressBar.displayName="ProgressBar",ProgressBar.propTypes={min:prop_types__WEBPACK_IMPORTED_MODULE_3___default().number.isRequired,max:prop_types__WEBPACK_IMPORTED_MODULE_3___default().number.isRequired,progress:prop_types__WEBPACK_IMPORTED_MODULE_3___default().number.isRequired,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},ProgressBar.defaultProps={className:""};const __WEBPACK_DEFAULT_EXPORT__=ProgressBar;ProgressBar.__docgenInfo={description:"@param {number} min The minimal value.\n@param {number} max The maximum value.\n@param {number} progress The current progress value between min and max.\n@returns {JSX.Element} The ProgressBar component.",methods:[],displayName:"ProgressBar",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},min:{description:"",type:{name:"number"},required:!0},max:{description:"",type:{name:"number"},required:!0},progress:{description:"",type:{name:"number"},required:!0}}}},"./src/elements/validation/validation-message.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const CLASSNAME_MAP={variant:{success:"yst-validation-message--success",warning:"yst-validation-message--warning",info:"yst-validation-message--info",error:"yst-validation-message--error"}},ValidationMessage=({as:Component="p",variant="info",children,className="",...props})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component,{...props,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-message",CLASSNAME_MAP.variant[variant],className),children});ValidationMessage.displayName="ValidationMessage",ValidationMessage.propTypes={as:prop_types__WEBPACK_IMPORTED_MODULE_4___default().elementType,variant:prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(CLASSNAME_MAP.variant)),message:prop_types__WEBPACK_IMPORTED_MODULE_4___default().node,className:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string,children:prop_types__WEBPACK_IMPORTED_MODULE_4___default().node.isRequired};const __WEBPACK_DEFAULT_EXPORT__=ValidationMessage;ValidationMessage.__docgenInfo={description:'@param {string|function} [as="p"] The component to render as.\n@param {string} [variant="info"] The variant.\n@param {JSX.node} [children=""] The validation message.\n@param {string} [className=""] The class name.\n@returns {JSX.Element} The ValidationMessage component.',methods:[],displayName:"ValidationMessage",props:{as:{defaultValue:{value:'"p"',computed:!1},description:"",type:{name:"elementType"},required:!1},variant:{defaultValue:{value:'"info"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( CLASSNAME_MAP.variant )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},message:{description:"",type:{name:"node"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}}}]);