@youngonesworks/ui 0.1.1 → 0.1.5

package/dist/index.js

@@ -4704,7 +4704,7 @@ function formatIcon(icon, defaultFormatAttributes) {
 }
 
 //#endregion
-//#region src/components/ActionIcon/index.tsx
+//#region src/components/actionIcon/index.tsx
 const ActionIcon = forwardRef(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
 	const variantClassNames = clsx_default({
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
@@ -4735,7 +4735,7 @@ const ActionIcon = forwardRef(({ title, disabled = false, styleVariant = "defaul
 });
 
 //#endregion
-//#region src/components/AppleAppButtonIcon/index.tsx
+//#region src/components/appleAppButtonIcon/index.tsx
 const AppleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 198 66",
 	fill: "none",
@@ -103022,7 +103022,7 @@ var IconZzz = createReactComponent("zzz", "IconZzz", [["path", {
 }]]);
 
 //#endregion
-//#region src/components/TextInput/index.tsx
+//#region src/components/textInput/index.tsx
 const TextInput = forwardRef(({ rightSection, leftSection, className, error: error$1, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, onKeyDown, min: min$2 = "0", max: max$2, autoComplete, showRightSection = true, step, wrapperClassName, password = false,...props }, ref) => {
 	const [showPassword, setShowPassword] = React.useState(false);
 	return /* @__PURE__ */ jsxs("div", {
@@ -103084,7 +103084,7 @@ const TextInput = forwardRef(({ rightSection, leftSection, className, error: err
 });
 
 //#endregion
-//#region src/components/AutoCompleteInput/index.tsx
+//#region src/components/autoCompleteInput/index.tsx
 const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestions, handleOnKeyDown, children, error: error$1, rightSection, inputRef }) => /* @__PURE__ */ jsxs("div", {
 	className: "relative mb-8",
 	children: [/* @__PURE__ */ jsx(TextInput, {
@@ -103105,7 +103105,7 @@ const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestio
 });
 
 //#endregion
-//#region src/components/Alert/index.tsx
+//#region src/components/alert/index.tsx
 const Alert = ({ show, message, type, plain = false, className }) => {
 	const [showAlert, setShowAlert] = useState();
 	const icon = () => {
@@ -103155,7 +103155,68 @@ const Alert = ({ show, message, type, plain = false, className }) => {
 Alert.displayName = "Alert";
 
 //#endregion
-//#region src/components/Avatar/index.tsx
+//#region src/components/unstyledButton/index.tsx
+const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	"data-component": "unstyledButton",
+	className: cn("appearance-none", className),
+	ref,
+	...props
+}));
+UnstyledButton.displayName = "UnstyledButton";
+
+//#endregion
+//#region src/components/accordion/AccordionItem.tsx
+const AccordionItem = ({ controlContent, panelContent, style: style$1 = "light", border = false, chevronPosition = "left", disabled = false, active = false, endContent, className }) => {
+	const [isActive$1, setIsActive] = useState(false);
+	useEffect(() => {
+		setIsActive(active);
+	}, [active]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+		"data-testid": "accordion-item",
+		className: cn("rounded-md hover:bg-gray-50", {
+			"bg-light-blue hover:bg-light-blue/50": style$1 === "dark",
+			"rounded-none border-b border-gray-200": border,
+			"bg-ultra-light-blue border border-gray-200 hover:bg-transparent": style$1 === "onboarding",
+			"bg-white": style$1 === "onboarding" && isActive$1,
+			"hover:bg-ultra-light-blue cursor-not-allowed opacity-50": disabled
+		}, className),
+		children: [/* @__PURE__ */ jsxs(UnstyledButton, {
+			className: cn("relative flex w-full flex-row items-center justify-between gap-2 px-4 py-3", { "flex-row-reverse": chevronPosition === "right" }),
+			onClick: () => setIsActive(!isActive$1),
+			disabled,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					onClick: () => setIsActive(!isActive$1),
+					className: `duration-300${isActive$1 ? "rotate-180" : ""}`,
+					children: /* @__PURE__ */ jsx(IconChevronDown, { size: 18 })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					onClick: () => setIsActive(!isActive$1),
+					className: `flex w-full flex-row justify-between ${style$1 === "dark" && "font-medium"} leading-8`,
+					children: controlContent
+				}),
+				endContent
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive$1 ? "max-h-1000" : "max-h-0"} leading-6 font-normal`,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "px-4 py-3",
+				children: panelContent
+			})
+		})]
+	}) });
+};
+
+//#endregion
+//#region src/components/accordion/AccordionWrapper.tsx
+const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: cn(className, "flex flex-col gap-2"),
+	children
+});
+
+//#endregion
+//#region src/components/avatar/index.tsx
 const radiusFormatter = {
 	0: "rounded-none",
 	2: "rounded-sm",
@@ -103180,7 +103241,7 @@ const Avatar = ({ src, alt = "", size: size$3 = 50, radius = 100 }) => /* @__PUR
 Avatar.displayName = "Avatar";
 
 //#endregion
-//#region src/components/AvatarIndicator/index.tsx
+//#region src/components/avatarIndicator/index.tsx
 const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ jsx("div", {
 	className: cn("inline-flex h-5 min-w-5 flex-col items-center justify-center gap-2.5 rounded border-2 border-solid border-white bg-blue-950 px-1.5", className),
 	"data-component": "AvatarIndicator",
@@ -103191,7 +103252,7 @@ const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ jsx("
 });
 
 //#endregion
-//#region src/components/Badge/index.tsx
+//#region src/components/badge/index.tsx
 const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false,...props }) => /* @__PURE__ */ jsx("span", {
 	"data-component": "Badge",
 	className: clsx_default("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case", mobile ? "rounded-s" : "rounded-[2rem]", badgeBorder && {
@@ -103225,7 +103286,7 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile =
 Badge.displayName = "Badge";
 
 //#endregion
-//#region src/components/BigBadge/index.tsx
+//#region src/components/bigBadge/index.tsx
 const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "BigBadge",
 	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
@@ -103244,7 +103305,7 @@ const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props })
 });
 
 //#endregion
-//#region src/components/LinkText/index.tsx
+//#region src/components/linkText/index.tsx
 /** @deprecated dont use this anymore, instead use the next link */
 const LinkText = ({ children, classNames: classNames$1 }) => /* @__PURE__ */ jsx("span", {
 	className: classNames$1,
@@ -103253,7 +103314,7 @@ const LinkText = ({ children, classNames: classNames$1 }) => /* @__PURE__ */ jsx
 LinkText.displayName = "LinkText";
 
 //#endregion
-//#region src/components/BreadCrumb/index.tsx
+//#region src/components/breadCrumb/index.tsx
 const BreadCrumb = ({ text }) => /* @__PURE__ */ jsx(LinkText, {
 	"data-component": "BreadCrumb",
 	classNames: "flex items-center",
@@ -103262,7 +103323,7 @@ const BreadCrumb = ({ text }) => /* @__PURE__ */ jsx(LinkText, {
 BreadCrumb.displayName = "BreadCrumb";
 
 //#endregion
-//#region src/components/Checkbox/index.tsx
+//#region src/components/checkbox/index.tsx
 const Checkbox = forwardRef(({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ jsxs("label", {
@@ -103318,7 +103379,7 @@ const Checkbox = forwardRef(({ size: size$3 = "md", className, error: error$1, m
 Checkbox.displayName = "Checkbox";
 
 //#endregion
-//#region src/components/Divider/index.tsx
+//#region src/components/divider/index.tsx
 const Divider = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "divider",
 	className: clsx_default("block h-px w-full bg-[#CCCCCC]", className),
@@ -103326,7 +103387,7 @@ const Divider = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 });
 
 //#endregion
-//#region src/components/GoogleAppButtonIcon/index.tsx
+//#region src/components/googleAppButtonIcon/index.tsx
 const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 224 66",
 	fill: "none",
@@ -103511,18 +103572,7 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 });
 
 //#endregion
-//#region src/components/UnstyledButton/index.tsx
-const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("button", {
-	type: "button",
-	"data-component": "unstyledButton",
-	className: cn("appearance-none", className),
-	ref,
-	...props
-}));
-UnstyledButton.displayName = "UnstyledButton";
-
-//#endregion
-//#region src/components/HamburgerMenuButton/index.tsx
+//#region src/components/hamburgerMenuButton/index.tsx
 const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
 	const defaultClasses = cn("absolute h-[2px] bg-white duration-150");
 	return /* @__PURE__ */ jsxs(UnstyledButton, {
@@ -103542,7 +103592,7 @@ const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
 HamburgerMenuButton.displayName = "HamburgerMenuButton";
 
 //#endregion
-//#region src/components/HR/index.tsx
+//#region src/components/hr/index.tsx
 const HR = ({ className }) => /* @__PURE__ */ jsx("hr", {
 	"data-component": "hr",
 	className: `h-px w-full border-none bg-gray-200 ${className}`
@@ -103550,7 +103600,7 @@ const HR = ({ className }) => /* @__PURE__ */ jsx("hr", {
 HR.displayName = "HR";
 
 //#endregion
-//#region src/components/Island/index.tsx
+//#region src/components/island/index.tsx
 const Island = ({ children, className, noShadow = false, noPadding = false,...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "island",
 	className: cn("relative bg-white px-5 py-5 shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)] md:px-10 md:py-9", {
@@ -103563,7 +103613,7 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
 Island.displayName = "Island";
 
 //#endregion
-//#region src/components/Label/index.tsx
+//#region src/components/label/index.tsx
 const Label = ({ children, className,...props }) => /* @__PURE__ */ jsx("label", {
 	"data-component": "label",
 	className: cn("flex items-center gap-1 text-xs font-medium text-black", className),
@@ -103572,7 +103622,7 @@ const Label = ({ children, className,...props }) => /* @__PURE__ */ jsx("label",
 });
 
 //#endregion
-//#region src/components/Loader/index.tsx
+//#region src/components/loader/index.tsx
 const Loader = () => /* @__PURE__ */ jsx("div", {
 	className: "inline-flex h-full w-auto items-center justify-center",
 	children: /* @__PURE__ */ jsx("div", { className: "loader" })
@@ -103580,7 +103630,7 @@ const Loader = () => /* @__PURE__ */ jsx("div", {
 Loader.displayName = "Loader";
 
 //#endregion
-//#region src/components/Logo/index.tsx
+//#region src/components/logo/index.tsx
 const LogoBlack = (props) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 110 68",
 	fill: "none",
@@ -103646,7 +103696,7 @@ const LogoBlack = (props) => /* @__PURE__ */ jsxs("svg", {
 });
 
 //#endregion
-//#region src/components/Modal/index.tsx
+//#region src/components/modal/index.tsx
 const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, dataTestId, onClose, size: size$3 }) => {
 	const ref = useRef(null);
 	const refContainer = useRef(null);
@@ -103743,7 +103793,34 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 Modal.displayName = "Modal";
 
 //#endregion
-//#region src/components/NumberField/index.tsx
+//#region src/components/navButtons/index.tsx
+const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center overflow-hidden rounded border border-gray-200",
+	children: [
+		/* @__PURE__ */ jsx("div", {
+			"data-testid": "chevron-left",
+			className: `flex ${onPrev ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2`,
+			onClick: onPrev,
+			children: /* @__PURE__ */ jsx(IconChevronLeft, {
+				size: 20,
+				className: onPrev ? "text-gray-500" : "text-gray-200"
+			})
+		}),
+		/* @__PURE__ */ jsx("div", { className: "h-6 w-[0.8px] bg-gray-200" }),
+		/* @__PURE__ */ jsx("div", {
+			"data-testid": "chevron-right",
+			className: `flex ${onNext ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2 hover:bg-gray-50`,
+			onClick: onNext,
+			children: /* @__PURE__ */ jsx(IconChevronRight, {
+				size: 20,
+				className: onNext ? "text-gray-500" : "text-gray-200"
+			})
+		})
+	]
+});
+
+//#endregion
+//#region src/components/numberField/index.tsx
 const NumberField = ({ name, value = 0, max: max$2, min: min$2 = 0, isDisabled, id, className = "", label, error: error$1, onChange }) => {
 	const handleChange = (e$1) => {
 		const newValue = parseInt(e$1.target.value, 10);
@@ -103800,7 +103877,7 @@ const NumberField = ({ name, value = 0, max: max$2, min: min$2 = 0, isDisabled,
 };
 
 //#endregion
-//#region src/components/PageUnavailable/index.tsx
+//#region src/components/pageUnavailable/index.tsx
 const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvailableHeaderText }) => /* @__PURE__ */ jsx(Island, { children: /* @__PURE__ */ jsxs("div", {
 	className: "mx-auto grid max-w-[900px] justify-items-center gap-8 text-center",
 	children: [
@@ -103814,7 +103891,7 @@ const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvail
 }) });
 
 //#endregion
-//#region src/components/PasswordInput/index.tsx
+//#region src/components/passwordInput/index.tsx
 const PasswordInput = ({ ...props }) => /* @__PURE__ */ jsx(TextInput, {
 	password: true,
 	enablePasswordManagerAutofill: true,
@@ -109307,7 +109384,7 @@ function safePolygon(options$1) {
 }
 
 //#endregion
-//#region src/components/Popover/index.tsx
+//#region src/components/popover/index.tsx
 const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style: style$1 = "card", className }, ref) => {
 	const [isOpen, setIsOpen] = useState(passedOpen);
 	const isMobile = true;
@@ -109383,7 +109460,7 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
 });
 
 //#endregion
-//#region src/components/ProgressBar/index.tsx
+//#region src/components/progressBar/index.tsx
 const ProgressBar = ({ value, maxValue = 100, className }) => {
 	const [width, setWidth] = useState(0);
 	useEffect(() => {
@@ -109399,7 +109476,7 @@ const ProgressBar = ({ value, maxValue = 100, className }) => {
 };
 
 //#endregion
-//#region src/components/RadioButton/index.tsx
+//#region src/components/radioButton/index.tsx
 const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, className, containerClassName, labelClassName,...props }) => /* @__PURE__ */ jsxs("div", {
 	className: `${containerClassName || "radio-button-container"} relative flex items-start`,
 	children: [/* @__PURE__ */ jsxs("div", {
@@ -109571,7 +109648,7 @@ const IconStarHalfFilled = (props) => /* @__PURE__ */ jsxs("svg", {
 });
 
 //#endregion
-//#region src/components/Rating/index.tsx
+//#region src/components/rating/index.tsx
 const Rating = ({ rating, size: size$3 = "normal", setReview, className, setReviewError, error: error$1 }) => {
 	const [hoveredStars, setHoveredStars] = useState(0);
 	const [hoveredSmallStars, setHoveredSmallStars] = useState(0);
@@ -109677,7 +109754,7 @@ const Rating = ({ rating, size: size$3 = "normal", setReview, className, setRevi
 };
 
 //#endregion
-//#region src/components/RegionSelector/index.tsx
+//#region src/components/regionSelector/index.tsx
 const RegionSelector = ({ title, regions,...props }) => {
 	if (regions?.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -109697,7 +109774,7 @@ const RegionSelector = ({ title, regions,...props }) => {
 RegionSelector.displayName = "RegionSelector";
 
 //#endregion
-//#region src/components/Reviews/index.tsx
+//#region src/components/reviews/index.tsx
 const ReviewsLine = ({ maxValue, amount, countStarsText }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex w-full flex-row place-content-center gap-5 align-middle",
 	children: [
@@ -109758,7 +109835,7 @@ const Reviews = ({ totalRatings, averageRating, aggregatedRating, countStarsText
 });
 
 //#endregion
-//#region src/components/ScrollToTop/index.tsx
+//#region src/components/scrollToTop/index.tsx
 const ScrollToTop = ({ scrollToTopTitle }) => {
 	const [isVisible, setIsVisible] = useState(false);
 	const showScrollToTopButtonPosition = 20;
@@ -109789,7 +109866,7 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 };
 
 //#endregion
-//#region src/components/SearchInput/index.tsx
+//#region src/components/searchInput/index.tsx
 const SearchInput = () => /* @__PURE__ */ jsx(TextInput, {
 	className: "w-full lg:w-auto lg:min-w-[23.75rem]",
 	rightSection: /* @__PURE__ */ jsx(IconSearch, {
@@ -115354,7 +115431,7 @@ var NonceProvider = function(_ref$1) {
 };
 
 //#endregion
-//#region src/components/Select/index.tsx
+//#region src/components/select/index.tsx
 const LANGUAGE_FLAGS = [
 	{
 		value: "nl-NL",
@@ -115530,7 +115607,7 @@ const Select = forwardRef(({ options: options$1, placeholder, defaultValue, labe
 Select.displayName = "Select";
 
 //#endregion
-//#region src/components/SettingsCard/index.tsx
+//#region src/components/settingsCard/index.tsx
 const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @__PURE__ */ jsxs("div", {
 	"data-component": "SettingsCard",
 	className: "flex items-center justify-between gap-2 bg-white px-8 py-4 shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)] md:px-4 lg:px-8",
@@ -115548,14 +115625,14 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
 });
 
 //#endregion
-//#region src/components/Skeleton/index.tsx
+//#region src/components/skeleton/index.tsx
 const Skeleton = ({ className }) => /* @__PURE__ */ jsx("span", {
 	"data-component": "genericSkeleton",
 	className: cn("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
 });
 
 //#endregion
-//#region src/components/SkillPill/index.tsx
+//#region src/components/skillPill/index.tsx
 const SkillPill = ({ name, number }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center rounded-full border border-gray-200 p-[3px]",
 	children: [/* @__PURE__ */ jsx("span", {
@@ -115568,7 +115645,97 @@ const SkillPill = ({ name, number }) => /* @__PURE__ */ jsxs("div", {
 });
 
 //#endregion
-//#region src/components/StickyMobileButton/index.tsx
+//#region src/components/stepper/NumberedStepper.tsx
+const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLabel, onStepClick }) => /* @__PURE__ */ jsx("div", {
+	"data-testid": "numbered-stepper-container",
+	className: clsx_default("flex w-full flex-col items-start gap-2 md:flex-row md:items-center md:gap-7", className),
+	children: steps.map((step, index$4) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-testid": `stepper-step-${index$4}`,
+		onClick: () => index$4 < active ? onStepClick(index$4) : null,
+		className: `${index$4 < active && "cursor-pointer"} flex w-auto`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-auto flex-row gap-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex size-12 flex-auto items-center justify-center whitespace-nowrap",
+				children: /* @__PURE__ */ jsx("div", {
+					"data-testid": `stepper-number-${index$4}`,
+					className: `grid size-12 place-content-center rounded-full leading-[36px]! md:leading-[40px]! ${index$4 === 0 && active === 1 ? "bg-light-blue text-white" : "bg-transparent!"} ${index$4 <= active ? "border-light-blue text-light-blue border" : "border border-gray-500 text-gray-500"} align-middle font-["Gotham"] font-bold md:text-2xl`,
+					children: index$4 + 1
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-auto flex-col justify-center",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-testid": `stepper-label-${index$4}`,
+					className: `content-center text-sm font-medium! whitespace-nowrap md:text-lg md:font-bold ${index$4 <= active ? "text-gray-900" : "text-gray-500"}`,
+					children: step.label
+				}), /* @__PURE__ */ jsxs("span", { children: [completedLabel && active === 1 && index$4 === 0 && stepsCompleted.length > 0 ? /* @__PURE__ */ jsxs("span", {
+					className: "text-green flex items-center text-xs font-medium",
+					children: [
+						completedLabel,
+						" ",
+						/* @__PURE__ */ jsx(IconCheck, {
+							className: "align-middle",
+							size: 12
+						})
+					]
+				}) : /* @__PURE__ */ jsx(Fragment$1, {}), " "] })]
+			})]
+		})
+	}), index$4 < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `my-2 ml-6 flex h-[24px] w-px align-middle md:ml-0 md:h-px md:w-auto md:flex-1 ${active === 1 ? "bg-light-blue" : "bg-[#CCCCCC]"}` })] }, index$4))
+});
+
+//#endregion
+//#region src/components/stepper/Stepper.tsx
+const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableSteps, completedSteps, activeStep, isMobile, className }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "stepper-container",
+		className: clsx_default("flex w-full justify-start", className),
+		children: steps?.map((step, index$4) => {
+			const isClickable = index$4 <= activeStep && clickableSteps?.includes(index$4);
+			const isCompleted = completedSteps?.includes(index$4);
+			return /* @__PURE__ */ jsx("div", {
+				"data-testid": `stepper-step-${index$4}`,
+				className: "flex w-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "relative flex w-full justify-center",
+					children: /* @__PURE__ */ jsxs("div", {
+						"data-testid": `stepper-step-container-${index$4}`,
+						className: `mr-2 flex w-36 flex-col items-center ${variant === "small" || isMobile ? "gap-0.5" : "gap-3"}`,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								"data-testid": `stepper-step-circle-${index$4}`,
+								onClick: () => isClickable && setStep(index$4),
+								className: cn("relative z-10 flex size-8 items-center justify-center rounded-full border border-gray-500 bg-white text-gray-500", {
+									"size-5": variant === "small" || isMobile,
+									"cursor-pointer": isClickable,
+									"cursor-not-allowed": clickableSteps && !clickableSteps.includes(index$4),
+									"border-light-blue text-light-blue": index$4 === activeStep,
+									"border-light-blueDisabled bg-light-blueDisabled border text-white": isCompleted,
+									"border-light-blue bg-light-blue": index$4 < activeStep
+								}),
+								children: [(index$4 < activeStep || isCompleted) && /* @__PURE__ */ jsx("div", {
+									className: "flex items-center justify-center text-white",
+									children: /* @__PURE__ */ jsx(IconCheck, { size: variant === "small" || isMobile ? 7 : 12 })
+								}), index$4 === activeStep && /* @__PURE__ */ jsx("div", { className: `${variant === "small" || isMobile ? "size-1" : "size-2"} bg-light-blue rounded-full` })]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap items-center justify-center",
+								children: /* @__PURE__ */ jsx("span", {
+									className: `text-center ${variant === "small" || isMobile ? "text-xs-fields" : "text-sm font-normal"} ${index$4 <= activeStep ? "text-gray-900" : "text-gray-500"}`,
+									children: step.label
+								})
+							}),
+							index$4 < steps.length && index$4 !== 0 && /* @__PURE__ */ jsx("div", { className: `${variant === "small" || isMobile ? "top-2.5" : "top-4"} absolute z-0 h-px w-full -translate-x-1/2 ${index$4 < activeStep + 1 ? "bg-light-blue" : "bg-gray-200"}` })
+						]
+					})
+				})
+			}, index$4);
+		})
+	});
+};
+
+//#endregion
+//#region src/components/stickyMobileButton/index.tsx
 const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
 	className: "fixed inset-x-0 bottom-0 z-40 w-full bg-white p-8 md:hidden",
 	children: /* @__PURE__ */ jsx("div", {
@@ -115578,7 +115745,7 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
 });
 
 //#endregion
-//#region src/components/Table/index.tsx
+//#region src/components/table/index.tsx
 const Table = ({ children, className }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "table",
 	className: cn("table w-full table-fixed border-collapse overflow-auto", className),
@@ -115586,7 +115753,7 @@ const Table = ({ children, className }) => /* @__PURE__ */ jsx("div", {
 });
 
 //#endregion
-//#region src/components/TableCell/index.tsx
+//#region src/components/table/tableCell/index.tsx
 const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "tableCell",
 	className: `${cn("table-cell py-2 align-middle text-sm font-normal first:pl-2 last:pr-2 md:py-0 md:xl:first:pl-10 md:xl:last:pr-10", { "md:xl:first:pl-5 md:xl:last:pr-5": smallPadding }, className)}`,
@@ -115594,7 +115761,7 @@ const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ jsx
 });
 
 //#endregion
-//#region src/components/TableHeader/index.tsx
+//#region src/components/table/tableHeader/index.tsx
 const TableHeader = ({ children }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "tableHeader",
 	className: "table-header-group border-b border-gray-200",
@@ -115602,14 +115769,14 @@ const TableHeader = ({ children }) => /* @__PURE__ */ jsx("div", {
 });
 
 //#endregion
-//#region src/components/TableHeaderItem/index.tsx
+//#region src/components/table/tableHeaderItem/index.tsx
 const TableHeaderItem = ({ children, smallPadding, className }) => /* @__PURE__ */ jsx("div", {
 	className: cn("hidden h-10 align-middle text-xs font-medium first:pl-10 last:pr-10 xl:table-cell", { "xl:first:pl-5 xl:last:pr-5": smallPadding }, className),
 	children
 });
 
 //#endregion
-//#region src/components/TableHeaderRow/index.tsx
+//#region src/components/table/tableHeaderRow/index.tsx
 const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "tableHeaderRow",
 	className: "table-row xl:border-0 xl:border-b xl:border-solid xl:border-gray-300",
@@ -115618,7 +115785,7 @@ const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ jsx("div", {
 });
 
 //#endregion
-//#region src/components/TableRow/index.tsx
+//#region src/components/table/tableRow/index.tsx
 const TableRow = forwardRef(({ children, className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	"data-component": "tableRow",
@@ -115628,7 +115795,7 @@ const TableRow = forwardRef(({ children, className,...props }, ref) => /* @__PUR
 }));
 
 //#endregion
-//#region src/components/TextArea/index.tsx
+//#region src/components/textArea/index.tsx
 const Textarea = forwardRef(({ className, label, error: error$1, rows = 8,...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: "relative grid gap-2",
 	children: [
@@ -115651,7 +115818,7 @@ const Textarea = forwardRef(({ className, label, error: error$1, rows = 8,...pro
 }));
 
 //#endregion
-//#region src/components/ThemeIcon/index.tsx
+//#region src/components/themeIcon/index.tsx
 const ThemeIcon = forwardRef(({ styleVariant = "black", className, icon, adjustedSize, title,...props }, ref) => {
 	const classNames$1 = cn("bg-transparent h-9 w-9 rounded-[5px] grid place-content-center", {
 		"text-black": styleVariant === COLOR.BLACK,
@@ -115679,7 +115846,7 @@ const ThemeIcon = forwardRef(({ styleVariant = "black", className, icon, adjuste
 });
 
 //#endregion
-//#region src/components/Toggle/index.tsx
+//#region src/components/toggle/index.tsx
 const Toggle = ({ onClick, value, disabled = false }) => {
 	const handleToggle = (e$1) => {
 		e$1.stopPropagation();
@@ -115696,7 +115863,7 @@ const Toggle = ({ onClick, value, disabled = false }) => {
 };
 
 //#endregion
-//#region src/components/Tooltip/index.tsx
+//#region src/components/tooltip/index.tsx
 const sizeClasses = {
 	xs: "max-w-xs",
 	sm: "max-w-sm",
@@ -115779,7 +115946,7 @@ const Tooltip = ({ content, children, passedOpen = false, size: size$3 = "md", v
 Tooltip.displayName = "Tooltip";
 
 //#endregion
-//#region src/components/TruncatedText/index.tsx
+//#region src/components/truncatedText/index.tsx
 const TruncatedText = ({ text, limit = 20 }) => {
 	const [truncatedText, setTruncatedText] = useState(text);
 	useEffect(() => {
@@ -115802,7 +115969,7 @@ const TruncatedText = ({ text, limit = 20 }) => {
 };
 
 //#endregion
-//#region src/components/UnorderedList/index.tsx
+//#region src/components/unorderedList/index.tsx
 const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PURE__ */ jsxs("ul", {
 	className: cn("m-0 last:border-none", className),
 	"data-component": "unorderedList",
@@ -115814,7 +115981,7 @@ const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PU
 });
 
 //#endregion
-//#region src/components/UnorderedListItem/index.tsx
+//#region src/components/unorderedListItem/index.tsx
 const UnorderedListItem = ({ children, actionItem, className, header = false,...props }) => /* @__PURE__ */ jsxs("li", {
 	...props,
 	"data-component": "unorderedListItem",
@@ -139896,7 +140063,7 @@ const StarterKit = Extension.create({
 });
 
 //#endregion
-//#region src/components/WysiwygEditor/index.tsx
+//#region src/components/wysiwygEditor/index.tsx
 const BoldIcon = () => /* @__PURE__ */ jsx(IconBold, {
 	size: 18,
 	stroke: 1.5
@@ -140008,5 +140175,5 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 });
 
 //#endregion
-export { ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Checkbox, Divider, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, Label, LinkText, Loader, LogoBlack, Modal, NumberField, PageUnavailable, PasswordInput, Popover, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, ThemeIcon, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor };
+export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Checkbox, Divider, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, Label, LinkText, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, Popover, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, ThemeIcon, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor };
 //# sourceMappingURL=index.js.map