@ikas/code-components-mcp 0.94.0 → 0.96.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/data/framework.json +7 -7
  2. package/data/section-templates.json +323 -108
  3. package/data/storefront-api.json +1 -717
  4. package/data/storefront-types.json +1 -1
  5. package/package.json +1 -1
package/data/storefront-api.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "generatedAt": "2026-04-03T10:04:22.997Z",
2
+ "generatedAt": "2026-04-06T10:51:47.140Z",
3
3
  "functions": [
4
4
  {
5
5
  "name": "apiListBlog",
@@ -16616,89 +16616,9 @@
16616
16616
  "filename": "styles.css",
16617
16617
  "content": "/* ── Account Info Section (Layout) ── */\n.kombos-account-info {\n width: 100%;\n}\n\n.kombos-account-info__container {\n padding-top: 1rem;\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.kombos-account-info__content {\n flex: 1;\n min-width: 0;\n}\n\n/* ── Tablet (768px+) ── */\n@media (min-width: 768px) {\n .kombos-account-info__container {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n/* ── Desktop (1024px+) ── */\n@media (min-width: 1024px) {\n .kombos-account-info__container {\n padding-top: 2rem;\n padding-bottom: 2rem;\n flex-direction: row;\n gap: 7.75rem;\n }\n}\n"
16618
16618
  },
16619
- {
16620
- "filename": "sub-components/Breadcrumb/index.tsx",
16621
- "content": "import { cx } from \"../../utils/cx\";\nimport { CaretRightSVG } from \"../icons\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\ninterface Props {\n items: BreadcrumbItem[];\n size?: \"sm\" | \"xs\";\n className?: string;\n}\n\nexport default function Breadcrumb({ items, size = \"sm\", className }: Props) {\n if (items.length === 0) return null;\n\n const typographyClass = size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\";\n\n return (\n <nav className={cx(\"kombos-breadcrumb\", className)}>\n {items.map((item, i) => {\n const isLast = i === items.length - 1;\n return (\n <span key={item.href ?? item.label} className=\"kombos-breadcrumb__item\">\n {item.href ? (\n <a\n href={item.href}\n className={cx(\"kombos-breadcrumb__link\", typographyClass, isLast && \"kombos-breadcrumb__link--active\")}\n >\n {item.label}\n </a>\n ) : item.onClick ? (\n <button\n type=\"button\"\n onClick={item.onClick}\n className={cx(\"kombos-breadcrumb__link\", \"kombos-breadcrumb__link-btn\", typographyClass)}\n >\n {item.label}\n </button>\n ) : (\n <span className={cx(\"kombos-breadcrumb__current\", typographyClass)}>\n {item.label}\n </span>\n )}\n {!isLast && (\n <span className={cx(\"kombos-breadcrumb__sep\", size === \"xs\" && \"kombos-breadcrumb__sep--xs\")}>\n <CaretRightSVG />\n </span>\n )}\n </span>\n );\n })}\n </nav>\n );\n}\n"
16622
- },
16623
- {
16624
- "filename": "sub-components/Breadcrumb/styles.css",
16625
- "content": "/* ===== Breadcrumb Sub-Component ===== */\n.kombos-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__link {\n color: var(--kombos-gray-500);\n text-decoration: none;\n}\n\n.kombos-breadcrumb__link:hover {\n text-decoration: underline;\n}\n\n.kombos-breadcrumb__link-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.kombos-breadcrumb__link--active {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__current {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__sep {\n font-size: 0.75rem;\n color: var(--kombos-gray-400);\n display: inline-flex;\n align-items: center;\n}\n\n.kombos-breadcrumb__sep--xs {\n font-size: 0.625rem;\n color: var(--kombos-gray-300);\n}\n"
16626
- },
16627
- {
16628
- "filename": "sub-components/Button/index.tsx",
16629
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
16630
- },
16631
- {
16632
- "filename": "sub-components/Button/styles.css",
16633
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
16634
- },
16635
- {
16636
- "filename": "sub-components/ConfirmModal/index.tsx",
16637
- "content": "import { useState } from \"preact/hooks\";\nimport Modal from \"../Modal\";\nimport Button from \"../Button\";\n\ninterface Props {\n title: string;\n message: string;\n cancelText: string;\n confirmText: string;\n confirmVariant?: \"primary\" | \"dangerous\";\n onClose: () => void;\n onConfirm: () => Promise<void> | void;\n}\n\nexport default function ConfirmModal({\n title,\n message,\n cancelText,\n confirmText,\n confirmVariant = \"dangerous\",\n onClose,\n onConfirm,\n}: Props) {\n const [isLoading, setIsLoading] = useState(false);\n\n const handleConfirm = async () => {\n setIsLoading(true);\n await onConfirm();\n };\n\n return (\n <Modal onClose={onClose} title={title} maxWidth=\"25rem\" footer={null}>\n <div className=\"confirm-modal\">\n <p className=\"confirm-modal__message text-md-regular\">{message}</p>\n <div className=\"confirm-modal__actions\">\n <Button\n variant=\"secondary\"\n size=\"s\"\n type=\"button\"\n onClick={onClose}\n disabled={isLoading}\n className=\"confirm-modal__btn\"\n >\n {cancelText}\n </Button>\n <Button\n variant={confirmVariant}\n size=\"s\"\n type=\"button\"\n onClick={handleConfirm}\n disabled={isLoading}\n className=\"confirm-modal__btn\"\n >\n {confirmText}\n </Button>\n </div>\n </div>\n </Modal>\n );\n}\n"
16638
- },
16639
- {
16640
- "filename": "sub-components/ConfirmModal/styles.css",
16641
- "content": "/* ── Confirm Modal ── */\n.confirm-modal {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n text-align: center;\n}\n\n.confirm-modal__message {\n color: var(--kombos-gray-700);\n}\n\n.confirm-modal__actions {\n display: flex;\n gap: 0.75rem;\n}\n\n.confirm-modal__btn {\n flex: 1;\n}\n"
16642
- },
16643
- {
16644
- "filename": "sub-components/FormItem/index.tsx",
16645
- "content": "import type { ComponentChildren } from \"preact\";\nimport { useId } from \"preact/hooks\";\nimport { cx } from \"../../utils/cx\";\nimport { cloneElement, isValidElement } from \"preact\";\n\ntype FormItemStatus = \"default\" | \"error\" | \"success\";\n\ninterface Props {\n label?: ComponentChildren;\n description?: ComponentChildren;\n status?: FormItemStatus;\n helper?: ComponentChildren;\n children: ComponentChildren;\n className?: string;\n htmlFor?: string;\n}\n\nexport default function FormItem({\n label,\n description,\n status = \"default\",\n helper,\n children,\n className,\n htmlFor,\n}: Props) {\n const autoId = useId();\n const helperId = helper ? `${autoId}-helper` : undefined;\n\n const enhancedChildren =\n helperId && isValidElement(children)\n ? cloneElement(children, { \"aria-describedby\": helperId })\n : children;\n\n return (\n <div\n className={cx(\"kombos-form-item\", className)}\n data-state={status !== \"default\" ? status : undefined}\n >\n {label &&\n (htmlFor ? (\n <label\n htmlFor={htmlFor}\n className=\"kombos-form-item__label text-xs-medium\"\n >\n {label}\n </label>\n ) : (\n <span className=\"kombos-form-item__label text-xs-medium\">\n {label}\n </span>\n ))}\n {description && (\n <span className=\"kombos-form-item__description text-xs-regular\">\n {description}\n </span>\n )}\n {enhancedChildren}\n {helper && (\n <span id={helperId} className=\"kombos-form-item__helper text-xs-regular\">\n {helper}\n </span>\n )}\n </div>\n );\n}\n"
16646
- },
16647
- {
16648
- "filename": "sub-components/FormItem/styles.css",
16649
- "content": "/* ===== FormItem Sub-Component ===== */\n\n.kombos-form-item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n/* Label */\n.kombos-form-item__label {\n width: fit-content;\n color: var(--kombos-gray-700);\n}\n\n/* Description */\n.kombos-form-item__description {\n width: fit-content;\n margin-top: -0.25rem;\n color: var(--kombos-gray-500);\n}\n\n\n/* Helper text */\n.kombos-form-item__helper {\n color: var(--kombos-gray-500);\n}\n\n/* === Error state === */\n[data-state=\"error\"] .kombos-form-item__label,\n[data-state=\"error\"] .kombos-form-item__helper {\n color: var(--kombos-error);\n}\n\n/* === Success state === */\n[data-state=\"success\"] .kombos-form-item__helper {\n color: var(--kombos-success);\n}\n"
16650
- },
16651
- {
16652
- "filename": "sub-components/Input/index.tsx",
16653
- "content": "import { useState } from \"preact/hooks\";\nimport type { Ref, InputHTMLAttributes, ComponentChildren } from \"preact\";\nimport { cx } from \"../../utils/cx\";\nimport { EyeSVG, EyeSlashSVG } from \"../icons\";\n\nconst TYPOGRAPHY: Record<string, string> = {\n s: \"text-md-regular\",\n xs: \"text-sm-regular\",\n};\n\ninterface Props extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"label\" | \"icon\"\n> {\n size?: \"xs\" | \"s\";\n status?: \"default\" | \"error\" | \"success\";\n password?: boolean;\n disabled?: boolean;\n leftIcon?: ComponentChildren;\n inputRef?: Ref<HTMLInputElement>;\n}\n\nexport default function Input({\n size = \"s\",\n status = \"default\",\n password = false,\n disabled,\n leftIcon,\n inputRef,\n className,\n value,\n type = \"text\",\n ...rest\n}: Props) {\n const [showPassword, setShowPassword] = useState(false);\n\n const cls = cx(\n \"kombos-input\",\n `kombos-input--${size}`,\n leftIcon && \"kombos-input--with-icon\",\n disabled && \"kombos-input--disabled\",\n className,\n );\n\n return (\n <div className={cls} data-state={status !== \"default\" ? status : undefined}>\n {leftIcon && <span className=\"kombos-input__icon\">{leftIcon}</span>}\n <input\n ref={inputRef}\n className={`kombos-input__native ${TYPOGRAPHY[size]}`}\n type={password ? (showPassword ? \"text\" : \"password\") : type}\n disabled={disabled}\n value={value ?? \"\"}\n {...rest}\n />\n {password && (\n <button\n type=\"button\"\n className=\"kombos-input__toggle\"\n onClick={() => setShowPassword((prev) => !prev)}\n tabIndex={-1}\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n >\n {showPassword ? <EyeSVG /> : <EyeSlashSVG />}\n </button>\n )}\n </div>\n );\n}\n"
16654
- },
16655
- {
16656
- "filename": "sub-components/Input/styles.css",
16657
- "content": "/* ===== Input Sub-Component ===== */\n\n/* --- Base --- */\n.kombos-input {\n display: flex;\n align-items: center;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n background: var(--kombos-white);\n transition: border-color 0.15s ease;\n width: 100%;\n}\n\n.kombos-input:hover {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-input:focus-within {\n border-color: var(--kombos-gray-900);\n}\n\n/* --- Sizes --- */\n.kombos-input--s {\n padding: 0.5rem 0.8125rem;\n gap: 0.5rem;\n min-height: 2.75rem;\n}\n\n.kombos-input--xs {\n padding: 0.375rem 0.75rem;\n gap: 0.375rem;\n min-height: 2.25rem;\n}\n\n/* --- Native input --- */\n.kombos-input__native {\n flex: 1;\n min-width: 0;\n border: none;\n outline: none;\n background: transparent;\n color: var(--kombos-gray-900);\n padding: 0;\n}\n\n.kombos-input__native::placeholder {\n color: var(--kombos-gray-400);\n}\n\n/* --- Left icon --- */\n.kombos-input__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--kombos-gray-500);\n}\n\n.kombos-input--s .kombos-input__icon {\n font-size: 1.25rem;\n}\n\n.kombos-input--xs .kombos-input__icon {\n font-size: 1rem;\n}\n\n/* --- With-icon variant --- */\n.kombos-input--with-icon {\n border-color: var(--kombos-gray-500);\n}\n\n.kombos-input--s.kombos-input--with-icon {\n padding: 0.5rem 0.6875rem;\n gap: 0.75rem;\n}\n\n.kombos-input--xs.kombos-input--with-icon {\n padding: 0.375rem 0.6875rem;\n gap: 0.5rem;\n}\n\n.kombos-input--with-icon:hover,\n.kombos-input--with-icon:focus-within {\n border-color: var(--kombos-gray-700);\n}\n\n.kombos-input--with-icon:focus-within .kombos-input__icon {\n color: var(--kombos-gray-700);\n}\n\n/* --- Password toggle --- */\n.kombos-input__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--kombos-gray-400);\n}\n\n.kombos-input--s .kombos-input__toggle {\n font-size: 1.5rem;\n}\n\n.kombos-input--xs .kombos-input__toggle {\n font-size: 1.25rem;\n}\n\n/* --- Date input --- */\n.kombos-input__native[type=\"date\"],\n.kombos-input__native[type=\"datetime-local\"] {\n -webkit-appearance: none;\n appearance: none;\n}\n\n.kombos-input__native[type=\"date\"]::-webkit-calendar-picker-indicator,\n.kombos-input__native[type=\"datetime-local\"]::-webkit-calendar-picker-indicator {\n display: block;\n opacity: 1;\n cursor: pointer;\n width: 1rem;\n height: 1rem;\n}\n\n/* --- Status (standalone + inherited from FormItem) --- */\n.kombos-input[data-state=\"error\"],\n[data-state=\"error\"] .kombos-input {\n border-color: var(--kombos-error);\n}\n\n.kombos-input[data-state=\"error\"]:hover,\n.kombos-input[data-state=\"error\"]:focus-within,\n[data-state=\"error\"] .kombos-input:hover,\n[data-state=\"error\"] .kombos-input:focus-within {\n border-color: var(--kombos-error);\n}\n\n.kombos-input[data-state=\"success\"],\n[data-state=\"success\"] .kombos-input {\n border-color: var(--kombos-success);\n}\n\n.kombos-input[data-state=\"success\"]:hover,\n.kombos-input[data-state=\"success\"]:focus-within,\n[data-state=\"success\"] .kombos-input:hover,\n[data-state=\"success\"] .kombos-input:focus-within {\n border-color: var(--kombos-success);\n}\n\n/* --- Disabled state --- */\n.kombos-input--disabled {\n background: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n pointer-events: none;\n}\n\n.kombos-input--disabled .kombos-input__native,\n.kombos-input--disabled .kombos-input__native::placeholder {\n color: var(--kombos-gray-300);\n}\n"
16658
- },
16659
- {
16660
- "filename": "sub-components/PageLoader/index.tsx",
16661
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
16662
- },
16663
- {
16664
- "filename": "sub-components/PageLoader/styles.css",
16665
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
16666
- },
16667
- {
16668
- "filename": "sub-components/ProductCard/index.tsx",
16669
- "content": "import { useState, useRef, useEffect } from \"preact/hooks\";\nimport {\n getSelectedProductVariant,\n getProductVariantMainImage,\n getProductVariantDiscountPercentage,\n hasProductVariantDiscount,\n hasProductVariantStock,\n addSelectedtedVariantToCart,\n getProductHref,\n getDefaultSrc,\n IkasProduct,\n isAddToCartEnabled,\n isFavoriteIkasProduct,\n addIkasProductToFavorites,\n removeIkasProductFromFavorites,\n customerStore,\n hasCustomer,\n Router,\n createMediaSrcset,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { NoProductSVG, Heart2SVG, HeartFilledSVG } from \"../icons\";\nimport Button from \"../Button\";\nimport SpinnerIcon from \"../SpinnerIcon\";\nimport Tag from \"../Tag\";\nimport { resolveAspectRatio, resolveObjectFit } from \"../../utils/media\";\nimport { showToast } from \"../../utils/toast\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\ninterface Props {\n product: IkasProduct;\n addToCartText: string;\n addedToCartText?: string;\n outOfStockText?: string;\n goToProductText?: string;\n showFavorite?: boolean;\n hideAddToCartButton?: boolean;\n badgeText?: string;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n dataPage?: number;\n sizes?: string;\n openCartOnAdd?: boolean;\n errorMessage?: string;\n onFavoriteRemove?: () => void;\n priority?: boolean;\n}\n\nconst ProductCard = observer(function ProductCard({\n product,\n addToCartText,\n addedToCartText = \"Sepete Eklendi\",\n outOfStockText = \"Tükendi\",\n goToProductText = \"Ürüne Git\",\n showFavorite = true,\n hideAddToCartButton = false,\n badgeText,\n aspectRatio,\n objectFit,\n dataPage,\n sizes = \"(max-width: 767px) calc(50vw - 24px), (max-width: 1023px) calc(50vw - 44px), 300px\",\n openCartOnAdd = true,\n errorMessage = \"Ürün sepete eklenemedi\",\n onFavoriteRemove,\n priority = false,\n}: Props) {\n const [cartState, setCartState] = useState<\"idle\" | \"loading\" | \"added\">(\n \"idle\",\n );\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, []);\n\n const selectedVariant = getSelectedProductVariant(product);\n const productImage = selectedVariant\n ? getProductVariantMainImage(selectedVariant)\n : null;\n const image = productImage?.image;\n\n const sortedImages = selectedVariant?.images\n ? [...selectedVariant.images].sort((a, b) => a.order - b.order)\n : [];\n const secondImage = sortedImages.length > 1 ? sortedImages[1]?.image : null;\n const hasDiscount = selectedVariant\n ? hasProductVariantDiscount(selectedVariant)\n : false;\n const inStock = selectedVariant\n ? hasProductVariantStock(selectedVariant)\n : false;\n const discountPercentage =\n hasDiscount && selectedVariant\n ? getProductVariantDiscountPercentage(selectedVariant)\n : null;\n\n const productHref = getProductHref(product);\n const isBundleProduct = !!selectedVariant?.bundleSettings;\n const hasOptionSet = !!product.productOptionSet;\n const isFavorite = isFavoriteIkasProduct(product);\n\n const mediaStyle: Record<string, string> = {};\n const resolvedAR = resolveAspectRatio(aspectRatio);\n const resolvedOF = resolveObjectFit(objectFit);\n if (resolvedAR) mediaStyle.aspectRatio = resolvedAR;\n if (resolvedOF) mediaStyle.objectFit = resolvedOF;\n\n const handleAddToCart = async () => {\n if (cartState === \"loading\") return;\n\n if (!isAddToCartEnabled(product) || isBundleProduct || hasOptionSet) {\n Router.navigate(productHref);\n return;\n }\n\n if (timerRef.current) clearTimeout(timerRef.current);\n setCartState(\"loading\");\n try {\n const result = await addSelectedtedVariantToCart(product, 1);\n\n if (result.success) {\n if (openCartOnAdd) {\n window.dispatchEvent(new CustomEvent(\"ikas:open-cart-sidebar\"));\n }\n setCartState(\"added\");\n } else {\n showToast(errorMessage, \"error\");\n }\n\n timerRef.current = setTimeout(() => setCartState(\"idle\"), 2000);\n } catch {\n setCartState(\"idle\");\n showToast(errorMessage, \"error\");\n }\n };\n\n const handleFavoriteToggle = async () => {\n const isLoggedIn = hasCustomer(customerStore);\n if (!isLoggedIn) {\n Router.navigateToPage(\"LOGIN\");\n return;\n }\n\n if (isFavorite) {\n await removeIkasProductFromFavorites(product);\n onFavoriteRemove?.();\n } else {\n await addIkasProductToFavorites(product);\n }\n };\n\n return (\n <div className=\"kombos-product-card\" data-page={dataPage}>\n {/* Image container */}\n <div className=\"kombos-product-card__image-wrapper\">\n <a href={productHref} className=\"kombos-product-card__media-link\" aria-label={product.name || \"Product\"}>\n {image?.isVideo ? (\n <video\n src={getDefaultSrc(image)}\n className=\"kombos-product-card__media\"\n style={mediaStyle}\n muted\n loop\n autoPlay\n playsInline\n aria-label={product.name}\n >\n <track kind=\"captions\" />\n </video>\n ) : image ? (\n <>\n <img\n src={getDefaultSrc(image)}\n srcSet={createMediaSrcset(image)}\n sizes={sizes}\n alt={product.name}\n className=\"kombos-product-card__media kombos-product-card__media--primary\"\n style={mediaStyle}\n loading={priority ? \"eager\" : \"lazy\"}\n decoding={priority ? \"sync\" : \"async\"}\n fetchpriority={priority ? \"high\" : undefined}\n />\n {secondImage && !secondImage.isVideo && (\n <img\n src={getDefaultSrc(secondImage)}\n srcSet={createMediaSrcset(secondImage)}\n sizes={sizes}\n alt=\"\"\n className=\"kombos-product-card__media kombos-product-card__media--hover\"\n style={mediaStyle}\n loading=\"lazy\"\n decoding=\"async\"\n />\n )}\n </>\n ) : (\n <div\n className=\"kombos-product-card__media kombos-product-card__media--placeholder\"\n style={mediaStyle}\n >\n <NoProductSVG />\n </div>\n )}\n </a>\n\n {/* Out of stock overlay — must render before badges/heart so they appear on top */}\n {!inStock && <div className=\"kombos-product-card__overlay\" />}\n\n {/* Badges */}\n {(hasDiscount || badgeText) && (\n <div className=\"kombos-product-card__badges\">\n {hasDiscount && discountPercentage && (\n <Tag type=\"discounted\" size=\"s\">\n %{discountPercentage}\n </Tag>\n )}\n {badgeText && (\n <Tag type=\"new\" size=\"s\">\n {badgeText}\n </Tag>\n )}\n </div>\n )}\n\n {/* Favorite button */}\n {showFavorite && (\n <button\n type=\"button\"\n className=\"kombos-product-card__favorite\"\n onClick={handleFavoriteToggle}\n aria-label=\"Favorite\"\n >\n {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}\n </button>\n )}\n </div>\n\n {/* Add to Cart / Go to Product */}\n {!hideAddToCartButton && (\n <>\n {isBundleProduct || (hasOptionSet && inStock) ? (\n <Button\n variant=\"primary\"\n size=\"xs\"\n className=\"kombos-product-card__add-btn\"\n onClick={() => Router.navigate(productHref)}\n >\n {goToProductText}\n </Button>\n ) : (\n <Button\n variant={cartState === \"added\" ? \"secondary\" : \"primary\"}\n size=\"xs\"\n className=\"kombos-product-card__add-btn\"\n onClick={inStock ? handleAddToCart : undefined}\n disabled={!inStock || cartState === \"loading\"}\n icon={\n inStock && cartState === \"loading\" ? <SpinnerIcon /> : undefined\n }\n >\n {!inStock && outOfStockText}\n {inStock && cartState === \"added\" && addedToCartText}\n {inStock &&\n (cartState === \"idle\" || cartState === \"loading\") &&\n addToCartText}\n </Button>\n )}\n </>\n )}\n </div>\n );\n});\n\nexport default ProductCard;\n"
16670
- },
16671
- {
16672
- "filename": "sub-components/ProductCard/styles.css",
16673
- "content": "/* ===== Product Card ===== */\n.kombos-product-card {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n min-width: 0;\n}\n\n/* Image wrapper */\n.kombos-product-card__image-wrapper {\n position: relative;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.kombos-product-card__media-link {\n display: block;\n}\n\n.kombos-product-card__media {\n width: 100%;\n height: auto;\n display: block;\n background: var(--kombos-gray-100);\n}\n\n.kombos-product-card__media--primary {\n transition: opacity 0.3s ease;\n}\n\n.kombos-product-card__media--hover {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.kombos-product-card__image-wrapper:hover .kombos-product-card__media--primary {\n opacity: 0;\n}\n\n.kombos-product-card__image-wrapper:hover .kombos-product-card__media--hover {\n opacity: 1;\n}\n\n.kombos-product-card__media--placeholder {\n border: 1px solid var(--kombos-gray-100);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n color: var(--kombos-gray-300);\n font-size: 4rem;\n}\n\n/* Badges */\n.kombos-product-card__badges {\n position: absolute;\n top: 0.75rem;\n left: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Favorite */\n.kombos-product-card__favorite {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-size: 1.5rem;\n color: var(--kombos-gray-900);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Out of stock overlay */\n.kombos-product-card__overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.32);\n pointer-events: none;\n}\n\n\n/* Add to Cart Button */\n.kombos-product-card__add-btn {\n width: 100%;\n}\n"
16674
- },
16675
- {
16676
- "filename": "sub-components/SkeletonField/index.tsx",
16677
- "content": "interface Props {\n labelWidth?: string;\n}\n\nexport default function SkeletonField({ labelWidth = \"40%\" }: Props) {\n return (\n <div className=\"kombos-skeleton-field\">\n <div className=\"kombos-skeleton-field__label\" style={{ width: labelWidth }} />\n <div className=\"kombos-skeleton-field__input\" />\n </div>\n );\n}\n"
16678
- },
16679
- {
16680
- "filename": "sub-components/SkeletonField/styles.css",
16681
- "content": "/* ── Skeleton Field ── */\n.kombos-skeleton-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.kombos-skeleton-field__label {\n height: 1.125rem;\n border-radius: 4px;\n}\n\n.kombos-skeleton-field__input {\n width: 100%;\n height: 2.75rem;\n border-radius: 6px;\n}\n\n.kombos-skeleton-field__label,\n.kombos-skeleton-field__input {\n background: linear-gradient(\n 90deg,\n var(--kombos-gray-100) 25%,\n var(--kombos-gray-50) 50%,\n var(--kombos-gray-100) 75%\n );\n background-size: 200% 100%;\n animation: kombos-shimmer 1.5s ease-in-out infinite;\n}\n"
16682
- },
16683
- {
16684
- "filename": "sub-components/icons/index.tsx",
16685
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
16686
- },
16687
16619
  {
16688
16620
  "filename": "types.ts",
16689
16621
  "content": "export interface Props {\n accountInfoLabel?: string;\n ordersLabel?: string;\n addressesLabel?: string;\n favoritesLabel?: string;\n logoutLabel?: string;\n components?: any;\n}\n"
16690
- },
16691
- {
16692
- "filename": "utils/cx.ts",
16693
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
16694
- },
16695
- {
16696
- "filename": "utils/media.ts",
16697
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
16698
- },
16699
- {
16700
- "filename": "utils/toast.ts",
16701
- "content": "export function showToast(message: string, variant: \"success\" | \"error\") {\n window.dispatchEvent(\n new CustomEvent(\"ikas:show-toast\", { detail: { message, variant } })\n );\n}\n"
16702
16622
  }
16703
16623
  ]
16704
16624
  },
@@ -16742,41 +16662,9 @@
16742
16662
  "filename": "styles.css",
16743
16663
  "content": "/* ===== ProductDetailAddToCart ===== */\n\n.kombos-pd-atc {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n margin-top: var(--mobile-mt);\n margin-bottom: var(--mobile-mb);\n}\n\n.kombos-pd-atc__actions {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.kombos-pd-atc__btn {\n flex: 1;\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-pd-atc {\n margin-top: var(--desktop-mt, var(--mobile-mt));\n margin-bottom: var(--desktop-mb, var(--mobile-mb));\n }\n}\n"
16744
16664
  },
16745
- {
16746
- "filename": "sub-components/Button/index.tsx",
16747
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
16748
- },
16749
- {
16750
- "filename": "sub-components/Button/styles.css",
16751
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
16752
- },
16753
- {
16754
- "filename": "sub-components/QuantitySelector/index.tsx",
16755
- "content": "import { MinusSVG, PlusSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props {\n value: number;\n onChange: (value: number) => void;\n size?: \"default\" | \"sm\";\n}\n\nexport default function QuantitySelector({\n value,\n onChange,\n size = \"default\",\n}: Props) {\n return (\n <div className={cx(\"kombos-pd__qty\", size === \"sm\" && \"kombos-pd__qty--sm\")}>\n <button\n type=\"button\"\n className=\"kombos-pd__qty-btn\"\n onClick={() => onChange(Math.max(1, value - 1))}\n disabled={value <= 1}\n aria-label=\"Decrease quantity\"\n >\n <MinusSVG />\n </button>\n <span\n className={cx(\"kombos-pd__qty-value\", size === \"sm\" ? \"text-sm-medium\" : \"text-md-medium\")}\n >\n {value}\n </span>\n <button\n type=\"button\"\n className=\"kombos-pd__qty-btn\"\n onClick={() => onChange(value + 1)}\n aria-label=\"Increase quantity\"\n >\n <PlusSVG />\n </button>\n </div>\n );\n}\n"
16756
- },
16757
- {
16758
- "filename": "sub-components/QuantitySelector/styles.css",
16759
- "content": "/* Qty — border ececed, rounded-6, px-12 py-10, gap-16 between items */\n.kombos-pd__qty {\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n padding: 0.5625rem 0.6875rem;\n}\n\n.kombos-pd__qty-btn {\n min-width: 1.5rem;\n min-height: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 1rem;\n color: var(--kombos-gray-900);\n padding: 0;\n margin: -0.75rem;\n padding: 0.75rem;\n}\n\n.kombos-pd__qty-btn:hover:not(:disabled) {\n color: var(--kombos-gray-700);\n}\n\n.kombos-pd__qty-btn:disabled {\n color: var(--kombos-gray-300);\n cursor: not-allowed;\n}\n\n.kombos-pd__qty-value {\n min-width: 1.5rem;\n text-align: center;\n color: var(--kombos-gray-900);\n}\n\n/* Small size variant */\n.kombos-pd__qty--sm {\n gap: 0.75rem;\n padding: 0.4375rem 0.6875rem;\n}\n\n.kombos-pd__qty--sm .kombos-pd__qty-btn {\n margin: -0.5rem;\n padding: 0.5rem;\n}\n"
16760
- },
16761
16665
  {
16762
16666
  "filename": "types.ts",
16763
16667
  "content": "import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n product?: IkasProduct | null;\n addToCartButtonText?: string;\n addingToCartText?: string;\n outOfStockText?: string;\n mobileMarginTop?: MarginTopStyleType;\n mobileMarginBottom?: MarginBottomStyleType;\n desktopMarginTop?: MarginTopStyleType;\n desktopMarginBottom?: MarginBottomStyleType;\n hideQuantityInput?: boolean;\n errorMessage?: string;\n optionSetErrorMessage?: string;\n updateCartButtonText?: string;\n updatingCartText?: string;\n}\n"
16764
- },
16765
- {
16766
- "filename": "utils/bundle.ts",
16767
- "content": "import {\n getSelectedProductVariant,\n hasProductVariantStock,\n setBundleProductQuantity,\n IkasBundleProduct,\n IkasBundleSettings,\n} from \"@ikas/bp-storefront\";\n\nexport function adjustBundleProductQuantity(bp: IkasBundleProduct): void {\n if (!bp.product) return;\n\n const variant = getSelectedProductVariant(bp.product);\n\n const stock = variant.stock ?? 0;\n const inStock = hasProductVariantStock(variant);\n\n if (bp.minQuantity === 0 && !inStock) {\n setBundleProductQuantity(bp, 0);\n return;\n }\n\n if (stock < 10 && bp.quantity > stock && !variant.sellIfOutOfStock) {\n setBundleProductQuantity(bp, Math.max(stock, bp.minQuantity ?? 0));\n }\n}\n\nexport function isBundleOutOfStock(\n bundleSettings: IkasBundleSettings,\n): boolean {\n const { products, minBundleQuantity, maxBundleQuantity } = bundleSettings;\n\n // Skip check while bundle product data is still loading\n const loaded = products.some((bp) => !!bp.product);\n if (!loaded) return false;\n\n // A required bundle product (minQuantity !== 0) is out of stock\n const hasRequiredOutOfStock = products.some((bp) => {\n if (!bp.product) return false;\n\n const variant = getSelectedProductVariant(bp.product);\n const bpHasStock = variant ? hasProductVariantStock(variant) : false;\n\n return !bpHasStock && bp.minQuantity !== 0;\n });\n if (hasRequiredOutOfStock) return true;\n\n // All bundle products have zero quantity\n const allZeroQuantity = products.every((p) => p.quantity === 0);\n if (allZeroQuantity) return true;\n\n // Total quantity violates bundle-level min/max constraints\n const totalQuantity = products.reduce((sum, p) => sum + p.quantity, 0);\n if (minBundleQuantity != null && totalQuantity < minBundleQuantity)\n return true;\n if (maxBundleQuantity != null && totalQuantity > maxBundleQuantity)\n return true;\n\n // Individual bundle product min/max quantity violations\n const hasMinQuantityError = products.some(\n (bp) => bp.minQuantity != null && bp.quantity < bp.minQuantity,\n );\n if (hasMinQuantityError) return true;\n\n const hasMaxQuantityError = products.some(\n (bp) => bp.maxQuantity != null && bp.quantity > bp.maxQuantity!,\n );\n if (hasMaxQuantityError) return true;\n\n return false;\n}\n"
16768
- },
16769
- {
16770
- "filename": "utils/cx.ts",
16771
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
16772
- },
16773
- {
16774
- "filename": "utils/optionSet.ts",
16775
- "content": "import {\n IkasProductOptionSet,\n hasValidProductOptionSetValues,\n} from \"@ikas/bp-storefront\";\nimport { showToast } from \"./toast\";\n\nexport function validateOptionSet(\n optionSet: IkasProductOptionSet | undefined | null,\n errorMessage: string\n): boolean {\n if (optionSet && !hasValidProductOptionSetValues(optionSet)) {\n window.dispatchEvent(new CustomEvent(\"ikas:show-option-errors\"));\n showToast(errorMessage, \"error\");\n return false;\n }\n return true;\n}\n"
16776
- },
16777
- {
16778
- "filename": "utils/toast.ts",
16779
- "content": "export function showToast(message: string, variant: \"success\" | \"error\") {\n window.dispatchEvent(\n new CustomEvent(\"ikas:show-toast\", { detail: { message, variant } })\n );\n}\n"
16780
16668
  }
16781
16669
  ]
16782
16670
  },
@@ -16816,25 +16704,9 @@
16816
16704
  "filename": "styles.css",
16817
16705
  "content": "/* ===== BlogHome Section ===== */\n.kombos-blog-home {\n width: 100%;\n padding: 2rem 0;\n}\n\n.kombos-blog-home .kombos-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n/* Header (title + description) */\n.kombos-blog-home__header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n text-align: center;\n}\n\n.kombos-blog-home__title {\n margin: 0;\n color: var(--kombos-gray-900);\n}\n\n.kombos-blog-home__description {\n margin: 0;\n color: var(--kombos-gray-500);\n}\n\n/* Category navigation */\n.kombos-blog-home__categories {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n overflow-x: auto;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 0.25rem;\n}\n\n.kombos-blog-home__categories::-webkit-scrollbar {\n display: none;\n}\n\n.kombos-blog-home__cat-btn {\n padding: 0.5rem 1rem;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 100px;\n cursor: pointer;\n white-space: nowrap;\n transition: background-color 0.15s ease, color 0.15s ease,\n border-color 0.15s ease;\n background: transparent;\n color: var(--kombos-gray-700);\n text-decoration: none;\n}\n\n.kombos-blog-home__cat-btn:hover {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-blog-home__cat-btn--active {\n background: var(--kombos-gray-900);\n color: var(--kombos-white);\n border-color: var(--kombos-gray-900);\n}\n\n.kombos-blog-home__cat-btn--active:hover {\n background: var(--kombos-gray-800);\n border-color: var(--kombos-gray-800);\n}\n\n/* Empty state */\n.kombos-blog-home__empty {\n text-align: center;\n color: var(--kombos-gray-900);\n padding: 3rem 0;\n margin: 0;\n}\n\n/* Blog grid */\n.kombos-blog-home__grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n}\n\n/* Pagination spacing */\n.kombos-blog-home .kombos-pagination {\n padding-top: 1rem;\n}\n\n@media (min-width: 768px) {\n .kombos-blog-home {\n padding: 2.5rem 0;\n }\n\n .kombos-blog-home__grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .kombos-blog-home {\n padding: 3rem 0;\n }\n\n .kombos-blog-home .kombos-container {\n gap: 2.5rem;\n }\n\n .kombos-blog-home__grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n"
16818
16706
  },
16819
- {
16820
- "filename": "sub-components/Pagination/index.tsx",
16821
- "content": "import { observer } from \"@ikas/component-utils\";\nimport { cx } from \"../../utils/cx\";\nimport { getPageNumbers } from \"../../utils/pagination\";\nimport {\n CaretDoubleLeftSVG,\n CaretLeftSVG,\n CaretRightSVG,\n CaretDoubleRightSVG,\n DotsThreeSVG,\n} from \"../icons\";\n\ninterface Props {\n currentPage: number;\n totalPages: number;\n hasPrev: boolean;\n hasNext: boolean;\n onPageChange: (page: number) => void;\n}\n\nconst Pagination = observer(function Pagination({\n currentPage,\n totalPages,\n hasPrev,\n hasNext,\n onPageChange,\n}: Props) {\n if (totalPages <= 1) return null;\n\n const pages = getPageNumbers(currentPage, totalPages);\n\n const showFirstBtn = totalPages > 5 && currentPage >= 5;\n const showLastBtn = totalPages > 5 && currentPage <= totalPages - 4;\n\n return (\n <nav className=\"kombos-pagination\" aria-label=\"Pagination\">\n <div className=\"kombos-pagination__nav-group\">\n {showFirstBtn && (\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(1)}\n aria-label=\"First page\"\n >\n <CaretDoubleLeftSVG />\n </button>\n )}\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(currentPage - 1)}\n disabled={!hasPrev}\n aria-label=\"Previous page\"\n >\n <CaretLeftSVG />\n </button>\n </div>\n\n <div className=\"kombos-pagination__pages\">\n {pages.map((page, i) =>\n page === \"dots\" ? (\n <span key={`dots-${i}`} className=\"kombos-pagination__dots\">\n <DotsThreeSVG />\n </span>\n ) : (\n <button\n key={page}\n type=\"button\"\n className={cx(\n \"kombos-pagination__page\",\n \"text-md-semibold\",\n page === currentPage && \"kombos-pagination__page--active\"\n )}\n onClick={() => onPageChange(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n >\n {page}\n </button>\n )\n )}\n </div>\n\n <div className=\"kombos-pagination__nav-group\">\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(currentPage + 1)}\n disabled={!hasNext}\n aria-label=\"Next page\"\n >\n <CaretRightSVG />\n </button>\n {showLastBtn && (\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(totalPages)}\n aria-label=\"Last page\"\n >\n <CaretDoubleRightSVG />\n </button>\n )}\n </div>\n </nav>\n );\n});\n\nexport default Pagination;\n"
16822
- },
16823
- {
16824
- "filename": "sub-components/Pagination/styles.css",
16825
- "content": "/* ===== Pagination ===== */\n.kombos-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 0.75rem 1.5rem;\n max-width: 100%;\n}\n\n/* Left/right button groups (first+prev, next+last) */\n.kombos-pagination__nav-group {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n/* Navigation buttons (first, prev, next, last) */\n.kombos-pagination__nav-btn {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--kombos-gray-50);\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n cursor: pointer;\n font-size: 1rem;\n color: var(--kombos-gray-900);\n transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n\n.kombos-pagination__nav-btn:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n background: var(--kombos-gray-100);\n}\n\n.kombos-pagination__nav-btn:disabled {\n cursor: default;\n color: var(--kombos-gray-300);\n background: var(--kombos-gray-50);\n}\n\n/* Page numbers container */\n.kombos-pagination__pages {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n/* Page number buttons — 32×32 */\n.kombos-pagination__page {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n padding: 0;\n color: var(--kombos-gray-500);\n transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.kombos-pagination__page:hover {\n color: var(--kombos-gray-900);\n background: var(--kombos-gray-50);\n}\n\n.kombos-pagination__page--active {\n color: var(--kombos-white);\n background: var(--kombos-gray-900);\n pointer-events: none;\n}\n\n/* Dots separator */\n.kombos-pagination__dots {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: var(--kombos-gray-400);\n}\n"
16826
- },
16827
16707
  {
16828
16708
  "filename": "types.ts",
16829
16709
  "content": "import type { IkasBlogList, IkasBlogCategoryList } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n blogList: IkasBlogList;\n blogCategoryList?: IkasBlogCategoryList;\n title?: string;\n allCategoriesText?: string;\n readMoreText?: string;\n emptyMessage?: string;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n description?: string;\n}\n"
16830
- },
16831
- {
16832
- "filename": "utils/cx.ts",
16833
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
16834
- },
16835
- {
16836
- "filename": "utils/pagination.ts",
16837
- "content": "export function getPageNumbers(\n current: number,\n total: number\n): (number | \"dots\")[] {\n if (total <= 7) {\n return Array.from({ length: total }, (_, i) => i + 1);\n }\n\n const pages: (number | \"dots\")[] = [1];\n\n if (current > 3) {\n pages.push(\"dots\");\n }\n\n const start = Math.max(2, current - 1);\n const end = Math.min(total - 1, current + 1);\n\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n\n if (current < total - 2) {\n pages.push(\"dots\");\n }\n\n pages.push(total);\n\n return pages;\n}\n"
16838
16710
  }
16839
16711
  ]
16840
16712
  },
@@ -16867,14 +16739,6 @@
16867
16739
  {
16868
16740
  "filename": "types.ts",
16869
16741
  "content": "import type { IkasBlog } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n blogPost: IkasBlog | null;\n homeText?: string;\n blogText?: string;\n tagsTitle?: string;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n}\n"
16870
- },
16871
- {
16872
- "filename": "utils/fullName.ts",
16873
- "content": "export function getFullName(\n firstName?: string | null,\n lastName?: string | null\n): string {\n return [firstName, lastName].filter(Boolean).join(\" \");\n}\n"
16874
- },
16875
- {
16876
- "filename": "utils/media.ts",
16877
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
16878
16742
  }
16879
16743
  ]
16880
16744
  },
@@ -16924,10 +16788,6 @@
16924
16788
  "filename": "components/FurnitureView/styles.css",
16925
16789
  "content": ".kombos-bundle-table {\n border: 1px solid var(--kombos-bundle-table-border, var(--kombos-gray-900));\n border-radius: 6px;\n overflow: hidden;\n}\n\n.kombos-bundle-table__header {\n display: flex;\n align-items: center;\n padding: 0.75rem 1rem;\n background-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-bundle-table__title {\n color: inherit;\n}\n\n.kombos-bundle-table__table {\n width: 100%;\n border-collapse: collapse;\n}\n"
16926
16790
  },
16927
- {
16928
- "filename": "hooks/useBundleProducts.ts",
16929
- "content": "import { useState, useEffect, useMemo } from \"preact/hooks\";\nimport {\n getSelectedProductVariant,\n getBundleProductsOfVariant,\n initBundleProducts,\n hasBundleSettings,\n IkasBundleProduct,\n IkasProduct,\n cartStore,\n waitForCartStoreInit,\n} from \"@ikas/bp-storefront\";\nimport { runInAction } from \"mobx\";\nimport { adjustBundleProductQuantity } from \"../utils/bundle\";\n\nfunction adjustBundleQuantities(products: IkasBundleProduct[]) {\n runInAction(() => {\n for (const bp of products) {\n adjustBundleProductQuantity(bp);\n }\n });\n}\n\nexport function useBundleProducts(product: IkasProduct | null | undefined) {\n const [isLoading, setIsLoading] = useState(true);\n\n const editLineID =\n typeof window !== \"undefined\"\n ? new URLSearchParams(window.location.search).get(\"editLineID\")\n : null;\n\n const selectedVariant = product ? getSelectedProductVariant(product) : null;\n\n const hasBundle = selectedVariant\n ? hasBundleSettings(selectedVariant)\n : false;\n\n const bundleSettings = hasBundle ? selectedVariant!.bundleSettings : null;\n\n useEffect(() => {\n if (!product || !selectedVariant || !bundleSettings) return;\n\n let cancelled = false;\n\n async function load() {\n setIsLoading(true);\n\n try {\n if (editLineID) await waitForCartStoreInit(cartStore);\n\n await getBundleProductsOfVariant(product!, selectedVariant!);\n await initBundleProducts(product!);\n\n if (!cancelled && bundleSettings) {\n adjustBundleQuantities(bundleSettings.products);\n }\n } finally {\n if (!cancelled) setIsLoading(false);\n }\n }\n\n load();\n\n return () => {\n cancelled = true;\n };\n }, [selectedVariant, editLineID]);\n\n const sortedProducts = useMemo(() => {\n if (!bundleSettings) return [];\n\n return [...bundleSettings.products].sort((a, b) => a.order - b.order);\n }, [bundleSettings?.products]);\n\n return { isLoading, selectedVariant, bundleSettings, sortedProducts };\n}\n"
16930
- },
16931
16791
  {
16932
16792
  "filename": "ikas-config-snippet.json",
16933
16793
  "content": "{\n \"id\": \"{{PROJECT_ID}}-product-detail-bundle-product\",\n \"name\": \"ProductDetailBundleProduct\",\n \"type\": \"component\",\n \"entry\": \"./src/components/ProductDetailBundleProduct/index.tsx\",\n \"styles\": \"./src/components/ProductDetailBundleProduct/styles.css\",\n \"props\": [\n {\n \"name\": \"product\",\n \"displayName\": \"Product\",\n \"type\": \"PRODUCT\",\n \"required\": false\n },\n {\n \"name\": \"mobileMarginTop\",\n \"displayName\": \"Top Spacing\",\n \"type\": \"TYPE\",\n \"required\": false,\n \"groupId\": \"mobile\",\n \"typeId\": \"@ikas/bp-storefront-models-MarginTopStyleType\"\n },\n {\n \"name\": \"mobileMarginBottom\",\n \"displayName\": \"Sub Spacing\",\n \"type\": \"TYPE\",\n \"required\": false,\n \"groupId\": \"mobile\",\n \"typeId\": \"@ikas/bp-storefront-models-MarginBottomStyleType\"\n },\n {\n \"name\": \"desktopMarginTop\",\n \"displayName\": \"Top Spacing\",\n \"type\": \"TYPE\",\n \"required\": false,\n \"groupId\": \"desktop\",\n \"typeId\": \"@ikas/bp-storefront-models-MarginTopStyleType\"\n },\n {\n \"name\": \"desktopMarginBottom\",\n \"displayName\": \"Sub Spacing\",\n \"type\": \"TYPE\",\n \"required\": false,\n \"groupId\": \"desktop\",\n \"typeId\": \"@ikas/bp-storefront-models-MarginBottomStyleType\"\n },\n {\n \"name\": \"isBundleFurniture\",\n \"displayName\": \"Furniture Bundle Mode\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"settings\"\n },\n {\n \"name\": \"bundleProductWithoutLink\",\n \"displayName\": \"Product Link Close\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"settings\"\n },\n {\n \"name\": \"quantityLabel\",\n \"displayName\": \"Quantity Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Quantity\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"outOfStockText\",\n \"displayName\": \"Stokta Yok Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Stokta yok\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"productContentTitle\",\n \"displayName\": \"Set Content Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Set içeriği\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"aspectRatio\",\n \"displayName\": \"En Boy Ratio\",\n \"type\": \"ENUM\",\n \"required\": false,\n \"groupId\": \"appearance\",\n \"enumTypeId\": \"s3OODUmZpJ\"\n },\n {\n \"name\": \"objectFit\",\n \"displayName\": \"Image Fit\",\n \"type\": \"ENUM\",\n \"required\": false,\n \"groupId\": \"appearance\",\n \"enumTypeId\": \"GrylMqHxui\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"appearance\",\n \"name\": \"View Settings\",\n \"children\": [\n {\n \"id\": \"mobile\",\n \"name\": \"Mobile View\",\n \"description\": \"Mobile cihazlarda uygulanacak margin ayarları\"\n },\n {\n \"id\": \"desktop\",\n \"name\": \"Desktop View\",\n \"description\": \"Desktop cihazlarda uygulanacak margin ayarları\"\n }\n ],\n \"description\": \"Bileşenin mobil ve masaüstü görünüm ayarları\"\n },\n {\n \"id\": \"settings\",\n \"name\": \"Settings\",\n \"description\": \"Bundle davranışını kontrol eden ayarlar\"\n },\n {\n \"id\": \"texts\",\n \"name\": \"Texts\",\n \"description\": \"Bileşende görüntülenen metin etiketleri\"\n }\n ]\n}"
@@ -16943,10 +16803,6 @@
16943
16803
  {
16944
16804
  "filename": "types.ts",
16945
16805
  "content": "import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n product?: IkasProduct | null;\n mobileMarginTop?: MarginTopStyleType;\n mobileMarginBottom?: MarginBottomStyleType;\n desktopMarginTop?: MarginTopStyleType;\n desktopMarginBottom?: MarginBottomStyleType;\n isBundleFurniture?: boolean;\n bundleProductWithoutLink?: boolean;\n quantityLabel?: string;\n outOfStockText?: string;\n productContentTitle?: string;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n}\n"
16946
- },
16947
- {
16948
- "filename": "utils/bundle.ts",
16949
- "content": "import {\n getSelectedProductVariant,\n hasProductVariantStock,\n setBundleProductQuantity,\n IkasBundleProduct,\n IkasBundleSettings,\n} from \"@ikas/bp-storefront\";\n\nexport function adjustBundleProductQuantity(bp: IkasBundleProduct): void {\n if (!bp.product) return;\n\n const variant = getSelectedProductVariant(bp.product);\n\n const stock = variant.stock ?? 0;\n const inStock = hasProductVariantStock(variant);\n\n if (bp.minQuantity === 0 && !inStock) {\n setBundleProductQuantity(bp, 0);\n return;\n }\n\n if (stock < 10 && bp.quantity > stock && !variant.sellIfOutOfStock) {\n setBundleProductQuantity(bp, Math.max(stock, bp.minQuantity ?? 0));\n }\n}\n\nexport function isBundleOutOfStock(\n bundleSettings: IkasBundleSettings,\n): boolean {\n const { products, minBundleQuantity, maxBundleQuantity } = bundleSettings;\n\n // Skip check while bundle product data is still loading\n const loaded = products.some((bp) => !!bp.product);\n if (!loaded) return false;\n\n // A required bundle product (minQuantity !== 0) is out of stock\n const hasRequiredOutOfStock = products.some((bp) => {\n if (!bp.product) return false;\n\n const variant = getSelectedProductVariant(bp.product);\n const bpHasStock = variant ? hasProductVariantStock(variant) : false;\n\n return !bpHasStock && bp.minQuantity !== 0;\n });\n if (hasRequiredOutOfStock) return true;\n\n // All bundle products have zero quantity\n const allZeroQuantity = products.every((p) => p.quantity === 0);\n if (allZeroQuantity) return true;\n\n // Total quantity violates bundle-level min/max constraints\n const totalQuantity = products.reduce((sum, p) => sum + p.quantity, 0);\n if (minBundleQuantity != null && totalQuantity < minBundleQuantity)\n return true;\n if (maxBundleQuantity != null && totalQuantity > maxBundleQuantity)\n return true;\n\n // Individual bundle product min/max quantity violations\n const hasMinQuantityError = products.some(\n (bp) => bp.minQuantity != null && bp.quantity < bp.minQuantity,\n );\n if (hasMinQuantityError) return true;\n\n const hasMaxQuantityError = products.some(\n (bp) => bp.maxQuantity != null && bp.quantity > bp.maxQuantity!,\n );\n if (hasMaxQuantityError) return true;\n\n return false;\n}\n"
16950
16806
  }
16951
16807
  ]
16952
16808
  },
@@ -17001,65 +16857,9 @@
17001
16857
  "filename": "styles.css",
17002
16858
  "content": "/* CartPage */\n.cart-page {\n width: 100%;\n}\n\n.cart-page__container {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n/* Header */\n.cart-page__header {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n margin-bottom: 1rem;\n}\n\n/* Title */\n.cart-page__title {\n margin: 0;\n color: var(--kombos-gray-900);\n}\n\n.cart-page__count {\n color: var(--kombos-gray-500);\n}\n\n/* Two-column Layout */\n.cart-page__layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: 2rem;\n}\n\n@media (min-width: 1024px) {\n .cart-page__layout {\n grid-template-columns: minmax(0, 1fr) 22.5rem;\n gap: 2.5rem;\n align-items: start;\n }\n}\n\n/* Cart Items Column */\n.cart-page__items-col {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.cart-page__items {\n display: flex;\n flex-direction: column;\n}\n"
17003
16859
  },
17004
- {
17005
- "filename": "sub-components/CartItem/components/BundleProductItem/index.tsx",
17006
- "content": "import {\n IkasOrderLineVariantBundleProduct,\n getIkasOrderLineBundleVariantMainImage,\n getDefaultSrc,\n createMediaSrcset,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { resolveAspectRatio, resolveObjectFit } from \"../../../../utils/media\";\nimport type { AspectRatio, ObjectFit } from \"../../../../global-types\";\n\ninterface Props {\n bundleProduct: IkasOrderLineVariantBundleProduct;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n}\n\nconst BundleProductItem = observer(function BundleProductItem({\n bundleProduct,\n aspectRatio,\n objectFit,\n}: Props) {\n const { variant, quantity } = bundleProduct;\n const image = getIkasOrderLineBundleVariantMainImage(variant);\n const variantValues = variant.variantValues ?? [];\n\n const mediaStyle: Record<string, string> = {\n aspectRatio: resolveAspectRatio(aspectRatio),\n objectFit: resolveObjectFit(objectFit),\n };\n\n return (\n <div className=\"kombos-cart-item__bundle\">\n {image && (\n <img\n src={getDefaultSrc(image)}\n srcSet={createMediaSrcset(image)}\n sizes=\"32px\"\n alt={variant.name}\n className=\"kombos-cart-item__bundle-img\"\n style={mediaStyle}\n />\n )}\n <div className=\"kombos-cart-item__bundle-info\">\n <span className=\"text-xs-regular\">\n {quantity} × {variant.name}\n </span>\n {variantValues.length > 0 && (\n <span className=\"kombos-cart-item__bundle-variants text-xs-regular\">\n {variantValues\n .map((vv) => `${vv.variantTypeName}: ${vv.variantValueName}`)\n .join(\", \")}\n </span>\n )}\n </div>\n </div>\n );\n});\n\nexport default BundleProductItem;\n"
17007
- },
17008
- {
17009
- "filename": "sub-components/CartItem/components/BundleProductItem/styles.css",
17010
- "content": ".kombos-cart-item__bundle {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.kombos-cart-item__bundle-img {\n width: 2rem;\n border-radius: 4px;\n border: 1px solid var(--kombos-gray-100);\n background: var(--kombos-gray-100);\n flex-shrink: 0;\n}\n\n.kombos-cart-item__bundle-info {\n display: flex;\n flex-direction: column;\n color: var(--kombos-gray-700);\n min-width: 0;\n}\n\n.kombos-cart-item__bundle-variants {\n color: var(--kombos-gray-500);\n}\n"
17011
- },
17012
- {
17013
- "filename": "sub-components/CartItem/components/BundleProducts/index.tsx",
17014
- "content": "import { IkasOrderLineItem, editOrderLineItem } from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport type { AspectRatio, ObjectFit } from \"../../../../global-types\";\n\nimport BundleProductItem from \"../BundleProductItem\";\nimport { PencilSVG } from \"../../../icons\";\n\ninterface Props {\n item: IkasOrderLineItem;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n editButtonText?: string;\n}\n\nconst BundleProducts = observer(function BundleProducts({\n item,\n aspectRatio,\n objectFit,\n editButtonText = \"Düzenle\",\n}: Props) {\n const bundleProducts = (item.variant?.bundleProducts ?? []).filter(\n (bp) => bp.quantity > 0,\n );\n\n if (bundleProducts.length === 0) return null;\n\n const handleEdit = () => {\n editOrderLineItem(item);\n };\n\n return (\n <div className=\"kombos-cart-item__bundles\">\n <div className=\"kombos-cart-item__bundles-header\">\n <button\n type=\"button\"\n className=\"kombos-cart-item__bundle-edit-btn text-xs-medium\"\n onClick={handleEdit}\n >\n <PencilSVG />\n {editButtonText}\n </button>\n </div>\n {bundleProducts.map((bp) => (\n <BundleProductItem\n key={bp.id}\n bundleProduct={bp}\n aspectRatio={aspectRatio}\n objectFit={objectFit}\n />\n ))}\n </div>\n );\n});\n\nexport default BundleProducts;\n"
17015
- },
17016
- {
17017
- "filename": "sub-components/CartItem/components/BundleProducts/styles.css",
17018
- "content": "/* Bundle Products */\n.kombos-cart-item__bundles {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n padding-top: 0.25rem;\n border-top: 1px solid var(--kombos-gray-100);\n}\n\n.kombos-cart-item__bundles-header {\n display: flex;\n justify-content: flex-end;\n}\n\n.kombos-cart-item__bundle-edit-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0;\n border: none;\n background: none;\n color: var(--kombos-gray-500);\n cursor: pointer;\n}\n\n.kombos-cart-item__bundle-edit-btn:hover {\n color: var(--kombos-gray-700);\n}\n"
17019
- },
17020
- {
17021
- "filename": "sub-components/CartItem/components/ItemOptions/index.tsx",
17022
- "content": "import { IkasOrderLineItem } from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\n\nimport OptionValueDisplay from \"../OptionValueDisplay\";\n\ninterface Props {\n item: IkasOrderLineItem;\n}\n\nconst ItemOptions = observer(function ItemOptions({ item }: Props) {\n const options = item.options ?? [];\n\n if (options.length === 0) return null;\n\n return (\n <div className=\"kombos-cart-item__options\">\n {options.map((option, optIdx) =>\n option.values.map((value, valIdx) => (\n <OptionValueDisplay\n key={`${optIdx}-${valIdx}`}\n item={item}\n option={option}\n value={value}\n />\n )),\n )}\n </div>\n );\n});\n\nexport default ItemOptions;\n"
17023
- },
17024
- {
17025
- "filename": "sub-components/CartItem/components/ItemOptions/styles.css",
17026
- "content": "/* Options */\n.kombos-cart-item__options {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n}\n"
17027
- },
17028
- {
17029
- "filename": "sub-components/CartItem/components/OptionValueDisplay/index.tsx",
17030
- "content": "import {\n IkasOrderLineItem,\n IkasOrderLineItemOption,\n IkasOrderLineItemOptionValue,\n getOrderLineItemOptionValueFormattedPrice,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\n\ninterface Props {\n item: IkasOrderLineItem;\n option: IkasOrderLineItemOption;\n value: IkasOrderLineItemOptionValue;\n}\n\nfunction getFileName(value: string): string {\n try {\n const url = new URL(value);\n const segments = url.pathname.split(\"/\");\n return decodeURIComponent(segments[segments.length - 1] || \"File\");\n } catch {\n return value || \"File\";\n }\n}\n\nconst OptionValueDisplay = observer(function OptionValueDisplay({\n item,\n option,\n value,\n}: Props) {\n const price =\n (value?.price ?? 0) > 0\n ? getOrderLineItemOptionValueFormattedPrice(item, value)\n : \"\";\n\n const priceStr = price ? ` (+${price})` : null;\n const type = option.type as string;\n\n if (type === \"COLOR_PICKER\") {\n return (\n <span className=\"kombos-cart-item__option text-xs-regular\">\n {option.name}:\n <span\n className=\"kombos-cart-item__option-color\"\n style={{ backgroundColor: value.value }}\n />\n {priceStr}\n </span>\n );\n }\n\n if (type === \"FILE\") {\n return (\n <span className=\"kombos-cart-item__option text-xs-regular\">\n {option.name}:{\" \"}\n <a\n href={value.value}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"kombos-cart-item__option-file text-xs-regular\"\n >\n {getFileName(value.value)}\n </a>\n {priceStr}\n </span>\n );\n }\n\n const displayValue = type === \"CHECKBOX\" ? null : value.name || value.value;\n\n return (\n <span className=\"kombos-cart-item__option text-xs-regular\">\n {option.name}\n {displayValue ? `: ${displayValue}` : \"\"}\n {priceStr}\n </span>\n );\n});\n\nexport default OptionValueDisplay;\n"
17031
- },
17032
- {
17033
- "filename": "sub-components/CartItem/components/OptionValueDisplay/styles.css",
17034
- "content": ".kombos-cart-item__option {\n color: var(--kombos-gray-500);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.kombos-cart-item__option-color {\n display: inline-block;\n width: 0.75rem;\n height: 0.75rem;\n border-radius: 50%;\n border: 1px solid var(--kombos-gray-200);\n flex-shrink: 0;\n}\n\n.kombos-cart-item__option-file {\n background: none;\n border: none;\n padding: 0;\n color: var(--kombos-gray-500);\n text-decoration: underline;\n cursor: pointer;\n}\n\n.kombos-cart-item__option-file:hover {\n color: var(--kombos-gray-700);\n}\n"
17035
- },
17036
- {
17037
- "filename": "sub-components/CartItem/index.tsx",
17038
- "content": "import { observer } from \"@ikas/component-utils\";\nimport { TrashSVG, NoProductSVG } from \"../icons\";\nimport QuantitySelector from \"../QuantitySelector\";\nimport BundleProducts from \"./components/BundleProducts\";\nimport ItemOptions from \"./components/ItemOptions\";\nimport {\n getIkasOrderLineVariantMainImage,\n getIkasOrderLineVariantHref,\n getOrderLineItemFormattedFinalPriceWithQuantity,\n getDefaultSrc,\n createMediaSrcset,\n changeItemQuantity,\n IkasOrderLineItem,\n getOrderLineItemFormattedOverridenPriceWithQuantity,\n hasOrderLineItemDiscount,\n getOrderLineItemOverridenPriceWithQuantity,\n} from \"@ikas/bp-storefront\";\nimport { resolveAspectRatio, resolveObjectFit } from \"../../utils/media\";\nimport { cx } from \"../../utils/cx\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\ninterface CartItemProps {\n item: IkasOrderLineItem;\n onRemove: (item: IkasOrderLineItem) => void;\n variant?: \"sidebar\" | \"page\";\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n}\n\nconst CartItem = observer(function CartItem({\n item,\n onRemove,\n variant = \"sidebar\",\n aspectRatio,\n objectFit,\n}: CartItemProps) {\n const isPage = variant === \"page\";\n\n const mediaStyle: Record<string, string> = {\n aspectRatio: resolveAspectRatio(aspectRatio),\n objectFit: resolveObjectFit(objectFit),\n };\n const image = item.variant\n ? getIkasOrderLineVariantMainImage(item.variant)\n : null;\n const href = item.variant\n ? getIkasOrderLineVariantHref(item.variant)\n : undefined;\n const overridenPriceWithQuantity =\n getOrderLineItemOverridenPriceWithQuantity(item);\n const overridenFormattedPriceWithQuantity =\n getOrderLineItemFormattedOverridenPriceWithQuantity(item);\n\n const hasDiscount =\n hasOrderLineItemDiscount(item) || !!overridenPriceWithQuantity;\n const variantValues = item.variant?.variantValues ?? [];\n\n const rootClass = isPage\n ? \"kombos-cart-item kombos-cart-item--page\"\n : \"kombos-cart-item\";\n const nameClass = isPage\n ? \"kombos-cart-item__name text-md-semibold\"\n : \"kombos-cart-item__name text-sm-regular\";\n const imgSizes = isPage ? \"(min-width: 768px) 100px, 80px\" : \"72px\";\n\n return (\n <div className={rootClass}>\n <a href={href} className=\"kombos-cart-item__img-link\">\n {image?.isVideo ? (\n <video\n src={getDefaultSrc(image)}\n className=\"kombos-cart-item__img\"\n style={mediaStyle}\n muted\n loop\n autoPlay\n playsInline\n >\n <track kind=\"captions\" />\n </video>\n ) : image ? (\n <img\n src={getDefaultSrc(image)}\n srcSet={createMediaSrcset(image)}\n sizes={imgSizes}\n alt={item.variant?.name || \"\"}\n className=\"kombos-cart-item__img\"\n style={mediaStyle}\n />\n ) : (\n <div\n className=\"kombos-cart-item__img kombos-cart-item__img--placeholder\"\n style={mediaStyle}\n >\n <NoProductSVG />\n </div>\n )}\n </a>\n <div className=\"kombos-cart-item__details\">\n {isPage ? (\n <div className=\"kombos-cart-item__top\">\n <div className=\"kombos-cart-item__info\">\n <a href={href} className={nameClass}>\n {item.variant?.name}\n </a>\n {variantValues.length > 0 && (\n <p className=\"kombos-cart-item__variant-text text-sm-regular\">\n {variantValues\n .map(\n (vv) => `${vv.variantTypeName}: ${vv.variantValueName}`,\n )\n .join(\" / \")}\n </p>\n )}\n </div>\n <button\n className=\"kombos-cart-item__remove\"\n onClick={() => onRemove(item)}\n aria-label=\"Remove\"\n >\n <TrashSVG />\n </button>\n </div>\n ) : (\n <>\n <a href={href} className={nameClass}>\n {item.variant?.name}\n </a>\n\n {variantValues.length > 0 && (\n <div className=\"kombos-cart-item__variants\">\n {variantValues.map((vv, idx) => (\n <span\n key={idx}\n className=\"kombos-cart-item__variant text-xs-regular\"\n >\n {`${vv.variantTypeName}: ${vv.variantValueName}`}\n </span>\n ))}\n </div>\n )}\n </>\n )}\n\n <ItemOptions item={item} />\n <BundleProducts\n item={item}\n aspectRatio={aspectRatio}\n objectFit={objectFit}\n />\n\n {isPage ? (\n <div className=\"kombos-cart-item__bottom\">\n <QuantitySelector\n size=\"sm\"\n value={item.quantity}\n onChange={(qty) => changeItemQuantity(item, qty)}\n />\n <div className=\"kombos-cart-item__prices\">\n {hasDiscount && (\n <span className=\"kombos-cart-item__original-price text-sm-regular-strike\">\n {overridenFormattedPriceWithQuantity}\n </span>\n )}\n <span\n className={cx(\n \"kombos-cart-item__price\",\n \"text-md-semibold\",\n hasDiscount && \"kombos-cart-item__price--discount\",\n )}\n >\n {getOrderLineItemFormattedFinalPriceWithQuantity(item)}\n </span>\n </div>\n </div>\n ) : (\n <>\n <div className=\"kombos-cart-item__price-row\">\n <span\n className={cx(\n \"kombos-cart-item__price\",\n \"text-sm-medium\",\n hasDiscount && \"kombos-cart-item__price--discount\",\n )}\n >\n {getOrderLineItemFormattedFinalPriceWithQuantity(item)}\n </span>\n {hasDiscount && (\n <span className=\"kombos-cart-item__original-price text-sm-regular-strike\">\n {overridenFormattedPriceWithQuantity}\n </span>\n )}\n </div>\n\n <div className=\"kombos-cart-item__actions\">\n <QuantitySelector\n size=\"sm\"\n value={item.quantity}\n onChange={(qty) => changeItemQuantity(item, qty)}\n />\n <button\n className=\"kombos-cart-item__remove\"\n onClick={() => onRemove(item)}\n aria-label=\"Remove\"\n >\n <TrashSVG />\n </button>\n </div>\n </>\n )}\n </div>\n </div>\n );\n});\n\nexport default CartItem;\n"
17039
- },
17040
- {
17041
- "filename": "sub-components/CartItem/styles.css",
17042
- "content": "/* Cart Sidebar Item */\n.kombos-cart-item {\n display: flex;\n gap: 0.875rem;\n padding: 1.5rem 0;\n border-bottom: 1px solid var(--kombos-gray-100);\n}\n\n.kombos-cart-item:last-child {\n border-bottom: none;\n}\n\n.kombos-cart-item__img-link {\n flex-shrink: 0;\n height: fit-content;\n}\n\n.kombos-cart-item__img {\n width: 4.5rem;\n border-radius: 6px;\n border: 1px solid var(--kombos-gray-100);\n background: var(--kombos-gray-100);\n}\n\n.kombos-cart-item__img--placeholder {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--kombos-gray-300);\n font-size: 2.5rem;\n}\n\n.kombos-cart-item__details {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n}\n\n.kombos-cart-item__name {\n max-width: 100%;\n color: var(--kombos-gray-900);\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.kombos-cart-item__name:hover {\n text-decoration: underline;\n}\n\n.kombos-cart-item__variants {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem 0.75rem;\n}\n\n.kombos-cart-item__variant {\n color: var(--kombos-gray-500);\n}\n\n/* Price Row */\n.kombos-cart-item__price-row {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n.kombos-cart-item__original-price {\n color: var(--kombos-gray-400);\n}\n\n.kombos-cart-item__price {\n color: var(--kombos-gray-900);\n}\n\n.kombos-cart-item__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 0.5rem;\n}\n\n.kombos-cart-item__remove {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--kombos-gray-300);\n padding: 0.25rem;\n display: flex;\n font-size: 1.25rem;\n transition: color 0.15s;\n}\n\n.kombos-cart-item__remove:hover {\n color: var(--kombos-gray-500);\n}\n\n/* Page variant */\n.kombos-cart-item--page {\n gap: 1rem;\n padding: 1.25rem 0;\n}\n\n.kombos-cart-item--page:first-child {\n border-top: 1px solid var(--kombos-gray-100);\n}\n\n.kombos-cart-item--page .kombos-cart-item__img {\n width: 5rem;\n background-color: var(--kombos-gray-50);\n}\n\n@media (min-width: 768px) {\n .kombos-cart-item--page .kombos-cart-item__img {\n width: 6.25rem;\n }\n}\n\n.kombos-cart-item--page .kombos-cart-item__details {\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.kombos-cart-item--page .kombos-cart-item__remove {\n color: var(--kombos-gray-400);\n font-size: 1.125rem;\n}\n\n.kombos-cart-item--page .kombos-cart-item__remove:hover {\n color: var(--kombos-gray-700);\n}\n\n.kombos-cart-item__top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 0.5rem;\n}\n\n.kombos-cart-item__info {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n}\n\n.kombos-cart-item__variant-text {\n color: var(--kombos-gray-500);\n margin: 0;\n}\n\n.kombos-cart-item__bottom {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.kombos-cart-item__prices {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.5rem;\n flex-shrink: 0;\n}\n\n"
17043
- },
17044
- {
17045
- "filename": "sub-components/PageLoader/index.tsx",
17046
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
17047
- },
17048
- {
17049
- "filename": "sub-components/PageLoader/styles.css",
17050
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
17051
- },
17052
16860
  {
17053
16861
  "filename": "types.ts",
17054
16862
  "content": "export interface Props {\n title?: string;\n emptyCartText?: string;\n subtotalLabel?: string;\n totalLabel?: string;\n checkoutButtonText?: string;\n itemsText?: string;\n couponPlaceholder?: string;\n couponApplyText?: string;\n couponRemoveText?: string;\n couponApplyingText?: string;\n orderSummaryTitle?: string;\n couponToggleText?: string;\n continueShoppingText?: string;\n}\n"
17055
- },
17056
- {
17057
- "filename": "utils/cx.ts",
17058
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17059
- },
17060
- {
17061
- "filename": "utils/media.ts",
17062
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
17063
16863
  }
17064
16864
  ]
17065
16865
  },
@@ -17113,10 +16913,6 @@
17113
16913
  {
17114
16914
  "filename": "types.ts",
17115
16915
  "content": "import type { NumberOfColumns } from \"../../global-types\";\n\nexport interface Props {\n title?: string;\n titleColor?: string;\n backgroundColor?: string;\n desktopColumns?: NumberOfColumns;\n mobileColumns?: NumberOfColumns;\n components?: any;\n}\n"
17116
- },
17117
- {
17118
- "filename": "utils/media.ts",
17119
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
17120
16916
  }
17121
16917
  ]
17122
16918
  },
@@ -17280,18 +17076,6 @@
17280
17076
  "filename": "components/MobileFilterModal/styles.css",
17281
17077
  "content": "/* ===== Mobile Filter Modal ===== */\n.kombos-mobile-filter {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: var(--kombos-z-overlay);\n display: flex;\n justify-content: flex-end;\n}\n\n.kombos-mobile-filter__backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.35);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.kombos-mobile-filter--open .kombos-mobile-filter__backdrop {\n opacity: 1;\n}\n\n.kombos-mobile-filter__panel {\n position: relative;\n width: 100%;\n max-width: 25rem;\n height: 100%;\n background: var(--kombos-white);\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s ease;\n}\n\n.kombos-mobile-filter--open .kombos-mobile-filter__panel {\n transform: translateX(0);\n}\n\n/* Header */\n.kombos-mobile-filter__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.25rem;\n border-bottom: 1px solid var(--kombos-gray-200);\n}\n\n.kombos-mobile-filter__title {\n color: var(--kombos-gray-900);\n}\n\n.kombos-mobile-filter__close {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-size: 1.5rem;\n color: var(--kombos-gray-700);\n display: flex;\n align-items: center;\n}\n\n/* Content */\n.kombos-mobile-filter__content {\n flex: 1;\n overflow-y: auto;\n padding: 0 1.25rem;\n}\n\n/* Footer */\n.kombos-mobile-filter__footer {\n display: flex;\n flex-direction: column;\n}\n\n.kombos-mobile-filter__clear-row {\n display: flex;\n align-items: center;\n padding: 1rem 0.625rem;\n background: var(--kombos-white);\n border-top: 1px solid var(--kombos-gray-200);\n}\n\n.kombos-mobile-filter__clear-btn {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n color: var(--kombos-gray-400);\n text-decoration: underline;\n white-space: nowrap;\n}\n\n.kombos-mobile-filter__show-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 3.125rem;\n padding: 0.625rem 1.25rem;\n background: var(--kombos-gray-900);\n color: var(--kombos-white);\n border: none;\n cursor: pointer;\n text-transform: uppercase;\n}\n\n.kombos-mobile-filter__show-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Spinner */\n.kombos-mobile-filter__spinner {\n display: inline-block;\n width: 1.125rem;\n height: 1.125rem;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: var(--kombos-white);\n border-radius: 50%;\n animation: kombos-mobile-filter-spin 0.6s linear infinite;\n}\n\n@keyframes kombos-mobile-filter-spin {\n to {\n transform: rotate(360deg);\n }\n}\n"
17282
17078
  },
17283
- {
17284
- "filename": "hooks/useColumnPreference.ts",
17285
- "content": "import { useCallback, useEffect, useState } from \"preact/hooks\";\n\nconst COLUMNS_STORAGE_KEY = \"kombos-product-list-columns\";\n\nexport function useColumnPreference() {\n const [columns, setColumns] = useState<3 | 4>(4);\n\n useEffect(() => {\n try {\n const stored = localStorage.getItem(COLUMNS_STORAGE_KEY);\n if (stored === \"3\") setColumns(3);\n } catch {}\n }, []);\n\n const toggleColumns = useCallback(() => {\n setColumns((prev) => {\n const next = prev === 4 ? 3 : 4;\n try {\n localStorage.setItem(COLUMNS_STORAGE_KEY, String(next));\n } catch {}\n return next;\n });\n }, []);\n\n return { columns, toggleColumns };\n}\n"
17286
- },
17287
- {
17288
- "filename": "hooks/useInfiniteScroll.ts",
17289
- "content": "import { useEffect, useRef } from \"preact/hooks\";\nimport {\n hasProductListNextPage,\n getProductListNextPage,\n IkasProductList,\n} from \"@ikas/bp-storefront\";\n\ninterface Options {\n isEnabled: boolean;\n productList: IkasProductList | null | undefined;\n}\n\nexport function useInfiniteScroll({ isEnabled, productList }: Options) {\n const sentinelRef = useRef<HTMLDivElement>(null);\n const isLoadingMoreRef = useRef(false);\n\n useEffect(() => {\n if (!isEnabled || !sentinelRef.current || !productList) return;\n\n const sentinel = sentinelRef.current;\n\n const observer = new IntersectionObserver(\n (entries) => {\n if (\n entries[0].isIntersecting &&\n hasProductListNextPage(productList) &&\n !isLoadingMoreRef.current\n ) {\n isLoadingMoreRef.current = true;\n getProductListNextPage(productList).finally(() => {\n isLoadingMoreRef.current = false;\n setTimeout(() => {\n if (sentinelRef.current) {\n observer.unobserve(sentinelRef.current);\n observer.observe(sentinelRef.current);\n }\n }, 200);\n });\n }\n },\n { rootMargin: \"200px\" },\n );\n\n observer.observe(sentinel);\n return () => observer.disconnect();\n }, [isEnabled, productList]);\n\n return { sentinelRef };\n}\n"
17290
- },
17291
- {
17292
- "filename": "hooks/usePageTracking.ts",
17293
- "content": "import { useEffect, useRef } from \"preact/hooks\";\nimport {\n setProductListVisiblePage,\n IkasProductList,\n} from \"@ikas/bp-storefront\";\n\ninterface Options {\n isEnabled: boolean;\n productList: IkasProductList | null | undefined;\n productCount: number;\n}\n\nexport function usePageTracking({\n isEnabled,\n productList,\n productCount,\n}: Options) {\n const gridRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isEnabled || !gridRef.current || !productList) return;\n\n const markers =\n gridRef.current.querySelectorAll<HTMLElement>(\"[data-page]\");\n if (markers.length === 0) return;\n\n const visiblePages = new Set<number>();\n\n const observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n const page = Number((entry.target as HTMLElement).dataset.page);\n if (entry.isIntersecting) {\n visiblePages.add(page);\n } else {\n visiblePages.delete(page);\n }\n }\n\n if (visiblePages.size > 0) {\n const currentPage = Math.min(...visiblePages);\n\n if (currentPage !== productList.infiniteScrollPage) {\n setProductListVisiblePage(productList, currentPage);\n }\n }\n },\n { rootMargin: \"0px 0px -50% 0px\" },\n );\n\n markers.forEach((m) => observer.observe(m));\n return () => observer.disconnect();\n }, [isEnabled, productList, productCount]);\n\n return { gridRef };\n}\n"
17294
- },
17295
17079
  {
17296
17080
  "filename": "ikas-config-snippet.json",
17297
17081
  "content": "{\n \"id\": \"{{PROJECT_ID}}-product-list\",\n \"name\": \"CategoryList\",\n \"type\": \"section\",\n \"entry\": \"./src/components/CategoryList/index.tsx\",\n \"styles\": \"./src/components/CategoryList/styles.css\",\n \"props\": [\n {\n \"name\": \"productList\",\n \"displayName\": \"Product Listesi\",\n \"type\": \"PRODUCT_LIST\",\n \"required\": true,\n \"groupId\": \"data\"\n },\n {\n \"name\": \"pageTitle\",\n \"displayName\": \"Page Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"productCountText\",\n \"displayName\": \"Product Count Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"ürün\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"emptyMessage\",\n \"displayName\": \"Empty State Message\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Product bulunamadı.\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"searchPlaceholder\",\n \"displayName\": \"Search Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Search\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"clearFiltersText\",\n \"displayName\": \"Filters Temizle Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Filters Temizle\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"addToCartText\",\n \"displayName\": \"Cart Add Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Add to Cart\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"addedToCartText\",\n \"displayName\": \"Cart Added Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Added\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"outOfStockText\",\n \"displayName\": \"Sold Out Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Sold Out\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"showProductsText\",\n \"displayName\": \"Products Show Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"ÜRÜNÜ GÖR\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"filtersText\",\n \"displayName\": \"Filters Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Filters\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"homepageText\",\n \"displayName\": \"Home Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Home\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"badgeText\",\n \"displayName\": \"Label Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"showFilters\",\n \"displayName\": \"Filters Show\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"filters\"\n },\n {\n \"name\": \"showSearch\",\n \"displayName\": \"Search Show\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"filters\"\n },\n {\n \"name\": \"aspectRatio\",\n \"displayName\": \"Image En Boy Ratio\",\n \"type\": \"ENUM\",\n \"required\": false,\n \"groupId\": \"image-settings\",\n \"enumTypeId\": \"s3OODUmZpJ\"\n },\n {\n \"name\": \"objectFit\",\n \"displayName\": \"Image Fit\",\n \"type\": \"ENUM\",\n \"required\": false,\n \"groupId\": \"image-settings\",\n \"enumTypeId\": \"GrylMqHxui\"\n },\n {\n \"name\": \"isInfinity\",\n \"displayName\": \"Infinite Scroll\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"pagination\"\n },\n {\n \"name\": \"columnText\",\n \"displayName\": \"Column Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Column\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"loadPrevPageText\",\n \"displayName\": \"Load Previous Page Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Önceki sayfayı yükle\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"hideAddToCartButton\",\n \"displayName\": \"Cart Add Butonunu Hide\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"card-settings\"\n },\n {\n \"name\": \"components\",\n \"displayName\": \"Components\",\n \"type\": \"COMPONENT_LIST\",\n \"required\": false,\n \"privateVarMap\": {\n \"product\": {\n \"id\": \"pvm_1772808304776_3\",\n \"typeId\": \"@ikas/bp-storefront-models-IkasProduct\"\n }\n },\n \"filteredComponentIds\": [\n \"{{PROJECT_ID}}-card-product-price\",\n \"{{PROJECT_ID}}-card-product-variants\",\n \"{{PROJECT_ID}}-card-product-name\"\n ]\n },\n {\n \"name\": \"hideBreadcrumb\",\n \"displayName\": \"Hide Breadcrumb\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"appearance\"\n },\n {\n \"name\": \"isBrandPage\",\n \"displayName\": \"Is This a Brand Page?\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"data\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"data\",\n \"name\": \"Data\",\n \"description\": \"Product listesi veri kaynağı\"\n },\n {\n \"id\": \"appearance\",\n \"name\": \"View\",\n \"description\": \"Background plan rengi, ürün kartı görsel oranı ve kaplama ayarları\",\n \"children\": [\n {\n \"id\": \"image-settings\",\n \"name\": \"Image Settings\",\n \"description\": \"Product kartı görsel oranı ve sığdırma ayarları\"\n },\n {\n \"id\": \"card-settings\",\n \"name\": \"Product Kartı Settings\",\n \"description\": \"Product kartı görünüm ayarları\"\n }\n ]\n },\n {\n \"id\": \"filters\",\n \"name\": \"Filters\",\n \"description\": \"Product filtreleme ve arama özelliklerini açıp kapatma\"\n },\n {\n \"id\": \"pagination\",\n \"name\": \"Pagination\",\n \"description\": \"Klasik sayfalama veya sonsuz kaydırma davranışı\"\n },\n {\n \"id\": \"texts\",\n \"name\": \"Texts\",\n \"description\": \"Button etiketleri, boş durum mesajları ve arayüz metinleri\"\n }\n ]\n}"
@@ -17304,73 +17088,9 @@
17304
17088
  "filename": "styles.css",
17305
17089
  "content": "/* ===== Category List Section ===== */\n.kombos-category-list {\n width: 100%;\n}\n\n.kombos-category-list__prev-wrap {\n display: flex;\n justify-content: center;\n margin-bottom: 1rem;\n}\n\n/* Top: Breadcrumb + Title */\n.kombos-category-list__top {\n padding-top: 1rem;\n}\n\n.kombos-category-list__breadcrumb {\n margin-bottom: 0;\n}\n\n/* Main layout */\n.kombos-category-list__main {\n display: flex;\n gap: 2rem;\n padding-top: 1.5rem;\n padding-bottom: 3rem;\n}\n\n/* Sidebar — hidden on mobile */\n.kombos-category-list__sidebar {\n display: none;\n}\n\n/* Grid area */\n.kombos-category-list__grid-area {\n flex: 1;\n min-width: 0;\n}\n\n.kombos-category-list__grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n}\n\n.kombos-category-list__empty {\n color: var(--kombos-gray-900);\n text-align: center;\n padding: 3rem 0;\n}\n\n.kombos-category-list__pagination {\n margin-top: 2rem;\n}\n\n.kombos-category-list__card {\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.kombos-category-list__card-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n/* Sentinel for IntersectionObserver (infinite scroll) */\n.kombos-category-list__sentinel {\n height: 1px;\n}\n\n/* ===== Tablet (>= 768px) ===== */\n@media (min-width: 768px) {\n .kombos-category-list__grid {\n gap: 1.5rem;\n }\n}\n\n/* ===== Desktop (>= 1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-category-list__top {\n padding-top: 1.5rem;\n }\n\n .kombos-category-list__main {\n padding-top: 1.5rem;\n padding-bottom: 4rem;\n }\n\n /* Show sidebar — sticky so it stays visible while scrolling */\n .kombos-category-list__sidebar {\n width: 15rem;\n display: block;\n position: sticky;\n top: 0.75rem;\n max-height: calc(100vh - 2.5rem);\n overflow-y: auto;\n }\n\n /* Grid columns — default 4 on desktop */\n .kombos-category-list__grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .kombos-category-list__grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n"
17306
17090
  },
17307
- {
17308
- "filename": "sub-components/Breadcrumb/index.tsx",
17309
- "content": "import { cx } from \"../../utils/cx\";\nimport { CaretRightSVG } from \"../icons\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\ninterface Props {\n items: BreadcrumbItem[];\n size?: \"sm\" | \"xs\";\n className?: string;\n}\n\nexport default function Breadcrumb({ items, size = \"sm\", className }: Props) {\n if (items.length === 0) return null;\n\n const typographyClass = size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\";\n\n return (\n <nav className={cx(\"kombos-breadcrumb\", className)}>\n {items.map((item, i) => {\n const isLast = i === items.length - 1;\n return (\n <span key={item.href ?? item.label} className=\"kombos-breadcrumb__item\">\n {item.href ? (\n <a\n href={item.href}\n className={cx(\"kombos-breadcrumb__link\", typographyClass, isLast && \"kombos-breadcrumb__link--active\")}\n >\n {item.label}\n </a>\n ) : item.onClick ? (\n <button\n type=\"button\"\n onClick={item.onClick}\n className={cx(\"kombos-breadcrumb__link\", \"kombos-breadcrumb__link-btn\", typographyClass)}\n >\n {item.label}\n </button>\n ) : (\n <span className={cx(\"kombos-breadcrumb__current\", typographyClass)}>\n {item.label}\n </span>\n )}\n {!isLast && (\n <span className={cx(\"kombos-breadcrumb__sep\", size === \"xs\" && \"kombos-breadcrumb__sep--xs\")}>\n <CaretRightSVG />\n </span>\n )}\n </span>\n );\n })}\n </nav>\n );\n}\n"
17310
- },
17311
- {
17312
- "filename": "sub-components/Breadcrumb/styles.css",
17313
- "content": "/* ===== Breadcrumb Sub-Component ===== */\n.kombos-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__link {\n color: var(--kombos-gray-500);\n text-decoration: none;\n}\n\n.kombos-breadcrumb__link:hover {\n text-decoration: underline;\n}\n\n.kombos-breadcrumb__link-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.kombos-breadcrumb__link--active {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__current {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__sep {\n font-size: 0.75rem;\n color: var(--kombos-gray-400);\n display: inline-flex;\n align-items: center;\n}\n\n.kombos-breadcrumb__sep--xs {\n font-size: 0.625rem;\n color: var(--kombos-gray-300);\n}\n"
17314
- },
17315
- {
17316
- "filename": "sub-components/Button/index.tsx",
17317
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
17318
- },
17319
- {
17320
- "filename": "sub-components/Button/styles.css",
17321
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
17322
- },
17323
- {
17324
- "filename": "sub-components/Pagination/index.tsx",
17325
- "content": "import { observer } from \"@ikas/component-utils\";\nimport { cx } from \"../../utils/cx\";\nimport { getPageNumbers } from \"../../utils/pagination\";\nimport {\n CaretDoubleLeftSVG,\n CaretLeftSVG,\n CaretRightSVG,\n CaretDoubleRightSVG,\n DotsThreeSVG,\n} from \"../icons\";\n\ninterface Props {\n currentPage: number;\n totalPages: number;\n hasPrev: boolean;\n hasNext: boolean;\n onPageChange: (page: number) => void;\n}\n\nconst Pagination = observer(function Pagination({\n currentPage,\n totalPages,\n hasPrev,\n hasNext,\n onPageChange,\n}: Props) {\n if (totalPages <= 1) return null;\n\n const pages = getPageNumbers(currentPage, totalPages);\n\n const showFirstBtn = totalPages > 5 && currentPage >= 5;\n const showLastBtn = totalPages > 5 && currentPage <= totalPages - 4;\n\n return (\n <nav className=\"kombos-pagination\" aria-label=\"Pagination\">\n <div className=\"kombos-pagination__nav-group\">\n {showFirstBtn && (\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(1)}\n aria-label=\"First page\"\n >\n <CaretDoubleLeftSVG />\n </button>\n )}\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(currentPage - 1)}\n disabled={!hasPrev}\n aria-label=\"Previous page\"\n >\n <CaretLeftSVG />\n </button>\n </div>\n\n <div className=\"kombos-pagination__pages\">\n {pages.map((page, i) =>\n page === \"dots\" ? (\n <span key={`dots-${i}`} className=\"kombos-pagination__dots\">\n <DotsThreeSVG />\n </span>\n ) : (\n <button\n key={page}\n type=\"button\"\n className={cx(\n \"kombos-pagination__page\",\n \"text-md-semibold\",\n page === currentPage && \"kombos-pagination__page--active\"\n )}\n onClick={() => onPageChange(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n >\n {page}\n </button>\n )\n )}\n </div>\n\n <div className=\"kombos-pagination__nav-group\">\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(currentPage + 1)}\n disabled={!hasNext}\n aria-label=\"Next page\"\n >\n <CaretRightSVG />\n </button>\n {showLastBtn && (\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(totalPages)}\n aria-label=\"Last page\"\n >\n <CaretDoubleRightSVG />\n </button>\n )}\n </div>\n </nav>\n );\n});\n\nexport default Pagination;\n"
17326
- },
17327
- {
17328
- "filename": "sub-components/Pagination/styles.css",
17329
- "content": "/* ===== Pagination ===== */\n.kombos-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 0.75rem 1.5rem;\n max-width: 100%;\n}\n\n/* Left/right button groups (first+prev, next+last) */\n.kombos-pagination__nav-group {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n/* Navigation buttons (first, prev, next, last) */\n.kombos-pagination__nav-btn {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--kombos-gray-50);\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n cursor: pointer;\n font-size: 1rem;\n color: var(--kombos-gray-900);\n transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n\n.kombos-pagination__nav-btn:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n background: var(--kombos-gray-100);\n}\n\n.kombos-pagination__nav-btn:disabled {\n cursor: default;\n color: var(--kombos-gray-300);\n background: var(--kombos-gray-50);\n}\n\n/* Page numbers container */\n.kombos-pagination__pages {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n/* Page number buttons — 32×32 */\n.kombos-pagination__page {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n padding: 0;\n color: var(--kombos-gray-500);\n transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.kombos-pagination__page:hover {\n color: var(--kombos-gray-900);\n background: var(--kombos-gray-50);\n}\n\n.kombos-pagination__page--active {\n color: var(--kombos-white);\n background: var(--kombos-gray-900);\n pointer-events: none;\n}\n\n/* Dots separator */\n.kombos-pagination__dots {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: var(--kombos-gray-400);\n}\n"
17330
- },
17331
- {
17332
- "filename": "sub-components/ProductCard/index.tsx",
17333
- "content": "import { useState, useRef, useEffect } from \"preact/hooks\";\nimport {\n getSelectedProductVariant,\n getProductVariantMainImage,\n getProductVariantDiscountPercentage,\n hasProductVariantDiscount,\n hasProductVariantStock,\n addSelectedtedVariantToCart,\n getProductHref,\n getDefaultSrc,\n IkasProduct,\n isAddToCartEnabled,\n isFavoriteIkasProduct,\n addIkasProductToFavorites,\n removeIkasProductFromFavorites,\n customerStore,\n hasCustomer,\n Router,\n createMediaSrcset,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { NoProductSVG, Heart2SVG, HeartFilledSVG } from \"../icons\";\nimport Button from \"../Button\";\nimport SpinnerIcon from \"../SpinnerIcon\";\nimport Tag from \"../Tag\";\nimport { resolveAspectRatio, resolveObjectFit } from \"../../utils/media\";\nimport { showToast } from \"../../utils/toast\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\ninterface Props {\n product: IkasProduct;\n addToCartText: string;\n addedToCartText?: string;\n outOfStockText?: string;\n goToProductText?: string;\n showFavorite?: boolean;\n hideAddToCartButton?: boolean;\n badgeText?: string;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n dataPage?: number;\n sizes?: string;\n openCartOnAdd?: boolean;\n errorMessage?: string;\n onFavoriteRemove?: () => void;\n priority?: boolean;\n}\n\nconst ProductCard = observer(function ProductCard({\n product,\n addToCartText,\n addedToCartText = \"Sepete Eklendi\",\n outOfStockText = \"Tükendi\",\n goToProductText = \"Ürüne Git\",\n showFavorite = true,\n hideAddToCartButton = false,\n badgeText,\n aspectRatio,\n objectFit,\n dataPage,\n sizes = \"(max-width: 767px) calc(50vw - 24px), (max-width: 1023px) calc(50vw - 44px), 300px\",\n openCartOnAdd = true,\n errorMessage = \"Ürün sepete eklenemedi\",\n onFavoriteRemove,\n priority = false,\n}: Props) {\n const [cartState, setCartState] = useState<\"idle\" | \"loading\" | \"added\">(\n \"idle\",\n );\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, []);\n\n const selectedVariant = getSelectedProductVariant(product);\n const productImage = selectedVariant\n ? getProductVariantMainImage(selectedVariant)\n : null;\n const image = productImage?.image;\n\n const sortedImages = selectedVariant?.images\n ? [...selectedVariant.images].sort((a, b) => a.order - b.order)\n : [];\n const secondImage = sortedImages.length > 1 ? sortedImages[1]?.image : null;\n const hasDiscount = selectedVariant\n ? hasProductVariantDiscount(selectedVariant)\n : false;\n const inStock = selectedVariant\n ? hasProductVariantStock(selectedVariant)\n : false;\n const discountPercentage =\n hasDiscount && selectedVariant\n ? getProductVariantDiscountPercentage(selectedVariant)\n : null;\n\n const productHref = getProductHref(product);\n const isBundleProduct = !!selectedVariant?.bundleSettings;\n const hasOptionSet = !!product.productOptionSet;\n const isFavorite = isFavoriteIkasProduct(product);\n\n const mediaStyle: Record<string, string> = {};\n const resolvedAR = resolveAspectRatio(aspectRatio);\n const resolvedOF = resolveObjectFit(objectFit);\n if (resolvedAR) mediaStyle.aspectRatio = resolvedAR;\n if (resolvedOF) mediaStyle.objectFit = resolvedOF;\n\n const handleAddToCart = async () => {\n if (cartState === \"loading\") return;\n\n if (!isAddToCartEnabled(product) || isBundleProduct || hasOptionSet) {\n Router.navigate(productHref);\n return;\n }\n\n if (timerRef.current) clearTimeout(timerRef.current);\n setCartState(\"loading\");\n try {\n const result = await addSelectedtedVariantToCart(product, 1);\n\n if (result.success) {\n if (openCartOnAdd) {\n window.dispatchEvent(new CustomEvent(\"ikas:open-cart-sidebar\"));\n }\n setCartState(\"added\");\n } else {\n showToast(errorMessage, \"error\");\n }\n\n timerRef.current = setTimeout(() => setCartState(\"idle\"), 2000);\n } catch {\n setCartState(\"idle\");\n showToast(errorMessage, \"error\");\n }\n };\n\n const handleFavoriteToggle = async () => {\n const isLoggedIn = hasCustomer(customerStore);\n if (!isLoggedIn) {\n Router.navigateToPage(\"LOGIN\");\n return;\n }\n\n if (isFavorite) {\n await removeIkasProductFromFavorites(product);\n onFavoriteRemove?.();\n } else {\n await addIkasProductToFavorites(product);\n }\n };\n\n return (\n <div className=\"kombos-product-card\" data-page={dataPage}>\n {/* Image container */}\n <div className=\"kombos-product-card__image-wrapper\">\n <a href={productHref} className=\"kombos-product-card__media-link\" aria-label={product.name || \"Product\"}>\n {image?.isVideo ? (\n <video\n src={getDefaultSrc(image)}\n className=\"kombos-product-card__media\"\n style={mediaStyle}\n muted\n loop\n autoPlay\n playsInline\n aria-label={product.name}\n >\n <track kind=\"captions\" />\n </video>\n ) : image ? (\n <>\n <img\n src={getDefaultSrc(image)}\n srcSet={createMediaSrcset(image)}\n sizes={sizes}\n alt={product.name}\n className=\"kombos-product-card__media kombos-product-card__media--primary\"\n style={mediaStyle}\n loading={priority ? \"eager\" : \"lazy\"}\n decoding={priority ? \"sync\" : \"async\"}\n fetchpriority={priority ? \"high\" : undefined}\n />\n {secondImage && !secondImage.isVideo && (\n <img\n src={getDefaultSrc(secondImage)}\n srcSet={createMediaSrcset(secondImage)}\n sizes={sizes}\n alt=\"\"\n className=\"kombos-product-card__media kombos-product-card__media--hover\"\n style={mediaStyle}\n loading=\"lazy\"\n decoding=\"async\"\n />\n )}\n </>\n ) : (\n <div\n className=\"kombos-product-card__media kombos-product-card__media--placeholder\"\n style={mediaStyle}\n >\n <NoProductSVG />\n </div>\n )}\n </a>\n\n {/* Out of stock overlay — must render before badges/heart so they appear on top */}\n {!inStock && <div className=\"kombos-product-card__overlay\" />}\n\n {/* Badges */}\n {(hasDiscount || badgeText) && (\n <div className=\"kombos-product-card__badges\">\n {hasDiscount && discountPercentage && (\n <Tag type=\"discounted\" size=\"s\">\n %{discountPercentage}\n </Tag>\n )}\n {badgeText && (\n <Tag type=\"new\" size=\"s\">\n {badgeText}\n </Tag>\n )}\n </div>\n )}\n\n {/* Favorite button */}\n {showFavorite && (\n <button\n type=\"button\"\n className=\"kombos-product-card__favorite\"\n onClick={handleFavoriteToggle}\n aria-label=\"Favorite\"\n >\n {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}\n </button>\n )}\n </div>\n\n {/* Add to Cart / Go to Product */}\n {!hideAddToCartButton && (\n <>\n {isBundleProduct || (hasOptionSet && inStock) ? (\n <Button\n variant=\"primary\"\n size=\"xs\"\n className=\"kombos-product-card__add-btn\"\n onClick={() => Router.navigate(productHref)}\n >\n {goToProductText}\n </Button>\n ) : (\n <Button\n variant={cartState === \"added\" ? \"secondary\" : \"primary\"}\n size=\"xs\"\n className=\"kombos-product-card__add-btn\"\n onClick={inStock ? handleAddToCart : undefined}\n disabled={!inStock || cartState === \"loading\"}\n icon={\n inStock && cartState === \"loading\" ? <SpinnerIcon /> : undefined\n }\n >\n {!inStock && outOfStockText}\n {inStock && cartState === \"added\" && addedToCartText}\n {inStock &&\n (cartState === \"idle\" || cartState === \"loading\") &&\n addToCartText}\n </Button>\n )}\n </>\n )}\n </div>\n );\n});\n\nexport default ProductCard;\n"
17334
- },
17335
- {
17336
- "filename": "sub-components/ProductCard/styles.css",
17337
- "content": "/* ===== Product Card ===== */\n.kombos-product-card {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n min-width: 0;\n}\n\n/* Image wrapper */\n.kombos-product-card__image-wrapper {\n position: relative;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.kombos-product-card__media-link {\n display: block;\n}\n\n.kombos-product-card__media {\n width: 100%;\n height: auto;\n display: block;\n background: var(--kombos-gray-100);\n}\n\n.kombos-product-card__media--primary {\n transition: opacity 0.3s ease;\n}\n\n.kombos-product-card__media--hover {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.kombos-product-card__image-wrapper:hover .kombos-product-card__media--primary {\n opacity: 0;\n}\n\n.kombos-product-card__image-wrapper:hover .kombos-product-card__media--hover {\n opacity: 1;\n}\n\n.kombos-product-card__media--placeholder {\n border: 1px solid var(--kombos-gray-100);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n color: var(--kombos-gray-300);\n font-size: 4rem;\n}\n\n/* Badges */\n.kombos-product-card__badges {\n position: absolute;\n top: 0.75rem;\n left: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Favorite */\n.kombos-product-card__favorite {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-size: 1.5rem;\n color: var(--kombos-gray-900);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Out of stock overlay */\n.kombos-product-card__overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.32);\n pointer-events: none;\n}\n\n\n/* Add to Cart Button */\n.kombos-product-card__add-btn {\n width: 100%;\n}\n"
17338
- },
17339
- {
17340
- "filename": "sub-components/SpinnerIcon/index.tsx",
17341
- "content": "import { cx } from \"../../utils/cx\";\nimport { SpinnerSVG } from \"../icons\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function SpinnerIcon({ className }: Props) {\n return <SpinnerSVG className={cx(\"kombos-spinner\", className)} />;\n}\n"
17342
- },
17343
- {
17344
- "filename": "sub-components/SpinnerIcon/styles.css",
17345
- "content": ".kombos-spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n"
17346
- },
17347
- {
17348
- "filename": "sub-components/VariantBadge/index.tsx",
17349
- "content": "import {\n IkasProduct,\n IkasVariantValue,\n getIkasVariantValueThumbnailImage,\n isIkasVariantTypeColorSelection,\n selectVariantValue,\n getDisplayedProductVariantTypes,\n getProductVariantMainImage,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { BadgeImage, BadgeColor, BadgeText } from \"../Badge\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props {\n product: IkasProduct;\n size?: \"xs\" | \"s\" | \"m\" | \"l\";\n disableRoute?: boolean;\n scrollable?: boolean;\n showLabels?: boolean;\n useVariantImages?: boolean;\n onSelect?: () => void;\n}\n\nconst VariantBadge = observer(function VariantBadge({\n product,\n size = \"s\",\n disableRoute,\n scrollable,\n showLabels,\n useVariantImages,\n onSelect,\n}: Props) {\n const displayedVariantTypes = getDisplayedProductVariantTypes(product);\n if (displayedVariantTypes.length === 0) return null;\n\n function handleSelect(variantValue: IkasVariantValue) {\n selectVariantValue(product, variantValue, disableRoute);\n onSelect?.();\n }\n\n return (\n <div\n className={cx(\n \"kombos-variant-badge__groups\",\n size === \"l\" && \"kombos-variant-badge__groups--l\",\n )}\n >\n {displayedVariantTypes.map((dvt) => {\n const isColor = isIkasVariantTypeColorSelection(dvt.variantType);\n\n return (\n <div key={dvt.variantType.id} className=\"kombos-variant-badge__group\">\n {showLabels && (\n <span className={cx(\"kombos-variant-badge__label\", size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\")}>\n {dvt.variantType.name}\n </span>\n )}\n <div\n className={cx(\n \"kombos-variant-badge__row\",\n scrollable && \"kombos-variant-badge__row--scrollable\",\n size === \"l\" && \"kombos-variant-badge__row--l\",\n )}\n >\n {dvt.displayedVariantValues.map((dvv) => {\n const isSelected = dvv.isSelected;\n const outOfStock = dvv.hasStock === false;\n const variantValue = dvv.variantValue;\n\n if (isColor) {\n // Variant product image\n if (useVariantImages) {\n const variantImage = getProductVariantMainImage(\n dvv.variant,\n )?.image;\n\n if (variantImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={variantImage}\n alt={variantValue.name}\n sizes=\"64px\"\n variantImg\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Thumbnail image\n const thumbImage =\n getIkasVariantValueThumbnailImage(variantValue);\n\n if (thumbImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={thumbImage}\n alt={variantValue.name}\n sizes=\"(max-width: 1024px) 100vw, 100px\"\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n\n // Color swatch\n const colorCode = variantValue.colorCode;\n if (colorCode) {\n return (\n <BadgeColor\n key={variantValue.id}\n colorCode={colorCode}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Text badge (fallback)\n return (\n <BadgeText\n key={variantValue.id}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n >\n {variantValue.name}\n </BadgeText>\n );\n })}\n </div>\n </div>\n );\n })}\n </div>\n );\n});\n\nexport default VariantBadge;\n"
17350
- },
17351
- {
17352
- "filename": "sub-components/VariantBadge/styles.css",
17353
- "content": "/* ===== Variant Badge Layout ===== */\n\n/* ---- Layout ---- */\n.kombos-variant-badge__groups {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.kombos-variant-badge__groups--l {\n gap: 1.5rem;\n}\n\n.kombos-variant-badge__group {\n display: flex;\n flex-direction: column;\n}\n\n.kombos-variant-badge__label {\n color: var(--kombos-gray-900);\n margin-bottom: 0.375rem;\n}\n\n.kombos-variant-badge__row {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.kombos-variant-badge__row--l {\n gap: 0.5rem;\n}\n\n.kombos-variant-badge__row--scrollable {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n}\n\n.kombos-variant-badge__row--scrollable::-webkit-scrollbar {\n display: none;\n}\n\n.kombos-variant-badge__row--scrollable .kombos-badge {\n flex-shrink: 0;\n}\n"
17354
- },
17355
17091
  {
17356
17092
  "filename": "types.ts",
17357
17093
  "content": "import type { IkasProductList } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n productList: IkasProductList;\n pageTitle?: string;\n productCountText?: string;\n emptyMessage?: string;\n searchPlaceholder?: string;\n clearFiltersText?: string;\n addToCartText?: string;\n addedToCartText?: string;\n outOfStockText?: string;\n showProductsText?: string;\n filtersText?: string;\n homepageText?: string;\n badgeText?: string;\n showFilters?: boolean;\n showSearch?: boolean;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n isInfinity?: boolean;\n columnText?: string;\n loadPrevPageText?: string;\n hideAddToCartButton?: boolean;\n components?: any;\n hideBreadcrumb?: boolean;\n isBrandPage?: boolean;\n}\n"
17358
- },
17359
- {
17360
- "filename": "utils/cx.ts",
17361
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17362
- },
17363
- {
17364
- "filename": "utils/media.ts",
17365
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
17366
- },
17367
- {
17368
- "filename": "utils/pagination.ts",
17369
- "content": "export function getPageNumbers(\n current: number,\n total: number\n): (number | \"dots\")[] {\n if (total <= 7) {\n return Array.from({ length: total }, (_, i) => i + 1);\n }\n\n const pages: (number | \"dots\")[] = [1];\n\n if (current > 3) {\n pages.push(\"dots\");\n }\n\n const start = Math.max(2, current - 1);\n const end = Math.min(total - 1, current + 1);\n\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n\n if (current < total - 2) {\n pages.push(\"dots\");\n }\n\n pages.push(total);\n\n return pages;\n}\n"
17370
- },
17371
- {
17372
- "filename": "utils/toast.ts",
17373
- "content": "export function showToast(message: string, variant: \"success\" | \"error\") {\n window.dispatchEvent(\n new CustomEvent(\"ikas:show-toast\", { detail: { message, variant } })\n );\n}\n"
17374
17094
  }
17375
17095
  ]
17376
17096
  },
@@ -17414,10 +17134,6 @@
17414
17134
  "filename": "additional/ProductDetail/types.ts",
17415
17135
  "content": "import type { IkasProduct } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n product?: IkasProduct | null;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n components?: any;\n bottomComponents?: any;\n homepageText?: string;\n}\n"
17416
17136
  },
17417
- {
17418
- "filename": "hooks/useToast.ts",
17419
- "content": "import { useState, useCallback, useRef } from \"preact/hooks\";\n\nexport const TOAST_LIMIT = 3;\n\ntype ToastVariant = \"success\" | \"error\";\n\nexport type ToastItem = {\n id: number;\n message: string;\n variant: ToastVariant;\n};\n\nexport function useToast() {\n const [toasts, setToasts] = useState<ToastItem[]>([]);\n const idRef = useRef(0);\n\n const show = useCallback((message: string, variant: ToastVariant) => {\n const id = ++idRef.current;\n setToasts((prev) => [...prev, { id, message, variant }]);\n }, []);\n\n const dismiss = useCallback((id: number) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n return { toasts, show, dismiss };\n}\n"
17420
- },
17421
17137
  {
17422
17138
  "filename": "ikas-config-snippet.json",
17423
17139
  "content": "{\n \"id\": \"{{PROJECT_ID}}-header\",\n \"name\": \"Header\",\n \"type\": \"section\",\n \"entry\": \"./src/components/Header/index.tsx\",\n \"styles\": \"./src/components/Header/styles.css\",\n \"props\": [\n {\n \"name\": \"backgroundColor\",\n \"displayName\": \"Background Color\",\n \"type\": \"COLOR\",\n \"required\": false,\n \"defaultValue\": \"#ffffff\",\n \"groupId\": \"appearance\"\n },\n {\n \"name\": \"borderColor\",\n \"displayName\": \"Border Color\",\n \"type\": \"COLOR\",\n \"required\": false,\n \"defaultValue\": \"#f6f6f6\",\n \"groupId\": \"appearance\"\n },\n {\n \"name\": \"components\",\n \"displayName\": \"Components\",\n \"type\": \"COMPONENT_LIST\",\n \"required\": false,\n \"filteredComponentIds\": [\n \"{{PROJECT_ID}}-navbar\",\n \"{{PROJECT_ID}}-announcements\",\n \"{{PROJECT_ID}}-cookie-bar\"\n ]\n }\n ],\n \"isHeader\": true,\n \"propGroups\": [\n {\n \"id\": \"appearance\",\n \"name\": \"View\",\n \"description\": \"Background ve kenarlık renkleri\"\n }\n ]\n}"
@@ -17430,29 +17146,9 @@
17430
17146
  "filename": "styles.css",
17431
17147
  "content": "/* ===== Header Section ===== */\n.kombos-header {\n width: 100%;\n background-color: var(--kombos-white);\n border-bottom: 1px solid var(--kombos-gray-200);\n}\n"
17432
17148
  },
17433
- {
17434
- "filename": "sub-components/Breadcrumb/index.tsx",
17435
- "content": "import { cx } from \"../../utils/cx\";\nimport { CaretRightSVG } from \"../icons\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\ninterface Props {\n items: BreadcrumbItem[];\n size?: \"sm\" | \"xs\";\n className?: string;\n}\n\nexport default function Breadcrumb({ items, size = \"sm\", className }: Props) {\n if (items.length === 0) return null;\n\n const typographyClass = size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\";\n\n return (\n <nav className={cx(\"kombos-breadcrumb\", className)}>\n {items.map((item, i) => {\n const isLast = i === items.length - 1;\n return (\n <span key={item.href ?? item.label} className=\"kombos-breadcrumb__item\">\n {item.href ? (\n <a\n href={item.href}\n className={cx(\"kombos-breadcrumb__link\", typographyClass, isLast && \"kombos-breadcrumb__link--active\")}\n >\n {item.label}\n </a>\n ) : item.onClick ? (\n <button\n type=\"button\"\n onClick={item.onClick}\n className={cx(\"kombos-breadcrumb__link\", \"kombos-breadcrumb__link-btn\", typographyClass)}\n >\n {item.label}\n </button>\n ) : (\n <span className={cx(\"kombos-breadcrumb__current\", typographyClass)}>\n {item.label}\n </span>\n )}\n {!isLast && (\n <span className={cx(\"kombos-breadcrumb__sep\", size === \"xs\" && \"kombos-breadcrumb__sep--xs\")}>\n <CaretRightSVG />\n </span>\n )}\n </span>\n );\n })}\n </nav>\n );\n}\n"
17436
- },
17437
- {
17438
- "filename": "sub-components/Breadcrumb/styles.css",
17439
- "content": "/* ===== Breadcrumb Sub-Component ===== */\n.kombos-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__link {\n color: var(--kombos-gray-500);\n text-decoration: none;\n}\n\n.kombos-breadcrumb__link:hover {\n text-decoration: underline;\n}\n\n.kombos-breadcrumb__link-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.kombos-breadcrumb__link--active {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__current {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__sep {\n font-size: 0.75rem;\n color: var(--kombos-gray-400);\n display: inline-flex;\n align-items: center;\n}\n\n.kombos-breadcrumb__sep--xs {\n font-size: 0.625rem;\n color: var(--kombos-gray-300);\n}\n"
17440
- },
17441
- {
17442
- "filename": "sub-components/Toast/index.tsx",
17443
- "content": "import { render } from \"preact\";\nimport { useEffect, useRef, useState, useCallback } from \"preact/hooks\";\nimport { CheckSVG, XSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\nimport type { ToastItem } from \"../../hooks/useToast\";\nimport { TOAST_LIMIT } from \"../../hooks/useToast\";\n\nconst DISMISS_DURATION = 3000;\nconst EXIT_DURATION = 350;\nconst GAP = 8;\n\n// Injected once into <head> so styles apply to portal elements on body\nlet styleInjected = false;\nfunction injectStyles() {\n if (styleInjected) return;\n styleInjected = true;\n const style = document.createElement(\"style\");\n style.textContent = `\n.kombos-toast-container{position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);z-index:var(--kombos-z-overlay);pointer-events:none;display:flex;flex-direction:column;align-items:center}\n.kombos-toast-item{position:absolute;top:0;pointer-events:auto;transition:transform .4s cubic-bezier(.21,1.02,.73,1),opacity .3s ease}\n.kombos-toast{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:6px;border:1px solid var(--kombos-gray-200);background:var(--kombos-white);box-shadow:0 4px 12px rgba(0,0,0,.08);white-space:nowrap;min-width:18rem;max-width:25rem;opacity:0;transform:translateY(-2rem);transition:opacity .3s ease,transform .4s cubic-bezier(.21,1.02,.73,1)}\n.kombos-toast--mounted{opacity:1;transform:translateY(0)}\n.kombos-toast--exiting{opacity:0;transform:translateY(-2rem);transition:opacity .25s ease,transform .35s cubic-bezier(.06,.71,.55,1)}\n.kombos-toast__icon{display:flex;flex-shrink:0;font-size:1.125rem}\n.kombos-toast--success .kombos-toast__icon{color:var(--kombos-success)}\n.kombos-toast--error .kombos-toast__icon{color:var(--kombos-error)}\n.kombos-toast__message{color:var(--kombos-gray-900);overflow:hidden;text-overflow:ellipsis}\n.kombos-toast__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;margin-left:auto;border:none;background:none;cursor:pointer;color:var(--kombos-gray-400);font-size:.875rem;transition:color .15s ease}\n.kombos-toast__close:hover{color:var(--kombos-gray-700)}\n`;\n document.head.appendChild(style);\n}\n\ninterface ToastProps {\n id: number;\n message: string;\n variant: \"success\" | \"error\";\n frontIndex: number;\n expanded: boolean;\n pauseTimers: boolean;\n onDismiss: (id: number) => void;\n heights: { current: Map<number, number> };\n toastIds: number[];\n}\n\nfunction Toast({\n id,\n message,\n variant,\n frontIndex,\n expanded,\n pauseTimers,\n onDismiss,\n heights,\n toastIds,\n}: ToastProps) {\n const [mounted, setMounted] = useState(false);\n const [exiting, setExiting] = useState(false);\n const cardRef = useRef<HTMLDivElement>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const remainingRef = useRef(DISMISS_DURATION);\n const startRef = useRef(0);\n const onDismissRef = useRef(onDismiss);\n const exitingRef = useRef(false);\n onDismissRef.current = onDismiss;\n\n useEffect(() => {\n if (cardRef.current) {\n heights.current.set(id, cardRef.current.getBoundingClientRect().height);\n }\n requestAnimationFrame(() => setMounted(true));\n return () => {\n heights.current.delete(id);\n };\n }, []);\n\n const clearTimer = useCallback(() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n }, []);\n\n const startExit = useCallback(() => {\n if (exitingRef.current) return;\n exitingRef.current = true;\n clearTimer();\n setExiting(true);\n setTimeout(() => onDismissRef.current(id), EXIT_DURATION);\n }, [id, clearTimer]);\n\n const startTimer = useCallback(() => {\n clearTimer();\n startRef.current = Date.now();\n timerRef.current = setTimeout(startExit, remainingRef.current);\n }, [clearTimer, startExit]);\n\n useEffect(() => {\n if (mounted && !pauseTimers && !exitingRef.current) startTimer();\n return clearTimer;\n }, [mounted, pauseTimers, startTimer]);\n\n useEffect(() => {\n if (!mounted || exitingRef.current) return;\n if (pauseTimers && timerRef.current) {\n clearTimer();\n remainingRef.current -= Date.now() - startRef.current;\n if (remainingRef.current < 0) remainingRef.current = 0;\n }\n }, [pauseTimers]);\n\n // Expanded offset (downward from top)\n let expandedOffset = 0;\n if (expanded) {\n const myIdx = toastIds.indexOf(id);\n for (let i = myIdx + 1; i < toastIds.length; i++) {\n expandedOffset += (heights.current.get(toastIds[i]) ?? 0) + GAP;\n }\n }\n\n // Stacking styles\n let wrapperTransform: string;\n let wrapperOpacity: number;\n let hidden = false;\n\n if (expanded) {\n wrapperTransform = `translateY(${expandedOffset}px) scale(1)`;\n wrapperOpacity = 1;\n } else if (frontIndex === 0) {\n wrapperTransform = \"translateY(0) scale(1)\";\n wrapperOpacity = 1;\n } else if (frontIndex === 1) {\n wrapperTransform = \"translateY(0.5rem) scale(0.95)\";\n wrapperOpacity = 0.8;\n } else if (frontIndex === 2) {\n wrapperTransform = \"translateY(1rem) scale(0.9)\";\n wrapperOpacity = 0.6;\n } else {\n wrapperTransform = \"translateY(1rem) scale(0.9)\";\n wrapperOpacity = 0;\n hidden = true;\n }\n\n const cardClass = cx(\n \"kombos-toast\",\n `kombos-toast--${variant}`,\n mounted && !exiting && \"kombos-toast--mounted\",\n exiting && \"kombos-toast--exiting\"\n );\n\n return (\n <div\n className=\"kombos-toast-item\"\n style={{\n transform: wrapperTransform,\n opacity: wrapperOpacity,\n zIndex: 1000 - frontIndex,\n visibility: hidden ? \"hidden\" : \"visible\",\n }}\n >\n <div ref={cardRef} className={cardClass} role=\"alert\">\n <span className=\"kombos-toast__icon\">\n {variant === \"success\" ? <CheckSVG /> : <XSVG />}\n </span>\n <span className=\"kombos-toast__message text-sm-medium\">{message}</span>\n <button\n type=\"button\"\n className=\"kombos-toast__close\"\n onClick={startExit}\n aria-label=\"Close\"\n >\n <XSVG />\n </button>\n </div>\n </div>\n );\n}\n\n// Rendered inside the portal (body-level), manages its own state\nfunction ToastPortal({\n toasts,\n onDismiss,\n}: {\n toasts: ToastItem[];\n onDismiss: (id: number) => void;\n}) {\n const [expanded, setExpanded] = useState(false);\n const heights = useRef<Map<number, number>>(new Map());\n\n const visibleToasts = toasts.slice(-TOAST_LIMIT);\n const toastIds = visibleToasts.map((t) => t.id);\n\n return (\n <div\n className=\"kombos-toast-container\"\n onMouseEnter={() => setExpanded(true)}\n onMouseLeave={() => setExpanded(false)}\n >\n {visibleToasts.map((t) => {\n const frontIndex = visibleToasts.length - 1 - visibleToasts.indexOf(t);\n return (\n <Toast\n key={t.id}\n id={t.id}\n message={t.message}\n variant={t.variant}\n frontIndex={frontIndex}\n expanded={expanded}\n pauseTimers={expanded}\n onDismiss={onDismiss}\n heights={heights}\n toastIds={toastIds}\n />\n );\n })}\n </div>\n );\n}\n\n// Public API — same interface, renders nothing in the component tree,\n// syncs toasts into a body-level portal via render()\ninterface ToastContainerProps {\n toasts: ToastItem[];\n onDismiss: (id: number) => void;\n}\n\nexport function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {\n const elRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n injectStyles();\n const el = document.createElement(\"div\");\n document.body.appendChild(el);\n elRef.current = el;\n return () => {\n render(null, el);\n el.remove();\n };\n }, []);\n\n // Re-render portal on every parent render\n useEffect(() => {\n if (!elRef.current) return;\n if (toasts.length === 0) {\n render(null, elRef.current);\n } else {\n render(\n <ToastPortal toasts={toasts} onDismiss={onDismiss} />,\n elRef.current\n );\n }\n });\n\n return null;\n}\n\nexport default Toast;\n"
17444
- },
17445
- {
17446
- "filename": "sub-components/Toast/styles.css",
17447
- "content": "/* Toast styles are injected via JS into <head> because the toast\n renders in a body-level portal outside the ikas CSS scope.\n See injectStyles() in index.tsx. */\n"
17448
- },
17449
17149
  {
17450
17150
  "filename": "types.ts",
17451
17151
  "content": "export interface Props {\n backgroundColor?: string;\n borderColor?: string;\n components?: any;\n}\n"
17452
- },
17453
- {
17454
- "filename": "utils/cx.ts",
17455
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17456
17152
  }
17457
17153
  ]
17458
17154
  },
@@ -17484,49 +17180,9 @@
17484
17180
  "filename": "styles.css",
17485
17181
  "content": ".customer-email-verification {\n width: 100%;\n}\n\n.customer-email-verification__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.customer-email-verification__container {\n width: 100%;\n max-width: 29rem;\n}\n\n.customer-email-verification__state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n text-align: center;\n}\n\n.customer-email-verification__spinner {\n font-size: 2.5rem;\n color: var(--kombos-gray-500);\n}\n\n.customer-email-verification__state-text {\n color: var(--kombos-gray-500);\n margin: 0;\n}\n\n.customer-email-verification__icon {\n font-size: 3rem;\n}\n\n.customer-email-verification__icon--success {\n color: var(--kombos-success);\n}\n\n.customer-email-verification__icon--error {\n color: var(--kombos-error);\n}\n\n.customer-email-verification__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.customer-email-verification__message {\n color: var(--kombos-gray-500);\n margin: 0;\n}\n\n.customer-email-verification__action-btn {\n width: 100%;\n margin-top: 0.5rem;\n}\n\n.customer-email-verification__resend {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 1rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--kombos-gray-200);\n}\n\n.customer-email-verification__resend-title {\n color: var(--kombos-gray-900);\n margin: 0;\n text-align: left;\n}\n\n.customer-email-verification__resend-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.customer-email-verification__resend-btn {\n width: 100%;\n}\n\n.customer-email-verification__banner {\n padding: 0.75rem 1rem;\n border-radius: 6px;\n}\n\n.customer-email-verification__banner--success {\n background: rgba(18, 183, 106, 0.08);\n border: 1px solid var(--kombos-success);\n color: var(--kombos-success);\n}\n\n.customer-email-verification__banner--error {\n background: rgba(255, 60, 72, 0.08);\n border: 1px solid var(--kombos-error);\n color: var(--kombos-error);\n}\n\n@media (min-width: 768px) {\n .customer-email-verification__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .customer-email-verification__wrapper {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n"
17486
17182
  },
17487
- {
17488
- "filename": "sub-components/Button/index.tsx",
17489
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
17490
- },
17491
- {
17492
- "filename": "sub-components/Button/styles.css",
17493
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
17494
- },
17495
- {
17496
- "filename": "sub-components/FormItem/index.tsx",
17497
- "content": "import type { ComponentChildren } from \"preact\";\nimport { useId } from \"preact/hooks\";\nimport { cx } from \"../../utils/cx\";\nimport { cloneElement, isValidElement } from \"preact\";\n\ntype FormItemStatus = \"default\" | \"error\" | \"success\";\n\ninterface Props {\n label?: ComponentChildren;\n description?: ComponentChildren;\n status?: FormItemStatus;\n helper?: ComponentChildren;\n children: ComponentChildren;\n className?: string;\n htmlFor?: string;\n}\n\nexport default function FormItem({\n label,\n description,\n status = \"default\",\n helper,\n children,\n className,\n htmlFor,\n}: Props) {\n const autoId = useId();\n const helperId = helper ? `${autoId}-helper` : undefined;\n\n const enhancedChildren =\n helperId && isValidElement(children)\n ? cloneElement(children, { \"aria-describedby\": helperId })\n : children;\n\n return (\n <div\n className={cx(\"kombos-form-item\", className)}\n data-state={status !== \"default\" ? status : undefined}\n >\n {label &&\n (htmlFor ? (\n <label\n htmlFor={htmlFor}\n className=\"kombos-form-item__label text-xs-medium\"\n >\n {label}\n </label>\n ) : (\n <span className=\"kombos-form-item__label text-xs-medium\">\n {label}\n </span>\n ))}\n {description && (\n <span className=\"kombos-form-item__description text-xs-regular\">\n {description}\n </span>\n )}\n {enhancedChildren}\n {helper && (\n <span id={helperId} className=\"kombos-form-item__helper text-xs-regular\">\n {helper}\n </span>\n )}\n </div>\n );\n}\n"
17498
- },
17499
- {
17500
- "filename": "sub-components/FormItem/styles.css",
17501
- "content": "/* ===== FormItem Sub-Component ===== */\n\n.kombos-form-item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n/* Label */\n.kombos-form-item__label {\n width: fit-content;\n color: var(--kombos-gray-700);\n}\n\n/* Description */\n.kombos-form-item__description {\n width: fit-content;\n margin-top: -0.25rem;\n color: var(--kombos-gray-500);\n}\n\n\n/* Helper text */\n.kombos-form-item__helper {\n color: var(--kombos-gray-500);\n}\n\n/* === Error state === */\n[data-state=\"error\"] .kombos-form-item__label,\n[data-state=\"error\"] .kombos-form-item__helper {\n color: var(--kombos-error);\n}\n\n/* === Success state === */\n[data-state=\"success\"] .kombos-form-item__helper {\n color: var(--kombos-success);\n}\n"
17502
- },
17503
- {
17504
- "filename": "sub-components/Input/index.tsx",
17505
- "content": "import { useState } from \"preact/hooks\";\nimport type { Ref, InputHTMLAttributes, ComponentChildren } from \"preact\";\nimport { cx } from \"../../utils/cx\";\nimport { EyeSVG, EyeSlashSVG } from \"../icons\";\n\nconst TYPOGRAPHY: Record<string, string> = {\n s: \"text-md-regular\",\n xs: \"text-sm-regular\",\n};\n\ninterface Props extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"label\" | \"icon\"\n> {\n size?: \"xs\" | \"s\";\n status?: \"default\" | \"error\" | \"success\";\n password?: boolean;\n disabled?: boolean;\n leftIcon?: ComponentChildren;\n inputRef?: Ref<HTMLInputElement>;\n}\n\nexport default function Input({\n size = \"s\",\n status = \"default\",\n password = false,\n disabled,\n leftIcon,\n inputRef,\n className,\n value,\n type = \"text\",\n ...rest\n}: Props) {\n const [showPassword, setShowPassword] = useState(false);\n\n const cls = cx(\n \"kombos-input\",\n `kombos-input--${size}`,\n leftIcon && \"kombos-input--with-icon\",\n disabled && \"kombos-input--disabled\",\n className,\n );\n\n return (\n <div className={cls} data-state={status !== \"default\" ? status : undefined}>\n {leftIcon && <span className=\"kombos-input__icon\">{leftIcon}</span>}\n <input\n ref={inputRef}\n className={`kombos-input__native ${TYPOGRAPHY[size]}`}\n type={password ? (showPassword ? \"text\" : \"password\") : type}\n disabled={disabled}\n value={value ?? \"\"}\n {...rest}\n />\n {password && (\n <button\n type=\"button\"\n className=\"kombos-input__toggle\"\n onClick={() => setShowPassword((prev) => !prev)}\n tabIndex={-1}\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n >\n {showPassword ? <EyeSVG /> : <EyeSlashSVG />}\n </button>\n )}\n </div>\n );\n}\n"
17506
- },
17507
- {
17508
- "filename": "sub-components/Input/styles.css",
17509
- "content": "/* ===== Input Sub-Component ===== */\n\n/* --- Base --- */\n.kombos-input {\n display: flex;\n align-items: center;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n background: var(--kombos-white);\n transition: border-color 0.15s ease;\n width: 100%;\n}\n\n.kombos-input:hover {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-input:focus-within {\n border-color: var(--kombos-gray-900);\n}\n\n/* --- Sizes --- */\n.kombos-input--s {\n padding: 0.5rem 0.8125rem;\n gap: 0.5rem;\n min-height: 2.75rem;\n}\n\n.kombos-input--xs {\n padding: 0.375rem 0.75rem;\n gap: 0.375rem;\n min-height: 2.25rem;\n}\n\n/* --- Native input --- */\n.kombos-input__native {\n flex: 1;\n min-width: 0;\n border: none;\n outline: none;\n background: transparent;\n color: var(--kombos-gray-900);\n padding: 0;\n}\n\n.kombos-input__native::placeholder {\n color: var(--kombos-gray-400);\n}\n\n/* --- Left icon --- */\n.kombos-input__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--kombos-gray-500);\n}\n\n.kombos-input--s .kombos-input__icon {\n font-size: 1.25rem;\n}\n\n.kombos-input--xs .kombos-input__icon {\n font-size: 1rem;\n}\n\n/* --- With-icon variant --- */\n.kombos-input--with-icon {\n border-color: var(--kombos-gray-500);\n}\n\n.kombos-input--s.kombos-input--with-icon {\n padding: 0.5rem 0.6875rem;\n gap: 0.75rem;\n}\n\n.kombos-input--xs.kombos-input--with-icon {\n padding: 0.375rem 0.6875rem;\n gap: 0.5rem;\n}\n\n.kombos-input--with-icon:hover,\n.kombos-input--with-icon:focus-within {\n border-color: var(--kombos-gray-700);\n}\n\n.kombos-input--with-icon:focus-within .kombos-input__icon {\n color: var(--kombos-gray-700);\n}\n\n/* --- Password toggle --- */\n.kombos-input__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--kombos-gray-400);\n}\n\n.kombos-input--s .kombos-input__toggle {\n font-size: 1.5rem;\n}\n\n.kombos-input--xs .kombos-input__toggle {\n font-size: 1.25rem;\n}\n\n/* --- Date input --- */\n.kombos-input__native[type=\"date\"],\n.kombos-input__native[type=\"datetime-local\"] {\n -webkit-appearance: none;\n appearance: none;\n}\n\n.kombos-input__native[type=\"date\"]::-webkit-calendar-picker-indicator,\n.kombos-input__native[type=\"datetime-local\"]::-webkit-calendar-picker-indicator {\n display: block;\n opacity: 1;\n cursor: pointer;\n width: 1rem;\n height: 1rem;\n}\n\n/* --- Status (standalone + inherited from FormItem) --- */\n.kombos-input[data-state=\"error\"],\n[data-state=\"error\"] .kombos-input {\n border-color: var(--kombos-error);\n}\n\n.kombos-input[data-state=\"error\"]:hover,\n.kombos-input[data-state=\"error\"]:focus-within,\n[data-state=\"error\"] .kombos-input:hover,\n[data-state=\"error\"] .kombos-input:focus-within {\n border-color: var(--kombos-error);\n}\n\n.kombos-input[data-state=\"success\"],\n[data-state=\"success\"] .kombos-input {\n border-color: var(--kombos-success);\n}\n\n.kombos-input[data-state=\"success\"]:hover,\n.kombos-input[data-state=\"success\"]:focus-within,\n[data-state=\"success\"] .kombos-input:hover,\n[data-state=\"success\"] .kombos-input:focus-within {\n border-color: var(--kombos-success);\n}\n\n/* --- Disabled state --- */\n.kombos-input--disabled {\n background: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n pointer-events: none;\n}\n\n.kombos-input--disabled .kombos-input__native,\n.kombos-input--disabled .kombos-input__native::placeholder {\n color: var(--kombos-gray-300);\n}\n"
17510
- },
17511
- {
17512
- "filename": "sub-components/SpinnerIcon/index.tsx",
17513
- "content": "import { cx } from \"../../utils/cx\";\nimport { SpinnerSVG } from \"../icons\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function SpinnerIcon({ className }: Props) {\n return <SpinnerSVG className={cx(\"kombos-spinner\", className)} />;\n}\n"
17514
- },
17515
- {
17516
- "filename": "sub-components/SpinnerIcon/styles.css",
17517
- "content": ".kombos-spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n"
17518
- },
17519
- {
17520
- "filename": "sub-components/icons/index.tsx",
17521
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
17522
- },
17523
17183
  {
17524
17184
  "filename": "types.ts",
17525
17185
  "content": "export interface Props {\n title?: string;\n successTitle?: string;\n successMessage?: string;\n errorTitle?: string;\n errorMessage?: string;\n loadingMessage?: string;\n loginButtonText?: string;\n resendTitle?: string;\n emailLabel?: string;\n emailPlaceholder?: string;\n resendButtonText?: string;\n resendingButtonText?: string;\n resendSuccessMessage?: string;\n resendErrorMessage?: string;\n}\n"
17526
- },
17527
- {
17528
- "filename": "utils/cx.ts",
17529
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17530
17186
  }
17531
17187
  ]
17532
17188
  },
@@ -17562,17 +17218,9 @@
17562
17218
  "filename": "styles.css",
17563
17219
  "content": "/* ===== ProductDetailNameFavorite ===== */\n\n.kombos-pd-name__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n margin-top: var(--mobile-mt);\n margin-bottom: var(--mobile-mb);\n}\n\n.kombos-pd-name__title {\n flex: 1;\n margin: 0;\n color: var(--kombos-gray-900);\n}\n\n.kombos-pd-name__fav-btn {\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 1.5rem;\n color: var(--kombos-gray-700);\n padding: 0;\n}\n\n.kombos-pd-name__fav-btn:hover {\n color: var(--kombos-gray-900);\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-pd-name__row {\n gap: 1.5rem;\n margin-top: var(--desktop-mt, var(--mobile-mt));\n margin-bottom: var(--desktop-mb, var(--mobile-mb));\n }\n\n}\n"
17564
17220
  },
17565
- {
17566
- "filename": "sub-components/icons/index.tsx",
17567
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
17568
- },
17569
17221
  {
17570
17222
  "filename": "types.ts",
17571
17223
  "content": "import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n product?: IkasProduct | null;\n mobileMarginTop?: MarginTopStyleType;\n mobileMarginBottom?: MarginBottomStyleType;\n desktopMarginTop?: MarginTopStyleType;\n desktopMarginBottom?: MarginBottomStyleType;\n hideFavoriteButton?: boolean;\n}\n"
17572
- },
17573
- {
17574
- "filename": "utils/cx.ts",
17575
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17576
17224
  }
17577
17225
  ]
17578
17226
  },
@@ -17664,17 +17312,9 @@
17664
17312
  "filename": "styles.css",
17665
17313
  "content": ".kombos-footer {\n width: 100%;\n border-top: 1px solid var(--kombos-gray-200);\n}\n\n.kombos-footer__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 3rem;\n}\n\n/* ===== Top section ===== */\n\n.kombos-footer__top {\n display: flex;\n flex-direction: column;\n gap: 3rem;\n}\n\n/* Brand */\n\n.kombos-footer__brand {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.kombos-footer__logo-wrap {\n width: 6rem;\n height: 4rem;\n overflow: hidden;\n}\n\n.kombos-footer__logo-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: left center;\n}\n\n.kombos-footer__desc {\n margin: 0;\n color: var(--kombos-gray-700);\n max-width: 21.5rem;\n}\n\n/* Socials */\n\n.kombos-footer__socials {\n display: flex;\n gap: 1rem;\n align-items: center;\n font-size: 1.25rem;\n}\n\n/* Link columns */\n\n.kombos-footer__columns {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n}\n\n.kombos-footer__col {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n min-width: 0;\n}\n\n.kombos-footer__col-title {\n margin: 0;\n color: var(--kombos-gray-900);\n}\n\n.kombos-footer__col-links {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.kombos-footer__col-link {\n color: var(--footer-link-color, var(--kombos-gray-700));\n text-decoration: none;\n transition: color 0.15s ease;\n width: fit-content;\n}\n\n.kombos-footer__col-link:hover {\n color: var(--footer-link-hover-color, var(--kombos-gray-900));\n}\n\n/* ===== Bottom bar ===== */\n\n.kombos-footer__bottom {\n border-top: 1px solid var(--kombos-gray-200);\n padding-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.kombos-footer__copyright {\n margin: 0;\n color: var(--kombos-gray-500);\n}\n\n.kombos-footer__badge {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.25rem 0.5rem;\n background: var(--kombos-gray-50);\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n width: fit-content;\n}\n\n.kombos-footer__badge-logo {\n width: 42px;\n height: auto;\n color: var(--kombos-gray-900);\n}\n\n.kombos-footer__badge-text {\n color: var(--kombos-gray-900);\n white-space: nowrap;\n}\n\n/* ===== 2 columns (660px+) ===== */\n\n@media (min-width: 660px) {\n .kombos-footer__columns {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* ===== Tablet (769px+) ===== */\n\n@media (min-width: 768px) {\n .kombos-footer__socials {\n gap: 0.75rem;\n }\n}\n\n/* ===== Desktop (1025px+) ===== */\n\n@media (min-width: 1024px) {\n .kombos-footer__wrapper {\n padding-top: 3rem;\n }\n\n .kombos-footer__top {\n flex-direction: row;\n gap: 7.75rem;\n }\n\n .kombos-footer__brand {\n width: 21.5rem;\n flex-shrink: 0;\n }\n\n .kombos-footer__columns {\n flex: 1;\n grid-template-columns: repeat(3, 1fr);\n }\n\n .kombos-footer__bottom {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n}\n"
17666
17314
  },
17667
- {
17668
- "filename": "sub-components/icons/index.tsx",
17669
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
17670
- },
17671
17315
  {
17672
17316
  "filename": "types.ts",
17673
17317
  "content": "import type { IkasImage, IkasNavigationLinkList } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n logo?: IkasImage | null;\n description?: string;\n copyrightText?: string;\n footerLinks?: IkasNavigationLinkList;\n linkColor?: string;\n linkHoverColor?: string;\n contactTitle?: string;\n contactEmail?: string;\n contactPhone?: string;\n socialMediaIcons?: any;\n}\n"
17674
- },
17675
- {
17676
- "filename": "utils/cx.ts",
17677
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17678
17318
  }
17679
17319
  ]
17680
17320
  },
@@ -17702,10 +17342,6 @@
17702
17342
  "filename": "components/ForgotPasswordForm/styles.css",
17703
17343
  "content": ""
17704
17344
  },
17705
- {
17706
- "filename": "hooks/useRedirectIfLoggedIn.ts",
17707
- "content": "import { useEffect, useState } from \"preact/hooks\";\nimport {\n customerStore,\n waitForCustomerStoreInit,\n Router,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Redirects logged-in users to the account page.\n * Returns `true` while the check is in progress (use to hide content and prevent flash).\n * Calls `onGuest` only if the user is not logged in.\n */\nexport function useRedirectIfLoggedIn(onGuest: () => void): boolean {\n const [isChecking, setIsChecking] = useState(true);\n\n useEffect(() => {\n let isMounted = true;\n\n waitForCustomerStoreInit(customerStore).then(() => {\n if (!isMounted) return;\n if (customerStore.customer) {\n Router.navigateToPage(\"ACCOUNT\");\n return;\n }\n onGuest();\n setIsChecking(false);\n });\n\n return () => {\n isMounted = false;\n };\n }, []);\n\n return isChecking;\n}\n"
17708
- },
17709
17345
  {
17710
17346
  "filename": "ikas-config-snippet.json",
17711
17347
  "content": "{\n \"id\": \"{{PROJECT_ID}}-forgot-password\",\n \"name\": \"ForgotPassword\",\n \"type\": \"section\",\n \"entry\": \"./src/components/ForgotPassword/index.tsx\",\n \"styles\": \"./src/components/ForgotPassword/styles.css\",\n \"props\": [\n {\n \"name\": \"title\",\n \"displayName\": \"Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Password Unuttum\",\n \"groupId\": \"content\"\n },\n {\n \"name\": \"subtitle\",\n \"displayName\": \"Description\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Şifrenizi sıfırlamanız için size bir e-posta göndereceğiz\",\n \"groupId\": \"content\"\n },\n {\n \"name\": \"emailLabel\",\n \"displayName\": \"Email Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Email\",\n \"groupId\": \"email\"\n },\n {\n \"name\": \"emailPlaceholder\",\n \"displayName\": \"Email Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"ikas@ikas.com\",\n \"groupId\": \"email\"\n },\n {\n \"name\": \"submitButtonText\",\n \"displayName\": \"Submit Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Submit\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"submittingButtonText\",\n \"displayName\": \"Submitting Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Gönderiliyor...\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"backToLoginText\",\n \"displayName\": \"Login Return Bağlantısı\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Login Sayfasına Return\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"successTitle\",\n \"displayName\": \"Success Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Password Unuttum\",\n \"groupId\": \"success\"\n },\n {\n \"name\": \"successMessage\",\n \"displayName\": \"Success Message\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Size bir e-posta gönderdik.\",\n \"groupId\": \"success\"\n },\n {\n \"name\": \"successButtonText\",\n \"displayName\": \"Success Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Start Shopping\",\n \"groupId\": \"success\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"success\",\n \"name\": \"Success Ekranı\",\n \"description\": \"Email gönderildikten sonra gösterilen başarı mesajları\"\n },\n {\n \"id\": \"content\",\n \"name\": \"Content\",\n \"description\": \"Page başlığı ve açıklama metni\"\n },\n {\n \"id\": \"formFields\",\n \"name\": \"Form Alanları\",\n \"description\": \"Email alanı etiket ve placeholder metinleri\",\n \"children\": [\n {\n \"id\": \"email\",\n \"name\": \"Email\"\n }\n ]\n },\n {\n \"id\": \"buttons\",\n \"name\": \"Buttons\",\n \"description\": \"Button ve link metinleri\"\n }\n ]\n}"
@@ -17718,21 +17354,9 @@
17718
17354
  "filename": "styles.css",
17719
17355
  "content": ".forgot-password {\n width: 100%;\n}\n\n.forgot-password__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.forgot-password__container {\n width: 100%;\n max-width: 29rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.forgot-password__header {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n}\n\n.forgot-password__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.forgot-password__subtitle {\n color: var(--kombos-gray-700);\n margin: 0;\n}\n\n.forgot-password__error-banner {\n padding: 0.75rem 1rem;\n background: rgba(255, 60, 72, 0.08);\n border: 1px solid var(--kombos-error);\n border-radius: 6px;\n color: var(--kombos-error);\n}\n\n.forgot-password__form {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.forgot-password__submit-btn {\n width: 100%;\n}\n\n.forgot-password__footer {\n text-align: center;\n}\n\n.forgot-password__back-link {\n background: none;\n border: none;\n padding: 0;\n color: var(--kombos-gray-700);\n cursor: pointer;\n text-decoration: underline;\n}\n\n.forgot-password__back-link:hover {\n color: var(--kombos-gray-900);\n}\n\n@media (min-width: 768px) {\n .forgot-password__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .forgot-password__wrapper {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n"
17720
17356
  },
17721
- {
17722
- "filename": "sub-components/PageLoader/index.tsx",
17723
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
17724
- },
17725
- {
17726
- "filename": "sub-components/PageLoader/styles.css",
17727
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
17728
- },
17729
17357
  {
17730
17358
  "filename": "types.ts",
17731
17359
  "content": "export interface Props {\n title?: string;\n subtitle?: string;\n emailLabel?: string;\n emailPlaceholder?: string;\n submitButtonText?: string;\n submittingButtonText?: string;\n backToLoginText?: string;\n successTitle?: string;\n successMessage?: string;\n successButtonText?: string;\n}\n"
17732
- },
17733
- {
17734
- "filename": "utils/cx.ts",
17735
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17736
17360
  }
17737
17361
  ]
17738
17362
  },
@@ -17837,10 +17461,6 @@
17837
17461
  "filename": "children/Navbar/types.ts",
17838
17462
  "content": "import type { IkasImage, HeightStyleType, IkasNavigationLinkList, IkasProductList } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n logo?: IkasImage | null;\n logoSizeDesktop?: HeightStyleType;\n logoSizeMobile?: HeightStyleType;\n navigationLinks?: IkasNavigationLinkList;\n navigationLinkColor?: string;\n coloredLinks?: IkasNavigationLinkList;\n coloredLinkColor?: string;\n cartTitle?: string;\n emptyCartText?: string;\n checkoutButtonText?: string;\n totalText?: string;\n freeShippingText?: string;\n emptyCartButtonText?: string;\n registerButtonText?: string;\n loginButtonText?: string;\n logoutButtonText?: string;\n searchProductList?: IkasProductList;\n hideAddToCartButton?: boolean;\n searchPlaceholder?: string;\n searchingText?: string;\n noResultsText?: string;\n resultCountText?: string;\n addToCartText?: string;\n addedToCartText?: string;\n outOfStockText?: string;\n goToProductText?: string;\n viewAllText?: string;\n components?: any;\n imageAspectRatio?: AspectRatio;\n imageObjectFit?: ObjectFit;\n viewCartButtonText?: string;\n}\n"
17839
17463
  },
17840
- {
17841
- "filename": "hooks/useToast.ts",
17842
- "content": "import { useState, useCallback, useRef } from \"preact/hooks\";\n\nexport const TOAST_LIMIT = 3;\n\ntype ToastVariant = \"success\" | \"error\";\n\nexport type ToastItem = {\n id: number;\n message: string;\n variant: ToastVariant;\n};\n\nexport function useToast() {\n const [toasts, setToasts] = useState<ToastItem[]>([]);\n const idRef = useRef(0);\n\n const show = useCallback((message: string, variant: ToastVariant) => {\n const id = ++idRef.current;\n setToasts((prev) => [...prev, { id, message, variant }]);\n }, []);\n\n const dismiss = useCallback((id: number) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n return { toasts, show, dismiss };\n}\n"
17843
- },
17844
17464
  {
17845
17465
  "filename": "ikas-config-snippet.json",
17846
17466
  "content": "{\n \"id\": \"{{PROJECT_ID}}-header\",\n \"name\": \"Header\",\n \"type\": \"section\",\n \"entry\": \"./src/components/Header/index.tsx\",\n \"styles\": \"./src/components/Header/styles.css\",\n \"props\": [\n {\n \"name\": \"backgroundColor\",\n \"displayName\": \"Background Color\",\n \"type\": \"COLOR\",\n \"required\": false,\n \"defaultValue\": \"#ffffff\",\n \"groupId\": \"appearance\"\n },\n {\n \"name\": \"borderColor\",\n \"displayName\": \"Border Color\",\n \"type\": \"COLOR\",\n \"required\": false,\n \"defaultValue\": \"#f6f6f6\",\n \"groupId\": \"appearance\"\n },\n {\n \"name\": \"components\",\n \"displayName\": \"Components\",\n \"type\": \"COMPONENT_LIST\",\n \"required\": false,\n \"filteredComponentIds\": [\n \"{{PROJECT_ID}}-navbar\",\n \"{{PROJECT_ID}}-announcements\",\n \"{{PROJECT_ID}}-cookie-bar\"\n ]\n }\n ],\n \"isHeader\": true,\n \"propGroups\": [\n {\n \"id\": \"appearance\",\n \"name\": \"View\",\n \"description\": \"Background ve kenarlık renkleri\"\n }\n ]\n}"
@@ -17853,25 +17473,9 @@
17853
17473
  "filename": "styles.css",
17854
17474
  "content": "/* ===== Header Section ===== */\n.kombos-header {\n width: 100%;\n background-color: var(--kombos-white);\n border-bottom: 1px solid var(--kombos-gray-200);\n}\n"
17855
17475
  },
17856
- {
17857
- "filename": "sub-components/Toast/index.tsx",
17858
- "content": "import { render } from \"preact\";\nimport { useEffect, useRef, useState, useCallback } from \"preact/hooks\";\nimport { CheckSVG, XSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\nimport type { ToastItem } from \"../../hooks/useToast\";\nimport { TOAST_LIMIT } from \"../../hooks/useToast\";\n\nconst DISMISS_DURATION = 3000;\nconst EXIT_DURATION = 350;\nconst GAP = 8;\n\n// Injected once into <head> so styles apply to portal elements on body\nlet styleInjected = false;\nfunction injectStyles() {\n if (styleInjected) return;\n styleInjected = true;\n const style = document.createElement(\"style\");\n style.textContent = `\n.kombos-toast-container{position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);z-index:var(--kombos-z-overlay);pointer-events:none;display:flex;flex-direction:column;align-items:center}\n.kombos-toast-item{position:absolute;top:0;pointer-events:auto;transition:transform .4s cubic-bezier(.21,1.02,.73,1),opacity .3s ease}\n.kombos-toast{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:6px;border:1px solid var(--kombos-gray-200);background:var(--kombos-white);box-shadow:0 4px 12px rgba(0,0,0,.08);white-space:nowrap;min-width:18rem;max-width:25rem;opacity:0;transform:translateY(-2rem);transition:opacity .3s ease,transform .4s cubic-bezier(.21,1.02,.73,1)}\n.kombos-toast--mounted{opacity:1;transform:translateY(0)}\n.kombos-toast--exiting{opacity:0;transform:translateY(-2rem);transition:opacity .25s ease,transform .35s cubic-bezier(.06,.71,.55,1)}\n.kombos-toast__icon{display:flex;flex-shrink:0;font-size:1.125rem}\n.kombos-toast--success .kombos-toast__icon{color:var(--kombos-success)}\n.kombos-toast--error .kombos-toast__icon{color:var(--kombos-error)}\n.kombos-toast__message{color:var(--kombos-gray-900);overflow:hidden;text-overflow:ellipsis}\n.kombos-toast__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;margin-left:auto;border:none;background:none;cursor:pointer;color:var(--kombos-gray-400);font-size:.875rem;transition:color .15s ease}\n.kombos-toast__close:hover{color:var(--kombos-gray-700)}\n`;\n document.head.appendChild(style);\n}\n\ninterface ToastProps {\n id: number;\n message: string;\n variant: \"success\" | \"error\";\n frontIndex: number;\n expanded: boolean;\n pauseTimers: boolean;\n onDismiss: (id: number) => void;\n heights: { current: Map<number, number> };\n toastIds: number[];\n}\n\nfunction Toast({\n id,\n message,\n variant,\n frontIndex,\n expanded,\n pauseTimers,\n onDismiss,\n heights,\n toastIds,\n}: ToastProps) {\n const [mounted, setMounted] = useState(false);\n const [exiting, setExiting] = useState(false);\n const cardRef = useRef<HTMLDivElement>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const remainingRef = useRef(DISMISS_DURATION);\n const startRef = useRef(0);\n const onDismissRef = useRef(onDismiss);\n const exitingRef = useRef(false);\n onDismissRef.current = onDismiss;\n\n useEffect(() => {\n if (cardRef.current) {\n heights.current.set(id, cardRef.current.getBoundingClientRect().height);\n }\n requestAnimationFrame(() => setMounted(true));\n return () => {\n heights.current.delete(id);\n };\n }, []);\n\n const clearTimer = useCallback(() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n }, []);\n\n const startExit = useCallback(() => {\n if (exitingRef.current) return;\n exitingRef.current = true;\n clearTimer();\n setExiting(true);\n setTimeout(() => onDismissRef.current(id), EXIT_DURATION);\n }, [id, clearTimer]);\n\n const startTimer = useCallback(() => {\n clearTimer();\n startRef.current = Date.now();\n timerRef.current = setTimeout(startExit, remainingRef.current);\n }, [clearTimer, startExit]);\n\n useEffect(() => {\n if (mounted && !pauseTimers && !exitingRef.current) startTimer();\n return clearTimer;\n }, [mounted, pauseTimers, startTimer]);\n\n useEffect(() => {\n if (!mounted || exitingRef.current) return;\n if (pauseTimers && timerRef.current) {\n clearTimer();\n remainingRef.current -= Date.now() - startRef.current;\n if (remainingRef.current < 0) remainingRef.current = 0;\n }\n }, [pauseTimers]);\n\n // Expanded offset (downward from top)\n let expandedOffset = 0;\n if (expanded) {\n const myIdx = toastIds.indexOf(id);\n for (let i = myIdx + 1; i < toastIds.length; i++) {\n expandedOffset += (heights.current.get(toastIds[i]) ?? 0) + GAP;\n }\n }\n\n // Stacking styles\n let wrapperTransform: string;\n let wrapperOpacity: number;\n let hidden = false;\n\n if (expanded) {\n wrapperTransform = `translateY(${expandedOffset}px) scale(1)`;\n wrapperOpacity = 1;\n } else if (frontIndex === 0) {\n wrapperTransform = \"translateY(0) scale(1)\";\n wrapperOpacity = 1;\n } else if (frontIndex === 1) {\n wrapperTransform = \"translateY(0.5rem) scale(0.95)\";\n wrapperOpacity = 0.8;\n } else if (frontIndex === 2) {\n wrapperTransform = \"translateY(1rem) scale(0.9)\";\n wrapperOpacity = 0.6;\n } else {\n wrapperTransform = \"translateY(1rem) scale(0.9)\";\n wrapperOpacity = 0;\n hidden = true;\n }\n\n const cardClass = cx(\n \"kombos-toast\",\n `kombos-toast--${variant}`,\n mounted && !exiting && \"kombos-toast--mounted\",\n exiting && \"kombos-toast--exiting\"\n );\n\n return (\n <div\n className=\"kombos-toast-item\"\n style={{\n transform: wrapperTransform,\n opacity: wrapperOpacity,\n zIndex: 1000 - frontIndex,\n visibility: hidden ? \"hidden\" : \"visible\",\n }}\n >\n <div ref={cardRef} className={cardClass} role=\"alert\">\n <span className=\"kombos-toast__icon\">\n {variant === \"success\" ? <CheckSVG /> : <XSVG />}\n </span>\n <span className=\"kombos-toast__message text-sm-medium\">{message}</span>\n <button\n type=\"button\"\n className=\"kombos-toast__close\"\n onClick={startExit}\n aria-label=\"Close\"\n >\n <XSVG />\n </button>\n </div>\n </div>\n );\n}\n\n// Rendered inside the portal (body-level), manages its own state\nfunction ToastPortal({\n toasts,\n onDismiss,\n}: {\n toasts: ToastItem[];\n onDismiss: (id: number) => void;\n}) {\n const [expanded, setExpanded] = useState(false);\n const heights = useRef<Map<number, number>>(new Map());\n\n const visibleToasts = toasts.slice(-TOAST_LIMIT);\n const toastIds = visibleToasts.map((t) => t.id);\n\n return (\n <div\n className=\"kombos-toast-container\"\n onMouseEnter={() => setExpanded(true)}\n onMouseLeave={() => setExpanded(false)}\n >\n {visibleToasts.map((t) => {\n const frontIndex = visibleToasts.length - 1 - visibleToasts.indexOf(t);\n return (\n <Toast\n key={t.id}\n id={t.id}\n message={t.message}\n variant={t.variant}\n frontIndex={frontIndex}\n expanded={expanded}\n pauseTimers={expanded}\n onDismiss={onDismiss}\n heights={heights}\n toastIds={toastIds}\n />\n );\n })}\n </div>\n );\n}\n\n// Public API — same interface, renders nothing in the component tree,\n// syncs toasts into a body-level portal via render()\ninterface ToastContainerProps {\n toasts: ToastItem[];\n onDismiss: (id: number) => void;\n}\n\nexport function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {\n const elRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n injectStyles();\n const el = document.createElement(\"div\");\n document.body.appendChild(el);\n elRef.current = el;\n return () => {\n render(null, el);\n el.remove();\n };\n }, []);\n\n // Re-render portal on every parent render\n useEffect(() => {\n if (!elRef.current) return;\n if (toasts.length === 0) {\n render(null, elRef.current);\n } else {\n render(\n <ToastPortal toasts={toasts} onDismiss={onDismiss} />,\n elRef.current\n );\n }\n });\n\n return null;\n}\n\nexport default Toast;\n"
17859
- },
17860
- {
17861
- "filename": "sub-components/Toast/styles.css",
17862
- "content": "/* Toast styles are injected via JS into <head> because the toast\n renders in a body-level portal outside the ikas CSS scope.\n See injectStyles() in index.tsx. */\n"
17863
- },
17864
- {
17865
- "filename": "sub-components/icons/index.tsx",
17866
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
17867
- },
17868
17476
  {
17869
17477
  "filename": "types.ts",
17870
17478
  "content": "export interface Props {\n backgroundColor?: string;\n borderColor?: string;\n components?: any;\n}\n"
17871
- },
17872
- {
17873
- "filename": "utils/cx.ts",
17874
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17875
17479
  }
17876
17480
  ]
17877
17481
  },
@@ -17919,25 +17523,9 @@
17919
17523
  "filename": "styles.css",
17920
17524
  "content": ".kombos-hero-slider {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n\n.kombos-hero-slider__viewport {\n position: relative;\n width: 100%;\n}\n\n.kombos-hero-slider__viewport--contained {\n max-width: var(--kombos-max-width);\n margin: 0 auto;\n}\n\n@media (max-width: 1499px) {\n .kombos-hero-slider__viewport--contained {\n padding-left: 0;\n padding-right: 0;\n }\n}\n\n.kombos-hero-slider__viewport-inner {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n\n.kombos-hero-slider__track {\n display: flex;\n transition: transform 0.5s ease-in-out;\n will-change: transform;\n}\n\n/* IkasComponentRenderer renders a display:contents wrapper,\n so the actual flex children are the grandchild ikas wrapper divs */\n.kombos-hero-slider__track > * > * > * {\n position: relative;\n flex: 0 0 100%;\n width: 100%;\n}\n\n/* Navigation arrows — positioned over the slider */\n.kombos-hero-slider__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1.125rem;\n}\n\n.kombos-hero-slider__arrow--prev {\n left: 0.75rem;\n}\n\n.kombos-hero-slider__arrow--next {\n right: 0.75rem;\n}\n\n/* Dot pagination */\n.kombos-hero-slider__dots {\n position: absolute;\n bottom: 1.25rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 0;\n align-items: center;\n}\n\n.kombos-hero-slider__dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n border: none;\n padding: 1rem;\n box-sizing: content-box;\n cursor: pointer;\n background: rgba(255, 255, 255, 0.5);\n background-clip: content-box;\n transition: background 0.2s ease;\n}\n\n.kombos-hero-slider__dot--active {\n background: var(--kombos-white);\n background-clip: content-box;\n}\n\n.kombos-hero-slider__dot:hover {\n background: rgba(255, 255, 255, 0.8);\n background-clip: content-box;\n}\n\n/* Responsive — tablet */\n@media (min-width: 768px) {\n .kombos-hero-slider__arrow--prev {\n left: 1rem;\n }\n\n .kombos-hero-slider__arrow--next {\n right: 1rem;\n }\n\n .kombos-hero-slider__dots {\n bottom: 0.75rem;\n gap: 0;\n }\n\n .kombos-hero-slider__dot {\n width: 0.75rem;\n height: 0.75rem;\n padding: 0.75rem;\n }\n}\n\n/* Responsive — desktop */\n@media (min-width: 1024px) {\n .kombos-hero-slider__arrow--prev {\n left: 2rem;\n }\n\n .kombos-hero-slider__arrow--next {\n right: 2rem;\n }\n\n .kombos-hero-slider__dots {\n bottom: 2rem;\n }\n}\n"
17921
17525
  },
17922
- {
17923
- "filename": "sub-components/SliderArrow/index.tsx",
17924
- "content": "import type { JSX } from \"preact\";\nimport { CaretLeftSVG, CaretRightSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, \"direction\"> {\n direction: \"left\" | \"right\";\n disabled?: boolean;\n}\n\nexport default function SliderArrow({\n direction,\n className,\n ...rest\n}: Props) {\n const Icon = direction === \"left\" ? CaretLeftSVG : CaretRightSVG;\n\n return (\n <button\n className={cx(\"kombos-slider-arrow\", className)}\n aria-label={direction === \"left\" ? \"Previous\" : \"Next\"}\n {...rest}\n >\n <Icon />\n </button>\n );\n}\n"
17925
- },
17926
- {
17927
- "filename": "sub-components/SliderArrow/styles.css",
17928
- "content": "/* ===== Slider Arrow ===== */\n.kombos-slider-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.75rem;\n border-radius: 50%;\n border: 1px solid var(--kombos-gray-200);\n background: rgba(255, 255, 255, 0.5);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n cursor: pointer;\n font-size: 1.25rem;\n color: var(--kombos-gray-900);\n transition: background 0.2s;\n}\n\n.kombos-slider-arrow:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.8);\n}\n\n.kombos-slider-arrow:disabled {\n cursor: default;\n color: var(--kombos-gray-400);\n}\n"
17929
- },
17930
17526
  {
17931
17527
  "filename": "types.ts",
17932
17528
  "content": "export interface Props {\n backgroundColor?: string;\n autoplay?: boolean;\n autoplayDelay?: number;\n fullWidth?: boolean;\n showArrows?: boolean;\n components?: any;\n}\n"
17933
- },
17934
- {
17935
- "filename": "utils/cx.ts",
17936
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17937
- },
17938
- {
17939
- "filename": "utils/media.ts",
17940
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
17941
17529
  }
17942
17530
  ]
17943
17531
  },
@@ -17978,21 +17566,9 @@
17978
17566
  "filename": "styles.css",
17979
17567
  "content": "/* ===== Product Detail Section ===== */\n\n.kombos-pd {\n width: 100%;\n}\n\n/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */\n.kombos-pd__breadcrumb {\n padding-top: 1rem;\n}\n\n/* ---- Layout ---- */\n.kombos-pd__layout {\n display: flex;\n flex-direction: column;\n padding-top: 1rem;\n}\n\n/* ---- Product Info ---- */\n.kombos-pd__info {\n display: flex;\n flex-direction: column;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-pd__container {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n\n .kombos-pd__breadcrumb {\n padding-top: 0;\n padding-bottom: 1.5rem;\n }\n\n .kombos-pd__layout {\n display: grid;\n grid-template-columns: 7fr 5fr;\n gap: 2rem;\n padding-top: 0;\n }\n\n /* Gallery — sticky on desktop */\n .kombos-pd__gallery {\n position: sticky;\n top: 0.75rem;\n align-self: start;\n }\n\n /* Info — right side */\n .kombos-pd__info {\n min-width: 0;\n padding: 0;\n }\n}\n"
17980
17568
  },
17981
- {
17982
- "filename": "sub-components/Breadcrumb/index.tsx",
17983
- "content": "import { cx } from \"../../utils/cx\";\nimport { CaretRightSVG } from \"../icons\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\ninterface Props {\n items: BreadcrumbItem[];\n size?: \"sm\" | \"xs\";\n className?: string;\n}\n\nexport default function Breadcrumb({ items, size = \"sm\", className }: Props) {\n if (items.length === 0) return null;\n\n const typographyClass = size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\";\n\n return (\n <nav className={cx(\"kombos-breadcrumb\", className)}>\n {items.map((item, i) => {\n const isLast = i === items.length - 1;\n return (\n <span key={item.href ?? item.label} className=\"kombos-breadcrumb__item\">\n {item.href ? (\n <a\n href={item.href}\n className={cx(\"kombos-breadcrumb__link\", typographyClass, isLast && \"kombos-breadcrumb__link--active\")}\n >\n {item.label}\n </a>\n ) : item.onClick ? (\n <button\n type=\"button\"\n onClick={item.onClick}\n className={cx(\"kombos-breadcrumb__link\", \"kombos-breadcrumb__link-btn\", typographyClass)}\n >\n {item.label}\n </button>\n ) : (\n <span className={cx(\"kombos-breadcrumb__current\", typographyClass)}>\n {item.label}\n </span>\n )}\n {!isLast && (\n <span className={cx(\"kombos-breadcrumb__sep\", size === \"xs\" && \"kombos-breadcrumb__sep--xs\")}>\n <CaretRightSVG />\n </span>\n )}\n </span>\n );\n })}\n </nav>\n );\n}\n"
17984
- },
17985
- {
17986
- "filename": "sub-components/Breadcrumb/styles.css",
17987
- "content": "/* ===== Breadcrumb Sub-Component ===== */\n.kombos-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__link {\n color: var(--kombos-gray-500);\n text-decoration: none;\n}\n\n.kombos-breadcrumb__link:hover {\n text-decoration: underline;\n}\n\n.kombos-breadcrumb__link-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.kombos-breadcrumb__link--active {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__current {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__sep {\n font-size: 0.75rem;\n color: var(--kombos-gray-400);\n display: inline-flex;\n align-items: center;\n}\n\n.kombos-breadcrumb__sep--xs {\n font-size: 0.625rem;\n color: var(--kombos-gray-300);\n}\n"
17988
- },
17989
17569
  {
17990
17570
  "filename": "types.ts",
17991
17571
  "content": "import type { IkasProduct } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n product?: IkasProduct | null;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n components?: any;\n bottomComponents?: any;\n homepageText?: string;\n}\n"
17992
- },
17993
- {
17994
- "filename": "utils/cx.ts",
17995
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
17996
17572
  }
17997
17573
  ]
17998
17574
  },
@@ -18022,10 +17598,6 @@
18022
17598
  "filename": "components/LoginForm/styles.css",
18023
17599
  "content": ""
18024
17600
  },
18025
- {
18026
- "filename": "hooks/useRedirectIfLoggedIn.ts",
18027
- "content": "import { useEffect, useState } from \"preact/hooks\";\nimport {\n customerStore,\n waitForCustomerStoreInit,\n Router,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Redirects logged-in users to the account page.\n * Returns `true` while the check is in progress (use to hide content and prevent flash).\n * Calls `onGuest` only if the user is not logged in.\n */\nexport function useRedirectIfLoggedIn(onGuest: () => void): boolean {\n const [isChecking, setIsChecking] = useState(true);\n\n useEffect(() => {\n let isMounted = true;\n\n waitForCustomerStoreInit(customerStore).then(() => {\n if (!isMounted) return;\n if (customerStore.customer) {\n Router.navigateToPage(\"ACCOUNT\");\n return;\n }\n onGuest();\n setIsChecking(false);\n });\n\n return () => {\n isMounted = false;\n };\n }, []);\n\n return isChecking;\n}\n"
18028
- },
18029
17601
  {
18030
17602
  "filename": "ikas-config-snippet.json",
18031
17603
  "content": "{\n \"id\": \"{{PROJECT_ID}}-login\",\n \"name\": \"Login\",\n \"type\": \"section\",\n \"entry\": \"./src/components/Login/index.tsx\",\n \"styles\": \"./src/components/Login/styles.css\",\n \"props\": [\n {\n \"name\": \"title\",\n \"displayName\": \"Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Sign In\",\n \"groupId\": \"content\"\n },\n {\n \"name\": \"subtitle\",\n \"displayName\": \"Sub Title\",\n \"type\": \"RICH_TEXT\",\n \"required\": false,\n \"defaultValue\": \"<p>Hesabınıza giriş yaparak siparişlerinizi takip edebilir ve alışverişe devam edebilirsiniz.</p>\",\n \"groupId\": \"content\"\n },\n {\n \"name\": \"emailLabel\",\n \"displayName\": \"Email Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Email\",\n \"groupId\": \"email\"\n },\n {\n \"name\": \"emailPlaceholder\",\n \"displayName\": \"Email Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"ornek@email.com\",\n \"groupId\": \"email\"\n },\n {\n \"name\": \"passwordLabel\",\n \"displayName\": \"Password Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Password\",\n \"groupId\": \"password\"\n },\n {\n \"name\": \"passwordPlaceholder\",\n \"displayName\": \"Password Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Şifrenizi girin\",\n \"groupId\": \"password\"\n },\n {\n \"name\": \"submitButtonText\",\n \"displayName\": \"Login Button Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Sign In\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"submittingButtonText\",\n \"displayName\": \"Login Yapılıyor Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Login yapılıyor...\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"forgotPasswordText\",\n \"displayName\": \"Password Unuttum Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Password unuttum\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"createAccountText\",\n \"displayName\": \"Account Oluştur Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Yeni hesap oluştur\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"showGoogleLogin\",\n \"displayName\": \"Sign in with Google\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"google\"\n },\n {\n \"name\": \"googleButtonText\",\n \"displayName\": \"Google Button Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Google ile giriş yap\",\n \"groupId\": \"google\"\n },\n {\n \"name\": \"showFacebookLogin\",\n \"displayName\": \"Sign in with Facebook\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"facebook\"\n },\n {\n \"name\": \"facebookButtonText\",\n \"displayName\": \"Facebook Button Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Facebook ile giriş yap\",\n \"groupId\": \"facebook\"\n },\n {\n \"name\": \"dividerText\",\n \"displayName\": \"Separator Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"veya\",\n \"groupId\": \"socialLogin\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"content\",\n \"name\": \"Content\",\n \"description\": \"Page başlığı ve açıklama\"\n },\n {\n \"id\": \"formFields\",\n \"name\": \"Form Alanları\",\n \"description\": \"Login formu etiket ve placeholder metinleri\",\n \"children\": [\n {\n \"id\": \"email\",\n \"name\": \"Email\"\n },\n {\n \"id\": \"password\",\n \"name\": \"Password\"\n }\n ]\n },\n {\n \"id\": \"buttons\",\n \"name\": \"Buttons\",\n \"description\": \"Button ve link metinleri\"\n },\n {\n \"id\": \"socialLogin\",\n \"name\": \"Social Login\",\n \"description\": \"Google ve Facebook ile giriş ayarları\",\n \"children\": [\n {\n \"id\": \"google\",\n \"name\": \"Google\"\n },\n {\n \"id\": \"facebook\",\n \"name\": \"Facebook\"\n }\n ]\n }\n ]\n}"
@@ -18038,21 +17610,9 @@
18038
17610
  "filename": "styles.css",
18039
17611
  "content": ".login {\n width: 100%;\n}\n\n.login__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.login__container {\n width: 100%;\n max-width: 29rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.login__header {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n}\n\n.login__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.login__subtitle {\n color: var(--kombos-gray-700);\n margin: 0;\n white-space: pre-line;\n}\n\n.login__error-banner {\n padding: 0.75rem 1rem;\n background: rgba(255, 60, 72, 0.08);\n border: 1px solid var(--kombos-error);\n border-radius: 6px;\n color: var(--kombos-error);\n}\n\n/* Social Login */\n.login__social {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n/* Divider */\n.login__divider {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.login__divider-line {\n flex: 1;\n height: 1px;\n background: var(--kombos-gray-200);\n}\n\n.login__divider-text {\n color: var(--kombos-gray-500);\n white-space: nowrap;\n}\n\n.login__form {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.login__options {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\n.login__forgot {\n background: none;\n border: none;\n padding: 0;\n color: var(--kombos-gray-900);\n cursor: pointer;\n text-decoration: underline;\n}\n\n.login__forgot:hover {\n text-decoration: underline;\n}\n\n.login__submit-btn {\n width: 100%;\n}\n\n.login__footer {\n text-align: center;\n}\n\n.login__create-account {\n background: none;\n border: none;\n padding: 0;\n color: var(--kombos-gray-900);\n cursor: pointer;\n}\n\n.login__create-account:hover {\n text-decoration: underline;\n}\n\n@media (min-width: 768px) {\n .login__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .login__wrapper {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n"
18040
17612
  },
18041
- {
18042
- "filename": "sub-components/PageLoader/index.tsx",
18043
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
18044
- },
18045
- {
18046
- "filename": "sub-components/PageLoader/styles.css",
18047
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
18048
- },
18049
17613
  {
18050
17614
  "filename": "types.ts",
18051
17615
  "content": "export interface Props {\n title?: string;\n subtitle?: string;\n emailLabel?: string;\n emailPlaceholder?: string;\n passwordLabel?: string;\n passwordPlaceholder?: string;\n submitButtonText?: string;\n submittingButtonText?: string;\n forgotPasswordText?: string;\n createAccountText?: string;\n showGoogleLogin?: boolean;\n googleButtonText?: string;\n showFacebookLogin?: boolean;\n facebookButtonText?: string;\n dividerText?: string;\n}\n"
18052
- },
18053
- {
18054
- "filename": "utils/cx.ts",
18055
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
18056
17616
  }
18057
17617
  ]
18058
17618
  },
@@ -18115,17 +17675,9 @@
18115
17675
  "filename": "styles.css",
18116
17676
  "content": "/* ===== Navbar Component ===== */\n.kombos-navbar__inner {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding-block: 0.75rem;\n position: relative;\n justify-content: space-between;\n min-height: calc(var(--logo-h-mobile, 3rem) + 1.5rem);\n}\n\n/* Logo */\n.kombos-navbar__logo {\n flex-shrink: 0;\n text-decoration: none;\n display: flex;\n align-items: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n height: var(--logo-h-mobile, 3rem);\n overflow: hidden;\n}\n\n.kombos-navbar__logo-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n padding: 0.5rem 0;\n}\n\n/* Navigation */\n.kombos-navbar__nav {\n flex: 1;\n display: none;\n align-items: center;\n justify-content: center;\n gap: 1.5rem;\n}\n\n/* NavItem sub-component uses kombos-header__* classes — keep those styles here */\n.kombos-header__nav-item {\n position: relative;\n}\n\n.kombos-header__nav-link {\n color: var(--kombos-gray-700);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n white-space: nowrap;\n transition: opacity 0.2s ease;\n}\n\n.kombos-header__nav-link:hover {\n opacity: 0.7;\n}\n\n.kombos-header__chevron {\n flex-shrink: 0;\n transition: transform 0.2s ease;\n}\n\n.kombos-header__nav-item:hover .kombos-header__chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.kombos-header__dropdown {\n display: none;\n position: absolute;\n top: calc(100% + 1.125rem);\n left: 50%;\n transform: translateX(-50%);\n background: var(--kombos-white);\n border: 1px solid var(--kombos-gray-100);\n border-radius: 6px;\n padding: 0.375rem 0;\n width: 13rem;\n box-shadow: 0 2px 12px 0.4px rgba(0, 0, 0, 0.06);\n z-index: var(--kombos-z-dropdown);\n flex-direction: column;\n}\n\n/* Invisible bridge: covers the 18px gap between nav link and dropdown */\n.kombos-header__dropdown::before {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: -0.75rem;\n right: -0.75rem;\n height: 1.125rem;\n}\n\n.kombos-header__nav-item:hover > .kombos-header__dropdown {\n display: flex;\n}\n\n/* Nested dropdown (2nd level) */\n.kombos-header__dropdown--nested {\n top: -0.375rem;\n left: calc(100% + 0.75rem);\n transform: none;\n}\n\n/* Bridge: covers the 12px gap between 1st and 2nd level dropdowns */\n.kombos-header__dropdown--nested::before {\n content: \"\";\n position: absolute;\n top: -0.75rem;\n bottom: -0.75rem;\n right: 100%;\n left: auto;\n width: 0.75rem;\n height: auto;\n}\n\n.kombos-header__dropdown-item {\n position: relative;\n}\n\n.kombos-header__dropdown-item:hover > .kombos-header__dropdown--nested {\n display: flex;\n}\n\n.kombos-header__dropdown-link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--kombos-gray-900);\n text-decoration: none;\n padding: 0.75rem 1rem;\n transition: background-color 0.15s ease;\n}\n\n.kombos-header__dropdown-link:hover {\n background-color: var(--kombos-gray-50);\n}\n\n.kombos-header__caret-right {\n flex-shrink: 0;\n color: var(--kombos-gray-900);\n}\n\n/* Action Icons */\n.kombos-navbar__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.kombos-navbar__icon-btn {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n position: relative;\n transition: opacity 0.2s ease;\n font-size: 1.25rem;\n}\n\n.kombos-navbar__icon-btn:hover {\n opacity: 0.6;\n}\n\n.kombos-navbar__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.5rem;\n background: var(--kombos-badge-bg);\n color: var(--kombos-white);\n font-size: 0.625rem;\n font-weight: 600;\n min-width: 1.125rem;\n height: 1.125rem;\n border-radius: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 0.25rem;\n}\n\n/* Hamburger (mobile only — visible by default) */\n.kombos-navbar__hamburger {\n display: flex;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n width: 1.5rem;\n height: 1.5rem;\n align-items: center;\n justify-content: center;\n color: var(--kombos-gray-900);\n transition: opacity 0.2s ease;\n font-size: 1.375rem;\n}\n\n.kombos-navbar__hamburger:hover {\n opacity: 0.6;\n}\n\n/* ===== Responsive — Desktop ===== */\n@media (min-width: 1024px) {\n .kombos-navbar__inner {\n gap: 2rem;\n position: static;\n justify-content: initial;\n min-height: calc(var(--logo-h-desktop, 3.75rem) + 1.5rem);\n }\n\n .kombos-navbar__hamburger {\n display: none;\n }\n\n .kombos-navbar__nav {\n display: flex;\n }\n\n .kombos-navbar__nav--no-logo {\n justify-content: flex-start;\n }\n\n .kombos-navbar__logo {\n position: static;\n left: auto;\n top: auto;\n transform: none;\n height: var(--logo-h-desktop, 3.75rem);\n }\n\n .kombos-navbar__actions {\n gap: 1.25rem;\n }\n}\n"
18117
17677
  },
18118
- {
18119
- "filename": "sub-components/icons/index.tsx",
18120
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
18121
- },
18122
17678
  {
18123
17679
  "filename": "types.ts",
18124
17680
  "content": "import type { IkasImage, HeightStyleType, IkasNavigationLinkList, IkasProductList } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n logo?: IkasImage | null;\n logoSizeDesktop?: HeightStyleType;\n logoSizeMobile?: HeightStyleType;\n navigationLinks?: IkasNavigationLinkList;\n navigationLinkColor?: string;\n coloredLinks?: IkasNavigationLinkList;\n coloredLinkColor?: string;\n cartTitle?: string;\n emptyCartText?: string;\n checkoutButtonText?: string;\n totalText?: string;\n freeShippingText?: string;\n emptyCartButtonText?: string;\n registerButtonText?: string;\n loginButtonText?: string;\n logoutButtonText?: string;\n searchProductList?: IkasProductList;\n hideAddToCartButton?: boolean;\n searchPlaceholder?: string;\n searchingText?: string;\n noResultsText?: string;\n resultCountText?: string;\n addToCartText?: string;\n addedToCartText?: string;\n outOfStockText?: string;\n goToProductText?: string;\n viewAllText?: string;\n components?: any;\n imageAspectRatio?: AspectRatio;\n imageObjectFit?: ObjectFit;\n viewCartButtonText?: string;\n}\n"
18125
- },
18126
- {
18127
- "filename": "utils/cx.ts",
18128
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
18129
17681
  }
18130
17682
  ]
18131
17683
  },
@@ -18153,21 +17705,9 @@
18153
17705
  "filename": "styles.css",
18154
17706
  "content": ".not-found {\n width: 100%;\n}\n\n.not-found__wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 50vh;\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.not-found__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n gap: 1rem;\n max-width: 29rem;\n text-wrap-style: pretty;\n}\n\n.not-found__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.not-found__description {\n color: var(--kombos-gray-500);\n margin: 0;\n}\n\n@media (min-width: 768px) {\n .not-found__wrapper {\n padding-top: 3rem;\n padding-bottom: 3rem;\n }\n}\n\n@media (min-width: 1024px) {\n .not-found__wrapper {\n padding-top: 4rem;\n padding-bottom: 4rem;\n }\n}\n"
18155
17707
  },
18156
- {
18157
- "filename": "sub-components/Button/index.tsx",
18158
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
18159
- },
18160
- {
18161
- "filename": "sub-components/Button/styles.css",
18162
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
18163
- },
18164
17708
  {
18165
17709
  "filename": "types.ts",
18166
17710
  "content": "import type { IkasNavigationLink } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n title?: string;\n description?: string;\n button?: IkasNavigationLink | null;\n}\n"
18167
- },
18168
- {
18169
- "filename": "utils/cx.ts",
18170
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
18171
17711
  }
18172
17712
  ]
18173
17713
  },
@@ -18555,10 +18095,6 @@
18555
18095
  "filename": "components/ProductGallery/styles.css",
18556
18096
  "content": "/* ---- Gallery ---- */\n.kombos-pd__gallery {\n display: flex;\n flex-direction: column;\n}\n\n.kombos-pd__thumbs {\n display: none;\n}\n\n.kombos-pd__main-col {\n flex: 1;\n min-width: 0;\n}\n\n.kombos-pd__main-image-wrap {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n\n.kombos-pd__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n width: 100%;\n height: 100%;\n -webkit-overflow-scrolling: touch;\n cursor: grab;\n user-select: none;\n}\n\n.kombos-pd__track::-webkit-scrollbar {\n display: none;\n}\n\n.kombos-pd__slide {\n flex: 0 0 100%;\n width: 100%;\n scroll-snap-align: start;\n scroll-snap-stop: always;\n}\n\n.kombos-pd__main-image {\n width: 100%;\n height: 100%;\n display: block;\n -webkit-user-drag: none;\n user-drag: none;\n pointer-events: none;\n}\n\n.kombos-pd__main-video {\n pointer-events: auto;\n cursor: default;\n}\n\n.kombos-pd__thumb-video {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.kombos-pd__thumb-play {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.55);\n color: var(--kombos-white);\n font-size: 0.75rem;\n}\n\n.kombos-pd__main-image--placeholder {\n border: 1px solid var(--kombos-gray-100);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n color: var(--kombos-gray-300);\n font-size: 5rem;\n}\n\n/* Arrow buttons */\n.kombos-pd__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.kombos-pd__arrow--prev {\n left: 1.25rem;\n}\n\n.kombos-pd__arrow--next {\n right: 1.25rem;\n}\n\n/* Dots */\n.kombos-pd__dots {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0;\n}\n\n.kombos-pd__dot {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 2.25rem;\n height: 2.25rem;\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n}\n\n.kombos-pd__dot::after {\n content: \"\";\n display: block;\n width: 0.625rem;\n height: 0.625rem;\n border-radius: 10px;\n border: 1px solid var(--kombos-gray-100);\n background: var(--kombos-white);\n transition: all 0.15s;\n}\n\n.kombos-pd__dot--active::after {\n width: 2rem;\n background: var(--kombos-gray-900);\n border-color: var(--kombos-gray-200);\n}\n\n/* ===== Tablet (>=768px) ===== */\n@media (min-width: 768px) {\n .kombos-pd__gallery {\n flex-direction: row;\n gap: 1.25rem;\n flex: 1;\n min-width: 0;\n }\n\n .kombos-pd__thumbs {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n flex-shrink: 0;\n width: 7rem;\n overflow-y: auto;\n scrollbar-width: none;\n }\n\n .kombos-pd__thumbs::-webkit-scrollbar {\n display: none;\n }\n\n .kombos-pd__thumb {\n width: 7rem;\n flex-shrink: 0;\n border-radius: 12px;\n border: 1px solid var(--kombos-gray-200);\n overflow: hidden;\n cursor: pointer;\n padding: 0.375rem;\n background: var(--kombos-white);\n transition: border-color 0.15s;\n }\n\n .kombos-pd__thumb:hover {\n border-color: var(--kombos-gray-500);\n }\n\n .kombos-pd__thumb--active {\n border-color: var(--kombos-gray-900);\n }\n\n .kombos-pd__thumb-img {\n width: 100%;\n height: 100%;\n display: block;\n border-radius: 8px;\n }\n\n .kombos-pd__main-col {\n align-self: flex-start;\n }\n\n .kombos-pd__main-image-wrap {\n border-radius: 6px;\n overflow: hidden;\n }\n\n .kombos-pd__main-image {\n max-height: 45.75rem;\n border-radius: 6px;\n }\n\n}\n"
18557
18097
  },
18558
- {
18559
- "filename": "hooks/useBundleProducts.ts",
18560
- "content": "import { useState, useEffect, useMemo } from \"preact/hooks\";\nimport {\n getSelectedProductVariant,\n getBundleProductsOfVariant,\n initBundleProducts,\n hasBundleSettings,\n IkasBundleProduct,\n IkasProduct,\n cartStore,\n waitForCartStoreInit,\n} from \"@ikas/bp-storefront\";\nimport { runInAction } from \"mobx\";\nimport { adjustBundleProductQuantity } from \"../utils/bundle\";\n\nfunction adjustBundleQuantities(products: IkasBundleProduct[]) {\n runInAction(() => {\n for (const bp of products) {\n adjustBundleProductQuantity(bp);\n }\n });\n}\n\nexport function useBundleProducts(product: IkasProduct | null | undefined) {\n const [isLoading, setIsLoading] = useState(true);\n\n const editLineID =\n typeof window !== \"undefined\"\n ? new URLSearchParams(window.location.search).get(\"editLineID\")\n : null;\n\n const selectedVariant = product ? getSelectedProductVariant(product) : null;\n\n const hasBundle = selectedVariant\n ? hasBundleSettings(selectedVariant)\n : false;\n\n const bundleSettings = hasBundle ? selectedVariant!.bundleSettings : null;\n\n useEffect(() => {\n if (!product || !selectedVariant || !bundleSettings) return;\n\n let cancelled = false;\n\n async function load() {\n setIsLoading(true);\n\n try {\n if (editLineID) await waitForCartStoreInit(cartStore);\n\n await getBundleProductsOfVariant(product!, selectedVariant!);\n await initBundleProducts(product!);\n\n if (!cancelled && bundleSettings) {\n adjustBundleQuantities(bundleSettings.products);\n }\n } finally {\n if (!cancelled) setIsLoading(false);\n }\n }\n\n load();\n\n return () => {\n cancelled = true;\n };\n }, [selectedVariant, editLineID]);\n\n const sortedProducts = useMemo(() => {\n if (!bundleSettings) return [];\n\n return [...bundleSettings.products].sort((a, b) => a.order - b.order);\n }, [bundleSettings?.products]);\n\n return { isLoading, selectedVariant, bundleSettings, sortedProducts };\n}\n"
18561
- },
18562
18098
  {
18563
18099
  "filename": "ikas-config-snippet.json",
18564
18100
  "content": "{\n \"id\": \"{{PROJECT_ID}}-product-detail\",\n \"name\": \"ProductDetail\",\n \"type\": \"section\",\n \"entry\": \"./src/components/ProductDetail/index.tsx\",\n \"styles\": \"./src/components/ProductDetail/styles.css\",\n \"props\": [\n {\n \"name\": \"product\",\n \"displayName\": \"Product\",\n \"type\": \"PRODUCT\",\n \"required\": false\n },\n {\n \"name\": \"aspectRatio\",\n \"displayName\": \"En Boy Ratio\",\n \"type\": \"ENUM\",\n \"required\": false,\n \"groupId\": \"gorsel-ayarlari\",\n \"enumTypeId\": \"s3OODUmZpJ\"\n },\n {\n \"name\": \"objectFit\",\n \"displayName\": \"Image Fit\",\n \"type\": \"ENUM\",\n \"required\": false,\n \"groupId\": \"gorsel-ayarlari\",\n \"enumTypeId\": \"GrylMqHxui\"\n },\n {\n \"name\": \"components\",\n \"displayName\": \"Info Components\",\n \"type\": \"COMPONENT_LIST\",\n \"required\": false,\n \"filteredComponentIds\": [\n \"{{PROJECT_ID}}-product-detail-name-favorite\",\n \"{{PROJECT_ID}}-product-detail-sku\",\n \"{{PROJECT_ID}}-product-detail-prices\",\n \"{{PROJECT_ID}}-product-detail-product-group\",\n \"{{PROJECT_ID}}-product-detail-variant\",\n \"{{PROJECT_ID}}-product-detail-add-to-cart\",\n \"{{PROJECT_ID}}-product-detail-features\",\n \"{{PROJECT_ID}}-product-detail-description\",\n \"{{PROJECT_ID}}-product-detail-bundle-product\",\n \"{{PROJECT_ID}}-product-detail-option-set\",\n \"{{PROJECT_ID}}-product-detail-offer\"\n ]\n },\n {\n \"name\": \"bottomComponents\",\n \"displayName\": \"Sub Components\",\n \"type\": \"COMPONENT_LIST\",\n \"required\": false,\n \"filteredComponentIds\": [\n \"{{PROJECT_ID}}-product-detail-bundle-furniture\",\n \"{{PROJECT_ID}}-product-detail-offer\"\n ]\n },\n {\n \"name\": \"homepageText\",\n \"displayName\": \"Home Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Home\",\n \"groupId\": \"metinler\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"gorsel-ayarlari\",\n \"name\": \"Image Settings\",\n \"description\": \"Product görselinin en boy oranı ve sığdırma modu\"\n },\n {\n \"id\": \"metinler\",\n \"name\": \"Texts\",\n \"description\": \"Breadcrumb ve sayfa metinleri\"\n }\n ]\n}"
@@ -18571,89 +18107,9 @@
18571
18107
  "filename": "styles.css",
18572
18108
  "content": "/* ===== Product Detail Section ===== */\n\n.kombos-pd {\n width: 100%;\n}\n\n/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */\n.kombos-pd__breadcrumb {\n padding-top: 1rem;\n}\n\n/* ---- Layout ---- */\n.kombos-pd__layout {\n display: flex;\n flex-direction: column;\n padding-top: 1rem;\n}\n\n/* ---- Product Info ---- */\n.kombos-pd__info {\n display: flex;\n flex-direction: column;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-pd__container {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n\n .kombos-pd__breadcrumb {\n padding-top: 0;\n padding-bottom: 1.5rem;\n }\n\n .kombos-pd__layout {\n display: grid;\n grid-template-columns: 7fr 5fr;\n gap: 2rem;\n padding-top: 0;\n }\n\n /* Gallery — sticky on desktop */\n .kombos-pd__gallery {\n position: sticky;\n top: 0.75rem;\n align-self: start;\n }\n\n /* Info — right side */\n .kombos-pd__info {\n min-width: 0;\n padding: 0;\n }\n}\n"
18573
18109
  },
18574
- {
18575
- "filename": "sub-components/Badge/index.tsx",
18576
- "content": "import { ComponentChildren } from \"preact\";\nimport {\n IkasImage,\n getDefaultSrc,\n createMediaSrcset,\n} from \"@ikas/bp-storefront\";\nimport { cx } from \"../../utils/cx\";\n\nconst TYPO_MAP = {\n xs: \"text-xs-medium\",\n s: \"text-sm-medium\",\n m: \"text-md-medium\",\n l: \"text-md-medium\",\n} as const;\n\ntype Size = \"xs\" | \"s\" | \"m\" | \"l\";\n\ninterface BaseProps {\n size?: Size;\n selected?: boolean;\n outOfStock?: boolean;\n href?: string;\n onClick?: () => void;\n title?: string;\n \"aria-label\"?: string;\n}\n\nfunction StrikeLine() {\n return <span className=\"kombos-badge__strike\" />;\n}\n\n/* ------------------------------------------------------------------ */\n/* BadgeImage */\n/* ------------------------------------------------------------------ */\n\ninterface BadgeImageProps extends BaseProps {\n image: IkasImage;\n alt: string;\n sizes?: string;\n variantImg?: boolean;\n}\n\nexport function BadgeImage({\n image,\n alt,\n sizes = \"64px\",\n variantImg,\n size = \"s\",\n selected,\n outOfStock,\n href,\n onClick,\n title,\n \"aria-label\": ariaLabel,\n}: BadgeImageProps) {\n const className = cx(\n \"kombos-badge\",\n \"kombos-badge--image\",\n variantImg && \"kombos-badge--variant-img\",\n `kombos-badge--${size}`,\n selected && \"kombos-badge--selected\",\n outOfStock && \"kombos-badge--nonstock\",\n );\n\n const content = (\n <>\n <img\n src={getDefaultSrc(image)}\n srcSet={createMediaSrcset(image)}\n sizes={sizes}\n alt={alt}\n className=\"kombos-badge__img\"\n />\n {outOfStock && <StrikeLine />}\n </>\n );\n\n if (href) {\n return (\n <a href={href} className={className} title={title} aria-label={ariaLabel}>\n {content}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n className={className}\n onClick={onClick}\n title={title}\n aria-label={ariaLabel}\n >\n {content}\n </button>\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* BadgeColor */\n/* ------------------------------------------------------------------ */\n\ninterface BadgeColorProps extends BaseProps {\n colorCode: string;\n}\n\nexport function BadgeColor({\n colorCode,\n size = \"s\",\n selected,\n outOfStock,\n href,\n onClick,\n title,\n \"aria-label\": ariaLabel,\n}: BadgeColorProps) {\n const className = cx(\n \"kombos-badge\",\n \"kombos-badge--color\",\n `kombos-badge--${size}`,\n selected && \"kombos-badge--selected\",\n outOfStock && \"kombos-badge--nonstock\",\n );\n\n const content = outOfStock ? <StrikeLine /> : null;\n\n if (href) {\n return (\n <a\n href={href}\n className={className}\n style={{ backgroundColor: colorCode }}\n title={title}\n aria-label={ariaLabel}\n >\n {content}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n className={className}\n style={{ backgroundColor: colorCode }}\n onClick={onClick}\n title={title}\n aria-label={ariaLabel}\n >\n {content}\n </button>\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* BadgeText */\n/* ------------------------------------------------------------------ */\n\ninterface BadgeTextProps extends BaseProps {\n children: ComponentChildren;\n}\n\nexport function BadgeText({\n children,\n size = \"s\",\n selected,\n outOfStock,\n href,\n onClick,\n title,\n \"aria-label\": ariaLabel,\n}: BadgeTextProps) {\n const className = cx(\n \"kombos-badge\",\n \"kombos-badge--text\",\n `kombos-badge--${size}`,\n TYPO_MAP[size],\n selected && \"kombos-badge--selected\",\n outOfStock && \"kombos-badge--nonstock\",\n );\n\n const content = (\n <>\n {children}\n {outOfStock && <StrikeLine />}\n </>\n );\n\n if (href) {\n return (\n <a href={href} className={className} title={title} aria-label={ariaLabel}>\n {content}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n className={className}\n onClick={onClick}\n title={title}\n aria-label={ariaLabel}\n >\n {content}\n </button>\n );\n}\n"
18577
- },
18578
- {
18579
- "filename": "sub-components/Badge/styles.css",
18580
- "content": "/* ===== Badge Primitives ===== */\n\n/* ---- Base badge ---- */\n.kombos-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.25rem;\n min-width: 2.25rem;\n cursor: pointer;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n background: var(--kombos-white);\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n /* Reset for <button> */\n padding: 0;\n font: inherit;\n /* Reset for <a> */\n text-decoration: none;\n color: inherit;\n transition: border-color 0.15s ease;\n}\n\n/* ---- Size: xs ---- */\n.kombos-badge--xs {\n height: 1.75rem;\n min-width: 1.75rem;\n}\n\n.kombos-badge--xs.kombos-badge--color,\n.kombos-badge--xs.kombos-badge--image {\n width: 1.75rem;\n}\n\n.kombos-badge--image.kombos-badge--variant-img.kombos-badge--xs {\n width: 3rem;\n height: 3rem;\n}\n\n/* ---- Type: text ---- */\n.kombos-badge--text {\n color: var(--kombos-gray-700);\n transition: border-color 0.15s ease, color 0.15s ease;\n}\n\n.kombos-badge--xs.kombos-badge--text {\n padding: 0 0.375rem;\n}\n\n.kombos-badge--s.kombos-badge--text {\n padding: 0 0.5rem;\n}\n\n.kombos-badge--m.kombos-badge--text,\n.kombos-badge--l.kombos-badge--text {\n padding: 0 0.75rem;\n}\n\n/* ---- Type: color ---- */\n.kombos-badge--color {\n width: 2.25rem;\n padding: 0;\n}\n\n/* ---- Type: image ---- */\n.kombos-badge--image {\n width: 2.25rem;\n padding: 0;\n}\n\n.kombos-badge__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n border-radius: 5px;\n}\n\n/* Variant product image (larger) */\n.kombos-badge--image.kombos-badge--variant-img {\n width: 4rem;\n height: 4rem;\n}\n\n/* ---- States ---- */\n\n/* Hover (skip disabled buttons and out-of-stock) */\n.kombos-badge:hover:not(:disabled):not(.kombos-badge--nonstock) {\n border-color: var(--kombos-gray-900);\n}\n\n.kombos-badge--text:hover:not(:disabled):not(.kombos-badge--nonstock) {\n color: var(--kombos-gray-900);\n}\n\n/* Selected */\n.kombos-badge--selected {\n border-color: var(--kombos-gray-900);\n}\n\n.kombos-badge--selected.kombos-badge--text {\n background: var(--kombos-gray-50);\n color: var(--kombos-gray-900);\n}\n\n/* Out of stock */\n.kombos-badge--nonstock {\n cursor: not-allowed;\n}\n\n.kombos-badge--nonstock.kombos-badge--text {\n color: var(--kombos-gray-400);\n}\n\n/* Diagonal strike line */\n.kombos-badge__strike {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: linear-gradient(\n to top left,\n transparent calc(50% - 0.5px),\n var(--kombos-gray-500) calc(50% - 0.5px),\n var(--kombos-gray-500) calc(50% + 0.5px),\n transparent calc(50% + 0.5px)\n );\n}\n"
18581
- },
18582
- {
18583
- "filename": "sub-components/Breadcrumb/index.tsx",
18584
- "content": "import { cx } from \"../../utils/cx\";\nimport { CaretRightSVG } from \"../icons\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\ninterface Props {\n items: BreadcrumbItem[];\n size?: \"sm\" | \"xs\";\n className?: string;\n}\n\nexport default function Breadcrumb({ items, size = \"sm\", className }: Props) {\n if (items.length === 0) return null;\n\n const typographyClass = size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\";\n\n return (\n <nav className={cx(\"kombos-breadcrumb\", className)}>\n {items.map((item, i) => {\n const isLast = i === items.length - 1;\n return (\n <span key={item.href ?? item.label} className=\"kombos-breadcrumb__item\">\n {item.href ? (\n <a\n href={item.href}\n className={cx(\"kombos-breadcrumb__link\", typographyClass, isLast && \"kombos-breadcrumb__link--active\")}\n >\n {item.label}\n </a>\n ) : item.onClick ? (\n <button\n type=\"button\"\n onClick={item.onClick}\n className={cx(\"kombos-breadcrumb__link\", \"kombos-breadcrumb__link-btn\", typographyClass)}\n >\n {item.label}\n </button>\n ) : (\n <span className={cx(\"kombos-breadcrumb__current\", typographyClass)}>\n {item.label}\n </span>\n )}\n {!isLast && (\n <span className={cx(\"kombos-breadcrumb__sep\", size === \"xs\" && \"kombos-breadcrumb__sep--xs\")}>\n <CaretRightSVG />\n </span>\n )}\n </span>\n );\n })}\n </nav>\n );\n}\n"
18585
- },
18586
- {
18587
- "filename": "sub-components/Breadcrumb/styles.css",
18588
- "content": "/* ===== Breadcrumb Sub-Component ===== */\n.kombos-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.kombos-breadcrumb__link {\n color: var(--kombos-gray-500);\n text-decoration: none;\n}\n\n.kombos-breadcrumb__link:hover {\n text-decoration: underline;\n}\n\n.kombos-breadcrumb__link-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n}\n\n.kombos-breadcrumb__link--active {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__current {\n color: var(--kombos-gray-900);\n}\n\n.kombos-breadcrumb__sep {\n font-size: 0.75rem;\n color: var(--kombos-gray-400);\n display: inline-flex;\n align-items: center;\n}\n\n.kombos-breadcrumb__sep--xs {\n font-size: 0.625rem;\n color: var(--kombos-gray-300);\n}\n"
18589
- },
18590
- {
18591
- "filename": "sub-components/Button/index.tsx",
18592
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
18593
- },
18594
- {
18595
- "filename": "sub-components/Button/styles.css",
18596
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
18597
- },
18598
- {
18599
- "filename": "sub-components/CollapsibleGroup/index.tsx",
18600
- "content": "import { ComponentChildren } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport { cx } from \"../../utils/cx\";\nimport { MinusSVG, PlusSVG } from \"../icons\";\n\ninterface Props {\n title?: string;\n defaultOpen?: boolean;\n children: ComponentChildren;\n className?: string;\n}\n\nexport default function CollapsibleGroup({\n title,\n defaultOpen = false,\n children,\n className,\n}: Props) {\n const [isCollapsed, setIsCollapsed] = useState(!defaultOpen);\n\n return (\n <div className={cx(\"kombos-collapsible-group\", className)}>\n <button\n type=\"button\"\n className=\"kombos-collapsible-group__header\"\n onClick={() => setIsCollapsed((prev) => !prev)}\n >\n {title && (\n <span className=\"kombos-collapsible-group__title text-sm-semibold\">\n {title}\n </span>\n )}\n <span\n className={cx(\n \"kombos-collapsible-group__toggle-icon\",\n isCollapsed && \"kombos-collapsible-group__toggle-icon--collapsed\",\n )}\n >\n {isCollapsed ? <PlusSVG /> : <MinusSVG />}\n </span>\n </button>\n <div\n className={cx(\n \"kombos-collapsible-group__body\",\n isCollapsed && \"kombos-collapsible-group__body--collapsed\",\n )}\n >\n <div className=\"kombos-collapsible-group__content\">{children}</div>\n </div>\n </div>\n );\n}\n"
18601
- },
18602
- {
18603
- "filename": "sub-components/CollapsibleGroup/styles.css",
18604
- "content": "/* ===== Collapsible Group ===== */\n.kombos-collapsible-group {\n border-bottom: 1px solid var(--kombos-gray-200);\n padding: 1rem 0;\n}\n\n.kombos-collapsible-group__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.kombos-collapsible-group__title {\n color: var(--kombos-gray-900);\n}\n\n.kombos-collapsible-group__toggle-icon {\n font-size: 1rem;\n color: var(--kombos-gray-500);\n display: flex;\n align-items: center;\n transition: transform 0.25s ease;\n margin-left: auto;\n}\n\n.kombos-collapsible-group__toggle-icon--collapsed {\n transform: rotate(90deg);\n}\n\n/* Animated body — grid-template-rows trick */\n.kombos-collapsible-group__body {\n display: grid;\n grid-template-rows: 1fr;\n transition: grid-template-rows 0.25s ease, padding-top 0.25s ease;\n padding-top: 0.75rem;\n}\n\n.kombos-collapsible-group__body--collapsed {\n grid-template-rows: 0fr;\n padding-top: 0;\n}\n\n.kombos-collapsible-group__content {\n overflow: hidden;\n min-height: 0;\n}\n"
18605
- },
18606
- {
18607
- "filename": "sub-components/QuantitySelector/index.tsx",
18608
- "content": "import { MinusSVG, PlusSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props {\n value: number;\n onChange: (value: number) => void;\n size?: \"default\" | \"sm\";\n}\n\nexport default function QuantitySelector({\n value,\n onChange,\n size = \"default\",\n}: Props) {\n return (\n <div className={cx(\"kombos-pd__qty\", size === \"sm\" && \"kombos-pd__qty--sm\")}>\n <button\n type=\"button\"\n className=\"kombos-pd__qty-btn\"\n onClick={() => onChange(Math.max(1, value - 1))}\n disabled={value <= 1}\n aria-label=\"Decrease quantity\"\n >\n <MinusSVG />\n </button>\n <span\n className={cx(\"kombos-pd__qty-value\", size === \"sm\" ? \"text-sm-medium\" : \"text-md-medium\")}\n >\n {value}\n </span>\n <button\n type=\"button\"\n className=\"kombos-pd__qty-btn\"\n onClick={() => onChange(value + 1)}\n aria-label=\"Increase quantity\"\n >\n <PlusSVG />\n </button>\n </div>\n );\n}\n"
18609
- },
18610
- {
18611
- "filename": "sub-components/QuantitySelector/styles.css",
18612
- "content": "/* Qty — border ececed, rounded-6, px-12 py-10, gap-16 between items */\n.kombos-pd__qty {\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n padding: 0.5625rem 0.6875rem;\n}\n\n.kombos-pd__qty-btn {\n min-width: 1.5rem;\n min-height: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 1rem;\n color: var(--kombos-gray-900);\n padding: 0;\n margin: -0.75rem;\n padding: 0.75rem;\n}\n\n.kombos-pd__qty-btn:hover:not(:disabled) {\n color: var(--kombos-gray-700);\n}\n\n.kombos-pd__qty-btn:disabled {\n color: var(--kombos-gray-300);\n cursor: not-allowed;\n}\n\n.kombos-pd__qty-value {\n min-width: 1.5rem;\n text-align: center;\n color: var(--kombos-gray-900);\n}\n\n/* Small size variant */\n.kombos-pd__qty--sm {\n gap: 0.75rem;\n padding: 0.4375rem 0.6875rem;\n}\n\n.kombos-pd__qty--sm .kombos-pd__qty-btn {\n margin: -0.5rem;\n padding: 0.5rem;\n}\n"
18613
- },
18614
- {
18615
- "filename": "sub-components/Tag/index.tsx",
18616
- "content": "import type { ComponentChildren } from \"preact\";\n\ninterface Props {\n type: \"discounted\" | \"new\" | \"dark\";\n size?: \"s\" | \"m\";\n children: ComponentChildren;\n}\n\nexport default function Tag({ type, size = \"s\", children }: Props) {\n const typoClass = size === \"s\" ? \"text-xs-semibold\" : \"text-md-semibold\";\n const typeClass =\n type === \"discounted\"\n ? \"kombos-tag--discounted\"\n : type === \"dark\"\n ? \"kombos-tag--dark\"\n : \"kombos-tag--new\";\n\n return (\n <span className={`kombos-tag ${typeClass} ${typoClass}`}>{children}</span>\n );\n}\n"
18617
- },
18618
- {
18619
- "filename": "sub-components/Tag/styles.css",
18620
- "content": "/* ===== Tag ===== */\n.kombos-tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0.25rem 0.5rem;\n border-radius: 6px;\n white-space: nowrap;\n}\n\n/* Discounted */\n.kombos-tag--discounted {\n background: var(--kombos-discount-bg);\n color: var(--kombos-white);\n}\n\n/* New */\n.kombos-tag--new {\n background: var(--kombos-white);\n border: 1px solid var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n/* Dark */\n.kombos-tag--dark {\n padding: 0.125rem 0.5rem;\n border-radius: 4px;\n background: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n"
18621
- },
18622
- {
18623
- "filename": "sub-components/VariantBadge/index.tsx",
18624
- "content": "import {\n IkasProduct,\n IkasVariantValue,\n getIkasVariantValueThumbnailImage,\n isIkasVariantTypeColorSelection,\n selectVariantValue,\n getDisplayedProductVariantTypes,\n getProductVariantMainImage,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { BadgeImage, BadgeColor, BadgeText } from \"../Badge\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props {\n product: IkasProduct;\n size?: \"xs\" | \"s\" | \"m\" | \"l\";\n disableRoute?: boolean;\n scrollable?: boolean;\n showLabels?: boolean;\n useVariantImages?: boolean;\n onSelect?: () => void;\n}\n\nconst VariantBadge = observer(function VariantBadge({\n product,\n size = \"s\",\n disableRoute,\n scrollable,\n showLabels,\n useVariantImages,\n onSelect,\n}: Props) {\n const displayedVariantTypes = getDisplayedProductVariantTypes(product);\n if (displayedVariantTypes.length === 0) return null;\n\n function handleSelect(variantValue: IkasVariantValue) {\n selectVariantValue(product, variantValue, disableRoute);\n onSelect?.();\n }\n\n return (\n <div\n className={cx(\n \"kombos-variant-badge__groups\",\n size === \"l\" && \"kombos-variant-badge__groups--l\",\n )}\n >\n {displayedVariantTypes.map((dvt) => {\n const isColor = isIkasVariantTypeColorSelection(dvt.variantType);\n\n return (\n <div key={dvt.variantType.id} className=\"kombos-variant-badge__group\">\n {showLabels && (\n <span className={cx(\"kombos-variant-badge__label\", size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\")}>\n {dvt.variantType.name}\n </span>\n )}\n <div\n className={cx(\n \"kombos-variant-badge__row\",\n scrollable && \"kombos-variant-badge__row--scrollable\",\n size === \"l\" && \"kombos-variant-badge__row--l\",\n )}\n >\n {dvt.displayedVariantValues.map((dvv) => {\n const isSelected = dvv.isSelected;\n const outOfStock = dvv.hasStock === false;\n const variantValue = dvv.variantValue;\n\n if (isColor) {\n // Variant product image\n if (useVariantImages) {\n const variantImage = getProductVariantMainImage(\n dvv.variant,\n )?.image;\n\n if (variantImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={variantImage}\n alt={variantValue.name}\n sizes=\"64px\"\n variantImg\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Thumbnail image\n const thumbImage =\n getIkasVariantValueThumbnailImage(variantValue);\n\n if (thumbImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={thumbImage}\n alt={variantValue.name}\n sizes=\"(max-width: 1024px) 100vw, 100px\"\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n\n // Color swatch\n const colorCode = variantValue.colorCode;\n if (colorCode) {\n return (\n <BadgeColor\n key={variantValue.id}\n colorCode={colorCode}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Text badge (fallback)\n return (\n <BadgeText\n key={variantValue.id}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n >\n {variantValue.name}\n </BadgeText>\n );\n })}\n </div>\n </div>\n );\n })}\n </div>\n );\n});\n\nexport default VariantBadge;\n"
18625
- },
18626
- {
18627
- "filename": "sub-components/VariantBadge/styles.css",
18628
- "content": "/* ===== Variant Badge Layout ===== */\n\n/* ---- Layout ---- */\n.kombos-variant-badge__groups {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.kombos-variant-badge__groups--l {\n gap: 1.5rem;\n}\n\n.kombos-variant-badge__group {\n display: flex;\n flex-direction: column;\n}\n\n.kombos-variant-badge__label {\n color: var(--kombos-gray-900);\n margin-bottom: 0.375rem;\n}\n\n.kombos-variant-badge__row {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.kombos-variant-badge__row--l {\n gap: 0.5rem;\n}\n\n.kombos-variant-badge__row--scrollable {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n}\n\n.kombos-variant-badge__row--scrollable::-webkit-scrollbar {\n display: none;\n}\n\n.kombos-variant-badge__row--scrollable .kombos-badge {\n flex-shrink: 0;\n}\n"
18629
- },
18630
- {
18631
- "filename": "sub-components/icons/index.tsx",
18632
- "content": "import type { SVGAttributes } from \"preact\";\nimport { cx } from \"../../utils/cx\";\n\ninterface IconProps extends SVGAttributes<SVGSVGElement> {}\n\nexport function CaretDownSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 9.53063L12.5306 17.0306C12.461 17.1004 12.3782 17.1557 12.2872 17.1934C12.1961 17.2312 12.0986 17.2506 12 17.2506C11.9014 17.2506 11.8038 17.2312 11.7128 17.1934C11.6217 17.1557 11.539 17.1004 11.4694 17.0306L3.96936 9.53063C3.82863 9.3899 3.74957 9.19902 3.74957 9C3.74957 8.80098 3.82863 8.61011 3.96936 8.46937C4.1101 8.32864 4.30097 8.24958 4.49999 8.24958C4.69901 8.24958 4.88988 8.32864 5.03061 8.46937L12 15.4397L18.9694 8.46937C19.039 8.39969 19.1218 8.34442 19.2128 8.3067C19.3039 8.26899 19.4014 8.24958 19.5 8.24958C19.5985 8.24958 19.6961 8.26899 19.7872 8.3067C19.8782 8.34442 19.9609 8.39969 20.0306 8.46937C20.1003 8.53906 20.1556 8.62178 20.1933 8.71283C20.231 8.80387 20.2504 8.90145 20.2504 9C20.2504 9.09855 20.231 9.19613 20.1933 9.28717C20.1556 9.37822 20.1003 9.46094 20.0306 9.53063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M15.5306 18.9694C15.6003 19.0391 15.6556 19.1218 15.6933 19.2128C15.731 19.3039 15.7504 19.4015 15.7504 19.5C15.7504 19.5985 15.731 19.6961 15.6933 19.7872C15.6556 19.8782 15.6003 19.9609 15.5306 20.0306C15.461 20.1003 15.3782 20.1556 15.2872 20.1933C15.1961 20.231 15.0986 20.2504 15 20.2504C14.9015 20.2504 14.8039 20.231 14.7128 20.1933C14.6218 20.1556 14.5391 20.1003 14.4694 20.0306L6.96938 12.5306C6.89965 12.461 6.84433 12.3783 6.80659 12.2872C6.76885 12.1962 6.74942 12.0986 6.74942 12C6.74942 11.9014 6.76885 11.8038 6.80659 11.7128C6.84433 11.6217 6.89965 11.539 6.96938 11.4694L14.4694 3.96938C14.6101 3.82864 14.801 3.74958 15 3.74958C15.199 3.74958 15.3899 3.82864 15.5306 3.96938C15.6714 4.11011 15.7504 4.30098 15.7504 4.5C15.7504 4.69902 15.6714 4.88989 15.5306 5.03062L8.56032 12L15.5306 18.9694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M17.0306 12.5306L9.53062 20.0306C9.46093 20.1003 9.37821 20.1556 9.28716 20.1933C9.19612 20.231 9.09854 20.2504 8.99999 20.2504C8.90144 20.2504 8.80386 20.231 8.71282 20.1933C8.62177 20.1556 8.53905 20.1003 8.46936 20.0306C8.39968 19.9609 8.34441 19.8782 8.30669 19.7872C8.26898 19.6961 8.24957 19.5985 8.24957 19.5C8.24957 19.4015 8.26898 19.3039 8.30669 19.2128C8.34441 19.1218 8.39968 19.0391 8.46936 18.9694L15.4397 12L8.46936 5.03062C8.32863 4.88989 8.24957 4.69902 8.24957 4.5C8.24957 4.30098 8.32863 4.11011 8.46936 3.96938C8.61009 3.82864 8.80097 3.74958 8.99999 3.74958C9.19901 3.74958 9.38988 3.82864 9.53062 3.96938L17.0306 11.4694C17.1003 11.539 17.1557 11.6217 17.1934 11.7128C17.2312 11.8038 17.2506 11.9014 17.2506 12C17.2506 12.0986 17.2312 12.1962 17.1934 12.2872C17.1557 12.3783 17.1003 12.461 17.0306 12.5306Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MagnifyingGlass1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 20.4694L16.8366 15.7762C18.1971 14.1428 18.8755 12.0478 18.7307 9.92694C18.5859 7.80607 17.629 5.82268 16.0591 4.38935C14.4892 2.95602 12.4272 2.18311 10.3019 2.23141C8.17666 2.27971 6.15184 3.1455 4.64867 4.64867C3.1455 6.15184 2.27971 8.17666 2.23141 10.3019C2.18311 12.4272 2.95602 14.4892 4.38935 16.0591C5.82268 17.629 7.80607 18.5859 9.92694 18.7307C12.0478 18.8755 14.1428 18.1971 15.7762 16.8366L20.4694 21.5306C20.5391 21.6003 20.6218 21.6556 20.7128 21.6933C20.8039 21.731 20.9015 21.7504 21 21.7504C21.0985 21.7504 21.1961 21.731 21.2872 21.6933C21.3782 21.6556 21.4609 21.6003 21.5306 21.5306C21.6003 21.4609 21.6556 21.3782 21.6933 21.2872C21.731 21.1961 21.7504 21.0985 21.7504 21C21.7504 20.9015 21.731 20.8039 21.6933 20.7128C21.6556 20.6218 21.6003 20.5391 21.5306 20.4694ZM3.75 10.5C3.75 9.16498 4.14588 7.85993 4.88758 6.7499C5.62928 5.63987 6.68349 4.7747 7.91689 4.26381C9.15029 3.75292 10.5075 3.61925 11.8169 3.8797C13.1262 4.14015 14.329 4.78302 15.273 5.72703C16.217 6.67103 16.8599 7.87377 17.1203 9.18314C17.3808 10.4925 17.2471 11.8497 16.7362 13.0831C16.2253 14.3165 15.3601 15.3707 14.2501 16.1124C13.1401 16.8541 11.835 17.25 10.5 17.25C8.7104 17.248 6.99466 16.5362 5.72922 15.2708C4.46378 14.0053 3.75199 12.2896 3.75 10.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function User1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6487 19.875C20.2209 17.4066 18.0206 15.6366 15.4528 14.7975C16.723 14.0414 17.7098 12.8892 18.2618 11.5179C18.8137 10.1467 18.9003 8.63213 18.5082 7.2069C18.1161 5.78167 17.2669 4.52456 16.0912 3.62862C14.9155 2.73268 13.4782 2.24745 12 2.24745C10.5218 2.24745 9.0845 2.73268 7.90877 3.62862C6.73305 4.52456 5.88393 5.78167 5.49182 7.2069C5.0997 8.63213 5.18627 10.1467 5.73824 11.5179C6.2902 12.8892 7.27703 14.0414 8.54719 14.7975C5.97937 15.6356 3.77906 17.4056 2.35125 19.875C2.29889 19.9604 2.26416 20.0554 2.24911 20.1544C2.23406 20.2534 2.23899 20.3544 2.26361 20.4515C2.28824 20.5486 2.33206 20.6398 2.39249 20.7196C2.45292 20.7995 2.52873 20.8665 2.61546 20.9165C2.70218 20.9666 2.79806 20.9989 2.89744 21.0113C2.99682 21.0237 3.09768 21.0161 3.19408 20.989C3.29048 20.9618 3.38046 20.9156 3.45871 20.8531C3.53696 20.7906 3.60189 20.713 3.64969 20.625C5.41594 17.5725 8.53781 15.75 12 15.75C15.4622 15.75 18.5841 17.5725 20.3503 20.625C20.3981 20.713 20.463 20.7906 20.5413 20.8531C20.6195 20.9156 20.7095 20.9618 20.8059 20.989C20.9023 21.0161 21.0032 21.0237 21.1026 21.0113C21.2019 20.9989 21.2978 20.9666 21.3845 20.9165C21.4713 20.8665 21.5471 20.7995 21.6075 20.7196C21.6679 20.6398 21.7118 20.5486 21.7364 20.4515C21.761 20.3544 21.7659 20.2534 21.7509 20.1544C21.7358 20.0554 21.7011 19.9604 21.6487 19.875ZM6.75 9C6.75 7.96165 7.05791 6.94661 7.63478 6.08326C8.21166 5.2199 9.0316 4.54699 9.99091 4.14963C10.9502 3.75227 12.0058 3.6483 13.0242 3.85088C14.0426 4.05345 14.9781 4.55346 15.7123 5.28769C16.4465 6.02191 16.9465 6.95738 17.1491 7.97578C17.3517 8.99418 17.2477 10.0498 16.8504 11.0091C16.453 11.9684 15.7801 12.7883 14.9167 13.3652C14.0534 13.9421 13.0384 14.25 12 14.25C10.6081 14.2485 9.27358 13.6949 8.28933 12.7107C7.30509 11.7264 6.75149 10.3919 6.75 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ShoppingBag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM16.5 8.25C16.5 9.44347 16.0259 10.5881 15.182 11.432C14.3381 12.2759 13.1935 12.75 12 12.75C10.8065 12.75 9.66193 12.2759 8.81802 11.432C7.97411 10.5881 7.5 9.44347 7.5 8.25C7.5 8.05109 7.57902 7.86032 7.71967 7.71967C7.86032 7.57902 8.05109 7.5 8.25 7.5C8.44891 7.5 8.63968 7.57902 8.78033 7.71967C8.92098 7.86032 9 8.05109 9 8.25C9 9.04565 9.31607 9.80871 9.87868 10.3713C10.4413 10.9339 11.2044 11.25 12 11.25C12.7956 11.25 13.5587 10.9339 14.1213 10.3713C14.6839 9.80871 15 9.04565 15 8.25C15 8.05109 15.079 7.86032 15.2197 7.71967C15.3603 7.57902 15.5511 7.5 15.75 7.5C15.9489 7.5 16.1397 7.57902 16.2803 7.71967C16.421 7.86032 16.5 8.05109 16.5 8.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.2194C19.3503 18.2891 19.4056 18.3718 19.4433 18.4628C19.481 18.5539 19.5004 18.6515 19.5004 18.75C19.5004 18.8485 19.481 18.9461 19.4433 19.0372C19.4056 19.1282 19.3503 19.2109 19.2806 19.2806C19.2109 19.3503 19.1282 19.4056 19.0372 19.4433C18.9461 19.481 18.8485 19.5004 18.75 19.5004C18.6514 19.5004 18.5539 19.481 18.4628 19.4433C18.3718 19.4056 18.289 19.3503 18.2194 19.2806L12 13.0603L5.78061 19.2806C5.63988 19.4214 5.44901 19.5004 5.24999 19.5004C5.05097 19.5004 4.8601 19.4214 4.71936 19.2806C4.57863 19.1399 4.49957 18.949 4.49957 18.75C4.49957 18.551 4.57863 18.3601 4.71936 18.2194L10.9397 12L4.71936 5.78063C4.57863 5.63989 4.49957 5.44902 4.49957 5.25C4.49957 5.05098 4.57863 4.86011 4.71936 4.71938C4.8601 4.57864 5.05097 4.49958 5.24999 4.49958C5.44901 4.49958 5.63988 4.57864 5.78061 4.71938L12 10.9397L18.2194 4.71938C18.3601 4.57864 18.551 4.49958 18.75 4.49958C18.949 4.49958 19.1399 4.57864 19.2806 4.71938C19.4213 4.86011 19.5004 5.05098 19.5004 5.25C19.5004 5.44902 19.4213 5.63989 19.2806 5.78063L13.0603 12L19.2806 18.2194Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n className={cx(\"kombos-icon\", className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M10 5.99992L6.00001 9.99992M6.00001 5.99992L10 9.99992M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00001 14.6666C4.31811 14.6666 1.33334 11.6818 1.33334 7.99992C1.33334 4.31802 4.31811 1.33325 8.00001 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function MinusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlusSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H12.75V20.25C12.75 20.4489 12.671 20.6397 12.5303 20.7803C12.3897 20.921 12.1989 21 12 21C11.8011 21 11.6103 20.921 11.4697 20.7803C11.329 20.6397 11.25 20.4489 11.25 20.25V12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H11.25V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TrashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.25 4.5H3.75C3.55109 4.5 3.36032 4.57902 3.21967 4.71967C3.07902 4.86032 3 5.05109 3 5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H4.5V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H18C18.3978 21 18.7794 20.842 19.0607 20.5607C19.342 20.2794 19.5 19.8978 19.5 19.5V6H20.25C20.4489 6 20.6397 5.92098 20.7803 5.78033C20.921 5.63968 21 5.44891 21 5.25C21 5.05109 20.921 4.86032 20.7803 4.71967C20.6397 4.57902 20.4489 4.5 20.25 4.5ZM18 19.5H6V6H18V19.5ZM7.5 2.25C7.5 2.05109 7.57902 1.86032 7.71967 1.71967C7.86032 1.57902 8.05109 1.5 8.25 1.5H15.75C15.9489 1.5 16.1397 1.57902 16.2803 1.71967C16.421 1.86032 16.5 2.05109 16.5 2.25C16.5 2.44891 16.421 2.63968 16.2803 2.78033C16.1397 2.92098 15.9489 3 15.75 3H8.25C8.05109 3 7.86032 2.92098 7.71967 2.78033C7.57902 2.63968 7.5 2.44891 7.5 2.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Package1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.97 6.20156L12.72 1.6875C12.4996 1.5657 12.2518 1.50181 12 1.50181C11.7482 1.50181 11.5004 1.5657 11.28 1.6875L3.03 6.20344C2.7944 6.33235 2.59772 6.52215 2.46052 6.75302C2.32331 6.9839 2.25061 7.24737 2.25 7.51594V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51687C21.7499 7.24783 21.6774 6.98377 21.5402 6.75236C21.403 6.52095 21.206 6.3307 20.97 6.20156ZM12 3L19.5319 7.125L16.7409 8.65313L9.20813 4.52812L12 3ZM12 11.25L4.46812 7.125L7.64625 5.385L15.1781 9.51L12 11.25ZM3.75 8.4375L11.25 12.5419V20.5847L3.75 16.4831V8.4375ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.4375V16.4784V16.4794Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HandbagSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.6478 18.6413L20.1478 7.14126C20.0974 6.76906 19.9135 6.42892 19.6303 6.18239C19.3472 5.93587 18.9839 5.79982 18.6084 5.80001H16.2V5.30001C16.2 4.18609 15.7575 3.11782 14.9699 2.33017C14.1822 1.54252 13.1139 1.10001 12 1.10001C10.886 1.10001 9.81779 1.54252 9.03014 2.33017C8.24249 3.11782 7.79998 4.18609 7.79998 5.30001V5.80001H5.39154C5.01603 5.79982 4.65278 5.93587 4.36961 6.18239C4.08644 6.42892 3.90258 6.76906 3.85216 7.14126L2.35216 18.6413C2.32251 18.8607 2.34047 19.0841 2.40485 19.2961C2.46923 19.508 2.57854 19.7035 2.72549 19.8693C2.87244 20.035 3.05369 20.1672 3.25698 20.2568C3.46028 20.3463 3.68088 20.3911 3.90341 20.3881H3.89154H20.1084H20.0966C20.3191 20.3911 20.5397 20.3463 20.743 20.2568C20.9463 20.1672 21.1275 20.035 21.2745 19.8693C21.4214 19.7035 21.5307 19.508 21.5951 19.2961C21.6595 19.0841 21.6775 18.8607 21.6478 18.6413ZM9.29998 5.30001C9.29998 4.58393 9.5845 3.89717 10.0908 3.39083C10.5972 2.88449 11.2839 2.60001 12 2.60001C12.716 2.60001 13.4028 2.88449 13.9091 3.39083C14.4155 3.89717 14.7 4.58393 14.7 5.30001V5.80001H9.29998V5.30001ZM20.1562 18.8881H3.89154C3.82816 18.889 3.76541 18.8757 3.70804 18.849C3.65067 18.8223 3.60015 18.783 3.56019 18.734C3.52023 18.685 3.49178 18.6275 3.47694 18.5658C3.46211 18.5041 3.46127 18.4398 3.47435 18.3778L4.97435 6.87751C4.9916 6.74961 5.05463 6.63215 5.15186 6.54679C5.24908 6.46143 5.37393 6.41411 5.50341 6.41438H7.79998V8.30001C7.79998 8.49892 7.87899 8.68969 8.01965 8.83034C8.1603 8.97099 8.35107 9.05001 8.54998 9.05001C8.74889 9.05001 8.93966 8.97099 9.08031 8.83034C9.22096 8.68969 9.29998 8.49892 9.29998 8.30001V6.41438H14.7V8.30001C14.7 8.49892 14.779 8.68969 14.9197 8.83034C15.0603 8.97099 15.2511 9.05001 15.45 9.05001C15.6489 9.05001 15.8397 8.97099 15.9803 8.83034C16.121 8.68969 16.2 8.49892 16.2 8.30001V6.41438H18.4966C18.626 6.41411 18.7509 6.46143 18.8481 6.54679C18.9453 6.63215 19.0084 6.74961 19.0256 6.87751L20.5256 18.3778C20.5387 18.4398 20.5379 18.5041 20.523 18.5658C20.5082 18.6275 20.4797 18.685 20.4398 18.734C20.3998 18.783 20.3493 18.8223 20.2919 18.849C20.2346 18.8757 20.1718 18.889 20.1084 18.8881H20.1562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Handbag1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4897 18.5737L21.1528 7.32375C21.1095 6.95721 20.9325 6.61952 20.6557 6.37529C20.379 6.13106 20.0219 5.99744 19.6528 6H16.5C16.5 4.80653 16.0259 3.66193 15.182 2.81802C14.3381 1.97411 13.1935 1.5 12 1.5C10.8065 1.5 9.66194 1.97411 8.81802 2.81802C7.97411 3.66193 7.5 4.80653 7.5 6H4.34344C3.97435 5.99744 3.61728 6.13106 3.34053 6.37529C3.06379 6.61952 2.8868 6.95721 2.84344 7.32375L1.50657 18.5737C1.48207 18.7837 1.50223 18.9965 1.56572 19.1981C1.62922 19.3998 1.73462 19.5857 1.875 19.7438C2.01641 19.9025 2.18969 20.0296 2.38353 20.1168C2.57738 20.204 2.78744 20.2494 3.00001 20.25H20.9925C21.2063 20.2505 21.4178 20.2056 21.6131 20.1183C21.8083 20.0311 21.9828 19.9034 22.125 19.7438C22.2647 19.5854 22.3694 19.3993 22.4323 19.1977C22.4951 18.9961 22.5147 18.7835 22.4897 18.5737ZM12 3C12.7957 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6H9C9 5.20435 9.31608 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM3.00001 18.75L4.34344 7.5H7.5V9.75C7.5 9.94891 7.57902 10.1397 7.71968 10.2803C7.86033 10.421 8.05109 10.5 8.25 10.5C8.44892 10.5 8.63968 10.421 8.78033 10.2803C8.92099 10.1397 9 9.94891 9 9.75V7.5H15V9.75C15 9.94891 15.079 10.1397 15.2197 10.2803C15.3603 10.421 15.5511 10.5 15.75 10.5C15.9489 10.5 16.1397 10.421 16.2803 10.2803C16.421 10.1397 16.5 9.94891 16.5 9.75V7.5H19.6641L20.9925 18.75H3.00001Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SpinnerSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12.75 3V6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75C11.8011 6.75 11.6103 6.67098 11.4697 6.53033C11.329 6.38968 11.25 6.19891 11.25 6V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3ZM16.2422 8.50781C16.3408 8.50777 16.4384 8.48829 16.5294 8.45048C16.6205 8.41268 16.7032 8.3573 16.7728 8.2875L18.8944 6.16687C19.0351 6.02614 19.1142 5.83527 19.1142 5.63625C19.1142 5.43723 19.0351 5.24636 18.8944 5.10562C18.7536 4.96489 18.5628 4.88583 18.3638 4.88583C18.1647 4.88583 17.9739 4.96489 17.8331 5.10562L15.7125 7.22719C15.6075 7.33202 15.536 7.46563 15.507 7.6111C15.478 7.75658 15.4928 7.90739 15.5495 8.04447C15.6062 8.18155 15.7023 8.29874 15.8256 8.38121C15.9489 8.46369 16.0938 8.50774 16.2422 8.50781ZM21 11.25H18C17.8011 11.25 17.6103 11.329 17.4697 11.4697C17.329 11.6103 17.25 11.8011 17.25 12C17.25 12.1989 17.329 12.3897 17.4697 12.5303C17.6103 12.671 17.8011 12.75 18 12.75H21C21.1989 12.75 21.3897 12.671 21.5303 12.5303C21.671 12.3897 21.75 12.1989 21.75 12C21.75 11.8011 21.671 11.6103 21.5303 11.4697C21.3897 11.329 21.1989 11.25 21 11.25ZM16.7728 15.7125C16.631 15.5778 16.4422 15.5038 16.2466 15.5063C16.0511 15.5088 15.8642 15.5876 15.7259 15.7259C15.5876 15.8642 15.5088 16.0511 15.5063 16.2466C15.5038 16.4422 15.5778 16.631 15.7125 16.7728L17.8331 18.8944C17.9739 19.0351 18.1647 19.1142 18.3638 19.1142C18.5628 19.1142 18.7536 19.0351 18.8944 18.8944C19.0351 18.7536 19.1142 18.5628 19.1142 18.3638C19.1142 18.1647 19.0351 17.9739 18.8944 17.8331L16.7728 15.7125ZM12 17.25C11.8011 17.25 11.6103 17.329 11.4697 17.4697C11.329 17.6103 11.25 17.8011 11.25 18V21C11.25 21.1989 11.329 21.3897 11.4697 21.5303C11.6103 21.671 11.8011 21.75 12 21.75C12.1989 21.75 12.3897 21.671 12.5303 21.5303C12.671 21.3897 12.75 21.1989 12.75 21V18C12.75 17.8011 12.671 17.6103 12.5303 17.4697C12.3897 17.329 12.1989 17.25 12 17.25ZM7.22719 15.7125L5.10562 17.8331C4.96489 17.9739 4.88583 18.1647 4.88583 18.3638C4.88583 18.5628 4.96489 18.7536 5.10562 18.8944C5.24636 19.0351 5.43723 19.1142 5.63625 19.1142C5.83527 19.1142 6.02614 19.0351 6.16687 18.8944L8.2875 16.7728C8.42221 16.631 8.49621 16.4422 8.4937 16.2466C8.4912 16.0511 8.4124 15.8642 8.2741 15.7259C8.1358 15.5876 7.94894 15.5088 7.75337 15.5063C7.5578 15.5038 7.36898 15.5778 7.22719 15.7125ZM6.75 12C6.75 11.8011 6.67098 11.6103 6.53033 11.4697C6.38968 11.329 6.19891 11.25 6 11.25H3C2.80109 11.25 2.61032 11.329 2.46967 11.4697C2.32902 11.6103 2.25 11.8011 2.25 12C2.25 12.1989 2.32902 12.3897 2.46967 12.5303C2.61032 12.671 2.80109 12.75 3 12.75H6C6.19891 12.75 6.38968 12.671 6.53033 12.5303C6.67098 12.3897 6.75 12.1989 6.75 12ZM6.16687 5.10562C6.02614 4.96489 5.83527 4.88583 5.63625 4.88583C5.43723 4.88583 5.24636 4.96489 5.10562 5.10562C4.96489 5.24636 4.88583 5.43723 4.88583 5.63625C4.88583 5.83527 4.96489 6.02614 5.10562 6.16687L7.22719 8.2875C7.36898 8.42221 7.5578 8.49621 7.75337 8.4937C7.94894 8.4912 8.1358 8.4124 8.2741 8.2741C8.4124 8.1358 8.4912 7.94894 8.4937 7.75337C8.49621 7.5578 8.42221 7.36898 8.2875 7.22719L6.16687 5.10562Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InstagramSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function TiktokSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.321 5.562a5.124 5.124 0 01-.443-.258 6.228 6.228 0 01-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943c0 .2 0 .399-.008.595 0 .024-.003.046-.004.073 0 .01 0 .022-.002.032v.009a3.28 3.28 0 01-1.65 2.604 3.226 3.226 0 01-1.6.422c-1.8 0-3.26-1.468-3.26-3.281 0-1.812 1.46-3.28 3.26-3.28.34 0 .674.053.992.156v-3.936a7.191 7.191 0 00-.992-.074c-1.922 0-3.727.75-5.082 2.112a6.95 6.95 0 00-1.782 3.218 6.885 6.885 0 00.877 5.394c.342.517.74.993 1.186 1.418A7.07 7.07 0 009.284 24c.345 0 .689-.028 1.03-.084a7.1 7.1 0 003.594-1.725 7.06 7.06 0 002.136-5.046l-.034-8.395a9.803 9.803 0 002.59 1.453c.93.318 1.905.48 2.886.48v-3.878a5.882 5.882 0 01-2.165-1.243z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function XTwitterSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function YoutubeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PinterestSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345c-.091.379-.293 1.194-.333 1.361-.053.218-.173.265-.4.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.462-6.233 7.462-1.214 0-2.354-.63-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.5306 7.28063L9.53061 19.2806C9.46096 19.3504 9.37824 19.4057 9.2872 19.4434C9.19615 19.4812 9.09855 19.5006 8.99999 19.5006C8.90143 19.5006 8.80383 19.4812 8.71278 19.4434C8.62174 19.4057 8.53902 19.3504 8.46936 19.2806L3.21936 14.0306C3.07863 13.8899 2.99957 13.699 2.99957 13.5C2.99957 13.301 3.07863 13.1101 3.21936 12.9694C3.3601 12.8286 3.55097 12.7496 3.74999 12.7496C3.94901 12.7496 4.13988 12.8286 4.28061 12.9694L8.99999 17.6897L20.4694 6.21937C20.6101 6.07864 20.801 5.99958 21 5.99958C21.199 5.99958 21.3899 6.07864 21.5306 6.21937C21.6713 6.36011 21.7504 6.55098 21.7504 6.75C21.7504 6.94902 21.6713 7.1399 21.5306 7.28063Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function GoogleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n );\n}\n\nexport function FacebookSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function IkasLogoSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 43 12\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <g clipPath=\"url(#clip0_10866_33625)\">\n <path\n d=\"M41.8458 8.83022C41.8458 9.14665 41.78 9.44872 41.6468 9.73789C41.5151 10.0286 41.3218 10.2834 41.067 10.501C40.8136 10.72 40.4972 10.8962 40.1221 11.0279C39.7455 11.1596 39.3175 11.2255 38.8393 11.2255C38.2609 11.2255 37.714 11.1367 37.2 10.9592C36.7762 10.8131 36.3954 10.6055 36.0589 10.3364C35.9387 10.2419 35.9172 10.0686 36.0089 9.94693L36.7032 9.0278C36.7991 8.9018 36.9781 8.87891 37.1012 8.97625C37.2945 9.12945 37.5107 9.25401 37.7498 9.34993C38.0791 9.48163 38.3926 9.54749 38.6875 9.54749C39.0326 9.54749 39.2802 9.47161 39.4277 9.31841C39.5752 9.16668 39.6482 8.99343 39.6482 8.80017C39.6482 8.64838 39.5895 8.50812 39.4736 8.38065C39.3561 8.25325 39.17 8.15874 38.9166 8.09864L38.0318 7.82375C37.797 7.7622 37.5637 7.67916 37.3288 7.57174C37.0955 7.46583 36.8822 7.32839 36.6889 7.15943C36.4956 6.99195 36.3395 6.78862 36.2236 6.54954C36.1062 6.31045 36.0475 6.0284 36.0475 5.70342C36.0475 5.38841 36.1119 5.09349 36.2379 4.81864C36.3653 4.54375 36.5486 4.30181 36.7877 4.09277C37.0268 3.88513 37.3246 3.71906 37.6811 3.59737C38.0361 3.47572 38.4427 3.41412 38.9009 3.41412C39.3891 3.41412 39.8515 3.48143 40.2896 3.61314C40.6332 3.71766 40.9625 3.8651 41.2746 4.05696C41.4135 4.14285 41.4507 4.32755 41.3547 4.46071L40.7234 5.34264C40.6375 5.46434 40.4729 5.49438 40.3454 5.41706C40.1922 5.32256 40.0291 5.24528 39.8544 5.18368C39.5952 5.09349 39.3275 5.04771 39.054 5.04771C38.7792 5.04771 38.5701 5.10781 38.4284 5.22951C38.2852 5.35265 38.2151 5.5044 38.2151 5.68765C38.2151 5.82081 38.2623 5.93965 38.3597 6.04703C38.4556 6.15295 38.616 6.23173 38.8393 6.28326L39.5108 6.45073C40.3554 6.68411 40.9554 7.00052 41.3118 7.3971C41.6669 7.7937 41.8458 8.27187 41.8458 8.83022Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 3.8322V10.7931C17.5429 10.9477 17.4169 11.0737 17.2623 11.0737H15.6889C15.5328 11.0737 15.4068 10.9477 15.4068 10.7931V3.8322C15.4068 3.67755 15.5328 3.55154 15.6889 3.55154H17.2623C17.4169 3.55154 17.5429 3.67755 17.5429 3.8322Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M17.5429 0.628065V2.20291C17.5429 2.35756 17.4169 2.48351 17.2623 2.48351H15.6874C15.5328 2.48351 15.4068 2.35756 15.4068 2.20291V0.628065C15.4068 0.473415 15.5328 0.347461 15.6874 0.347461H17.2623C17.4169 0.347461 17.5429 0.473415 17.5429 0.628065Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M26.4251 11.0737H24.4623C24.3262 11.0737 24.2017 11.0007 24.1358 10.8818L22.896 8.66556L21.3111 10.9147C21.2409 11.015 21.1264 11.0737 21.0047 11.0737H19.6961C19.5401 11.0737 19.4141 10.9477 19.4141 10.7931V0.628068C19.4141 0.473417 19.5401 0.347464 19.6961 0.347464H21.2696C21.4256 0.347464 21.5502 0.473417 21.5502 0.628068V7.357L23.9139 3.72192C23.9826 3.616 24.1015 3.55154 24.2275 3.55154H26.1402C26.292 3.55154 26.3807 3.72337 26.292 3.84652L24.1444 6.89459L26.584 10.7873C26.6628 10.9119 26.5726 11.0737 26.4251 11.0737Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M32.0531 8.70853C31.7123 9.08508 31.2728 9.27259 30.733 9.27259C30.4696 9.27259 30.2248 9.22251 30.0015 9.12085C29.7782 9.01918 29.5848 8.88176 29.4216 8.70853C29.2584 8.53531 29.1339 8.33056 29.048 8.09148C28.9606 7.85239 28.9177 7.59468 28.9177 7.31979V7.30547C28.9177 7.03057 28.9606 6.77291 29.048 6.53522C29.1339 6.29613 29.2584 6.08995 29.4216 5.91672C29.5848 5.74349 29.7782 5.60606 30.0015 5.5044C30.2248 5.40274 30.4696 5.35265 30.733 5.35265C31.2728 5.35265 31.7123 5.54021 32.0531 5.91672C32.3838 6.28181 32.5527 6.7471 32.5642 7.31263C32.5527 7.87813 32.3838 8.34488 32.0531 8.70853ZM34.3739 3.55154H33.0481C32.8935 3.55154 32.7675 3.67755 32.7675 3.8322V4.52226L32.7632 4.51225C32.4783 4.15717 32.1189 3.88228 31.6866 3.68901C31.2542 3.49575 30.8104 3.39839 30.3522 3.39839C29.8741 3.39839 29.4188 3.49861 28.9864 3.69618C28.554 3.8952 28.1775 4.16719 27.8582 4.51225C27.5375 4.85871 27.2827 5.27102 27.0952 5.74925C26.9062 6.22742 26.8131 6.74566 26.8131 7.30547V7.31979C26.8131 7.8796 26.9062 8.39788 27.0952 8.87606C27.2827 9.35568 27.5375 9.76654 27.8582 10.113C28.1775 10.4581 28.554 10.7301 28.9864 10.9291C29.4188 11.1266 29.8741 11.2255 30.3522 11.2255C30.8104 11.2255 31.2542 11.1295 31.6866 10.9362C32.1189 10.743 32.4783 10.4681 32.7632 10.113L32.7675 10.103V10.7931C32.7675 10.9477 32.8935 11.0737 33.0481 11.0737H34.3739C34.5285 11.0737 34.6545 10.9477 34.6545 10.7931V3.8322C34.6545 3.67755 34.5285 3.55154 34.3739 3.55154Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M12.0312 4.81573L6.43324 11.1896C6.33879 11.297 6.16266 11.2298 6.16266 11.088V6.87025H0.41013C0.276985 6.87025 0.206833 6.71275 0.294161 6.61255L5.89207 0.240037C5.98657 0.132664 6.16266 0.19857 6.16266 0.341702V4.55947H11.9152C12.0469 4.55947 12.1185 4.71552 12.0312 4.81573Z\"\n fill=\"currentColor\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10866_33625\">\n <rect width=\"42.1016\" height=\"11.4295\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n}\n\nexport function EyeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M23.1853 11.6962C23.1525 11.6222 22.3584 9.86062 20.5931 8.09531C18.2409 5.74312 15.27 4.5 12 4.5C8.72999 4.5 5.75905 5.74312 3.40687 8.09531C1.64155 9.86062 0.843741 11.625 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C15.27 19.5 18.2409 18.2569 20.5931 15.9056C22.3584 14.1403 23.1525 12.3797 23.1853 12.3056C23.2279 12.2097 23.25 12.1059 23.25 12.0009C23.25 11.896 23.2279 11.7922 23.1853 11.6962ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.65028 14.0313 2.92179 13.0603 2.34374 12C2.92164 10.9396 3.65014 9.9686 4.50655 9.11719C6.59343 7.04906 9.11437 6 12 6C14.8856 6 17.4066 7.04906 19.4934 9.11719C20.3514 9.9684 21.0815 10.9394 21.6609 12C20.985 13.2619 18.0403 18 12 18ZM12 7.5C11.11 7.5 10.2399 7.76392 9.49993 8.25839C8.7599 8.75285 8.18313 9.45566 7.84253 10.2779C7.50194 11.1002 7.41282 12.005 7.58646 12.8779C7.76009 13.7508 8.18867 14.5526 8.81801 15.182C9.44735 15.8113 10.2492 16.2399 11.1221 16.4135C11.995 16.5872 12.8998 16.4981 13.7221 16.1575C14.5443 15.8169 15.2471 15.2401 15.7416 14.5001C16.2361 13.76 16.5 12.89 16.5 12C16.4988 10.8069 16.0242 9.66303 15.1806 8.81939C14.337 7.97575 13.1931 7.50124 12 7.5ZM12 15C11.4066 15 10.8266 14.8241 10.3333 14.4944C9.83993 14.1648 9.45542 13.6962 9.22835 13.1481C9.00129 12.5999 8.94188 11.9967 9.05764 11.4147C9.17339 10.8328 9.45911 10.2982 9.87867 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.824 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function EyeSlashSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M5.05499 3.24562C4.98913 3.17138 4.90918 3.11095 4.81979 3.06783C4.7304 3.02471 4.63334 2.99976 4.53423 2.99443C4.43513 2.9891 4.33595 3.00349 4.24245 3.03677C4.14895 3.07005 4.06298 3.12156 3.98953 3.18831C3.91608 3.25505 3.85661 3.33572 3.81457 3.42562C3.77252 3.51552 3.74874 3.61288 3.7446 3.71204C3.74045 3.8112 3.75603 3.9102 3.79043 4.00329C3.82483 4.09639 3.87737 4.18173 3.94499 4.25437L5.74874 6.23906C2.34374 8.32875 0.879366 11.55 0.814679 11.6962C0.772035 11.7922 0.75 11.896 0.75 12.0009C0.75 12.1059 0.772035 12.2097 0.814679 12.3056C0.847491 12.3797 1.64155 14.1403 3.40687 15.9056C5.75905 18.2569 8.72999 19.5 12 19.5C13.6806 19.5096 15.3442 19.1636 16.8816 18.4847L18.9441 20.7544C19.0099 20.8286 19.0899 20.8891 19.1793 20.9322C19.2686 20.9753 19.3657 21.0002 19.4648 21.0056C19.5639 21.0109 19.6631 20.9965 19.7566 20.9632C19.8501 20.93 19.9361 20.8784 20.0095 20.8117C20.083 20.7449 20.1424 20.6643 20.1845 20.5744C20.2265 20.4845 20.2503 20.3871 20.2544 20.288C20.2586 20.1888 20.243 20.0898 20.2086 19.9967C20.1742 19.9036 20.1217 19.8183 20.0541 19.7456L5.05499 3.24562ZM9.49218 10.3556L13.3987 14.6541C12.8105 14.9635 12.136 15.0689 11.4814 14.9535C10.8268 14.8382 10.229 14.5087 9.78189 14.0168C9.33481 13.5248 9.06377 12.8984 9.01134 12.2357C8.9589 11.573 9.12803 10.9117 9.49218 10.3556ZM12 18C9.11437 18 6.59343 16.9509 4.50655 14.8828C3.64997 14.0315 2.92145 13.0605 2.34374 12C2.78343 11.1759 4.18687 8.86969 6.7828 7.37063L8.4703 9.22219C7.81699 10.0589 7.48052 11.0997 7.52036 12.1605C7.56021 13.2213 7.97379 14.2339 8.68802 15.0192C9.40225 15.8046 10.3711 16.3122 11.4234 16.4522C12.4757 16.5923 13.5436 16.3559 14.4384 15.7847L15.8194 17.3034C14.6006 17.771 13.3053 18.0072 12 18ZM12.5625 9.05344C12.3671 9.01614 12.1944 8.90274 12.0826 8.73817C11.9708 8.57361 11.9289 8.37137 11.9662 8.17594C12.0035 7.98051 12.1169 7.8079 12.2815 7.69608C12.4461 7.58426 12.6483 7.54239 12.8437 7.57969C13.7996 7.765 14.67 8.25436 15.325 8.97477C15.98 9.69518 16.3846 10.608 16.4784 11.5772C16.4969 11.7752 16.436 11.9725 16.3091 12.1256C16.1822 12.2788 15.9996 12.3752 15.8016 12.3937C15.7781 12.3951 15.7547 12.3951 15.7312 12.3937C15.5438 12.3946 15.3628 12.3251 15.224 12.1992C15.0852 12.0732 14.9986 11.8998 14.9812 11.7131C14.9181 11.0685 14.6486 10.4615 14.2128 9.98226C13.7771 9.50307 13.1982 9.17731 12.5625 9.05344ZM23.1825 12.3056C23.1431 12.3937 22.1934 14.4966 20.055 16.4119C19.9819 16.4794 19.8961 16.5317 19.8027 16.5658C19.7092 16.5998 19.6099 16.6149 19.5105 16.6102C19.4111 16.6055 19.3136 16.5811 19.2238 16.5384C19.1339 16.4956 19.0535 16.4354 18.9871 16.3613C18.9208 16.2872 18.8698 16.2006 18.8373 16.1066C18.8047 16.0125 18.7912 15.913 18.7975 15.8137C18.8037 15.7144 18.8297 15.6173 18.8739 15.5282C18.918 15.439 18.9795 15.3595 19.0547 15.2944C20.1038 14.3518 20.9851 13.2378 21.6609 12C21.0819 10.9385 20.3518 9.96683 19.4934 9.11531C17.4066 7.04906 14.8856 6 12 6C11.392 5.99926 10.7849 6.04849 10.185 6.14719C10.0874 6.16444 9.98741 6.16219 9.89073 6.14057C9.79404 6.11895 9.70259 6.07839 9.62167 6.02123C9.54074 5.96407 9.47195 5.89144 9.41925 5.80753C9.36656 5.72363 9.33101 5.63012 9.31466 5.5324C9.29832 5.43468 9.30149 5.3347 9.32401 5.23821C9.34652 5.14173 9.38793 5.05066 9.44584 4.97027C9.50375 4.88988 9.57702 4.82176 9.6614 4.76985C9.74579 4.71793 9.83963 4.68325 9.93749 4.66781C10.6192 4.55525 11.309 4.49912 12 4.5C15.27 4.5 18.2409 5.74312 20.5931 8.09531C22.3584 9.86062 23.1525 11.6222 23.1853 11.6962C23.2279 11.7922 23.25 11.896 23.25 12.0009C23.25 12.1059 23.2279 12.2097 23.1853 12.3056H23.1825Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function MapPin1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 6C11.2583 6 10.5333 6.21993 9.91661 6.63199C9.29993 7.04404 8.81928 7.62971 8.53545 8.31494C8.25162 9.00016 8.17736 9.75416 8.32205 10.4816C8.46675 11.209 8.8239 11.8772 9.34835 12.4017C9.8728 12.9261 10.541 13.2833 11.2684 13.4279C11.9958 13.5726 12.7498 13.4984 13.4351 13.2145C14.1203 12.9307 14.706 12.4501 15.118 11.8334C15.5301 11.2167 15.75 10.4917 15.75 9.75C15.75 8.75544 15.3549 7.80161 14.6517 7.09835C13.9484 6.39509 12.9946 6 12 6ZM12 12C11.555 12 11.12 11.868 10.75 11.6208C10.38 11.3736 10.0916 11.0222 9.92127 10.611C9.75097 10.1999 9.70642 9.7475 9.79323 9.31105C9.88005 8.87459 10.0943 8.47368 10.409 8.15901C10.7237 7.84434 11.1246 7.63005 11.561 7.54323C11.9975 7.45642 12.4499 7.50097 12.861 7.67127C13.2722 7.84157 13.6236 8.12996 13.8708 8.49997C14.118 8.86998 14.25 9.30499 14.25 9.75C14.25 10.3467 14.0129 10.919 13.591 11.341C13.169 11.7629 12.5967 12 12 12ZM12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 12.6938 5.11031 15.8138 7.6875 18.7734C8.84552 20.1108 10.1489 21.3151 11.5734 22.3641C11.6995 22.4524 11.8498 22.4998 12.0037 22.4998C12.1577 22.4998 12.308 22.4524 12.4341 22.3641C13.856 21.3147 15.1568 20.1104 16.3125 18.7734C18.8859 15.8138 20.25 12.6938 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 20.8125C10.4503 19.5938 5.25 15.1172 5.25 9.75C5.25 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 15.1153 13.5497 19.5938 12 20.8125Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Star1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813ZM20.985 9.63094L16.4194 13.5684C16.3153 13.6582 16.2378 13.7748 16.1955 13.9056C16.1532 14.0364 16.1476 14.1763 16.1794 14.31L17.5744 20.1975C17.578 20.2056 17.5783 20.2148 17.5754 20.2232C17.5724 20.2316 17.5664 20.2385 17.5584 20.2425C17.5416 20.2556 17.5369 20.2528 17.5228 20.2425L12.3928 17.0878C12.2747 17.0152 12.1387 16.9767 12 16.9767C11.8613 16.9767 11.7253 17.0152 11.6072 17.0878L6.47719 20.2444C6.46313 20.2528 6.45938 20.2556 6.44156 20.2444C6.43365 20.2403 6.42759 20.2334 6.42462 20.2251C6.42166 20.2167 6.42202 20.2075 6.42563 20.1994L7.82063 14.3119C7.85242 14.1781 7.84685 14.0382 7.80452 13.9075C7.7622 13.7767 7.68475 13.6601 7.58063 13.5703L3.015 9.63281C3.00375 9.62344 2.99344 9.615 3.00281 9.58594C3.01219 9.55688 3.01969 9.56063 3.03375 9.55875L9.02625 9.075C9.1637 9.06321 9.29523 9.01374 9.40638 8.93203C9.51753 8.85033 9.60399 8.73954 9.65625 8.61188L11.9644 3.02344C11.9719 3.0075 11.9747 3 11.9972 3C12.0197 3 12.0225 3.0075 12.03 3.02344L14.3438 8.61188C14.3965 8.73959 14.4835 8.85025 14.5952 8.93165C14.7068 9.01304 14.8388 9.062 14.9766 9.07313L20.9691 9.55688C20.9831 9.55688 20.9916 9.55688 21 9.58406C21.0084 9.61125 21 9.62156 20.985 9.63094Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowBendUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18C17.4281 18 15.2578 17.1478 13.8431 15.6431C12.3591 14.0662 12 12.0937 12 10.5V5.56031L14.4694 8.03062C14.539 8.10031 14.6218 8.15557 14.7128 8.19329C14.8039 8.231 14.9014 8.25042 15 8.25042C15.0986 8.25042 15.1961 8.231 15.2872 8.19329C15.3782 8.15557 15.461 8.10031 15.5306 8.03062C15.6003 7.96094 15.6556 7.87822 15.6933 7.78717C15.731 7.69613 15.7504 7.59855 15.7504 7.5C15.7504 7.40145 15.731 7.30387 15.6933 7.21283C15.6556 7.12178 15.6003 7.03906 15.5306 6.96937L11.7806 3.21937C11.711 3.14969 11.6283 3.09442 11.5372 3.0567C11.4462 3.01899 11.3486 2.99958 11.25 2.99958C11.1514 2.99958 11.0538 3.01899 10.9628 3.0567C10.8717 3.09442 10.789 3.14969 10.7194 3.21937L6.96937 6.96937C6.82864 7.11011 6.74958 7.30098 6.74958 7.5C6.74958 7.69902 6.82864 7.88989 6.96937 8.03062C7.11011 8.17136 7.30098 8.25042 7.5 8.25042C7.69902 8.25042 7.88989 8.17136 8.03062 8.03062L10.5 5.56031V10.5C10.5 12.4062 10.8909 14.9337 12.7819 16.9444C14.4478 18.7172 17.0156 19.6284 20.25 19.5C20.4489 19.5 20.6397 19.421 20.7803 19.2803C20.921 19.1397 21 18.9489 21 18.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function StarFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M22.4231 9.11813C22.3294 8.82987 22.1524 8.57581 21.9145 8.38796C21.6766 8.20011 21.3884 8.08687 21.0863 8.0625L15.555 7.61625L13.4194 2.45156C13.3039 2.17014 13.1073 1.92942 12.8547 1.76C12.602 1.59059 12.3047 1.50013 12.0005 1.50013C11.6963 1.50013 11.3989 1.59059 11.1463 1.76C10.8936 1.92942 10.6971 2.17014 10.5816 2.45156L8.44781 7.61531L2.91375 8.0625C2.61111 8.0881 2.32274 8.20244 2.08479 8.39119C1.84684 8.57995 1.66988 8.83473 1.57609 9.12362C1.4823 9.4125 1.47584 9.72264 1.55753 10.0152C1.63922 10.3077 1.80542 10.5696 2.03531 10.7681L6.25406 14.4084L4.96875 19.8516C4.89687 20.1473 4.91447 20.4577 5.01932 20.7434C5.12417 21.0291 5.31154 21.2772 5.55765 21.4562C5.80376 21.6352 6.09751 21.737 6.4016 21.7488C6.7057 21.7605 7.00643 21.6817 7.26563 21.5222L12 18.6084L16.7372 21.5222C16.9965 21.6798 17.2966 21.7571 17.5997 21.7445C17.9029 21.7318 18.1955 21.6298 18.4408 21.4512C18.6861 21.2726 18.873 21.0254 18.9781 20.7407C19.0832 20.4561 19.1017 20.1467 19.0313 19.8516L17.7413 14.4075L21.96 10.7672C22.1918 10.569 22.3595 10.3065 22.4419 10.013C22.5244 9.7194 22.5178 9.40797 22.4231 9.11813Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SignOut1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M11.25 20.25C11.25 20.4489 11.171 20.6397 11.0303 20.7803C10.8897 20.921 10.6989 21 10.5 21H4.5C4.30109 21 4.11032 20.921 3.96967 20.7803C3.82902 20.6397 3.75 20.4489 3.75 20.25V3.75C3.75 3.55109 3.82902 3.36032 3.96967 3.21967C4.11032 3.07902 4.30109 3 4.5 3H10.5C10.6989 3 10.8897 3.07902 11.0303 3.21967C11.171 3.36032 11.25 3.55109 11.25 3.75C11.25 3.94891 11.171 4.13968 11.0303 4.28033C10.8897 4.42098 10.6989 4.5 10.5 4.5H5.25V19.5H10.5C10.6989 19.5 10.8897 19.579 11.0303 19.7197C11.171 19.8603 11.25 20.0511 11.25 20.25ZM21.5306 11.4694L17.7806 7.71937C17.6399 7.57864 17.449 7.49958 17.25 7.49958C17.051 7.49958 16.8601 7.57864 16.7194 7.71937C16.5786 7.86011 16.4996 8.05098 16.4996 8.25C16.4996 8.44902 16.5786 8.63989 16.7194 8.78063L19.1897 11.25H10.5C10.3011 11.25 10.1103 11.329 9.96967 11.4697C9.82902 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.82902 12.3897 9.96967 12.5303C10.1103 12.671 10.3011 12.75 10.5 12.75H19.1897L16.7194 15.2194C16.5786 15.3601 16.4996 15.551 16.4996 15.75C16.4996 15.949 16.5786 16.1399 16.7194 16.2806C16.8601 16.4214 17.051 16.5004 17.25 16.5004C17.449 16.5004 17.6399 16.4214 17.7806 16.2806L21.5306 12.5306C21.6004 12.461 21.6557 12.3783 21.6934 12.2872C21.7312 12.1962 21.7506 12.0986 21.7506 12C21.7506 11.9014 21.7312 11.8038 21.6934 11.7128C21.6557 11.6217 21.6004 11.539 21.5306 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Heart2SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function HeartFilledSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function SlidersHorizontalSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M2.5 5.50002H4.5625C4.67265 5.93022 4.92285 6.31153 5.27365 6.58384C5.62446 6.85614 6.05591 7.00394 6.5 7.00394C6.94409 7.00394 7.37554 6.85614 7.72635 6.58384C8.07715 6.31153 8.32735 5.93022 8.4375 5.50002H13.5C13.6326 5.50002 13.7598 5.44734 13.8536 5.35357C13.9473 5.2598 14 5.13262 14 5.00002C14 4.86741 13.9473 4.74023 13.8536 4.64646C13.7598 4.55269 13.6326 4.50002 13.5 4.50002H8.4375C8.32735 4.06981 8.07715 3.6885 7.72635 3.4162C7.37554 3.14389 6.94409 2.99609 6.5 2.99609C6.05591 2.99609 5.62446 3.14389 5.27365 3.4162C4.92285 3.6885 4.67265 4.06981 4.5625 4.50002H2.5C2.36739 4.50002 2.24021 4.55269 2.14645 4.64646C2.05268 4.74023 2 4.86741 2 5.00002C2 5.13262 2.05268 5.2598 2.14645 5.35357C2.24021 5.44734 2.36739 5.50002 2.5 5.50002ZM6.5 4.00002C6.69778 4.00002 6.89112 4.05866 7.05557 4.16855C7.22002 4.27843 7.34819 4.43461 7.42388 4.61733C7.49957 4.80006 7.51937 5.00112 7.48079 5.19511C7.4422 5.38909 7.34696 5.56727 7.20711 5.70712C7.06725 5.84697 6.88907 5.94222 6.69509 5.9808C6.50111 6.01939 6.30004 5.99958 6.11732 5.9239C5.93459 5.84821 5.77841 5.72003 5.66853 5.55559C5.55865 5.39114 5.5 5.1978 5.5 5.00002C5.5 4.7348 5.60536 4.48045 5.79289 4.29291C5.98043 4.10537 6.23478 4.00002 6.5 4.00002ZM13.5 10.5H12.4375C12.3273 10.0698 12.0771 9.6885 11.7263 9.4162C11.3755 9.1439 10.9441 8.99609 10.5 8.99609C10.0559 8.99609 9.62446 9.1439 9.27365 9.4162C8.92285 9.6885 8.67265 10.0698 8.5625 10.5H2.5C2.36739 10.5 2.24021 10.5527 2.14645 10.6465C2.05268 10.7402 2 10.8674 2 11C2 11.1326 2.05268 11.2598 2.14645 11.3536C2.24021 11.4473 2.36739 11.5 2.5 11.5H8.5625C8.67265 11.9302 8.92285 12.3115 9.27365 12.5838C9.62446 12.8561 10.0559 13.0039 10.5 13.0039C10.9441 13.0039 11.3755 12.8561 11.7263 12.5838C12.0771 12.3115 12.3273 11.9302 12.4375 11.5H13.5C13.6326 11.5 13.7598 11.4473 13.8536 11.3536C13.9473 11.2598 14 11.1326 14 11C14 10.8674 13.9473 10.7402 13.8536 10.6465C13.7598 10.5527 13.6326 10.5 13.5 10.5ZM10.5 12C10.3022 12 10.1089 11.9414 9.94443 11.8315C9.77998 11.7216 9.65181 11.5654 9.57612 11.3827C9.50043 11.2 9.48063 10.9989 9.51921 10.8049C9.5578 10.6109 9.65304 10.4328 9.79289 10.2929C9.93275 10.1531 10.1109 10.0578 10.3049 10.0192C10.4989 9.98064 10.7 10.0004 10.8827 10.0761C11.0654 10.1518 11.2216 10.28 11.3315 10.4444C11.4414 10.6089 11.5 10.8022 11.5 11C11.5 11.2652 11.3946 11.5196 11.2071 11.7071C11.0196 11.8947 10.7652 12 10.5 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DotsThreeSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM18.375 10.875C18.1525 10.875 17.935 10.941 17.75 11.0646C17.565 11.1882 17.4208 11.3639 17.3356 11.5695C17.2505 11.775 17.2282 12.0012 17.2716 12.2195C17.315 12.4377 17.4222 12.6382 17.5795 12.7955C17.7368 12.9528 17.9373 13.06 18.1555 13.1034C18.3738 13.1468 18.6 13.1245 18.8055 13.0394C19.0111 12.9542 19.1868 12.81 19.3104 12.625C19.434 12.44 19.5 12.2225 19.5 12C19.5 11.7016 19.3815 11.4155 19.1705 11.2045C18.9595 10.9935 18.6734 10.875 18.375 10.875ZM5.625 10.875C5.4025 10.875 5.18499 10.941 4.99998 11.0646C4.81498 11.1882 4.67078 11.3639 4.58564 11.5695C4.50049 11.775 4.47821 12.0012 4.52162 12.2195C4.56503 12.4377 4.67217 12.6382 4.82951 12.7955C4.98684 12.9528 5.1873 13.06 5.40552 13.1034C5.62375 13.1468 5.84995 13.1245 6.05552 13.0394C6.26109 12.9542 6.43679 12.81 6.5604 12.625C6.68402 12.44 6.75 12.2225 6.75 12C6.75 11.7016 6.63147 11.4155 6.4205 11.2045C6.20952 10.9935 5.92337 10.875 5.625 10.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.2806 18.9694C19.3503 19.0391 19.4056 19.1218 19.4433 19.2128C19.481 19.3039 19.5004 19.4015 19.5004 19.5C19.5004 19.5985 19.481 19.6961 19.4433 19.7872C19.4056 19.8782 19.3503 19.9609 19.2806 20.0306C19.2109 20.1003 19.1282 20.1556 19.0372 20.1933C18.9461 20.231 18.8485 20.2504 18.75 20.2504C18.6514 20.2504 18.5539 20.231 18.4628 20.1933C18.3718 20.1556 18.289 20.1003 18.2194 20.0306L10.7194 12.5306C10.6496 12.461 10.5943 12.3783 10.5566 12.2872C10.5188 12.1962 10.4994 12.0986 10.4994 12C10.4994 11.9014 10.5188 11.8038 10.5566 11.7128C10.5943 11.6217 10.6496 11.539 10.7194 11.4694L18.2194 3.96938C18.3601 3.82864 18.551 3.74958 18.75 3.74958C18.949 3.74958 19.1399 3.82864 19.2806 3.96938C19.4213 4.11011 19.5004 4.30098 19.5004 4.5C19.5004 4.69902 19.4213 4.88989 19.2806 5.03062L12.3103 12L19.2806 18.9694ZM4.81029 12L11.7806 5.03062C11.9213 4.88989 12.0004 4.69902 12.0004 4.5C12.0004 4.30098 11.9213 4.11011 11.7806 3.96938C11.6399 3.82864 11.449 3.74958 11.25 3.74958C11.051 3.74958 10.8601 3.82864 10.7194 3.96938L3.21935 11.4694C3.14962 11.539 3.0943 11.6217 3.05656 11.7128C3.01882 11.8038 2.99939 11.9014 2.99939 12C2.99939 12.0986 3.01882 12.1962 3.05656 12.2872C3.0943 12.3783 3.14962 12.461 3.21935 12.5306L10.7194 20.0306C10.789 20.1003 10.8718 20.1556 10.9628 20.1933C11.0539 20.231 11.1514 20.2504 11.25 20.2504C11.3485 20.2504 11.4461 20.231 11.5372 20.1933C11.6282 20.1556 11.7109 20.1003 11.7806 20.0306C11.8503 19.9609 11.9056 19.8782 11.9433 19.7872C11.981 19.6961 12.0004 19.5985 12.0004 19.5C12.0004 19.4015 11.981 19.3039 11.9433 19.2128C11.9056 19.1218 11.8503 19.0391 11.7806 18.9694L4.81029 12Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretDoubleRightSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M13.2807 12.5306L5.78068 20.0306C5.63995 20.1714 5.44907 20.2504 5.25005 20.2504C5.05103 20.2504 4.86016 20.1714 4.71943 20.0306C4.5787 19.8899 4.49963 19.699 4.49963 19.5C4.49963 19.301 4.5787 19.1101 4.71943 18.9694L11.6897 12L4.71943 5.03062C4.5787 4.88989 4.49963 4.69902 4.49963 4.5C4.49963 4.30098 4.5787 4.11011 4.71943 3.96938C4.86016 3.82864 5.05103 3.74958 5.25005 3.74958C5.44907 3.74958 5.63995 3.82864 5.78068 3.96938L13.2807 11.4694C13.3504 11.539 13.4057 11.6217 13.4435 11.7128C13.4812 11.8038 13.5006 11.9014 13.5006 12C13.5006 12.0986 13.4812 12.1962 13.4435 12.2872C13.4057 12.3783 13.3504 12.461 13.2807 12.5306ZM20.7807 11.4694L13.2807 3.96938C13.1399 3.82864 12.9491 3.74958 12.7501 3.74958C12.551 3.74958 12.3602 3.82864 12.2194 3.96938C12.0787 4.11011 11.9996 4.30098 11.9996 4.5C11.9996 4.69902 12.0787 4.88989 12.2194 5.03062L19.1897 12L12.2194 18.9694C12.0787 19.1101 11.9996 19.301 11.9996 19.5C11.9996 19.699 12.0787 19.8899 12.2194 20.0306C12.3602 20.1714 12.551 20.2504 12.7501 20.2504C12.9491 20.2504 13.1399 20.1714 13.2807 20.0306L20.7807 12.5306C20.8504 12.461 20.9057 12.3783 20.9435 12.2872C20.9812 12.1962 21.0006 12.0986 21.0006 12C21.0006 11.9014 20.9812 11.8038 20.9435 11.7128C20.9057 11.6217 20.8504 11.539 20.7807 11.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function ArrowUUpLeftSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 21V15C21 13.4087 20.3679 11.8826 19.2426 10.7574C18.1174 9.63214 16.5913 9 15 9H5.56066L9.53033 5.03033C9.67098 4.88968 9.75 4.69891 9.75 4.5C9.75 4.30109 9.67098 4.11032 9.53033 3.96967C9.38968 3.82902 9.19891 3.75 9 3.75C8.80109 3.75 8.61032 3.82902 8.46967 3.96967L3.21967 9.21967C3.14999 9.28935 3.09469 9.37207 3.05697 9.46312C3.01926 9.55417 2.99985 9.65175 2.99985 9.75C2.99985 9.84825 3.01926 9.94583 3.05697 10.0369C3.09469 10.1279 3.14999 10.2107 3.21967 10.2803L8.46967 15.5303C8.61032 15.671 8.80109 15.75 9 15.75C9.19891 15.75 9.38968 15.671 9.53033 15.5303C9.67098 15.3897 9.75 15.1989 9.75 15C9.75 14.8011 9.67098 14.6103 9.53033 14.4697L5.56066 10.5H15C16.1935 10.5 17.3381 10.9741 18.182 11.818C19.0259 12.6619 19.5 13.8065 19.5 15V21C19.5 21.1989 19.579 21.3897 19.7197 21.5303C19.8603 21.671 20.0511 21.75 20.25 21.75C20.4489 21.75 20.6397 21.671 20.7803 21.5303C20.921 21.3897 21 21.1989 21 21Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CreditCardSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.75 4.5H2.25C1.85218 4.5 1.47064 4.65804 1.18934 4.93934C0.908035 5.22064 0.75 5.60218 0.75 6V18C0.75 18.3978 0.908035 18.7794 1.18934 19.0607C1.47064 19.342 1.85218 19.5 2.25 19.5H21.75C22.1478 19.5 22.5294 19.342 22.8107 19.0607C23.092 18.7794 23.25 18.3978 23.25 18V6C23.25 5.60218 23.092 5.22064 22.8107 4.93934C22.5294 4.65804 22.1478 4.5 21.75 4.5ZM21.75 6V8.25H2.25V6H21.75ZM21.75 18H2.25V9.75H21.75V18ZM20.25 15.75C20.25 15.9489 20.171 16.1397 20.0303 16.2803C19.8897 16.421 19.6989 16.5 19.5 16.5H16.5C16.3011 16.5 16.1103 16.421 15.9697 16.2803C15.829 16.1397 15.75 15.9489 15.75 15.75C15.75 15.5511 15.829 15.3603 15.9697 15.2197C16.1103 15.079 16.3011 15 16.5 15H19.5C19.6989 15 19.8897 15.079 20.0303 15.2197C20.171 15.3603 20.25 15.5511 20.25 15.75ZM14.25 15.75C14.25 15.9489 14.171 16.1397 14.0303 16.2803C13.8897 16.421 13.6989 16.5 13.5 16.5H12C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75C11.25 15.5511 11.329 15.3603 11.4697 15.2197C11.6103 15.079 11.8011 15 12 15H13.5C13.6989 15 13.8897 15.079 14.0303 15.2197C14.171 15.3603 14.25 15.5511 14.25 15.75Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function Column3SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"8.5\" y1=\"5\" x2=\"8.5\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"15.5\" y1=\"5\" x2=\"15.5\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function Column4SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <rect\n x=\"2.5\"\n y=\"4.5\"\n width=\"19\"\n height=\"15\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n <line x1=\"7\" y1=\"5\" x2=\"7\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" stroke=\"currentColor\" />\n <line x1=\"17\" y1=\"5\" x2=\"17\" y2=\"19\" stroke=\"currentColor\" />\n </svg>\n );\n}\n\nexport function List1SVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function PlaySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.066V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.5987 4.43433 8.69511 4.46355 8.77735 4.51829L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function NoProductSVG({ className, ...props }: IconProps) {\n return (\n <svg\n viewBox=\"-100 -100 1000 1000\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M208.167 202.057C201.646 205.966 198.747 216.075 202.177 222.949C203.785 226.172 571.282 594.022 575.887 597.018C586.589 603.981 600.148 596.449 600.148 583.542C600.148 577.341 598.31 574.155 590.084 566.096C583.541 559.685 583.729 560.514 587.642 555.348C596.824 543.226 602.251 520.961 598.314 511.557C594.662 502.832 581.801 499.423 574.582 505.266C569.738 509.187 568.91 510.892 567.714 519.41C566.664 526.894 562.995 536.778 561.266 536.778C560.949 536.778 544.433 520.518 524.566 500.645L488.443 464.512L491.509 456.7C523.036 376.369 441.909 297.12 362.362 330.542L356.8 332.879L337.847 313.926L318.895 294.974L322.334 290.781C326.487 285.718 329.39 279.832 333.363 268.418C339.469 250.88 336.539 251.622 399.757 251.622C463.213 251.622 460.02 250.794 466.09 268.809C476.147 298.655 489.449 307.872 522.471 307.872C544.798 307.872 549.666 309.102 557.852 316.815C567.976 326.354 568.101 327.271 568.124 392.247L568.142 444.981L569.894 448.073C576.075 458.986 592.179 458.741 597.839 447.648C600.231 442.959 600.196 333.643 597.799 323.645C590.115 291.592 565.94 275.84 524.433 275.84C503.316 275.84 502.22 275.125 496.179 257.388C489.562 237.957 480.094 227.618 463.881 222.121L457.57 219.981H399.757H341.945L335.634 222.121C325.272 225.634 316.232 232.547 310.242 241.538C308.108 244.74 306.962 247.424 301.37 262.328C300.208 265.423 298.528 268.883 297.637 270.016L296.017 272.076L261.168 237.321C242.002 218.206 225.195 202.002 223.82 201.313C219.789 199.292 212.177 199.654 208.167 202.057ZM220.455 296.101C212.163 298.624 204.938 309.573 201.348 325.059C199.53 332.904 199.561 524.027 201.382 532.327C205.31 550.23 217.93 566.017 234.914 574.273C249.58 581.403 239.809 580.918 368.898 580.918H482.57L485.845 579.168C497.12 573.141 497.252 556.537 486.071 550.833C483.07 549.302 481.31 549.278 372.551 549.278C301.829 549.278 260.566 548.995 257.872 548.492C244.388 545.976 234.22 535.426 232.104 521.757C231.636 518.732 231.43 481.715 231.567 425.059C231.813 323.004 231.394 330.949 237.019 321.807C245.482 308.053 234.941 291.695 220.455 296.101ZM411.439 355.934C437.434 360.467 458.435 380.209 464.713 406.015C466.921 415.09 466.121 437.068 463.524 438.672C462.818 439.109 381.689 358.101 382.26 357.53C384.522 355.268 402.104 354.306 411.439 355.934ZM314.746 391.478C296.349 397 298.968 444.583 319.356 475.222C340.917 507.622 386.125 526.043 420.552 516.455C440.798 510.816 434.189 483.651 413.07 485.701C365.593 490.311 330.086 457.241 335.164 413.145C337.029 396.951 328.096 387.471 314.746 391.478Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function UploadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V17\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport function PencilSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M21.7275 2.2725C21.2885 1.83354 20.6962 1.58752 20.0794 1.58752C19.4626 1.58752 18.8703 1.83354 18.4313 2.2725L8.25 12.4538V15.75H11.5463L21.7275 5.56875C22.1665 5.12975 22.4125 4.53745 22.4125 3.92063C22.4125 3.3038 22.1665 2.7115 21.7275 2.2725ZM10.6444 14.25H9.75V13.3556L18.4313 4.67437C18.4929 4.60478 18.5673 4.54804 18.6505 4.50749C18.7337 4.46694 18.8239 4.44339 18.916 4.43828C19.0081 4.43317 19.1003 4.44661 19.1874 4.47783C19.2744 4.50905 19.3545 4.55741 19.4228 4.62003C19.4912 4.68265 19.5464 4.75833 19.5852 4.84251C19.624 4.9267 19.6457 5.01757 19.6489 5.10975C19.6521 5.20192 19.6367 5.29404 19.6037 5.38064C19.5706 5.46723 19.5206 5.54643 19.4569 5.61375L10.6444 14.25ZM4.5 7.5C3.90326 7.5 3.33097 7.73705 2.90901 8.15901C2.48705 8.58097 2.25 9.15326 2.25 9.75V19.5C2.25 20.0967 2.48705 20.669 2.90901 21.091C3.33097 21.5129 3.90326 21.75 4.5 21.75H14.25C14.8467 21.75 15.419 21.5129 15.841 21.091C16.2629 20.669 16.5 20.0967 16.5 19.5V14.25L15 15.75V19.5C15 19.6989 14.921 19.8897 14.7803 20.0303C14.6397 20.171 14.4489 20.25 14.25 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25L9.75 7.5H4.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CheckCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1.4 14.6L6 12l1.4-1.4 3.2 3.2 6.8-6.8 1.4 1.4-8.2 8.2Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CaretUpSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M20.0306 14.4694C19.961 14.5391 19.8782 14.5943 19.7872 14.6321C19.6961 14.6698 19.5986 14.6892 19.5 14.6892C19.4014 14.6892 19.3039 14.6698 19.2128 14.6321C19.1218 14.5943 19.039 14.5391 18.9694 14.4694L12 7.50001L5.03061 14.4694C4.88988 14.6101 4.69901 14.6892 4.49999 14.6892C4.30097 14.6892 4.1101 14.6101 3.96936 14.4694C3.82863 14.3286 3.74957 14.1378 3.74957 13.9387C3.74957 13.7397 3.82863 13.5489 3.96936 13.4081L11.4694 5.90813C11.539 5.8384 11.6217 5.78308 11.7128 5.74534C11.8038 5.7076 11.9014 5.68817 12 5.68817C12.0986 5.68817 12.1961 5.7076 12.2872 5.74534C12.3782 5.78308 12.461 5.8384 12.5306 5.90813L20.0306 13.4081C20.1003 13.4778 20.1556 13.5605 20.1933 13.6516C20.231 13.7426 20.2504 13.8402 20.2504 13.9387C20.2504 14.0373 20.231 14.1349 20.1933 14.2259C20.1556 14.317 20.1003 14.3997 20.0306 14.4694Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function CopySVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M19.5 2.25H8.25C8.05109 2.25 7.86032 2.32902 7.71967 2.46967C7.57902 2.61032 7.5 2.80109 7.5 3V7.5H3C2.80109 7.5 2.61032 7.57902 2.46967 7.71967C2.32902 7.86032 2.25 8.05109 2.25 8.25V21C2.25 21.1989 2.32902 21.3897 2.46967 21.5303C2.61032 21.671 2.80109 21.75 3 21.75H15.75C15.9489 21.75 16.1397 21.671 16.2803 21.5303C16.421 21.3897 16.5 21.1989 16.5 21V16.5H21C21.1989 16.5 21.3897 16.421 21.5303 16.2803C21.671 16.1397 21.75 15.9489 21.75 15.75V3C21.75 2.80109 21.671 2.61032 21.5303 2.46967C21.3897 2.32902 21.1989 2.25 19.5 2.25ZM15 20.25H3.75V9H15V20.25ZM20.25 15H16.5V8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5H9V3.75H20.25V15Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function DownloadSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 15.75C11.9015 15.7504 11.8038 15.7313 11.7128 15.6938C11.6218 15.6563 11.5392 15.6012 11.4694 15.5316L7.71938 11.7816C7.57865 11.6408 7.49959 11.45 7.49959 11.2509C7.49959 11.0519 7.57865 10.8611 7.71938 10.7203C7.86012 10.5796 8.05098 10.5005 8.25 10.5005C8.44903 10.5005 8.63989 10.5796 8.78063 10.7203L11.25 13.1906V3.75C11.25 3.55109 11.329 3.36032 11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967C12.671 3.36032 12.75 3.55109 12.75 3.75V13.1906L15.2194 10.7203C15.3601 10.5796 15.551 10.5005 15.75 10.5005C15.949 10.5005 16.1399 10.5796 16.2806 10.7203C16.4214 10.8611 16.5004 11.0519 16.5004 11.2509C16.5004 11.45 16.4214 11.6408 16.2806 11.7816L12.5306 15.5316C12.4609 15.6012 12.3782 15.6563 12.2872 15.6938C12.1962 15.7313 12.0986 15.7504 12 15.75ZM20.25 14.25C20.25 14.0511 20.171 13.8603 20.0303 13.7197C19.8897 13.579 19.6989 13.5 19.5 13.5C19.3011 13.5 19.1103 13.579 18.9697 13.7197C18.829 13.8603 18.75 14.0511 18.75 14.25V19.5H5.25V14.25C5.25 14.0511 5.17099 13.8603 5.03033 13.7197C4.88968 13.579 4.69892 13.5 4.5 13.5C4.30109 13.5 4.11033 13.579 3.96967 13.7197C3.82902 13.8603 3.75 14.0511 3.75 14.25V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47065 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V14.25Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport function InfoCircleSVG({ className, ...props }: IconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n className={cx(\"kombos-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path\n d=\"M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM12.75 16.5C12.75 16.6989 12.671 16.8897 12.5303 17.0303C12.3897 17.171 12.1989 17.25 12 17.25C11.8011 17.25 11.6103 17.171 11.4697 17.0303C11.329 16.8897 11.25 16.6989 11.25 16.5V11.25C11.25 11.0511 11.329 10.8603 11.4697 10.7197C11.6103 10.579 11.8011 10.5 12 10.5C12.1989 10.5 12.3897 10.579 12.5303 10.7197C12.671 10.8603 12.75 11.0511 12.75 11.25V16.5ZM12 9C11.8517 9 11.7067 8.95601 11.5833 8.87361C11.46 8.79121 11.3639 8.67406 11.3071 8.53701C11.2503 8.39997 11.2355 8.24917 11.2644 8.10368C11.2934 7.9582 11.3648 7.82456 11.4697 7.71967C11.5745 7.61478 11.7082 7.54336 11.8537 7.51441C11.9992 7.48547 12.15 7.50032 12.287 7.55709C12.4241 7.61386 12.5412 7.70999 12.6236 7.83332C12.706 7.95666 12.75 8.10166 12.75 8.25C12.75 8.44891 12.671 8.63968 12.5303 8.78033C12.3897 8.92098 12.1989 9 12 9Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"
18633
- },
18634
18110
  {
18635
18111
  "filename": "types.ts",
18636
18112
  "content": "import type { IkasProduct } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n product?: IkasProduct | null;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n components?: any;\n bottomComponents?: any;\n homepageText?: string;\n}\n"
18637
- },
18638
- {
18639
- "filename": "utils/bundle.ts",
18640
- "content": "import {\n getSelectedProductVariant,\n hasProductVariantStock,\n setBundleProductQuantity,\n IkasBundleProduct,\n IkasBundleSettings,\n} from \"@ikas/bp-storefront\";\n\nexport function adjustBundleProductQuantity(bp: IkasBundleProduct): void {\n if (!bp.product) return;\n\n const variant = getSelectedProductVariant(bp.product);\n\n const stock = variant.stock ?? 0;\n const inStock = hasProductVariantStock(variant);\n\n if (bp.minQuantity === 0 && !inStock) {\n setBundleProductQuantity(bp, 0);\n return;\n }\n\n if (stock < 10 && bp.quantity > stock && !variant.sellIfOutOfStock) {\n setBundleProductQuantity(bp, Math.max(stock, bp.minQuantity ?? 0));\n }\n}\n\nexport function isBundleOutOfStock(\n bundleSettings: IkasBundleSettings,\n): boolean {\n const { products, minBundleQuantity, maxBundleQuantity } = bundleSettings;\n\n // Skip check while bundle product data is still loading\n const loaded = products.some((bp) => !!bp.product);\n if (!loaded) return false;\n\n // A required bundle product (minQuantity !== 0) is out of stock\n const hasRequiredOutOfStock = products.some((bp) => {\n if (!bp.product) return false;\n\n const variant = getSelectedProductVariant(bp.product);\n const bpHasStock = variant ? hasProductVariantStock(variant) : false;\n\n return !bpHasStock && bp.minQuantity !== 0;\n });\n if (hasRequiredOutOfStock) return true;\n\n // All bundle products have zero quantity\n const allZeroQuantity = products.every((p) => p.quantity === 0);\n if (allZeroQuantity) return true;\n\n // Total quantity violates bundle-level min/max constraints\n const totalQuantity = products.reduce((sum, p) => sum + p.quantity, 0);\n if (minBundleQuantity != null && totalQuantity < minBundleQuantity)\n return true;\n if (maxBundleQuantity != null && totalQuantity > maxBundleQuantity)\n return true;\n\n // Individual bundle product min/max quantity violations\n const hasMinQuantityError = products.some(\n (bp) => bp.minQuantity != null && bp.quantity < bp.minQuantity,\n );\n if (hasMinQuantityError) return true;\n\n const hasMaxQuantityError = products.some(\n (bp) => bp.maxQuantity != null && bp.quantity > bp.maxQuantity!,\n );\n if (hasMaxQuantityError) return true;\n\n return false;\n}\n"
18641
- },
18642
- {
18643
- "filename": "utils/cx.ts",
18644
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
18645
- },
18646
- {
18647
- "filename": "utils/media.ts",
18648
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
18649
- },
18650
- {
18651
- "filename": "utils/optionSet.ts",
18652
- "content": "import {\n IkasProductOptionSet,\n hasValidProductOptionSetValues,\n} from \"@ikas/bp-storefront\";\nimport { showToast } from \"./toast\";\n\nexport function validateOptionSet(\n optionSet: IkasProductOptionSet | undefined | null,\n errorMessage: string\n): boolean {\n if (optionSet && !hasValidProductOptionSetValues(optionSet)) {\n window.dispatchEvent(new CustomEvent(\"ikas:show-option-errors\"));\n showToast(errorMessage, \"error\");\n return false;\n }\n return true;\n}\n"
18653
- },
18654
- {
18655
- "filename": "utils/toast.ts",
18656
- "content": "export function showToast(message: string, variant: \"success\" | \"error\") {\n window.dispatchEvent(\n new CustomEvent(\"ikas:show-toast\", { detail: { message, variant } })\n );\n}\n"
18657
18113
  }
18658
18114
  ]
18659
18115
  },
@@ -18689,14 +18145,6 @@
18689
18145
  "filename": "styles.css",
18690
18146
  "content": "/* ===== ProductDetailPrices ===== */\n\n.kombos-pd-prices {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-wrap: wrap;\n margin-top: var(--mobile-mt);\n margin-bottom: var(--mobile-mb);\n}\n\n.kombos-pd-prices__prices {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n}\n\n.kombos-pd-prices__final {\n color: var(--kombos-gray-900);\n}\n\n.kombos-pd-prices__original {\n color: var(--kombos-gray-500);\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-pd-prices {\n margin-top: var(--desktop-mt, var(--mobile-mt));\n margin-bottom: var(--desktop-mb, var(--mobile-mb));\n }\n}\n"
18691
18147
  },
18692
- {
18693
- "filename": "sub-components/Tag/index.tsx",
18694
- "content": "import type { ComponentChildren } from \"preact\";\n\ninterface Props {\n type: \"discounted\" | \"new\" | \"dark\";\n size?: \"s\" | \"m\";\n children: ComponentChildren;\n}\n\nexport default function Tag({ type, size = \"s\", children }: Props) {\n const typoClass = size === \"s\" ? \"text-xs-semibold\" : \"text-md-semibold\";\n const typeClass =\n type === \"discounted\"\n ? \"kombos-tag--discounted\"\n : type === \"dark\"\n ? \"kombos-tag--dark\"\n : \"kombos-tag--new\";\n\n return (\n <span className={`kombos-tag ${typeClass} ${typoClass}`}>{children}</span>\n );\n}\n"
18695
- },
18696
- {
18697
- "filename": "sub-components/Tag/styles.css",
18698
- "content": "/* ===== Tag ===== */\n.kombos-tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0.25rem 0.5rem;\n border-radius: 6px;\n white-space: nowrap;\n}\n\n/* Discounted */\n.kombos-tag--discounted {\n background: var(--kombos-discount-bg);\n color: var(--kombos-white);\n}\n\n/* New */\n.kombos-tag--new {\n background: var(--kombos-white);\n border: 1px solid var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n/* Dark */\n.kombos-tag--dark {\n padding: 0.125rem 0.5rem;\n border-radius: 4px;\n background: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n"
18699
- },
18700
18148
  {
18701
18149
  "filename": "types.ts",
18702
18150
  "content": "import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n product?: IkasProduct | null;\n mobileMarginTop?: MarginTopStyleType;\n mobileMarginBottom?: MarginBottomStyleType;\n desktopMarginTop?: MarginTopStyleType;\n desktopMarginBottom?: MarginBottomStyleType;\n}\n"
@@ -18728,10 +18176,6 @@
18728
18176
  "Review"
18729
18177
  ],
18730
18178
  "files": [
18731
- {
18732
- "filename": "hooks/useScrollLock.ts",
18733
- "content": "import { useEffect } from \"preact/hooks\";\nimport { RefObject } from \"preact\";\n\nexport function useScrollLock(\n enabled: boolean = true,\n skipCleanupRef?: RefObject<boolean>,\n) {\n useEffect(() => {\n if (!enabled) return;\n const scrollbarWidth =\n window.innerWidth - document.documentElement.clientWidth;\n document.body.style.overflow = \"hidden\";\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n return () => {\n if (skipCleanupRef?.current) return;\n document.body.style.overflow = \"\";\n document.body.style.paddingRight = \"\";\n };\n }, [enabled]);\n}\n"
18734
- },
18735
18179
  {
18736
18180
  "filename": "ikas-config-snippet.json",
18737
18181
  "content": "{\n \"id\": \"{{PROJECT_ID}}-product-detail-reviews\",\n \"name\": \"ProductDetailReviews\",\n \"type\": \"section\",\n \"entry\": \"./src/components/ProductDetailReviews/index.tsx\",\n \"styles\": \"./src/components/ProductDetailReviews/styles.css\",\n \"props\": [\n {\n \"name\": \"product\",\n \"displayName\": \"Product\",\n \"type\": \"PRODUCT\",\n \"required\": false\n },\n {\n \"name\": \"reviewsPerPage\",\n \"displayName\": \"Reviews Per Page\",\n \"type\": \"NUMBER\",\n \"required\": false,\n \"defaultValue\": 5,\n \"groupId\": \"settings\"\n },\n {\n \"name\": \"sectionTitle\",\n \"displayName\": \"Section Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Customer Reviews\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"writeReviewButtonText\",\n \"displayName\": \"Write Review Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Write a Review\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"emptyStateText\",\n \"displayName\": \"Empty State Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Number reviews yet. Be the first to review this product!\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"reviewCountText\",\n \"displayName\": \"Review Count Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Based on {count} reviews\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"submitButtonText\",\n \"displayName\": \"Submit Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Submit Review\",\n \"groupId\": \"form\"\n },\n {\n \"name\": \"submittingButtonText\",\n \"displayName\": \"Submitting Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Submitting...\",\n \"groupId\": \"form\"\n },\n {\n \"name\": \"titlePlaceholder\",\n \"displayName\": \"Title Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Review title\",\n \"groupId\": \"form\"\n },\n {\n \"name\": \"commentPlaceholder\",\n \"displayName\": \"Comment Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Write your review...\",\n \"groupId\": \"form\"\n },\n {\n \"name\": \"merchantReplyLabel\",\n \"displayName\": \"Merchant Reply Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Store Reply\",\n \"groupId\": \"texts\"\n },\n {\n \"name\": \"starRequiredError\",\n \"displayName\": \"Star Required Error\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Please select a rating\",\n \"groupId\": \"form\"\n },\n {\n \"name\": \"cancelButtonText\",\n \"displayName\": \"Cancel Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Cancel\",\n \"groupId\": \"form\"\n },\n {\n \"name\": \"errorMessage\",\n \"displayName\": \"Error Message\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Something went wrong. Please try again.\",\n \"groupId\": \"form\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"texts\",\n \"name\": \"Texts\",\n \"description\": \"Section başlığı, boş durum ve yorum sayısı metinleri\"\n },\n {\n \"id\": \"form\",\n \"name\": \"Form Texts\",\n \"description\": \"Review yazma formundaki alan ve buton metinleri\"\n },\n {\n \"id\": \"settings\",\n \"name\": \"Settings\",\n \"description\": \"Pagination ve görüntüleme ayarları\"\n }\n ]\n}"
@@ -18744,89 +18188,9 @@
18744
18188
  "filename": "styles.css",
18745
18189
  "content": ".product-detail-reviews {\n width: 100%;\n}\n\n.product-detail-reviews__inner {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n@media (min-width: 768px) {\n .product-detail-reviews__inner {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n }\n}\n\n.product-detail-reviews__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n flex-wrap: wrap;\n}\n\n.product-detail-reviews__title {\n margin: 0;\n color: var(--kombos-gray-900);\n}\n\n.product-detail-reviews__empty {\n color: var(--kombos-gray-500);\n text-align: center;\n padding: 3rem 1rem;\n margin: 0;\n}\n\n.product-detail-reviews__list {\n display: flex;\n flex-direction: column;\n}\n"
18746
18190
  },
18747
- {
18748
- "filename": "sub-components/Button/index.tsx",
18749
- "content": "import type { ButtonHTMLAttributes, ComponentChildren } from \"preact\";\nimport { SpinnerSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ntype Variant = \"primary\" | \"secondary\" | \"dangerous\";\ntype Size = \"xs\" | \"s\" | \"m\";\n\nexport interface ButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"size\" | \"icon\" | \"loading\"\n> {\n variant?: Variant;\n size?: Size;\n icon?: ComponentChildren;\n loading?: boolean;\n}\n\nconst TYPOGRAPHY: Record<Size, string> = {\n xs: \"text-sm-semibold\",\n s: \"text-md-semibold\",\n m: \"text-lg-semibold\",\n};\n\nexport default function Button({\n variant = \"primary\",\n size = \"s\",\n icon,\n loading,\n className,\n children,\n disabled,\n ...rest\n}: ButtonProps) {\n const cls = cx(\n \"kombos-btn\",\n `kombos-btn--${variant}`,\n `kombos-btn--${size}`,\n TYPOGRAPHY[size],\n className,\n );\n\n return (\n <button className={cls} disabled={loading || disabled} {...rest}>\n {loading ? (\n <SpinnerSVG className=\"kombos-btn__spinner\" />\n ) : (\n icon && <span className=\"kombos-btn__icon\">{icon}</span>\n )}\n {children}\n </button>\n );\n}\n"
18750
- },
18751
- {
18752
- "filename": "sub-components/Button/styles.css",
18753
- "content": "/* ===== Button ===== */\n\n/* --- Base --- */\n.kombos-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;\n}\n\n.kombos-btn:disabled {\n cursor: not-allowed;\n}\n\n/* --- Spinner --- */\n.kombos-btn__spinner {\n animation: kombos-spin 1s linear infinite;\n}\n\n@keyframes kombos-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* --- Icon --- */\n.kombos-btn__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.kombos-btn--xs .kombos-btn__icon {\n font-size: 1rem;\n}\n\n.kombos-btn--s .kombos-btn__icon {\n font-size: 1.25rem;\n}\n\n.kombos-btn--m .kombos-btn__icon {\n font-size: 1.5rem;\n}\n\n/* --- Sizes --- */\n.kombos-btn--xs {\n padding: 0.4375rem 0.9375rem;\n min-height: 2.25rem;\n}\n\n.kombos-btn--s {\n padding: 0.5625rem 1.1875rem;\n min-height: 2.75rem;\n}\n\n.kombos-btn--m {\n padding: 0.6875rem 1.4375rem;\n min-height: 3.375rem;\n}\n\n/* --- Primary --- */\n.kombos-btn--primary {\n background-color: var(--kombos-gray-900);\n border-color: var(--kombos-gray-900);\n color: var(--kombos-white);\n}\n\n.kombos-btn--primary:hover:not(:disabled) {\n opacity: 0.85;\n}\n\n.kombos-btn--primary:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n\n/* --- Secondary --- */\n.kombos-btn--secondary {\n background-color: var(--kombos-white);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-900);\n}\n\n.kombos-btn--secondary:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n}\n\n.kombos-btn--secondary:disabled {\n background-color: var(--kombos-gray-50);\n border-color: var(--kombos-gray-200);\n color: var(--kombos-gray-300);\n}\n\n/* --- Dangerous --- */\n.kombos-btn--dangerous {\n background-color: var(--kombos-error);\n border-color: var(--kombos-error);\n color: var(--kombos-white);\n}\n\n.kombos-btn--dangerous:hover:not(:disabled) {\n background-color: var(--kombos-error-hover);\n border-color: var(--kombos-error-hover);\n}\n\n.kombos-btn--dangerous:disabled {\n background-color: var(--kombos-gray-300);\n border-color: var(--kombos-gray-300);\n color: var(--kombos-gray-50);\n}\n"
18754
- },
18755
- {
18756
- "filename": "sub-components/ImagePreviewModal/index.tsx",
18757
- "content": "import { useState, useEffect, useCallback } from \"preact/hooks\";\nimport { useScrollLock } from \"../../hooks/useScrollLock\";\nimport { cx } from \"../../utils/cx\";\nimport { XSVG } from \"../icons\";\n\ninterface Props {\n src: string;\n alt: string;\n onClose: () => void;\n}\n\nexport default function ImagePreviewModal({ src, alt, onClose }: Props) {\n const [open, setOpen] = useState(false);\n\n useScrollLock();\n\n useEffect(() => {\n requestAnimationFrame(() => setOpen(true));\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setTimeout(onClose, 300);\n }, [onClose]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") handleClose();\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleClose]);\n\n return (\n <div\n className={cx(\"kombos-image-preview\", open && \"kombos-image-preview--open\")}\n onClick={handleClose}\n >\n <button\n type=\"button\"\n className=\"kombos-image-preview__close\"\n onClick={handleClose}\n aria-label=\"Close\"\n >\n <XSVG />\n </button>\n <img\n src={src}\n alt={alt}\n className=\"kombos-image-preview__img\"\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n}\n"
18758
- },
18759
- {
18760
- "filename": "sub-components/ImagePreviewModal/styles.css",
18761
- "content": "/* Image preview overlay */\n.kombos-image-preview {\n position: fixed;\n inset: 0;\n z-index: var(--kombos-z-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.35);\n opacity: 0;\n transition: opacity 0.3s ease;\n cursor: pointer;\n}\n\n.kombos-image-preview--open {\n opacity: 1;\n}\n\n/* Close button */\n.kombos-image-preview__close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: var(--kombos-white);\n border: none;\n border-radius: 50%;\n width: 2.5rem;\n height: 2.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 1.25rem;\n color: var(--kombos-gray-900);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n transition: background 0.15s;\n}\n\n.kombos-image-preview__close:hover {\n background: var(--kombos-gray-50);\n}\n\n/* Preview image */\n.kombos-image-preview__img {\n max-width: 90vw;\n max-height: 85vh;\n object-fit: contain;\n border-radius: 6px;\n cursor: default;\n}\n"
18762
- },
18763
- {
18764
- "filename": "sub-components/Modal/index.tsx",
18765
- "content": "import { useState, useEffect, useRef, useId } from \"preact/hooks\";\nimport type { ComponentChildren } from \"preact\";\nimport { useScrollLock } from \"../../hooks/useScrollLock\";\nimport { cx } from \"../../utils/cx\";\nimport { XSVG } from \"../icons\";\nimport Button, { type ButtonProps } from \"../Button\";\n\ninterface Props {\n onClose: () => void;\n title: string;\n maxWidth?: string;\n children: ComponentChildren;\n className?: string;\n okText?: string;\n cancelText?: string;\n onOk?: (e: Event) => void;\n okButtonProps?: ButtonProps;\n cancelButtonProps?: ButtonProps;\n footer?: ComponentChildren | null;\n}\n\nexport default function Modal({\n onClose,\n title,\n maxWidth = \"37.5rem\",\n children,\n className,\n okText,\n cancelText,\n onOk,\n okButtonProps,\n cancelButtonProps,\n footer,\n}: Props) {\n const titleId = useId();\n const [visible, setVisible] = useState(false);\n const onCloseRef = useRef(onClose);\n onCloseRef.current = onClose;\n\n const handleCloseRef = useRef(() => {});\n handleCloseRef.current = () => {\n setVisible(false);\n setTimeout(() => onCloseRef.current(), 300);\n };\n\n useScrollLock();\n\n useEffect(() => {\n const rafId = requestAnimationFrame(() => setVisible(true));\n return () => cancelAnimationFrame(rafId);\n }, []);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") handleCloseRef.current();\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, []);\n\n return (\n <div\n className={cx(\"kombos-modal\", visible && \"kombos-modal--open\", className)}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n >\n <div className=\"kombos-modal__panel\" style={{ maxWidth }}>\n <div className=\"kombos-modal__header\">\n <h2 id={titleId} className=\"kombos-modal__title text-md-medium\">\n {title}\n </h2>\n <button\n type=\"button\"\n className=\"kombos-modal__close\"\n onClick={() => handleCloseRef.current()}\n aria-label=\"Close\"\n >\n <XSVG />\n </button>\n </div>\n\n <div className=\"kombos-modal__body\">{children}</div>\n\n {footer !== null &&\n (footer !== undefined ? (\n <div className=\"kombos-modal__footer\">{footer}</div>\n ) : (\n (cancelText || okText) && (\n <div className=\"kombos-modal__footer\">\n {cancelText && (\n <Button\n variant=\"secondary\"\n size=\"s\"\n type=\"button\"\n onClick={() => handleCloseRef.current()}\n {...cancelButtonProps}\n >\n {cancelText}\n </Button>\n )}\n {okText && (\n <Button\n variant=\"primary\"\n size=\"s\"\n onClick={onOk}\n {...okButtonProps}\n >\n {okText}\n </Button>\n )}\n </div>\n )\n ))}\n </div>\n </div>\n );\n}\n"
18766
- },
18767
- {
18768
- "filename": "sub-components/Modal/styles.css",
18769
- "content": "/* ── Modal ── */\n.kombos-modal {\n position: fixed;\n inset: 0;\n z-index: var(--kombos-z-overlay);\n background: rgba(0, 0, 0, 0.35);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s;\n padding: 1rem;\n}\n\n.kombos-modal--open {\n opacity: 1;\n}\n\n.kombos-modal__panel {\n background: var(--kombos-white);\n border-radius: 6px;\n width: 100%;\n max-height: 90vh;\n display: flex;\n flex-direction: column;\n transform: translateY(1rem);\n transition: transform 0.3s;\n}\n\n.kombos-modal--open .kombos-modal__panel {\n transform: translateY(0);\n}\n\n.kombos-modal__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--kombos-white);\n padding: 1.5rem;\n border-bottom: 1px solid var(--kombos-gray-200);\n border-radius: 6px 6px 0 0;\n}\n\n.kombos-modal__title {\n color: var(--kombos-gray-900);\n}\n\n.kombos-modal__close {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n color: var(--kombos-gray-700);\n font-size: 1.25rem;\n}\n\n.kombos-modal__body {\n padding: 1.5rem;\n overflow-y: auto;\n}\n\n.kombos-modal__footer {\n background: var(--kombos-white);\n padding: 1.5rem;\n border-top: 1px solid var(--kombos-gray-200);\n border-radius: 0 0 6px 6px;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n}\n"
18770
- },
18771
- {
18772
- "filename": "sub-components/PageLoader/index.tsx",
18773
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
18774
- },
18775
- {
18776
- "filename": "sub-components/PageLoader/styles.css",
18777
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
18778
- },
18779
- {
18780
- "filename": "sub-components/Pagination/index.tsx",
18781
- "content": "import { observer } from \"@ikas/component-utils\";\nimport { cx } from \"../../utils/cx\";\nimport { getPageNumbers } from \"../../utils/pagination\";\nimport {\n CaretDoubleLeftSVG,\n CaretLeftSVG,\n CaretRightSVG,\n CaretDoubleRightSVG,\n DotsThreeSVG,\n} from \"../icons\";\n\ninterface Props {\n currentPage: number;\n totalPages: number;\n hasPrev: boolean;\n hasNext: boolean;\n onPageChange: (page: number) => void;\n}\n\nconst Pagination = observer(function Pagination({\n currentPage,\n totalPages,\n hasPrev,\n hasNext,\n onPageChange,\n}: Props) {\n if (totalPages <= 1) return null;\n\n const pages = getPageNumbers(currentPage, totalPages);\n\n const showFirstBtn = totalPages > 5 && currentPage >= 5;\n const showLastBtn = totalPages > 5 && currentPage <= totalPages - 4;\n\n return (\n <nav className=\"kombos-pagination\" aria-label=\"Pagination\">\n <div className=\"kombos-pagination__nav-group\">\n {showFirstBtn && (\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(1)}\n aria-label=\"First page\"\n >\n <CaretDoubleLeftSVG />\n </button>\n )}\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(currentPage - 1)}\n disabled={!hasPrev}\n aria-label=\"Previous page\"\n >\n <CaretLeftSVG />\n </button>\n </div>\n\n <div className=\"kombos-pagination__pages\">\n {pages.map((page, i) =>\n page === \"dots\" ? (\n <span key={`dots-${i}`} className=\"kombos-pagination__dots\">\n <DotsThreeSVG />\n </span>\n ) : (\n <button\n key={page}\n type=\"button\"\n className={cx(\n \"kombos-pagination__page\",\n \"text-md-semibold\",\n page === currentPage && \"kombos-pagination__page--active\"\n )}\n onClick={() => onPageChange(page)}\n aria-current={page === currentPage ? \"page\" : undefined}\n >\n {page}\n </button>\n )\n )}\n </div>\n\n <div className=\"kombos-pagination__nav-group\">\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(currentPage + 1)}\n disabled={!hasNext}\n aria-label=\"Next page\"\n >\n <CaretRightSVG />\n </button>\n {showLastBtn && (\n <button\n type=\"button\"\n className=\"kombos-pagination__nav-btn\"\n onClick={() => onPageChange(totalPages)}\n aria-label=\"Last page\"\n >\n <CaretDoubleRightSVG />\n </button>\n )}\n </div>\n </nav>\n );\n});\n\nexport default Pagination;\n"
18782
- },
18783
- {
18784
- "filename": "sub-components/Pagination/styles.css",
18785
- "content": "/* ===== Pagination ===== */\n.kombos-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 0.75rem 1.5rem;\n max-width: 100%;\n}\n\n/* Left/right button groups (first+prev, next+last) */\n.kombos-pagination__nav-group {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n/* Navigation buttons (first, prev, next, last) */\n.kombos-pagination__nav-btn {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--kombos-gray-50);\n border: 1px solid var(--kombos-gray-200);\n border-radius: 6px;\n cursor: pointer;\n font-size: 1rem;\n color: var(--kombos-gray-900);\n transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n\n.kombos-pagination__nav-btn:hover:not(:disabled) {\n border-color: var(--kombos-gray-300);\n background: var(--kombos-gray-100);\n}\n\n.kombos-pagination__nav-btn:disabled {\n cursor: default;\n color: var(--kombos-gray-300);\n background: var(--kombos-gray-50);\n}\n\n/* Page numbers container */\n.kombos-pagination__pages {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n/* Page number buttons — 32×32 */\n.kombos-pagination__page {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n padding: 0;\n color: var(--kombos-gray-500);\n transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.kombos-pagination__page:hover {\n color: var(--kombos-gray-900);\n background: var(--kombos-gray-50);\n}\n\n.kombos-pagination__page--active {\n color: var(--kombos-white);\n background: var(--kombos-gray-900);\n pointer-events: none;\n}\n\n/* Dots separator */\n.kombos-pagination__dots {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: var(--kombos-gray-400);\n}\n"
18786
- },
18787
- {
18788
- "filename": "sub-components/ReviewCard/index.tsx",
18789
- "content": "import type { IkasCustomerReview } from \"@ikas/bp-storefront\";\nimport {\n getIkasCustomerReviewFormattedDate,\n getThumbnailSrc,\n getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { cx } from \"../../utils/cx\";\nimport { getFullName } from \"../../utils/fullName\";\nimport StarRating from \"../StarRating\";\nimport { ArrowBendUpLeftSVG } from \"../icons\";\n\ninterface Props {\n review: IkasCustomerReview;\n merchantReplyLabel: string;\n onImageClick?: (src: string, alt: string) => void;\n className?: string;\n}\n\nexport default function ReviewCard({\n review,\n merchantReplyLabel,\n onImageClick,\n className,\n}: Props) {\n const name = getFullName(review.firstName, review.lastName);\n const date = getIkasCustomerReviewFormattedDate(review);\n const hasImages = review.images && review.images.length > 0;\n\n return (\n <article className={cx(\"kombos-review-card\", className)}>\n <div className=\"kombos-review-card__header\">\n <div className=\"kombos-review-card__meta\">\n {name && (\n <span className=\"kombos-review-card__author text-sm-semibold\">\n {name}\n </span>\n )}\n {date && (\n <span className=\"kombos-review-card__date text-xs-regular\">\n {date}\n </span>\n )}\n </div>\n <StarRating value={review.star} size=\"sm\" />\n </div>\n\n {review.title && (\n <h4 className=\"kombos-review-card__title text-md-semibold\">\n {review.title}\n </h4>\n )}\n\n {review.comment && (\n <p className=\"kombos-review-card__comment text-sm-regular\">\n {review.comment}\n </p>\n )}\n\n {hasImages && (\n <div className=\"kombos-review-card__images\">\n {review.images?.map((image, i) => {\n const thumbSrc = getThumbnailSrc(image);\n const fullSrc = getDefaultSrc(image);\n\n if (!thumbSrc) return null;\n\n return (\n <button\n key={i}\n type=\"button\"\n className=\"kombos-review-card__image-btn\"\n onClick={() =>\n onImageClick?.(fullSrc, review.title || \"Review image\")\n }\n >\n <img\n src={thumbSrc}\n alt={image.altText || review.title || \"Review image\"}\n className=\"kombos-review-card__image\"\n loading=\"lazy\"\n />\n </button>\n );\n })}\n </div>\n )}\n\n {review.reply && (\n <div className=\"kombos-review-card__reply\">\n <div className=\"kombos-review-card__reply-header\">\n <ArrowBendUpLeftSVG />\n <span className=\"kombos-review-card__reply-label text-xs-semibold\">\n {merchantReplyLabel}\n </span>\n </div>\n <p className=\"kombos-review-card__reply-text text-sm-regular\">\n {review.reply}\n </p>\n </div>\n )}\n </article>\n );\n}\n"
18790
- },
18791
- {
18792
- "filename": "sub-components/ReviewCard/styles.css",
18793
- "content": ".kombos-review-card {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 1.25rem 0;\n border-bottom: 1px solid var(--kombos-gray-100);\n}\n\n.kombos-review-card:last-child {\n border-bottom: none;\n}\n\n.kombos-review-card__header {\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.kombos-review-card__meta {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.kombos-review-card__author {\n color: var(--kombos-gray-900);\n}\n\n.kombos-review-card__date {\n color: var(--kombos-gray-400);\n}\n\n.kombos-review-card__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.kombos-review-card__comment {\n color: var(--kombos-gray-700);\n margin: 0;\n}\n\n.kombos-review-card__images {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.25rem;\n}\n\n.kombos-review-card__image-btn {\n all: unset;\n cursor: pointer;\n border-radius: 6px;\n overflow: hidden;\n line-height: 0;\n}\n\n.kombos-review-card__image {\n width: 4rem;\n height: 4rem;\n object-fit: cover;\n border-radius: 6px;\n transition: opacity 0.15s ease;\n}\n\n.kombos-review-card__image-btn:hover .kombos-review-card__image {\n opacity: 0.8;\n}\n\n.kombos-review-card__reply {\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n padding: 0.75rem;\n border: 1px solid var(--kombos-gray-200);\n border-radius: 8px;\n}\n\n.kombos-review-card__reply-header {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.875rem;\n color: var(--kombos-gray-500);\n}\n\n.kombos-review-card__reply-label {\n color: var(--kombos-gray-700);\n}\n\n.kombos-review-card__reply-text {\n color: var(--kombos-gray-700);\n margin: 0;\n}\n"
18794
- },
18795
- {
18796
- "filename": "sub-components/ReviewForm/index.tsx",
18797
- "content": "import { observer } from \"@ikas/component-utils\";\nimport type { IkasProduct } from \"@ikas/bp-storefront\";\nimport {\n getIkasProductCustomerReviewForm,\n submitCustomerReviewForm,\n setCustomerReviewFormStar,\n setCustomerReviewFormTitle,\n setCustomerReviewFormComment,\n} from \"@ikas/bp-storefront\";\nimport { showToast } from \"../../utils/toast\";\nimport FormItem from \"../FormItem\";\nimport Input from \"../Input\";\nimport Textarea from \"../Textarea\";\nimport StarRating from \"../StarRating\";\n\ninterface Props {\n product: IkasProduct;\n onSuccess: () => void;\n titlePlaceholder: string;\n commentPlaceholder: string;\n starRequiredError: string;\n errorMessage: string;\n}\n\nconst ReviewForm = observer(function ReviewForm({\n product,\n onSuccess,\n titlePlaceholder,\n commentPlaceholder,\n starRequiredError,\n errorMessage,\n}: Props) {\n const form = getIkasProductCustomerReviewForm(product);\n\n const handleStarChange = (value: number) => {\n setCustomerReviewFormStar(form, String(value));\n };\n\n const handleSubmit = async (e: Event) => {\n e.preventDefault();\n\n const success = await submitCustomerReviewForm(form);\n\n if (success) {\n onSuccess();\n } else {\n showToast(form.responseMessage || errorMessage, \"error\");\n }\n };\n\n const starValue = Number(form.star.value) || 0;\n\n return (\n <form\n id=\"review-form\"\n className=\"kombos-review-form\"\n onSubmit={handleSubmit}\n >\n <div className=\"kombos-review-form__field\">\n <FormItem\n status={form.star.hasError ? \"error\" : \"default\"}\n helper={\n form.star.hasError\n ? form.star.message || starRequiredError\n : undefined\n }\n >\n <StarRating\n value={starValue}\n interactive\n onChange={handleStarChange}\n size=\"md\"\n />\n </FormItem>\n </div>\n\n <FormItem\n label={form.title.label || undefined}\n status={form.title.hasError ? \"error\" : \"default\"}\n helper={form.title.hasError ? form.title.message : undefined}\n >\n <Input\n placeholder={titlePlaceholder}\n value={form.title.value}\n onInput={(e) => {\n setCustomerReviewFormTitle(\n form,\n (e.target as HTMLInputElement).value,\n );\n }}\n />\n </FormItem>\n\n <FormItem\n label={form.comment.label || undefined}\n status={form.comment.hasError ? \"error\" : \"default\"}\n helper={form.comment.hasError ? form.comment.message : undefined}\n >\n <Textarea\n placeholder={commentPlaceholder}\n value={form.comment.value}\n onInput={(e) => {\n setCustomerReviewFormComment(\n form,\n (e.target as HTMLTextAreaElement).value,\n );\n }}\n rows={4}\n />\n </FormItem>\n </form>\n );\n});\n\nexport default ReviewForm;\n"
18798
- },
18799
- {
18800
- "filename": "sub-components/ReviewForm/styles.css",
18801
- "content": ".kombos-review-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.kombos-review-form__field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n"
18802
- },
18803
- {
18804
- "filename": "sub-components/ReviewSummary/index.tsx",
18805
- "content": "import type { ComponentChildren } from \"preact\";\nimport type { IkasProductStar } from \"@ikas/bp-storefront\";\nimport { cx } from \"../../utils/cx\";\nimport StarRating from \"../StarRating\";\n\ninterface Props {\n averageStar: number;\n totalReview: number;\n stars: IkasProductStar[];\n reviewCountText: string;\n action?: ComponentChildren;\n className?: string;\n}\n\nexport default function ReviewSummary({\n averageStar,\n totalReview,\n stars,\n reviewCountText,\n action,\n className,\n}: Props) {\n return (\n <div className={cx(\"kombos-review-summary\", className)}>\n <div className=\"kombos-review-summary__overview\">\n <span className=\"kombos-review-summary__average display-xs-semibold\">\n {averageStar.toFixed(1)}\n </span>\n <StarRating value={averageStar} size=\"md\" />\n <span className=\"kombos-review-summary__count text-sm-regular\">\n {reviewCountText.replace(\"{count}\", String(totalReview))}\n </span>\n </div>\n\n <div className=\"kombos-review-summary__bars\">\n {[5, 4, 3, 2, 1].map((starLevel) => {\n const entry = stars.find((s) => s.star === starLevel);\n const count = entry?.count ?? 0;\n const percentage = totalReview > 0 ? (count / totalReview) * 100 : 0;\n\n return (\n <div key={starLevel} className=\"kombos-review-summary__bar-row\">\n <span className=\"kombos-review-summary__bar-label text-sm-medium\">\n {starLevel}\n </span>\n <div className=\"kombos-review-summary__bar-track\">\n <div\n className=\"kombos-review-summary__bar-fill\"\n style={{ width: `${percentage}%` }}\n />\n </div>\n <span className=\"kombos-review-summary__bar-count text-xs-regular\">\n {count}\n </span>\n </div>\n );\n })}\n </div>\n\n {action && (\n <div className=\"kombos-review-summary__action\">{action}</div>\n )}\n </div>\n );\n}\n"
18806
- },
18807
- {
18808
- "filename": "sub-components/ReviewSummary/styles.css",
18809
- "content": ".kombos-review-summary {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem 0;\n border-bottom: 1px solid var(--kombos-gray-200);\n}\n\n@media (min-width: 768px) {\n .kombos-review-summary {\n flex-direction: row;\n align-items: center;\n gap: 3rem;\n }\n}\n\n.kombos-review-summary__overview {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.25rem;\n min-width: 8rem;\n}\n\n.kombos-review-summary__average {\n color: var(--kombos-gray-900);\n}\n\n.kombos-review-summary__count {\n color: var(--kombos-gray-500);\n white-space: nowrap;\n}\n\n.kombos-review-summary__bars {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1;\n width: 100%;\n}\n\n.kombos-review-summary__bar-row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.kombos-review-summary__bar-label {\n color: var(--kombos-gray-700);\n min-width: 0.75rem;\n text-align: center;\n}\n\n.kombos-review-summary__bar-track {\n flex: 1;\n height: 0.5rem;\n background: var(--kombos-gray-100);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.kombos-review-summary__bar-fill {\n height: 100%;\n background: var(--kombos-gray-900);\n border-radius: 4px;\n transition: width 0.3s ease;\n}\n\n.kombos-review-summary__bar-count {\n color: var(--kombos-gray-500);\n min-width: 1.5rem;\n text-align: right;\n}\n\n.kombos-review-summary__action {\n display: flex;\n align-items: flex-start;\n margin-left: auto;\n}\n\n@media (max-width: 767px) {\n .kombos-review-summary__action {\n width: 100%;\n justify-content: center;\n }\n}\n"
18810
- },
18811
18191
  {
18812
18192
  "filename": "types.ts",
18813
18193
  "content": "import type { IkasProduct } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n product?: IkasProduct | null;\n reviewsPerPage?: number;\n sectionTitle?: string;\n writeReviewButtonText?: string;\n emptyStateText?: string;\n reviewCountText?: string;\n submitButtonText?: string;\n submittingButtonText?: string;\n titlePlaceholder?: string;\n commentPlaceholder?: string;\n merchantReplyLabel?: string;\n starRequiredError?: string;\n cancelButtonText?: string;\n errorMessage?: string;\n}\n"
18814
- },
18815
- {
18816
- "filename": "utils/cx.ts",
18817
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
18818
- },
18819
- {
18820
- "filename": "utils/fullName.ts",
18821
- "content": "export function getFullName(\n firstName?: string | null,\n lastName?: string | null\n): string {\n return [firstName, lastName].filter(Boolean).join(\" \");\n}\n"
18822
- },
18823
- {
18824
- "filename": "utils/pagination.ts",
18825
- "content": "export function getPageNumbers(\n current: number,\n total: number\n): (number | \"dots\")[] {\n if (total <= 7) {\n return Array.from({ length: total }, (_, i) => i + 1);\n }\n\n const pages: (number | \"dots\")[] = [1];\n\n if (current > 3) {\n pages.push(\"dots\");\n }\n\n const start = Math.max(2, current - 1);\n const end = Math.min(total - 1, current + 1);\n\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n\n if (current < total - 2) {\n pages.push(\"dots\");\n }\n\n pages.push(total);\n\n return pages;\n}\n"
18826
- },
18827
- {
18828
- "filename": "utils/toast.ts",
18829
- "content": "export function showToast(message: string, variant: \"success\" | \"error\") {\n window.dispatchEvent(\n new CustomEvent(\"ikas:show-toast\", { detail: { message, variant } })\n );\n}\n"
18830
18194
  }
18831
18195
  ]
18832
18196
  },
@@ -18909,45 +18273,9 @@
18909
18273
  "filename": "styles.css",
18910
18274
  "content": "/* ===== Product Slider Section ===== */\n.kombos-product-slider {\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n}\n\n.kombos-product-slider__wrapper {\n padding-top: 1rem;\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.kombos-product-slider__title {\n color: var(--kombos-gray-900);\n}\n\n/* Slider wrapper */\n.kombos-product-slider__slider {\n position: relative;\n overflow: hidden;\n}\n\n/* Scrollable track */\n.kombos-product-slider__track {\n display: flex;\n gap: 1rem;\n width: 100%;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n}\n\n.kombos-product-slider__track::-webkit-scrollbar {\n display: none;\n}\n\n/* Card sizing — mobile: 2 columns, desktop: driven by --columns */\n.kombos-product-slider__card {\n flex: 0 0 calc((100% - 1rem) / 2);\n min-width: 0;\n scroll-snap-align: start;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.kombos-product-slider__card-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n/* Navigation arrows */\n.kombos-product-slider__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: var(--kombos-z-dropdown);\n}\n\n.kombos-product-slider__arrow--left {\n left: 0.5rem;\n}\n\n.kombos-product-slider__arrow--right {\n right: 0.5rem;\n}\n\n/* ===== Tablet (>=768px) ===== */\n@media (min-width: 768px) {\n .kombos-product-slider__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-product-slider__wrapper {\n padding-top: 2rem;\n padding-bottom: 2rem;\n gap: 2rem;\n }\n\n .kombos-product-slider__track {\n gap: 1.5rem;\n }\n\n .kombos-product-slider__card {\n flex: 0 0 calc((100% - (var(--columns) - 1) * 1.5rem) / var(--columns));\n }\n\n .kombos-product-slider__arrow--left {\n left: 1rem;\n }\n\n .kombos-product-slider__arrow--right {\n right: 1rem;\n }\n}\n"
18911
18275
  },
18912
- {
18913
- "filename": "sub-components/ProductCard/index.tsx",
18914
- "content": "import { useState, useRef, useEffect } from \"preact/hooks\";\nimport {\n getSelectedProductVariant,\n getProductVariantMainImage,\n getProductVariantDiscountPercentage,\n hasProductVariantDiscount,\n hasProductVariantStock,\n addSelectedtedVariantToCart,\n getProductHref,\n getDefaultSrc,\n IkasProduct,\n isAddToCartEnabled,\n isFavoriteIkasProduct,\n addIkasProductToFavorites,\n removeIkasProductFromFavorites,\n customerStore,\n hasCustomer,\n Router,\n createMediaSrcset,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { NoProductSVG, Heart2SVG, HeartFilledSVG } from \"../icons\";\nimport Button from \"../Button\";\nimport SpinnerIcon from \"../SpinnerIcon\";\nimport Tag from \"../Tag\";\nimport { resolveAspectRatio, resolveObjectFit } from \"../../utils/media\";\nimport { showToast } from \"../../utils/toast\";\nimport type { AspectRatio, ObjectFit } from \"../../global-types\";\n\ninterface Props {\n product: IkasProduct;\n addToCartText: string;\n addedToCartText?: string;\n outOfStockText?: string;\n goToProductText?: string;\n showFavorite?: boolean;\n hideAddToCartButton?: boolean;\n badgeText?: string;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n dataPage?: number;\n sizes?: string;\n openCartOnAdd?: boolean;\n errorMessage?: string;\n onFavoriteRemove?: () => void;\n priority?: boolean;\n}\n\nconst ProductCard = observer(function ProductCard({\n product,\n addToCartText,\n addedToCartText = \"Sepete Eklendi\",\n outOfStockText = \"Tükendi\",\n goToProductText = \"Ürüne Git\",\n showFavorite = true,\n hideAddToCartButton = false,\n badgeText,\n aspectRatio,\n objectFit,\n dataPage,\n sizes = \"(max-width: 767px) calc(50vw - 24px), (max-width: 1023px) calc(50vw - 44px), 300px\",\n openCartOnAdd = true,\n errorMessage = \"Ürün sepete eklenemedi\",\n onFavoriteRemove,\n priority = false,\n}: Props) {\n const [cartState, setCartState] = useState<\"idle\" | \"loading\" | \"added\">(\n \"idle\",\n );\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, []);\n\n const selectedVariant = getSelectedProductVariant(product);\n const productImage = selectedVariant\n ? getProductVariantMainImage(selectedVariant)\n : null;\n const image = productImage?.image;\n\n const sortedImages = selectedVariant?.images\n ? [...selectedVariant.images].sort((a, b) => a.order - b.order)\n : [];\n const secondImage = sortedImages.length > 1 ? sortedImages[1]?.image : null;\n const hasDiscount = selectedVariant\n ? hasProductVariantDiscount(selectedVariant)\n : false;\n const inStock = selectedVariant\n ? hasProductVariantStock(selectedVariant)\n : false;\n const discountPercentage =\n hasDiscount && selectedVariant\n ? getProductVariantDiscountPercentage(selectedVariant)\n : null;\n\n const productHref = getProductHref(product);\n const isBundleProduct = !!selectedVariant?.bundleSettings;\n const hasOptionSet = !!product.productOptionSet;\n const isFavorite = isFavoriteIkasProduct(product);\n\n const mediaStyle: Record<string, string> = {};\n const resolvedAR = resolveAspectRatio(aspectRatio);\n const resolvedOF = resolveObjectFit(objectFit);\n if (resolvedAR) mediaStyle.aspectRatio = resolvedAR;\n if (resolvedOF) mediaStyle.objectFit = resolvedOF;\n\n const handleAddToCart = async () => {\n if (cartState === \"loading\") return;\n\n if (!isAddToCartEnabled(product) || isBundleProduct || hasOptionSet) {\n Router.navigate(productHref);\n return;\n }\n\n if (timerRef.current) clearTimeout(timerRef.current);\n setCartState(\"loading\");\n try {\n const result = await addSelectedtedVariantToCart(product, 1);\n\n if (result.success) {\n if (openCartOnAdd) {\n window.dispatchEvent(new CustomEvent(\"ikas:open-cart-sidebar\"));\n }\n setCartState(\"added\");\n } else {\n showToast(errorMessage, \"error\");\n }\n\n timerRef.current = setTimeout(() => setCartState(\"idle\"), 2000);\n } catch {\n setCartState(\"idle\");\n showToast(errorMessage, \"error\");\n }\n };\n\n const handleFavoriteToggle = async () => {\n const isLoggedIn = hasCustomer(customerStore);\n if (!isLoggedIn) {\n Router.navigateToPage(\"LOGIN\");\n return;\n }\n\n if (isFavorite) {\n await removeIkasProductFromFavorites(product);\n onFavoriteRemove?.();\n } else {\n await addIkasProductToFavorites(product);\n }\n };\n\n return (\n <div className=\"kombos-product-card\" data-page={dataPage}>\n {/* Image container */}\n <div className=\"kombos-product-card__image-wrapper\">\n <a href={productHref} className=\"kombos-product-card__media-link\" aria-label={product.name || \"Product\"}>\n {image?.isVideo ? (\n <video\n src={getDefaultSrc(image)}\n className=\"kombos-product-card__media\"\n style={mediaStyle}\n muted\n loop\n autoPlay\n playsInline\n aria-label={product.name}\n >\n <track kind=\"captions\" />\n </video>\n ) : image ? (\n <>\n <img\n src={getDefaultSrc(image)}\n srcSet={createMediaSrcset(image)}\n sizes={sizes}\n alt={product.name}\n className=\"kombos-product-card__media kombos-product-card__media--primary\"\n style={mediaStyle}\n loading={priority ? \"eager\" : \"lazy\"}\n decoding={priority ? \"sync\" : \"async\"}\n fetchpriority={priority ? \"high\" : undefined}\n />\n {secondImage && !secondImage.isVideo && (\n <img\n src={getDefaultSrc(secondImage)}\n srcSet={createMediaSrcset(secondImage)}\n sizes={sizes}\n alt=\"\"\n className=\"kombos-product-card__media kombos-product-card__media--hover\"\n style={mediaStyle}\n loading=\"lazy\"\n decoding=\"async\"\n />\n )}\n </>\n ) : (\n <div\n className=\"kombos-product-card__media kombos-product-card__media--placeholder\"\n style={mediaStyle}\n >\n <NoProductSVG />\n </div>\n )}\n </a>\n\n {/* Out of stock overlay — must render before badges/heart so they appear on top */}\n {!inStock && <div className=\"kombos-product-card__overlay\" />}\n\n {/* Badges */}\n {(hasDiscount || badgeText) && (\n <div className=\"kombos-product-card__badges\">\n {hasDiscount && discountPercentage && (\n <Tag type=\"discounted\" size=\"s\">\n %{discountPercentage}\n </Tag>\n )}\n {badgeText && (\n <Tag type=\"new\" size=\"s\">\n {badgeText}\n </Tag>\n )}\n </div>\n )}\n\n {/* Favorite button */}\n {showFavorite && (\n <button\n type=\"button\"\n className=\"kombos-product-card__favorite\"\n onClick={handleFavoriteToggle}\n aria-label=\"Favorite\"\n >\n {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}\n </button>\n )}\n </div>\n\n {/* Add to Cart / Go to Product */}\n {!hideAddToCartButton && (\n <>\n {isBundleProduct || (hasOptionSet && inStock) ? (\n <Button\n variant=\"primary\"\n size=\"xs\"\n className=\"kombos-product-card__add-btn\"\n onClick={() => Router.navigate(productHref)}\n >\n {goToProductText}\n </Button>\n ) : (\n <Button\n variant={cartState === \"added\" ? \"secondary\" : \"primary\"}\n size=\"xs\"\n className=\"kombos-product-card__add-btn\"\n onClick={inStock ? handleAddToCart : undefined}\n disabled={!inStock || cartState === \"loading\"}\n icon={\n inStock && cartState === \"loading\" ? <SpinnerIcon /> : undefined\n }\n >\n {!inStock && outOfStockText}\n {inStock && cartState === \"added\" && addedToCartText}\n {inStock &&\n (cartState === \"idle\" || cartState === \"loading\") &&\n addToCartText}\n </Button>\n )}\n </>\n )}\n </div>\n );\n});\n\nexport default ProductCard;\n"
18915
- },
18916
- {
18917
- "filename": "sub-components/ProductCard/styles.css",
18918
- "content": "/* ===== Product Card ===== */\n.kombos-product-card {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n min-width: 0;\n}\n\n/* Image wrapper */\n.kombos-product-card__image-wrapper {\n position: relative;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.kombos-product-card__media-link {\n display: block;\n}\n\n.kombos-product-card__media {\n width: 100%;\n height: auto;\n display: block;\n background: var(--kombos-gray-100);\n}\n\n.kombos-product-card__media--primary {\n transition: opacity 0.3s ease;\n}\n\n.kombos-product-card__media--hover {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.kombos-product-card__image-wrapper:hover .kombos-product-card__media--primary {\n opacity: 0;\n}\n\n.kombos-product-card__image-wrapper:hover .kombos-product-card__media--hover {\n opacity: 1;\n}\n\n.kombos-product-card__media--placeholder {\n border: 1px solid var(--kombos-gray-100);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n color: var(--kombos-gray-300);\n font-size: 4rem;\n}\n\n/* Badges */\n.kombos-product-card__badges {\n position: absolute;\n top: 0.75rem;\n left: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Favorite */\n.kombos-product-card__favorite {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-size: 1.5rem;\n color: var(--kombos-gray-900);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Out of stock overlay */\n.kombos-product-card__overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.32);\n pointer-events: none;\n}\n\n\n/* Add to Cart Button */\n.kombos-product-card__add-btn {\n width: 100%;\n}\n"
18919
- },
18920
- {
18921
- "filename": "sub-components/SliderArrow/index.tsx",
18922
- "content": "import type { JSX } from \"preact\";\nimport { CaretLeftSVG, CaretRightSVG } from \"../icons\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, \"direction\"> {\n direction: \"left\" | \"right\";\n disabled?: boolean;\n}\n\nexport default function SliderArrow({\n direction,\n className,\n ...rest\n}: Props) {\n const Icon = direction === \"left\" ? CaretLeftSVG : CaretRightSVG;\n\n return (\n <button\n className={cx(\"kombos-slider-arrow\", className)}\n aria-label={direction === \"left\" ? \"Previous\" : \"Next\"}\n {...rest}\n >\n <Icon />\n </button>\n );\n}\n"
18923
- },
18924
- {
18925
- "filename": "sub-components/SliderArrow/styles.css",
18926
- "content": "/* ===== Slider Arrow ===== */\n.kombos-slider-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.75rem;\n border-radius: 50%;\n border: 1px solid var(--kombos-gray-200);\n background: rgba(255, 255, 255, 0.5);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n cursor: pointer;\n font-size: 1.25rem;\n color: var(--kombos-gray-900);\n transition: background 0.2s;\n}\n\n.kombos-slider-arrow:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.8);\n}\n\n.kombos-slider-arrow:disabled {\n cursor: default;\n color: var(--kombos-gray-400);\n}\n"
18927
- },
18928
- {
18929
- "filename": "sub-components/VariantBadge/index.tsx",
18930
- "content": "import {\n IkasProduct,\n IkasVariantValue,\n getIkasVariantValueThumbnailImage,\n isIkasVariantTypeColorSelection,\n selectVariantValue,\n getDisplayedProductVariantTypes,\n getProductVariantMainImage,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { BadgeImage, BadgeColor, BadgeText } from \"../Badge\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props {\n product: IkasProduct;\n size?: \"xs\" | \"s\" | \"m\" | \"l\";\n disableRoute?: boolean;\n scrollable?: boolean;\n showLabels?: boolean;\n useVariantImages?: boolean;\n onSelect?: () => void;\n}\n\nconst VariantBadge = observer(function VariantBadge({\n product,\n size = \"s\",\n disableRoute,\n scrollable,\n showLabels,\n useVariantImages,\n onSelect,\n}: Props) {\n const displayedVariantTypes = getDisplayedProductVariantTypes(product);\n if (displayedVariantTypes.length === 0) return null;\n\n function handleSelect(variantValue: IkasVariantValue) {\n selectVariantValue(product, variantValue, disableRoute);\n onSelect?.();\n }\n\n return (\n <div\n className={cx(\n \"kombos-variant-badge__groups\",\n size === \"l\" && \"kombos-variant-badge__groups--l\",\n )}\n >\n {displayedVariantTypes.map((dvt) => {\n const isColor = isIkasVariantTypeColorSelection(dvt.variantType);\n\n return (\n <div key={dvt.variantType.id} className=\"kombos-variant-badge__group\">\n {showLabels && (\n <span className={cx(\"kombos-variant-badge__label\", size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\")}>\n {dvt.variantType.name}\n </span>\n )}\n <div\n className={cx(\n \"kombos-variant-badge__row\",\n scrollable && \"kombos-variant-badge__row--scrollable\",\n size === \"l\" && \"kombos-variant-badge__row--l\",\n )}\n >\n {dvt.displayedVariantValues.map((dvv) => {\n const isSelected = dvv.isSelected;\n const outOfStock = dvv.hasStock === false;\n const variantValue = dvv.variantValue;\n\n if (isColor) {\n // Variant product image\n if (useVariantImages) {\n const variantImage = getProductVariantMainImage(\n dvv.variant,\n )?.image;\n\n if (variantImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={variantImage}\n alt={variantValue.name}\n sizes=\"64px\"\n variantImg\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Thumbnail image\n const thumbImage =\n getIkasVariantValueThumbnailImage(variantValue);\n\n if (thumbImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={thumbImage}\n alt={variantValue.name}\n sizes=\"(max-width: 1024px) 100vw, 100px\"\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n\n // Color swatch\n const colorCode = variantValue.colorCode;\n if (colorCode) {\n return (\n <BadgeColor\n key={variantValue.id}\n colorCode={colorCode}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Text badge (fallback)\n return (\n <BadgeText\n key={variantValue.id}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n >\n {variantValue.name}\n </BadgeText>\n );\n })}\n </div>\n </div>\n );\n })}\n </div>\n );\n});\n\nexport default VariantBadge;\n"
18931
- },
18932
- {
18933
- "filename": "sub-components/VariantBadge/styles.css",
18934
- "content": "/* ===== Variant Badge Layout ===== */\n\n/* ---- Layout ---- */\n.kombos-variant-badge__groups {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.kombos-variant-badge__groups--l {\n gap: 1.5rem;\n}\n\n.kombos-variant-badge__group {\n display: flex;\n flex-direction: column;\n}\n\n.kombos-variant-badge__label {\n color: var(--kombos-gray-900);\n margin-bottom: 0.375rem;\n}\n\n.kombos-variant-badge__row {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.kombos-variant-badge__row--l {\n gap: 0.5rem;\n}\n\n.kombos-variant-badge__row--scrollable {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n}\n\n.kombos-variant-badge__row--scrollable::-webkit-scrollbar {\n display: none;\n}\n\n.kombos-variant-badge__row--scrollable .kombos-badge {\n flex-shrink: 0;\n}\n"
18935
- },
18936
18276
  {
18937
18277
  "filename": "types.ts",
18938
18278
  "content": "import type { IkasProductList } from \"@ikas/bp-storefront\";\nimport type { AspectRatio, NumberOfColumns, ObjectFit } from \"../../global-types\";\n\nexport interface Props {\n productList: IkasProductList;\n title?: string;\n addToCartText?: string;\n addedToCartText?: string;\n outOfStockText?: string;\n goToProductText?: string;\n desktopColumns?: NumberOfColumns;\n aspectRatio?: AspectRatio;\n objectFit?: ObjectFit;\n hideAddToCartButton?: boolean;\n components?: any;\n}\n"
18939
- },
18940
- {
18941
- "filename": "utils/cx.ts",
18942
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
18943
- },
18944
- {
18945
- "filename": "utils/media.ts",
18946
- "content": "import type { AspectRatio, ObjectFit, VerticalAlignment } from \"../global-types\";\n\nconst DEFAULT_ASPECT_RATIO: AspectRatio = \"Square\";\nconst DEFAULT_OBJECT_FIT: ObjectFit = \"Cover\";\nconst DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = \"Middle\";\n\nconst ASPECT_RATIO_MAP: Record<AspectRatio, string> = {\n Square: \"1 / 1\",\n Portrait: \"3 / 4\",\n Landscape: \"4 / 3\",\n Video: \"16 / 9\",\n};\n\nconst OBJECT_FIT_MAP: Record<ObjectFit, string> = {\n Fill: \"fill\",\n Cover: \"cover\",\n Contain: \"contain\",\n};\n\nconst ALIGNMENT_MAP: Record<VerticalAlignment, string> = {\n Top: \"flex-start\",\n Middle: \"center\",\n Bottom: \"flex-end\",\n};\n\nexport function resolveAspectRatio(value?: AspectRatio): string {\n return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];\n}\n\nexport function resolveObjectFit(value?: ObjectFit): string {\n return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];\n}\n\nexport function resolveVerticalAlignment(value?: VerticalAlignment): string {\n return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];\n}\n"
18947
- },
18948
- {
18949
- "filename": "utils/toast.ts",
18950
- "content": "export function showToast(message: string, variant: \"success\" | \"error\") {\n window.dispatchEvent(\n new CustomEvent(\"ikas:show-toast\", { detail: { message, variant } })\n );\n}\n"
18951
18279
  }
18952
18280
  ]
18953
18281
  },
@@ -18975,10 +18303,6 @@
18975
18303
  "filename": "components/RecoverPasswordForm/styles.css",
18976
18304
  "content": ""
18977
18305
  },
18978
- {
18979
- "filename": "hooks/useRedirectIfLoggedIn.ts",
18980
- "content": "import { useEffect, useState } from \"preact/hooks\";\nimport {\n customerStore,\n waitForCustomerStoreInit,\n Router,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Redirects logged-in users to the account page.\n * Returns `true` while the check is in progress (use to hide content and prevent flash).\n * Calls `onGuest` only if the user is not logged in.\n */\nexport function useRedirectIfLoggedIn(onGuest: () => void): boolean {\n const [isChecking, setIsChecking] = useState(true);\n\n useEffect(() => {\n let isMounted = true;\n\n waitForCustomerStoreInit(customerStore).then(() => {\n if (!isMounted) return;\n if (customerStore.customer) {\n Router.navigateToPage(\"ACCOUNT\");\n return;\n }\n onGuest();\n setIsChecking(false);\n });\n\n return () => {\n isMounted = false;\n };\n }, []);\n\n return isChecking;\n}\n"
18981
- },
18982
18306
  {
18983
18307
  "filename": "ikas-config-snippet.json",
18984
18308
  "content": "{\n \"id\": \"{{PROJECT_ID}}-recover-password\",\n \"name\": \"RecoverPassword\",\n \"type\": \"section\",\n \"entry\": \"./src/components/RecoverPassword/index.tsx\",\n \"styles\": \"./src/components/RecoverPassword/styles.css\",\n \"props\": [\n {\n \"name\": \"title\",\n \"displayName\": \"Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Parola Değiştirme\",\n \"groupId\": \"form-baslik\"\n },\n {\n \"name\": \"subtitle\",\n \"displayName\": \"Description\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Lütfen yeni parolanızı belirleyiniz.\",\n \"groupId\": \"form-baslik\"\n },\n {\n \"name\": \"passwordLabel\",\n \"displayName\": \"Password Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"New Password\",\n \"groupId\": \"form-alanlari\"\n },\n {\n \"name\": \"passwordPlaceholder\",\n \"displayName\": \"Password Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Parola\",\n \"groupId\": \"form-alanlari\"\n },\n {\n \"name\": \"passwordAgainLabel\",\n \"displayName\": \"Password Again Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Confirm New Password\",\n \"groupId\": \"form-alanlari\"\n },\n {\n \"name\": \"passwordAgainPlaceholder\",\n \"displayName\": \"Confirm Password Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Parola\",\n \"groupId\": \"form-alanlari\"\n },\n {\n \"name\": \"submitButtonText\",\n \"displayName\": \"Change Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Change\",\n \"groupId\": \"buton-metinleri\"\n },\n {\n \"name\": \"submittingButtonText\",\n \"displayName\": \"Changing Button\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Değiştiriliyor...\",\n \"groupId\": \"buton-metinleri\"\n },\n {\n \"name\": \"successMessage\",\n \"displayName\": \"Success Message\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Parolanız başarıyla değiştirildi.\",\n \"groupId\": \"basari-ekrani\"\n },\n {\n \"name\": \"loginLinkText\",\n \"displayName\": \"Login Return Bağlantısı\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Sign In\",\n \"groupId\": \"basari-ekrani\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"form-baslik\",\n \"name\": \"Form Title\",\n \"description\": \"Formun üst kısmında görünen başlık ve açıklama metinleri\"\n },\n {\n \"id\": \"form-alanlari\",\n \"name\": \"Form Alanları\",\n \"description\": \"Parola giriş alanlarının etiket ve placeholder metinleri\"\n },\n {\n \"id\": \"buton-metinleri\",\n \"name\": \"Button Texts\",\n \"description\": \"Submit butonu ve yükleniyor durumu metinleri\"\n },\n {\n \"id\": \"basari-ekrani\",\n \"name\": \"Success Ekranı\",\n \"description\": \"Parola başarıyla değiştirildikten sonra gösterilen mesaj ve bağlantılar\"\n }\n ]\n}"
@@ -18991,21 +18315,9 @@
18991
18315
  "filename": "styles.css",
18992
18316
  "content": ".recover-password {\n width: 100%;\n}\n\n.recover-password__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.recover-password__container {\n width: 100%;\n max-width: 29rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.recover-password__header {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n}\n\n.recover-password__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.recover-password__subtitle {\n color: var(--kombos-gray-700);\n margin: 0;\n}\n\n.recover-password__success-banner {\n padding: 0.75rem 1rem;\n background: rgba(18, 183, 106, 0.08);\n border: 1px solid var(--kombos-success);\n border-radius: 6px;\n color: var(--kombos-success);\n}\n\n.recover-password__error-banner {\n padding: 0.75rem 1rem;\n background: rgba(255, 60, 72, 0.08);\n border: 1px solid var(--kombos-error);\n border-radius: 6px;\n color: var(--kombos-error);\n}\n\n.recover-password__form {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.recover-password__submit-btn {\n width: 100%;\n}\n\n.recover-password__footer {\n text-align: center;\n}\n\n.recover-password__login-link {\n background: none;\n border: none;\n padding: 0;\n color: var(--kombos-gray-700);\n cursor: pointer;\n text-decoration: underline;\n}\n\n.recover-password__login-link:hover {\n color: var(--kombos-gray-900);\n}\n\n@media (min-width: 768px) {\n .recover-password__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .recover-password__wrapper {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n"
18993
18317
  },
18994
- {
18995
- "filename": "sub-components/PageLoader/index.tsx",
18996
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
18997
- },
18998
- {
18999
- "filename": "sub-components/PageLoader/styles.css",
19000
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
19001
- },
19002
18318
  {
19003
18319
  "filename": "types.ts",
19004
18320
  "content": "export interface Props {\n title?: string;\n subtitle?: string;\n passwordLabel?: string;\n passwordPlaceholder?: string;\n passwordAgainLabel?: string;\n passwordAgainPlaceholder?: string;\n submitButtonText?: string;\n submittingButtonText?: string;\n successMessage?: string;\n loginLinkText?: string;\n}\n"
19005
- },
19006
- {
19007
- "filename": "utils/cx.ts",
19008
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
19009
18321
  }
19010
18322
  ]
19011
18323
  },
@@ -19033,10 +18345,6 @@
19033
18345
  "filename": "components/RegisterForm/styles.css",
19034
18346
  "content": ""
19035
18347
  },
19036
- {
19037
- "filename": "hooks/useRedirectIfLoggedIn.ts",
19038
- "content": "import { useEffect, useState } from \"preact/hooks\";\nimport {\n customerStore,\n waitForCustomerStoreInit,\n Router,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Redirects logged-in users to the account page.\n * Returns `true` while the check is in progress (use to hide content and prevent flash).\n * Calls `onGuest` only if the user is not logged in.\n */\nexport function useRedirectIfLoggedIn(onGuest: () => void): boolean {\n const [isChecking, setIsChecking] = useState(true);\n\n useEffect(() => {\n let isMounted = true;\n\n waitForCustomerStoreInit(customerStore).then(() => {\n if (!isMounted) return;\n if (customerStore.customer) {\n Router.navigateToPage(\"ACCOUNT\");\n return;\n }\n onGuest();\n setIsChecking(false);\n });\n\n return () => {\n isMounted = false;\n };\n }, []);\n\n return isChecking;\n}\n"
19039
- },
19040
18348
  {
19041
18349
  "filename": "ikas-config-snippet.json",
19042
18350
  "content": "{\n \"id\": \"{{PROJECT_ID}}-register\",\n \"name\": \"Register\",\n \"type\": \"section\",\n \"entry\": \"./src/components/Register/index.tsx\",\n \"styles\": \"./src/components/Register/styles.css\",\n \"props\": [\n {\n \"name\": \"title\",\n \"displayName\": \"Title\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Account Oluştur\",\n \"groupId\": \"content\"\n },\n {\n \"name\": \"subtitle\",\n \"displayName\": \"Sub Title\",\n \"type\": \"RICH_TEXT\",\n \"required\": false,\n \"defaultValue\": \"<p>Hemen ücretsiz hesap oluşturun ve alışverişe başlayın.</p>\",\n \"groupId\": \"content\"\n },\n {\n \"name\": \"firstNameLabel\",\n \"displayName\": \"Name Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Name\",\n \"groupId\": \"firstName\"\n },\n {\n \"name\": \"firstNamePlaceholder\",\n \"displayName\": \"Name Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Name\",\n \"groupId\": \"firstName\"\n },\n {\n \"name\": \"lastNameLabel\",\n \"displayName\": \"Last Name Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Last Name\",\n \"groupId\": \"lastName\"\n },\n {\n \"name\": \"lastNamePlaceholder\",\n \"displayName\": \"Last Name Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Last Name\",\n \"groupId\": \"lastName\"\n },\n {\n \"name\": \"emailLabel\",\n \"displayName\": \"Email Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Email\",\n \"groupId\": \"email\"\n },\n {\n \"name\": \"emailPlaceholder\",\n \"displayName\": \"Email Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"ornek@email.com\",\n \"groupId\": \"email\"\n },\n {\n \"name\": \"passwordLabel\",\n \"displayName\": \"Password Label\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Password\",\n \"groupId\": \"password\"\n },\n {\n \"name\": \"passwordPlaceholder\",\n \"displayName\": \"Password Placeholder\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Şifrenizi girin\",\n \"groupId\": \"password\"\n },\n {\n \"name\": \"submitButtonText\",\n \"displayName\": \"Register Button Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Register\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"submittingButtonText\",\n \"displayName\": \"Register Yapılıyor Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Register yapılıyor...\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"loginLinkText\",\n \"displayName\": \"Login Yap Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Zaten hesabınız var mı? Login yapın\",\n \"groupId\": \"buttons\"\n },\n {\n \"name\": \"marketingConsentText\",\n \"displayName\": \"Marketing Confirmation Text\",\n \"type\": \"RICH_TEXT\",\n \"required\": false,\n \"groupId\": \"marketing-consent\"\n },\n {\n \"name\": \"marketingConsentLink\",\n \"displayName\": \"İletişim Permission Link\",\n \"type\": \"LINK\",\n \"required\": false,\n \"groupId\": \"marketing-consent\"\n },\n {\n \"name\": \"agreementConsentText\",\n \"displayName\": \"Membership Agreement Text\",\n \"type\": \"RICH_TEXT\",\n \"required\": false,\n \"groupId\": \"agreement-consent\"\n },\n {\n \"name\": \"agreementConsentLink\",\n \"displayName\": \"Membership Agreement Link\",\n \"type\": \"LINK\",\n \"required\": false,\n \"groupId\": \"agreement-consent\"\n },\n {\n \"name\": \"showGoogleLogin\",\n \"displayName\": \"Sign in with Google\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"google\"\n },\n {\n \"name\": \"googleButtonText\",\n \"displayName\": \"Google Button Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Google ile kayıt ol\",\n \"groupId\": \"google\"\n },\n {\n \"name\": \"showFacebookLogin\",\n \"displayName\": \"Sign in with Facebook\",\n \"type\": \"BOOLEAN\",\n \"required\": false,\n \"groupId\": \"facebook\"\n },\n {\n \"name\": \"facebookButtonText\",\n \"displayName\": \"Facebook Button Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"Facebook ile kayıt ol\",\n \"groupId\": \"facebook\"\n },\n {\n \"name\": \"dividerText\",\n \"displayName\": \"Separator Text\",\n \"type\": \"TEXT\",\n \"required\": false,\n \"defaultValue\": \"veya\",\n \"groupId\": \"socialLogin\"\n }\n ],\n \"propGroups\": [\n {\n \"id\": \"content\",\n \"name\": \"Content\",\n \"description\": \"Page başlığı ve açıklama\"\n },\n {\n \"id\": \"formFields\",\n \"name\": \"Form Alanları\",\n \"description\": \"Register formu etiket ve placeholder metinleri\",\n \"children\": [\n {\n \"id\": \"firstName\",\n \"name\": \"Name\"\n },\n {\n \"id\": \"lastName\",\n \"name\": \"Last Name\"\n },\n {\n \"id\": \"email\",\n \"name\": \"Email\"\n },\n {\n \"id\": \"password\",\n \"name\": \"Password\"\n }\n ]\n },\n {\n \"id\": \"buttons\",\n \"name\": \"Buttons\",\n \"description\": \"Button ve link metinleri\"\n },\n {\n \"id\": \"consents\",\n \"name\": \"Confirmation Texts\",\n \"description\": \"İletişim izni ve üyelik sözleşmesi\",\n \"children\": [\n {\n \"id\": \"marketing-consent\",\n \"name\": \"İletişim Permission\"\n },\n {\n \"id\": \"agreement-consent\",\n \"name\": \"Membership Agreement\"\n }\n ]\n },\n {\n \"id\": \"socialLogin\",\n \"name\": \"Social Login\",\n \"description\": \"Google ve Facebook ile giriş ayarları\",\n \"children\": [\n {\n \"id\": \"google\",\n \"name\": \"Google\"\n },\n {\n \"id\": \"facebook\",\n \"name\": \"Facebook\"\n }\n ]\n }\n ]\n}"
@@ -19049,21 +18357,9 @@
19049
18357
  "filename": "styles.css",
19050
18358
  "content": ".register {\n width: 100%;\n}\n\n.register__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.register__container {\n width: 100%;\n max-width: 29rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.register__header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n text-align: center;\n}\n\n.register__title {\n color: var(--kombos-gray-900);\n margin: 0;\n}\n\n.register__subtitle {\n color: var(--kombos-gray-500);\n margin: 0;\n}\n\n.register__error-banner {\n padding: 0.75rem 1rem;\n background: rgba(255, 60, 72, 0.08);\n border: 1px solid var(--kombos-error);\n border-radius: 6px;\n color: var(--kombos-error);\n}\n\n/* Social Login */\n.register__social {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n/* Divider */\n.register__divider {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.register__divider-line {\n flex: 1;\n height: 1px;\n background: var(--kombos-gray-200);\n}\n\n.register__divider-text {\n color: var(--kombos-gray-500);\n white-space: nowrap;\n}\n\n/* Form */\n.register__form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n/* Consents */\n.register__consents {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.register__consent-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.register__consent-row {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n}\n\n.register__consent-row > .kombos-checkbox {\n margin-top: 3px;\n}\n\n.register__consent-error {\n color: var(--kombos-error);\n padding-left: 1.5rem;\n}\n\n.register__consent-label {\n color: var(--kombos-gray-700);\n margin-top: 1px;\n}\n\na.register__consent-label {\n text-decoration: none;\n}\n\na.register__consent-label:hover {\n color: var(--kombos-gray-900);\n}\n\n.register__submit-btn {\n width: 100%;\n}\n\n.register__footer {\n text-align: center;\n}\n\n.register__login-link {\n background: none;\n border: none;\n padding: 0;\n color: var(--kombos-gray-700);\n cursor: pointer;\n text-decoration: underline;\n}\n\n.register__login-link:hover {\n color: var(--kombos-gray-900);\n}\n\n@media (min-width: 768px) {\n .register__wrapper {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .register__wrapper {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n"
19051
18359
  },
19052
- {
19053
- "filename": "sub-components/PageLoader/index.tsx",
19054
- "content": "import { cx } from \"../../utils/cx\";\nimport SpinnerIcon from \"../SpinnerIcon\";\n\ninterface Props {\n className?: string;\n}\n\nexport default function PageLoader({ className }: Props) {\n return (\n <div className={cx(\"page-loader\", className)}>\n <SpinnerIcon />\n </div>\n );\n}\n"
19055
- },
19056
- {
19057
- "filename": "sub-components/PageLoader/styles.css",
19058
- "content": ".page-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 12.5rem;\n}\n\n.page-loader .kombos-spinner {\n font-size: 2rem;\n color: var(--kombos-gray-500);\n}\n"
19059
- },
19060
18360
  {
19061
18361
  "filename": "types.ts",
19062
18362
  "content": "import type { IkasNavigationLink } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n title?: string;\n subtitle?: string;\n firstNameLabel?: string;\n firstNamePlaceholder?: string;\n lastNameLabel?: string;\n lastNamePlaceholder?: string;\n emailLabel?: string;\n emailPlaceholder?: string;\n passwordLabel?: string;\n passwordPlaceholder?: string;\n submitButtonText?: string;\n submittingButtonText?: string;\n loginLinkText?: string;\n marketingConsentText?: string;\n marketingConsentLink?: IkasNavigationLink | null;\n agreementConsentText?: string;\n agreementConsentLink?: IkasNavigationLink | null;\n showGoogleLogin?: boolean;\n googleButtonText?: string;\n showFacebookLogin?: boolean;\n facebookButtonText?: string;\n dividerText?: string;\n}\n"
19063
- },
19064
- {
19065
- "filename": "utils/cx.ts",
19066
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
19067
18363
  }
19068
18364
  ]
19069
18365
  },
@@ -19121,21 +18417,9 @@
19121
18417
  "filename": "styles.css",
19122
18418
  "content": "/* ===== ProductDetailVariant ===== */\n\n.kombos-pd-variant {\n margin-top: var(--mobile-mt);\n margin-bottom: var(--mobile-mb);\n}\n\n/* ===== Desktop (>=1024px) ===== */\n@media (min-width: 1024px) {\n .kombos-pd-variant {\n margin-top: var(--desktop-mt, var(--mobile-mt));\n margin-bottom: var(--desktop-mb, var(--mobile-mb));\n }\n}\n"
19123
18419
  },
19124
- {
19125
- "filename": "sub-components/VariantBadge/index.tsx",
19126
- "content": "import {\n IkasProduct,\n IkasVariantValue,\n getIkasVariantValueThumbnailImage,\n isIkasVariantTypeColorSelection,\n selectVariantValue,\n getDisplayedProductVariantTypes,\n getProductVariantMainImage,\n} from \"@ikas/bp-storefront\";\nimport { observer } from \"@ikas/component-utils\";\nimport { BadgeImage, BadgeColor, BadgeText } from \"../Badge\";\nimport { cx } from \"../../utils/cx\";\n\ninterface Props {\n product: IkasProduct;\n size?: \"xs\" | \"s\" | \"m\" | \"l\";\n disableRoute?: boolean;\n scrollable?: boolean;\n showLabels?: boolean;\n useVariantImages?: boolean;\n onSelect?: () => void;\n}\n\nconst VariantBadge = observer(function VariantBadge({\n product,\n size = \"s\",\n disableRoute,\n scrollable,\n showLabels,\n useVariantImages,\n onSelect,\n}: Props) {\n const displayedVariantTypes = getDisplayedProductVariantTypes(product);\n if (displayedVariantTypes.length === 0) return null;\n\n function handleSelect(variantValue: IkasVariantValue) {\n selectVariantValue(product, variantValue, disableRoute);\n onSelect?.();\n }\n\n return (\n <div\n className={cx(\n \"kombos-variant-badge__groups\",\n size === \"l\" && \"kombos-variant-badge__groups--l\",\n )}\n >\n {displayedVariantTypes.map((dvt) => {\n const isColor = isIkasVariantTypeColorSelection(dvt.variantType);\n\n return (\n <div key={dvt.variantType.id} className=\"kombos-variant-badge__group\">\n {showLabels && (\n <span className={cx(\"kombos-variant-badge__label\", size === \"xs\" ? \"text-xs-medium\" : \"text-sm-medium\")}>\n {dvt.variantType.name}\n </span>\n )}\n <div\n className={cx(\n \"kombos-variant-badge__row\",\n scrollable && \"kombos-variant-badge__row--scrollable\",\n size === \"l\" && \"kombos-variant-badge__row--l\",\n )}\n >\n {dvt.displayedVariantValues.map((dvv) => {\n const isSelected = dvv.isSelected;\n const outOfStock = dvv.hasStock === false;\n const variantValue = dvv.variantValue;\n\n if (isColor) {\n // Variant product image\n if (useVariantImages) {\n const variantImage = getProductVariantMainImage(\n dvv.variant,\n )?.image;\n\n if (variantImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={variantImage}\n alt={variantValue.name}\n sizes=\"64px\"\n variantImg\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Thumbnail image\n const thumbImage =\n getIkasVariantValueThumbnailImage(variantValue);\n\n if (thumbImage) {\n return (\n <BadgeImage\n key={variantValue.id}\n image={thumbImage}\n alt={variantValue.name}\n sizes=\"(max-width: 1024px) 100vw, 100px\"\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n\n // Color swatch\n const colorCode = variantValue.colorCode;\n if (colorCode) {\n return (\n <BadgeColor\n key={variantValue.id}\n colorCode={colorCode}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n aria-label={variantValue.name}\n />\n );\n }\n }\n\n // Text badge (fallback)\n return (\n <BadgeText\n key={variantValue.id}\n size={size}\n selected={isSelected}\n outOfStock={outOfStock}\n onClick={() => handleSelect(variantValue)}\n >\n {variantValue.name}\n </BadgeText>\n );\n })}\n </div>\n </div>\n );\n })}\n </div>\n );\n});\n\nexport default VariantBadge;\n"
19127
- },
19128
- {
19129
- "filename": "sub-components/VariantBadge/styles.css",
19130
- "content": "/* ===== Variant Badge Layout ===== */\n\n/* ---- Layout ---- */\n.kombos-variant-badge__groups {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.kombos-variant-badge__groups--l {\n gap: 1.5rem;\n}\n\n.kombos-variant-badge__group {\n display: flex;\n flex-direction: column;\n}\n\n.kombos-variant-badge__label {\n color: var(--kombos-gray-900);\n margin-bottom: 0.375rem;\n}\n\n.kombos-variant-badge__row {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.kombos-variant-badge__row--l {\n gap: 0.5rem;\n}\n\n.kombos-variant-badge__row--scrollable {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n}\n\n.kombos-variant-badge__row--scrollable::-webkit-scrollbar {\n display: none;\n}\n\n.kombos-variant-badge__row--scrollable .kombos-badge {\n flex-shrink: 0;\n}\n"
19131
- },
19132
18420
  {
19133
18421
  "filename": "types.ts",
19134
18422
  "content": "import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n product?: IkasProduct | null;\n mobileMarginTop?: MarginTopStyleType;\n mobileMarginBottom?: MarginBottomStyleType;\n desktopMarginTop?: MarginTopStyleType;\n desktopMarginBottom?: MarginBottomStyleType;\n /** Renk varyantı için ürün görsellerini kullan. */\n useVariantImages?: boolean;\n}\n"
19135
- },
19136
- {
19137
- "filename": "utils/cx.ts",
19138
- "content": "// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function cx(...classes: any[]): string {\n return classes.filter(Boolean).join(\" \");\n}\n"
19139
18423
  }
19140
18424
  ]
19141
18425
  }