components-stepper-stories.9ce53761.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[2187],{"../../node_modules/@heroicons/react/solid/esm/CheckIcon.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function CheckIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",clipRule:"evenodd"}))}))},"../../node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{H2:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.H2,Hl:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Hl,Pd:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Pd,Tn:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Tn,VY:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.VY,W8:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.W8,fy:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.fy,gG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.gG,hE:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.hE,oz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oz});__webpack_require__("../../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@storybook/addon-docs/node_modules/@storybook/blocks/dist/index.mjs")},"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),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_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories=[]})=>(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)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories=[]] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./src/components/stepper/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,StepsAsChildren:()=>StepsAsChildren,WithCustomProgressBar:()=>WithCustomProgressBar,WithCustomStep:()=>WithCustomStep,default:()=>stories});var CheckIcon=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckIcon.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),classnames=__webpack_require__("../../node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),react=__webpack_require__("../../node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),lodash=__webpack_require__("../../node_modules/lodash/lodash.js");const StepperContext=(0,react.createContext)({addStepRef:lodash.noop,currentStep:0});var progress_bar=__webpack_require__("./src/elements/progress-bar/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const StepperProgressBar=({as:Component=progress_bar.A,...props})=>(0,jsx_runtime.jsx)(Component,{className:"yst-absolute yst-top-3 yst-w-auto yst-h-0.5",min:0,max:100,...props});StepperProgressBar.displayName="StepperProgressBar",StepperProgressBar.displayName="Stepper.ProgressBar",StepperProgressBar.propTypes={as:prop_types_default().elementType},StepperProgressBar.__docgenInfo={description:"The ProgressBar component for the Stepper.\n\n@param {React.ElementType} [as=ProgressBar] The component to use for the progress bar.\n\n@returns {JSX.Element} The ProgressBar.",methods:[],displayName:"Stepper.ProgressBar",props:{as:{defaultValue:{value:'forwardRef( ( {\n\tmin,\n\tmax,\n\tprogress,\n\tclassName = "",\n\tprogressClassName = "",\n\t...props\n}, ref ) => {\n\tconst percentage = useMemo( () => progress / ( max - min ) * 100, [ min, max, progress ] );\n\n\treturn (\n\t\t<div ref={ ref } aria-hidden="true" className={ classNames( "yst-progress-bar", className ) } { ...props }>\n\t\t\t<div className={ classNames( "yst-progress-bar__progress", progressClassName ) } style={ { width: `${ percentage }%` } } />\n\t\t</div>\n\t);\n} )',computed:!0},description:"",type:{name:"elementType"},required:!1}}};const Step=({children,index,id})=>{const{addStepRef,currentStep}=(0,react.useContext)(StepperContext),isActive=index===currentStep,isComplete=index<currentStep;return(0,jsx_runtime.jsxs)("div",{ref:addStepRef,className:classnames_default()("yst-step",isComplete&&"yst-step--complete",isActive&&"yst-step--active"),id,children:[(0,jsx_runtime.jsxs)("div",{className:"yst-step__circle",children:[(0,jsx_runtime.jsx)("div",{className:classnames_default()("yst-step__icon yst-bg-primary-500 yst-w-2 yst-h-2 yst-rounded-full yst-delay-500",!isComplete&&isActive?"yst-opacity-100":"yst-opacity-0")}),isComplete&&(0,jsx_runtime.jsx)(CheckIcon.A,{className:"yst-step__icon yst-w-4"})]}),(0,jsx_runtime.jsx)("div",{className:"yst-font-semibold yst-text-xxs yst-mt-3",children})]})};Step.displayName="Step",Step.displayName="Stepper.Step",Step.propTypes={children:prop_types_default().node.isRequired,index:prop_types_default().number.isRequired,id:prop_types_default().string.isRequired},Step.__docgenInfo={description:"Step component.\n\n@param {JSX.Node} children The step label or children.\n@param {number} index The index of the step.\n\n@returns {JSX.Element} The step element.",methods:[],displayName:"Stepper.Step",props:{children:{description:"",type:{name:"node"},required:!0},index:{description:"",type:{name:"number"},required:!0},id:{description:"",type:{name:"string"},required:!0}}};const Stepper=(0,react.forwardRef)((({children,currentStep=0,className="",steps=[],ProgressBar=StepperProgressBar},ref)=>{const[progressBarPosition,setProgressBarPosition]=(0,react.useState)({left:0,right:0,stepsLengthPercentage:[]}),[stepRefs,setStepRefs]=(0,react.useState)([]);(0,react.useLayoutEffect)((()=>{let newStepRefs=[];steps.length>0&&(newStepRefs=steps.map((step=>stepRefs.find((el=>el&&el.id===step.id))))),children&&(newStepRefs=react.Children.map(children,(child=>stepRefs.find((el=>el&&el.id===child.props.id))))),setStepRefs(newStepRefs.filter(Boolean))}),[steps,children,currentStep]),(0,react.useLayoutEffect)((()=>{if(0===stepRefs.length)return void setProgressBarPosition({left:0,right:0,stepsLengthPercentage:[]});const firstStepRect=stepRefs[0].getBoundingClientRect(),lastStepRect=stepRefs[stepRefs.length-1].getBoundingClientRect(),progressBarLength=((firstStepRect,lastStepRect)=>lastStepRect.right-firstStepRect.left-firstStepRect.width/2-lastStepRect.width/2)(firstStepRect,lastStepRect),stepsLengthPercentage=((stepRefs,firstStepRect,progressBarLength)=>{const startingPoint=firstStepRect.left+firstStepRect.width/2;return stepRefs.map(((step,index)=>0===index?0:index>=stepRefs.length-1?100:((null==step?void 0:step.getBoundingClientRect().right)-startingPoint-(null==step?void 0:step.getBoundingClientRect().width)/2)/progressBarLength*100))})(stepRefs,firstStepRect,progressBarLength);setProgressBarPosition({left:firstStepRect.width/2,right:lastStepRect.width/2,stepsLengthPercentage})}),[stepRefs]);const addStepRef=(0,react.useCallback)((el=>{el&&!stepRefs.includes(el)&&setStepRefs((refs=>[...refs,el]))}),[stepRefs]);return 0!==steps.length||children?(0,jsx_runtime.jsx)(StepperContext.Provider,{value:{addStepRef,currentStep},children:(0,jsx_runtime.jsxs)("div",{className:classnames_default()(className,"yst-stepper"),ref,children:[(0,jsx_runtime.jsx)(ProgressBar,{style:{right:progressBarPosition.right,left:progressBarPosition.left},progress:(percentage=progressBarPosition.stepsLengthPercentage,step=currentStep,step&&percentage?percentage[step]??100:0)}),children||steps.map(((step,index)=>(0,jsx_runtime.jsx)(Step,{index,id:step.id,children:step.children},`${step.id}-step`)))]})}):null;var percentage,step}));Stepper.displayName="Stepper",Stepper.propTypes={currentStep:prop_types_default().number,children:prop_types_default().node,className:prop_types_default().string,steps:prop_types_default().arrayOf(prop_types_default().shape({id:prop_types_default().string.isRequired,children:prop_types_default().node.isRequired})),ProgressBar:prop_types_default().elementType},Stepper.defaultProps={className:"",steps:[],children:void 0,currentStep:0,ProgressBar:StepperProgressBar},Stepper.Context=StepperContext,Stepper.ProgressBar=StepperProgressBar,Stepper.Step=Step,Stepper.__docgenInfo={description:"@param {JSX.Node} [children] Content of the stepper.\n@param {number} [currentStep] The current step, starts from 0.\n@param {string} [className] Optional extra className.\n@param {JSX.Node[]} [steps] The steps of the stepper.\n\n@returns {JSX.Element} The Stepper element.",methods:[{name:"ProgressBar",docblock:null,modifiers:["static"],params:[{name:"{ as: Component = ProgressBar, ...props }",optional:!1,type:null}],returns:null},{name:"Step",docblock:null,modifiers:["static"],params:[{name:"{ children, index, id }",optional:!1,type:null}],returns:null}],displayName:"Stepper",props:{currentStep:{defaultValue:{value:"0",computed:!1},description:"",type:{name:"number"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},steps:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"shape",value:{id:{name:"string",required:!0},children:{name:"node",required:!0}}}},required:!1},ProgressBar:{defaultValue:{value:'( { as: Component = ProgressBar, ...props } ) => (\n\t<Component\n\t\tclassName="yst-absolute yst-top-3 yst-w-auto yst-h-0.5"\n\t\tmin={ 0 }\n\t\tmax={ 100 }\n\t\t{ ...props }\n\t/>\n)',computed:!1},description:"",type:{name:"elementType"},required:!1},children:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"node"},required:!1}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),elements_button=__webpack_require__("./src/elements/button/index.js");const CustomStep=({children,index,id})=>{const{addStepRef,currentStep}=(0,react.useContext)(Stepper.Context),isActive=index===currentStep,isComplete=index<currentStep;return(0,jsx_runtime.jsxs)("div",{id,ref:addStepRef,className:classnames_default()("yst-step",isComplete&&"yst-step--complete",isActive&&"yst-step--active yst-text-green-700"),children:[(0,jsx_runtime.jsxs)("div",{className:classnames_default()("yst-step__circle yst-ring-green-500",isComplete?"yst-bg-green-500 yst-ring-green-500":"yst-bg-white"),children:[isComplete&&(0,jsx_runtime.jsx)(CheckIcon.A,{className:"yst-step__icon yst-w-4 yst-z-50"}),(0,jsx_runtime.jsx)("div",{className:classnames_default()("yst-step__icon yst-bg-green-500 yst-w-2 yst-h-2 yst-rounded-full yst-delay-500",!isComplete&&isActive?"yst-opacity-100":"yst-opacity-0")})]}),(0,jsx_runtime.jsx)("div",{className:"yst-font-semibold yst-text-xxs yst-mt-3",children})]})};CustomStep.displayName="CustomStep";const DecorateWithStepButton=Story=>{const[{currentStep,...args},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),steps=args.children||args.steps,handleNext=(0,react.useCallback)((()=>{currentStep<=steps.length-1?updateArgs({currentStep:currentStep+1}):currentStep>steps.length-1&&updateArgs({currentStep:0})}),[currentStep]);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Story,{...args,currentStep}),(0,jsx_runtime.jsxs)(elements_button.A,{className:"yst-mt-5",onClick:handleNext,children:[currentStep<steps.length-1&&"Next",currentStep===steps.length-1&&"Finish",currentStep>steps.length-1&&"Restart"]})]})},Factory={args:{currentStep:0,steps:[{children:"INSTALL",id:"install"},{children:"ACTIVATE",id:"activate"},{children:"SET UP",id:"setup"},{children:"CONNECT",id:"connect"}]},parameters:{controls:{disable:!1}},decorators:[DecorateWithStepButton]},StepsAsChildren={args:{currentStep:0,children:["INSTALL","ACTIVATE","SET UP","CONNECT"].map(((step,index)=>(0,jsx_runtime.jsx)(Stepper.Step,{index,id:`${step}-with-children`,children:step},step)))},parameters:{controls:{disable:!1}},decorators:[DecorateWithStepButton]},WithCustomStep={args:{currentStep:0,children:[(0,jsx_runtime.jsx)(Stepper.Step,{index:0,id:"install-custom",children:"INSTALL"},"install"),(0,jsx_runtime.jsx)(Stepper.Step,{index:1,id:"activate-custom",children:"ACTIVATE"},"activate"),(0,jsx_runtime.jsx)(Stepper.Step,{index:2,id:"setup-custom",children:"SET UP"},"setup"),(0,jsx_runtime.jsx)(CustomStep,{index:3,id:"connect-custom",children:"CONNECT"},"connect")]},parameters:{controls:{disable:!1},docs:{description:{story:"Create custom step by using the stepper context to get `addStepRef` (`Stepper.Context`) and apply it to the `ref` in the custom step component. `id` and `index` props are required."}}},decorators:[DecorateWithStepButton]},CustomProgressBar=({progress,style})=>(0,jsx_runtime.jsx)(progress_bar.A,{className:"yst-absolute yst-top-3 yst-w-auto yst-h-0.5 yst-bg-green-400",style,min:0,max:100,progress});CustomProgressBar.displayName="CustomProgressBar";const WithCustomProgressBar={args:{currentStep:0,steps:[{children:"INSTALL",id:"install-with-custom-progress-bar"},{children:"ACTIVATE",id:"activate-with-custom-progress-bar"},{children:"SET UP",id:"setup-with-custom-progress-bar"},{children:"CONNECT",id:"connect-with-custom-progress-bar"}],ProgressBar:CustomProgressBar,children:null},parameters:{controls:{disable:!1},docs:{description:{story:"The custom progress bar allows you to override the default progress bar with your own implementation, providing flexibility in styling and behavior.\n\n#### Key Features\n\n- **Customizable Appearance**: The custom progress bar can have its own styles, colors, and animations.\n- **Dynamic Positioning**: The progress bar dynamically adjusts its position based on the steps in the `Stepper`.\n- **Smooth Transitions**: Includes smooth width transitions for a polished user experience.\n\n#### Usage\n\nThe custom progress bar is passed to the `Stepper` component via the `ProgressBar` prop. The `ProgressBar` component receives the following props:\n\n- `style`: An object containing the `left` and `right` positions for start and end points of the progress bar based on the center point of the frst and last step.\n- `progress`: A number representing the progress percentage (0-100).\n\nWithout `ProgressBar`, the `Stepper` will default to its own progress bar."}}},decorators:[DecorateWithStepButton]},stories={title:"2) Components/Stepper",component:Stepper,parameters:{docs:{description:{component:"A Stepper guides a user through a sequence of steps in a process.\n\nThis is a controlled component that takes the `currentStep` prop to determine which step is active.\n\nThe `Stepper` includes the `Stepper.Context` that provides the `addStepRef` function. This collects the step elements to calculate the size of the progress bar. It also provides the currentStep.\n\nThe `Stepper` component can be used in two ways:\n1. Render the steps yourself as children of the `Stepper` component using the `Step` component.\n   - The `Step` component takes the props `index`, `id` and `children`.\n   - The `id` is used to track changes in the number of steps.\n   - Internally the `addStepRef` from the `Stepper.Context` is used to provide the `ref` to the Stepper to calculate the progress bar.\n   - Internally the `currentStep` from the `Stepper.Context` is used to determine if the step is active or complete. A step is complete when the `index` is less than the `currentStep` and active when the `index` is equal to the `currentStep`.\n   - You can also create your own custom step component, as long as you provide the `ref` to the `addStepRef` function.\n2. Use the `steps` prop to pass an array of steps.\n   - Where each step should be the `children` of the single step component."},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[StepsAsChildren,WithCustomStep,WithCustomProgressBar]})}},argTypes:{children:{control:{disable:!0}},ProgressBar:{control:{disable:!0}}}}},"./src/elements/button/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{_:()=>classNameMap,A:()=>elements_button});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),react=__webpack_require__("../../node_modules/react/index.js"),spinner=__webpack_require__("./src/elements/spinner/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const SparklesIcon=({pressed=!1,className=""})=>{const gradientId=`gradient-${(0,react.useId)()}`;return(0,jsx_runtime.jsxs)("svg",{width:"16",height:"17",viewBox:"0 0 16 17",fill:"none",xmlns:"http://www.w3.org/2000/svg",className,children:[(0,jsx_runtime.jsx)("path",{d:"M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z",strokeLinecap:"round",strokeLinejoin:"round",stroke:pressed?"white":`url(#${gradientId})`,style:{strokeWidth:"1.33333px"}}),(0,jsx_runtime.jsx)("defs",{children:(0,jsx_runtime.jsxs)("linearGradient",{id:gradientId,x1:"1.99951",y1:"2.96991",x2:"15.3308",y2:"4.69764",gradientUnits:"userSpaceOnUse",children:[(0,jsx_runtime.jsx)("stop",{offset:"0%",stopColor:"#A61E69"}),(0,jsx_runtime.jsx)("stop",{offset:"100%",stopColor:"#6366F1"})]})})]})};SparklesIcon.displayName="SparklesIcon",SparklesIcon.propTypes={pressed:prop_types_default().bool,className:prop_types_default().string},SparklesIcon.__docgenInfo={description:"The AI sparkles icon for buttons.\n\n@param {object} props The component props\n@param {boolean} [props.pressed] Whether the button is pressed.\n@param {string} [props.className] The className for the icon.\n@returns {JSX.Element} The AI sparkles icon for buttons.",methods:[],displayName:"SparklesIcon",props:{pressed:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}};var use_svg_aria=__webpack_require__("./src/hooks/use-svg-aria.js");const classNameMap={variant:{primary:"yst-button--primary",secondary:"yst-button--secondary",tertiary:"yst-button--tertiary",error:"yst-button--error",upsell:"yst-button--upsell","ai-primary":"yst-button--ai-primary","ai-secondary":"yst-button--ai-secondary"},size:{default:"",small:"yst-button--small",large:"yst-button--large","extra-large":"yst-button--extra-large"}},Button=(0,react.forwardRef)((({children,as:Component,type,variant,size,isLoading,disabled,className,...props},ref)=>{const svgAriaProps=(0,use_svg_aria.A)();return(0,jsx_runtime.jsxs)(Component,{type:type||"button"===Component&&"button"||void 0,disabled,ref,className:classnames_default()("yst-button",classNameMap.variant[variant],classNameMap.size[size],isLoading&&"yst-cursor-wait",disabled&&"yst-button--disabled",className),...props,children:[isLoading&&(0,jsx_runtime.jsx)(spinner.A,{size:"small"===size?"3":"4",className:"yst-button--loading",...svgAriaProps}),variant.startsWith("ai-")&&(0,jsx_runtime.jsx)(SparklesIcon,{className:"yst-button--sparkles-icon yst-shrink-0",...svgAriaProps}),children]})}));Button.displayName="Button",Button.propTypes={children:prop_types_default().node.isRequired,as:prop_types_default().elementType,type:prop_types_default().oneOf(["button","submit","reset"]),variant:prop_types_default().oneOf((0,lodash.keys)(classNameMap.variant)),size:prop_types_default().oneOf((0,lodash.keys)(classNameMap.size)),isLoading:prop_types_default().bool,disabled:prop_types_default().bool,className:prop_types_default().string},Button.defaultProps={as:"button",type:void 0,variant:"primary",size:"default",isLoading:!1,disabled:!1,className:""};const elements_button=Button;Button.__docgenInfo={description:'@param {JSX.node} children Content of the button.\n@param {string|JSX.Element} [as="button"] Base component.\n@param {string} [type] Type attribute. Used when `as` is a `button`.\n@param {string} [variant="primary"] Button variant. See `classNameMap` for the options.\n@param {string} [size="default"] Button size. See `classNameMap` for the options.\n@param {boolean} [isLoading=false] Whether to show a spinner.\n@param {boolean} [disabled=false] Whether the button is disabled.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Button component.',methods:[],displayName:"Button",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},type:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"enum",value:[{value:'"button"',computed:!1},{value:'"submit"',computed:!1},{value:'"reset"',computed:!1}]},required:!1},variant:{defaultValue:{value:'"primary"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},isLoading:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},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__)=>{"use strict";__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="",progressClassName="",...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:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-progress-bar__progress",progressClassName),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,progressClassName:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,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@param {string} [className] Additional class names for the progress bar container.\n@param {string} [progressClassName] Additional class names for the progress indicator.\n@returns {JSX.Element} The ProgressBar component.",methods:[],displayName:"ProgressBar",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},progressClassName:{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/spinner/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});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_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_2__=__webpack_require__("../../node_modules/react/index.js"),_hooks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/hooks/use-svg-aria.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{default:"",primary:"yst-text-primary-500",white:"yst-text-white"},size:{3:"yst-w-3 yst-h-3",4:"yst-w-4 yst-h-4",8:"yst-w-8 yst-h-8"}},Spinner=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({variant,size,className},ref)=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("svg",{ref,xmlns:"http://www.w3.org/2000/svg/",fill:"none",viewBox:"0 0 24 24",className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-animate-spin",classNameMap.variant[variant],classNameMap.size[size],className),...svgAriaProps,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("circle",{className:"yst-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("path",{className:"yst-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})}));Spinner.displayName="Spinner",Spinner.propTypes={variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Spinner.defaultProps={variant:"default",size:"4",className:""};const __WEBPACK_DEFAULT_EXPORT__=Spinner;Spinner.__docgenInfo={description:"@param {string} [variant=default] The variant.\n@param {string} [size] The size.\n@param {string} [className] The HTML class.\n@returns {JSX.Element} The spinner.",methods:[],displayName:"Spinner",props:{variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"4"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/hooks/use-svg-aria.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=(isFocusable=null)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>{const aria={role:"img","aria-hidden":"true"};return null!==isFocusable&&(aria.focusable=isFocusable?"true":"false"),aria}),[isFocusable])},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);