@youngonesworks/ui 0.1.1 → 0.1.5

package/dist/index.cjs

@@ -31,7 +31,7 @@ const react_dom = __toESM(require("react-dom"));
 //#region src/jsx-runtime-shim.ts
 const jsx$2 = react.createElement;
 const jsxs$1 = react.createElement;
-const Fragment$3 = react.Fragment;
+const Fragment$4 = react.Fragment;
 
 //#endregion
 //#region node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -4702,7 +4702,7 @@ function formatIcon(icon, defaultFormatAttributes) {
 }
 
 //#endregion
-//#region src/components/ActionIcon/index.tsx
+//#region src/components/actionIcon/index.tsx
 const ActionIcon = (0, react.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,
@@ -4733,7 +4733,7 @@ const ActionIcon = (0, react.forwardRef)(({ title, disabled = false, styleVarian
 });
 
 //#endregion
-//#region src/components/AppleAppButtonIcon/index.tsx
+//#region src/components/appleAppButtonIcon/index.tsx
 const AppleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	viewBox: "0 0 198 66",
 	fill: "none",
@@ -5019,7 +5019,7 @@ var require_react_is_development = __commonJS({ "node_modules/react-is/cjs/react
 			var ContextProvider = REACT_PROVIDER_TYPE;
 			var Element$1 = REACT_ELEMENT_TYPE;
 			var ForwardRef = REACT_FORWARD_REF_TYPE;
-			var Fragment$4 = REACT_FRAGMENT_TYPE;
+			var Fragment$5 = REACT_FRAGMENT_TYPE;
 			var Lazy = REACT_LAZY_TYPE;
 			var Memo = REACT_MEMO_TYPE;
 			var Portal = REACT_PORTAL_TYPE;
@@ -5078,7 +5078,7 @@ var require_react_is_development = __commonJS({ "node_modules/react-is/cjs/react
 			exports.ContextProvider = ContextProvider;
 			exports.Element = Element$1;
 			exports.ForwardRef = ForwardRef;
-			exports.Fragment = Fragment$4;
+			exports.Fragment = Fragment$5;
 			exports.Lazy = Lazy;
 			exports.Memo = Memo;
 			exports.Portal = Portal;
@@ -103020,7 +103020,7 @@ var IconZzz = createReactComponent("zzz", "IconZzz", [["path", {
 }]]);
 
 //#endregion
-//#region src/components/TextInput/index.tsx
+//#region src/components/textInput/index.tsx
 const TextInput = (0, react.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.default.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -103082,7 +103082,7 @@ const TextInput = (0, react.forwardRef)(({ rightSection, leftSection, className,
 });
 
 //#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__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "relative mb-8",
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
@@ -103103,7 +103103,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] = (0, react.useState)();
 	const icon = () => {
@@ -103153,7 +103153,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 = (0, react.forwardRef)(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setIsActive(active);
+	}, [active]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+					onClick: () => setIsActive(!isActive$1),
+					className: `duration-300${isActive$1 ? "rotate-180" : ""}`,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronDown, { size: 18 })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "px-4 py-3",
+				children: panelContent
+			})
+		})]
+	}) });
+};
+
+//#endregion
+//#region src/components/accordion/AccordionWrapper.tsx
+const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -103178,7 +103239,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__ */ (0, react_jsx_runtime.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",
@@ -103189,7 +103250,7 @@ const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, r
 });
 
 //#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__ */ (0, react_jsx_runtime.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 && {
@@ -103223,7 +103284,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__ */ (0, react_jsx_runtime.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", {
@@ -103242,7 +103303,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__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: classNames$1,
@@ -103251,7 +103312,7 @@ const LinkText = ({ children, classNames: classNames$1 }) => /* @__PURE__ */ (0,
 LinkText.displayName = "LinkText";
 
 //#endregion
-//#region src/components/BreadCrumb/index.tsx
+//#region src/components/breadCrumb/index.tsx
 const BreadCrumb = ({ text }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkText, {
 	"data-component": "BreadCrumb",
 	classNames: "flex items-center",
@@ -103260,7 +103321,7 @@ const BreadCrumb = ({ text }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link
 BreadCrumb.displayName = "BreadCrumb";
 
 //#endregion
-//#region src/components/Checkbox/index.tsx
+//#region src/components/checkbox/index.tsx
 const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -103316,7 +103377,7 @@ const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error:
 Checkbox.displayName = "Checkbox";
 
 //#endregion
-//#region src/components/Divider/index.tsx
+//#region src/components/divider/index.tsx
 const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "divider",
 	className: clsx_default("block h-px w-full bg-[#CCCCCC]", className),
@@ -103324,7 +103385,7 @@ const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtim
 });
 
 //#endregion
-//#region src/components/GoogleAppButtonIcon/index.tsx
+//#region src/components/googleAppButtonIcon/index.tsx
 const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	viewBox: "0 0 224 66",
 	fill: "none",
@@ -103509,18 +103570,7 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx
 });
 
 //#endregion
-//#region src/components/UnstyledButton/index.tsx
-const UnstyledButton = (0, react.forwardRef)(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.forwardRef)(({ menuState, setMenuState }, ref) => {
 	const defaultClasses = cn("absolute h-[2px] bg-white duration-150");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
@@ -103540,7 +103590,7 @@ const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState },
 HamburgerMenuButton.displayName = "HamburgerMenuButton";
 
 //#endregion
-//#region src/components/HR/index.tsx
+//#region src/components/hr/index.tsx
 const HR = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
 	"data-component": "hr",
 	className: `h-px w-full border-none bg-gray-200 ${className}`
@@ -103548,7 +103598,7 @@ const HR = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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", {
@@ -103561,7 +103611,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__ */ (0, react_jsx_runtime.jsx)("label", {
 	"data-component": "label",
 	className: cn("flex items-center gap-1 text-xs font-medium text-black", className),
@@ -103570,7 +103620,7 @@ const Label = ({ children, className,...props }) => /* @__PURE__ */ (0, react_js
 });
 
 //#endregion
-//#region src/components/Loader/index.tsx
+//#region src/components/loader/index.tsx
 const Loader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: "inline-flex h-full w-auto items-center justify-center",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "loader" })
@@ -103578,7 +103628,7 @@ const Loader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 Loader.displayName = "Loader";
 
 //#endregion
-//#region src/components/Logo/index.tsx
+//#region src/components/logo/index.tsx
 const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	viewBox: "0 0 110 68",
 	fill: "none",
@@ -103644,7 +103694,7 @@ const LogoBlack = (props) => /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useRef)(null);
 	const refContainer = (0, react.useRef)(null);
@@ -103741,7 +103791,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__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "flex items-center overflow-hidden rounded border border-gray-200",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(IconChevronLeft, {
+				size: 20,
+				className: onPrev ? "text-gray-500" : "text-gray-200"
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-6 w-[0.8px] bg-gray-200" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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$2) => {
 		const newValue = parseInt(e$2.target.value, 10);
@@ -103798,7 +103875,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__ */ (0, react_jsx_runtime.jsx)(Island, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "mx-auto grid max-w-[900px] justify-items-center gap-8 text-center",
 	children: [
@@ -103812,7 +103889,7 @@ const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvail
 }) });
 
 //#endregion
-//#region src/components/PasswordInput/index.tsx
+//#region src/components/passwordInput/index.tsx
 const PasswordInput = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
 	password: true,
 	enablePasswordManagerAutofill: true,
@@ -109305,7 +109382,7 @@ function safePolygon(options$1) {
 }
 
 //#endregion
-//#region src/components/Popover/index.tsx
+//#region src/components/popover/index.tsx
 const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style: style$1 = "card", className }, ref) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
 	const isMobile = true;
@@ -109381,7 +109458,7 @@ const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false
 });
 
 //#endregion
-//#region src/components/ProgressBar/index.tsx
+//#region src/components/progressBar/index.tsx
 const ProgressBar = ({ value, maxValue = 100, className }) => {
 	const [width, setWidth] = (0, react.useState)(0);
 	(0, react.useEffect)(() => {
@@ -109397,7 +109474,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: `${containerClassName || "radio-button-container"} relative flex items-start`,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -109569,7 +109646,7 @@ const IconStarHalfFilled = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs
 });
 
 //#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] = (0, react.useState)(0);
 	const [hoveredSmallStars, setHoveredSmallStars] = (0, react.useState)(0);
@@ -109675,7 +109752,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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -109695,7 +109772,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "flex w-full flex-row place-content-center gap-5 align-middle",
 	children: [
@@ -109756,7 +109833,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] = (0, react.useState)(false);
 	const showScrollToTopButtonPosition = 20;
@@ -109787,7 +109864,7 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 };
 
 //#endregion
-//#region src/components/SearchInput/index.tsx
+//#region src/components/searchInput/index.tsx
 const SearchInput = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
 	className: "w-full lg:w-auto lg:min-w-[23.75rem]",
 	rightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSearch, {
@@ -111731,9 +111808,9 @@ var jsx = function jsx$3(type, props) {
 	}
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$56) {
+(function(_jsx$61) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$56.JSX || (_jsx$56.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$61.JSX || (_jsx$61.JSX = {})));
 })(jsx || (jsx = {}));
 var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
 	var styles = props.styles;
@@ -115352,7 +115429,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",
@@ -115528,7 +115605,7 @@ const Select = (0, react.forwardRef)(({ options: options$1, placeholder, default
 Select.displayName = "Select";
 
 //#endregion
-//#region src/components/SettingsCard/index.tsx
+//#region src/components/settingsCard/index.tsx
 const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -115546,14 +115623,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "flex items-center rounded-full border border-gray-200 p-[3px]",
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -115566,7 +115643,97 @@ const SkillPill = ({ name, number }) => /* @__PURE__ */ (0, react_jsx_runtime.js
 });
 
 //#endregion
-//#region src/components/StickyMobileButton/index.tsx
+//#region src/components/stepper/NumberedStepper.tsx
+const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLabel, onStepClick }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-auto flex-row gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex size-12 flex-auto items-center justify-center whitespace-nowrap",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-auto flex-col justify-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", { children: [completedLabel && active === 1 && index$4 === 0 && stepsCompleted.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-green flex items-center text-xs font-medium",
+					children: [
+						completedLabel,
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCheck, {
+							className: "align-middle",
+							size: 12
+						})
+					]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}), " "] })]
+			})]
+		})
+	}), index$4 < steps.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": `stepper-step-${index$4}`,
+				className: "flex w-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative flex w-full justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "flex items-center justify-center text-white",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCheck, { size: variant === "small" || isMobile ? 7 : 12 })
+								}), index$4 === activeStep && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${variant === "small" || isMobile ? "size-1" : "size-2"} bg-light-blue rounded-full` })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex flex-wrap items-center justify-center",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: "fixed inset-x-0 bottom-0 z-40 w-full bg-white p-8 md:hidden",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -115576,7 +115743,7 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_js
 });
 
 //#endregion
-//#region src/components/Table/index.tsx
+//#region src/components/table/index.tsx
 const Table = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "table",
 	className: cn("table w-full table-fixed border-collapse overflow-auto", className),
@@ -115584,7 +115751,7 @@ const Table = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime
 });
 
 //#endregion
-//#region src/components/TableCell/index.tsx
+//#region src/components/table/tableCell/index.tsx
 const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ (0, react_jsx_runtime.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)}`,
@@ -115592,7 +115759,7 @@ const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ (0,
 });
 
 //#endregion
-//#region src/components/TableHeader/index.tsx
+//#region src/components/table/tableHeader/index.tsx
 const TableHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "tableHeader",
 	className: "table-header-group border-b border-gray-200",
@@ -115600,14 +115767,14 @@ const TableHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)
 });
 
 //#endregion
-//#region src/components/TableHeaderItem/index.tsx
+//#region src/components/table/tableHeaderItem/index.tsx
 const TableHeaderItem = ({ children, smallPadding, className }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "tableHeaderRow",
 	className: "table-row xl:border-0 xl:border-b xl:border-solid xl:border-gray-300",
@@ -115616,7 +115783,7 @@ const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_
 });
 
 //#endregion
-//#region src/components/TableRow/index.tsx
+//#region src/components/table/tableRow/index.tsx
 const TableRow = (0, react.forwardRef)(({ children, className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
 	"data-component": "tableRow",
@@ -115626,7 +115793,7 @@ const TableRow = (0, react.forwardRef)(({ children, className,...props }, ref) =
 }));
 
 //#endregion
-//#region src/components/TextArea/index.tsx
+//#region src/components/textArea/index.tsx
 const Textarea = (0, react.forwardRef)(({ className, label, error: error$1, rows = 8,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: "relative grid gap-2",
 	children: [
@@ -115649,7 +115816,7 @@ const Textarea = (0, react.forwardRef)(({ className, label, error: error$1, rows
 }));
 
 //#endregion
-//#region src/components/ThemeIcon/index.tsx
+//#region src/components/themeIcon/index.tsx
 const ThemeIcon = (0, react.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,
@@ -115677,7 +115844,7 @@ const ThemeIcon = (0, react.forwardRef)(({ styleVariant = "black", className, ic
 });
 
 //#endregion
-//#region src/components/Toggle/index.tsx
+//#region src/components/toggle/index.tsx
 const Toggle = ({ onClick, value, disabled = false }) => {
 	const handleToggle = (e$2) => {
 		e$2.stopPropagation();
@@ -115694,7 +115861,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",
@@ -115777,7 +115944,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] = (0, react.useState)(text);
 	(0, react.useEffect)(() => {
@@ -115800,7 +115967,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__ */ (0, react_jsx_runtime.jsxs)("ul", {
 	className: cn("m-0 last:border-none", className),
 	"data-component": "unorderedList",
@@ -115812,7 +115979,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__ */ (0, react_jsx_runtime.jsxs)("li", {
 	...props,
 	"data-component": "unorderedListItem",
@@ -136567,7 +136734,7 @@ function requireUseSyncExternalStoreShim_development() {
 				return x$2 === y$2 && (x$2 !== 0 || 1 / x$2 === 1 / y$2) || x$2 !== x$2 && y$2 !== y$2;
 			}
 			var objectIs = typeof Object.is === "function" ? Object.is : is;
-			var useState$11 = React$1$1.useState, useEffect$8 = React$1$1.useEffect, useLayoutEffect$4 = React$1$1.useLayoutEffect, useDebugValue$1 = React$1$1.useDebugValue;
+			var useState$12 = React$1$1.useState, useEffect$9 = React$1$1.useEffect, useLayoutEffect$4 = React$1$1.useLayoutEffect, useDebugValue$1 = React$1$1.useDebugValue;
 			var didWarnOld18Alpha = false;
 			var didWarnUncachedGetSnapshot = false;
 			function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
@@ -136589,7 +136756,7 @@ function requireUseSyncExternalStoreShim_development() {
 						}
 					}
 				}
-				var _useState = useState$11({ inst: {
+				var _useState = useState$12({ inst: {
 					value,
 					getSnapshot
 				} }), inst = _useState[0].inst, forceUpdate = _useState[1];
@@ -136604,7 +136771,7 @@ function requireUseSyncExternalStoreShim_development() {
 					value,
 					getSnapshot
 				]);
-				useEffect$8(function() {
+				useEffect$9(function() {
 					if (checkIfSnapshotChanged(inst)) {
 						forceUpdate({ inst });
 					}
@@ -136925,7 +137092,7 @@ function requireWithSelector_development() {
 			}
 			var objectIs = typeof Object.is === "function" ? Object.is : is;
 			var useSyncExternalStore = shim$1.useSyncExternalStore;
-			var useRef$5 = React$1$1.useRef, useEffect$8 = React$1$1.useEffect, useMemo$3 = React$1$1.useMemo, useDebugValue$1 = React$1$1.useDebugValue;
+			var useRef$5 = React$1$1.useRef, useEffect$9 = React$1$1.useEffect, useMemo$3 = React$1$1.useMemo, useDebugValue$1 = React$1$1.useDebugValue;
 			function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual$1) {
 				var instRef = useRef$5(null);
 				var inst;
@@ -136987,7 +137154,7 @@ function requireWithSelector_development() {
 					isEqual$1
 				]), getSelection$1 = _useMemo[0], getServerSelection = _useMemo[1];
 				var value = useSyncExternalStore(subscribe, getSelection$1, getServerSelection);
-				useEffect$8(function() {
+				useEffect$9(function() {
 					inst.hasValue = true;
 					inst.value = value;
 				}, [value]);
@@ -139894,7 +140061,7 @@ const StarterKit = Extension.create({
 });
 
 //#endregion
-//#region src/components/WysiwygEditor/index.tsx
+//#region src/components/wysiwygEditor/index.tsx
 const BoldIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconBold, {
 	size: 18,
 	stroke: 1.5
@@ -140006,6 +140173,8 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 });
 
 //#endregion
+exports.AccordionItem = AccordionItem;
+exports.AccordionWrapper = AccordionWrapper;
 exports.ActionIcon = ActionIcon;
 exports.Alert = Alert;
 exports.AppleAppButtonIcon = AppleAppButtonIcon;
@@ -140026,7 +140195,9 @@ exports.LinkText = LinkText;
 exports.Loader = Loader;
 exports.LogoBlack = LogoBlack;
 exports.Modal = Modal;
+exports.NavButtons = NavButtons;
 exports.NumberField = NumberField;
+exports.NumberedStepper = NumberedStepper;
 exports.PageUnavailable = PageUnavailable;
 exports.PasswordInput = PasswordInput;
 exports.Popover = Popover;
@@ -140041,6 +140212,7 @@ exports.Select = Select;
 exports.SettingsCard = SettingsCard;
 exports.Skeleton = Skeleton;
 exports.SkillPill = SkillPill;
+exports.Stepper = Stepper;
 exports.StickyMobileButtonWrapper = StickyMobileButtonWrapper;
 exports.Table = Table;
 exports.TableCell = TableCell;