@sonic-equipment/ui 0.0.69 → 0.0.70
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.
- package/dist/index.d.ts +36 -41
- package/dist/index.js +282 -281
- package/dist/src/global-search/global-search-provider/{global-search-container.d.ts → global-search-provider.d.ts} +3 -1
- package/dist/src/global-search/global-search.d.ts +2 -8
- package/dist/src/index.d.ts +3 -5
- package/dist/src/intl/translation-id.d.ts +1 -1
- package/dist/src/shared/api/shop/hooks/translation/use-fetch-translations.d.ts +1 -1
- package/dist/src/shared/api/shop/hooks/wishlist/use-create-wishlist.d.ts +5 -0
- package/dist/src/shared/api/shop/hooks/wishlist/use-fetch-all-wishlists-items.d.ts +2 -5
- package/dist/src/shared/api/shop/hooks/wishlist/wishlist.stories.d.ts +0 -1
- package/dist/src/shared/api/shop/model/shop.model.d.ts +5 -0
- package/dist/src/shared/api/shop/services/translation-service.d.ts +1 -1
- package/dist/src/shared/api/shop/services/wishlist-service.d.ts +12 -17
- package/dist/src/shared/hooks/use-debounced-callback.d.ts +1 -1
- package/dist/styles.css +36 -38
- package/package.json +1 -1
- package/dist/src/global-search/search-root/search-root.d.ts +0 -1
- package/dist/src/shared/api/shop/hooks/wishlist/use-add-wishlist.d.ts +0 -5
- package/dist/src/shared/api/shop/hooks/wishlist/use-create-current-wishlist.d.ts +0 -1
- package/dist/src/shared/api/shop/hooks/wishlist/use-remove-wishlist-item-from-wishlist.d.ts +0 -4
- /package/dist/src/shared/api/shop/hooks/wishlist/{use-delete-wishlist-item.d.ts → use-delete-wishlist-item-from-wishlist.d.ts} +0 -0
package/dist/index.js
CHANGED
|
@@ -12,14 +12,14 @@ import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
|
|
|
12
12
|
import algoliasearch from 'algoliasearch';
|
|
13
13
|
import aa from 'search-insights';
|
|
14
14
|
import ReactDOM from 'react-dom';
|
|
15
|
+
import { Transition, TransitionGroup } from 'react-transition-group';
|
|
15
16
|
import { createAutocomplete } from '@algolia/autocomplete-core';
|
|
16
17
|
import { getAlgoliaResults, parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
|
|
17
18
|
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
|
|
18
19
|
import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
|
|
19
|
-
import { TransitionGroup, Transition } from 'react-transition-group';
|
|
20
20
|
|
|
21
21
|
const environments = ['sandbox', 'production', 'local'];
|
|
22
|
-
const localUrls = /
|
|
22
|
+
const localUrls = /local.com/i;
|
|
23
23
|
const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com|sandbox|accept|test/i;
|
|
24
24
|
const productionUrls = /sonic-equipment.com|production/i;
|
|
25
25
|
let environmentUrl;
|
|
@@ -568,11 +568,11 @@ async function addProductToCurrentCart(productOrderData) {
|
|
|
568
568
|
return body;
|
|
569
569
|
}
|
|
570
570
|
|
|
571
|
-
async function fetchTranslations() {
|
|
571
|
+
async function fetchTranslations(languageCode) {
|
|
572
572
|
const translations = {};
|
|
573
573
|
const { body } = await request({
|
|
574
574
|
credentials: 'include',
|
|
575
|
-
url: `${config.SHOP_API_URL}/api/v1/translationdictionaries?page=1&pageSize=9999`,
|
|
575
|
+
url: `${config.SHOP_API_URL}/api/v1/translationdictionaries?page=1&pageSize=9999&languageCode=${languageCode || 'en'}`,
|
|
576
576
|
});
|
|
577
577
|
body.translationDictionaries?.forEach(dictionary => {
|
|
578
578
|
translations[dictionary.keyword] = dictionary.translation;
|
|
@@ -580,32 +580,17 @@ async function fetchTranslations() {
|
|
|
580
580
|
return translations;
|
|
581
581
|
}
|
|
582
582
|
|
|
583
|
-
async function
|
|
583
|
+
async function getWishList({ wishListId, }) {
|
|
584
584
|
const { body } = await request({
|
|
585
|
-
|
|
586
|
-
headers: {
|
|
587
|
-
'Content-Type': 'application/json',
|
|
588
|
-
},
|
|
589
|
-
method: 'POST',
|
|
590
|
-
url: `${config.SHOP_API_URL}/api/v1/wishlists`,
|
|
585
|
+
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}`,
|
|
591
586
|
});
|
|
592
587
|
return body;
|
|
593
588
|
}
|
|
594
|
-
async function
|
|
595
|
-
await request({
|
|
596
|
-
|
|
597
|
-
headers: {
|
|
598
|
-
'Content-Type': 'application/json',
|
|
599
|
-
},
|
|
600
|
-
method: 'POST',
|
|
601
|
-
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}/wishlistlines`,
|
|
602
|
-
});
|
|
603
|
-
}
|
|
604
|
-
async function removeWishListItemFromWishList({ wishListId, wishListItemId, }) {
|
|
605
|
-
await request({
|
|
606
|
-
method: 'DELETE',
|
|
607
|
-
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}/wishlistlines/${wishListItemId}`,
|
|
589
|
+
async function getWishLists() {
|
|
590
|
+
const { body } = await request({
|
|
591
|
+
url: `${config.SHOP_API_URL}/api/v1/wishlists?page=1&pageSize=999`,
|
|
608
592
|
});
|
|
593
|
+
return body;
|
|
609
594
|
}
|
|
610
595
|
class WishListNameAlreadyExistsError extends Error {
|
|
611
596
|
constructor() {
|
|
@@ -613,10 +598,10 @@ class WishListNameAlreadyExistsError extends Error {
|
|
|
613
598
|
this.name = 'AddWishListError';
|
|
614
599
|
}
|
|
615
600
|
}
|
|
616
|
-
async function
|
|
601
|
+
async function createWishList(args) {
|
|
617
602
|
try {
|
|
618
603
|
const { body } = await request({
|
|
619
|
-
body: { name },
|
|
604
|
+
body: args ? { name: args.name } : {},
|
|
620
605
|
headers: {
|
|
621
606
|
'Content-Type': 'application/json',
|
|
622
607
|
},
|
|
@@ -633,29 +618,28 @@ async function addWishList({ name, }) {
|
|
|
633
618
|
throw error;
|
|
634
619
|
}
|
|
635
620
|
}
|
|
636
|
-
async function deleteWishListItemFromWishList({ wishListId, wishListItemId, }) {
|
|
637
|
-
await request({
|
|
638
|
-
method: 'DELETE',
|
|
639
|
-
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}/wishlistlines/${wishListItemId}`,
|
|
640
|
-
});
|
|
641
|
-
}
|
|
642
621
|
async function deleteWishList({ wishListId, }) {
|
|
643
622
|
await request({
|
|
644
623
|
method: 'DELETE',
|
|
645
624
|
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}`,
|
|
646
625
|
});
|
|
647
626
|
}
|
|
648
|
-
async function
|
|
627
|
+
async function addWishListItemToWishList({ productId, wishListId, }) {
|
|
649
628
|
const { body } = await request({
|
|
650
|
-
|
|
629
|
+
body: { productId, qtyOrdered: 1, unitOfMeasure: '' },
|
|
630
|
+
headers: {
|
|
631
|
+
'Content-Type': 'application/json',
|
|
632
|
+
},
|
|
633
|
+
method: 'POST',
|
|
634
|
+
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}/wishlistlines`,
|
|
651
635
|
});
|
|
652
636
|
return body;
|
|
653
637
|
}
|
|
654
|
-
async function
|
|
655
|
-
|
|
656
|
-
|
|
638
|
+
async function deleteWishListItemFromWishList({ wishListId, wishListItemId, }) {
|
|
639
|
+
await request({
|
|
640
|
+
method: 'DELETE',
|
|
641
|
+
url: `${config.SHOP_API_URL}/api/v1/wishlists/${wishListId}/wishlistlines/${wishListItemId}`,
|
|
657
642
|
});
|
|
658
|
-
return body;
|
|
659
643
|
}
|
|
660
644
|
async function getWishListItemsByWishListId({ wishListId, }) {
|
|
661
645
|
const { body } = await request({
|
|
@@ -792,10 +776,10 @@ function useUpdateCartLineById() {
|
|
|
792
776
|
});
|
|
793
777
|
}
|
|
794
778
|
|
|
795
|
-
function useFetchTranslations() {
|
|
779
|
+
function useFetchTranslations(languagCode) {
|
|
796
780
|
return useQuery({
|
|
797
781
|
gcTime: 1 * TIME.DAY,
|
|
798
|
-
queryFn: fetchTranslations,
|
|
782
|
+
queryFn: () => fetchTranslations(languagCode),
|
|
799
783
|
queryKey: ['translations'],
|
|
800
784
|
staleTime: 1 * TIME.DAY,
|
|
801
785
|
});
|
|
@@ -805,22 +789,24 @@ function useAddWishListItemToCurrentWishList() {
|
|
|
805
789
|
const queryClient = useQueryClient();
|
|
806
790
|
return useMutation({
|
|
807
791
|
mutationFn: async ({ productId }) => {
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
'current',
|
|
811
|
-
]);
|
|
792
|
+
const wishLists = queryClient.getQueryData(['wishlists']) || [];
|
|
793
|
+
let wishList = wishLists[0];
|
|
812
794
|
if (!wishList) {
|
|
813
795
|
wishList = await createWishList();
|
|
814
|
-
queryClient.
|
|
815
|
-
queryClient.setQueryData(['wishlist', 'current'], wishList);
|
|
796
|
+
queryClient.setQueryData(['wishlists'], [...wishLists, wishList]);
|
|
816
797
|
}
|
|
817
|
-
await addWishListItemToWishList({
|
|
798
|
+
const wishListItem = await addWishListItemToWishList({
|
|
818
799
|
productId,
|
|
819
800
|
wishListId: wishList.id,
|
|
820
801
|
});
|
|
821
|
-
queryClient.
|
|
822
|
-
|
|
823
|
-
|
|
802
|
+
const wishListLines = queryClient.getQueryData(['wishlistlines']) || [];
|
|
803
|
+
queryClient.setQueryData(['wishlistlines'], [
|
|
804
|
+
...wishListLines,
|
|
805
|
+
{
|
|
806
|
+
wishList,
|
|
807
|
+
wishListItem,
|
|
808
|
+
},
|
|
809
|
+
]);
|
|
824
810
|
},
|
|
825
811
|
});
|
|
826
812
|
}
|
|
@@ -829,37 +815,39 @@ function useAddWishListItemToWishList() {
|
|
|
829
815
|
const queryClient = useQueryClient();
|
|
830
816
|
return useMutation({
|
|
831
817
|
mutationFn: async ({ productId, wishListId }) => {
|
|
832
|
-
|
|
833
|
-
|
|
818
|
+
let wishLists = queryClient.getQueryData(['wishlists']);
|
|
819
|
+
if (!wishLists) {
|
|
820
|
+
wishLists = (await getWishLists()).wishListCollection || [];
|
|
821
|
+
queryClient.setQueryData(['wishlists'], wishLists);
|
|
822
|
+
}
|
|
823
|
+
const wishList = wishLists.find(wishList => wishList.id === wishListId);
|
|
824
|
+
if (!wishList)
|
|
825
|
+
throw new Error();
|
|
826
|
+
const wishListItem = await addWishListItemToWishList({
|
|
827
|
+
productId,
|
|
828
|
+
wishListId,
|
|
829
|
+
});
|
|
830
|
+
const wishListLines = queryClient.getQueryData(['wishlistlines']) || [];
|
|
831
|
+
queryClient.setQueryData(['wishlistlines'], [
|
|
832
|
+
...wishListLines,
|
|
833
|
+
{
|
|
834
|
+
wishList,
|
|
835
|
+
wishListItem,
|
|
836
|
+
},
|
|
837
|
+
]);
|
|
834
838
|
},
|
|
835
839
|
});
|
|
836
840
|
}
|
|
837
841
|
|
|
838
|
-
function
|
|
842
|
+
function useCreateWishList() {
|
|
839
843
|
const queryClient = useQueryClient();
|
|
840
844
|
return useMutation({
|
|
841
845
|
mutationFn: async ({ name }) => {
|
|
842
|
-
const
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
}
|
|
848
|
-
|
|
849
|
-
function useCreateCurrentWishList() {
|
|
850
|
-
const queryClient = useQueryClient();
|
|
851
|
-
return useMutation({
|
|
852
|
-
mutationFn: async () => {
|
|
853
|
-
const currentWishList = queryClient.getQueryData([
|
|
854
|
-
'wishlist',
|
|
855
|
-
'current',
|
|
856
|
-
]);
|
|
857
|
-
if (currentWishList)
|
|
858
|
-
return currentWishList.id;
|
|
859
|
-
const wishList = await createWishList();
|
|
860
|
-
queryClient.removeQueries({ queryKey: ['wishlists'] });
|
|
861
|
-
queryClient.setQueryData(['wishlist', 'current'], wishList);
|
|
862
|
-
return wishList.id;
|
|
846
|
+
const createdWishList = await createWishList({ name });
|
|
847
|
+
// Add to cache
|
|
848
|
+
const wishLists = queryClient.getQueryData(['wishlists']) || [];
|
|
849
|
+
queryClient.setQueryData(['wishlists'], [...wishLists, createdWishList]);
|
|
850
|
+
return createdWishList.id;
|
|
863
851
|
},
|
|
864
852
|
});
|
|
865
853
|
}
|
|
@@ -869,7 +857,10 @@ function useDeleteWishListItemFromWishList() {
|
|
|
869
857
|
return useMutation({
|
|
870
858
|
mutationFn: async ({ wishListId, wishListItemId }) => {
|
|
871
859
|
await deleteWishListItemFromWishList({ wishListId, wishListItemId });
|
|
872
|
-
queryClient.
|
|
860
|
+
const wishListLines = queryClient.getQueryData(['wishlistlines']) || [];
|
|
861
|
+
if (wishListLines.find(item => item.wishListItem.id === wishListItemId)) {
|
|
862
|
+
queryClient.setQueryData(['wishlistlines'], wishListLines.filter(line => line.wishListItem.id !== wishListItemId));
|
|
863
|
+
}
|
|
873
864
|
},
|
|
874
865
|
});
|
|
875
866
|
}
|
|
@@ -879,14 +870,17 @@ function useFetchAllWishListsItems({ enabled = true } = { enabled: true }) {
|
|
|
879
870
|
return useQuery({
|
|
880
871
|
enabled,
|
|
881
872
|
queryFn: async () => {
|
|
882
|
-
|
|
873
|
+
let wishLists =
|
|
883
874
|
// Reuse existing data if available
|
|
884
|
-
queryClient.getQueryData(['wishlists'])
|
|
885
|
-
|
|
886
|
-
(await getWishLists());
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
875
|
+
queryClient.getQueryData(['wishlists']);
|
|
876
|
+
if (wishLists === undefined) {
|
|
877
|
+
wishLists = (await getWishLists()).wishListCollection || [];
|
|
878
|
+
// Update the cache with the new or existing data
|
|
879
|
+
queryClient.setQueryData(['wishlists'], wishLists);
|
|
880
|
+
}
|
|
881
|
+
if (wishLists.length === 0)
|
|
882
|
+
return [];
|
|
883
|
+
const wishListLines = await Promise.all(wishLists.map(async (wishList) => {
|
|
890
884
|
return ((await getWishListItemsByWishListId({ wishListId: wishList.id }))
|
|
891
885
|
.wishListLines || []).map(wishListItem => ({
|
|
892
886
|
wishList,
|
|
@@ -895,7 +889,7 @@ function useFetchAllWishListsItems({ enabled = true } = { enabled: true }) {
|
|
|
895
889
|
}));
|
|
896
890
|
return wishListLines.flatMap(wishListDetails => wishListDetails);
|
|
897
891
|
},
|
|
898
|
-
queryKey: ['
|
|
892
|
+
queryKey: ['wishlistlines'],
|
|
899
893
|
});
|
|
900
894
|
}
|
|
901
895
|
|
|
@@ -906,17 +900,6 @@ function useFetchWishLists() {
|
|
|
906
900
|
});
|
|
907
901
|
}
|
|
908
902
|
|
|
909
|
-
function useRemoveWishListItemFromCurrentWishList() {
|
|
910
|
-
const queryClient = useQueryClient();
|
|
911
|
-
return useMutation({
|
|
912
|
-
mutationFn: async ({ wishListId, wishListItemId }) => {
|
|
913
|
-
await removeWishListItemFromWishList({ wishListId, wishListItemId });
|
|
914
|
-
queryClient.removeQueries({ queryKey: ['wishlists'] });
|
|
915
|
-
queryClient.removeQueries({ queryKey: ['wishlist'] });
|
|
916
|
-
},
|
|
917
|
-
});
|
|
918
|
-
}
|
|
919
|
-
|
|
920
903
|
/* eslint-disable sort-keys-fix/sort-keys-fix */
|
|
921
904
|
const breakpoints$1 = {
|
|
922
905
|
sm: 0,
|
|
@@ -987,15 +970,16 @@ function useIsBreakpoint(breakpoint) {
|
|
|
987
970
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
988
971
|
function useDebouncedCallback(func, delay) {
|
|
989
972
|
const timeoutId = useRef();
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
973
|
+
return useCallback(function debounced(...args) {
|
|
974
|
+
return new Promise(resolve => {
|
|
975
|
+
if (typeof window === 'undefined')
|
|
976
|
+
return resolve(func(...args));
|
|
977
|
+
clearTimeout(timeoutId.current);
|
|
978
|
+
timeoutId.current = setTimeout(() => {
|
|
979
|
+
resolve(func(...args));
|
|
980
|
+
}, delay);
|
|
981
|
+
});
|
|
997
982
|
}, [delay, func]);
|
|
998
|
-
return debouncedCallback;
|
|
999
983
|
}
|
|
1000
984
|
|
|
1001
985
|
const useDisclosure = (initialState = false) => {
|
|
@@ -1196,7 +1180,7 @@ function useNavigate() {
|
|
|
1196
1180
|
};
|
|
1197
1181
|
}
|
|
1198
1182
|
|
|
1199
|
-
var styles$
|
|
1183
|
+
var styles$R = {"link":"link-module-xLqBn","primary":"link-module-bGD6u","secondary":"link-module-v31wH","has-underline":"link-module-UuCEp"};
|
|
1200
1184
|
|
|
1201
1185
|
function Link({ children, className, color = 'primary', hasUnderline, onClick: _onClick, ...props }) {
|
|
1202
1186
|
function onClick(e) {
|
|
@@ -1205,7 +1189,7 @@ function Link({ children, className, color = 'primary', hasUnderline, onClick: _
|
|
|
1205
1189
|
return;
|
|
1206
1190
|
e.preventDefault();
|
|
1207
1191
|
}
|
|
1208
|
-
return (jsx(Link$1, { className: clsx({ [styles$
|
|
1192
|
+
return (jsx(Link$1, { className: clsx({ [styles$R['has-underline']]: hasUnderline }, styles$R['link'], styles$R[color], className),
|
|
1209
1193
|
// Workaround for adobe/react-spectrum #963
|
|
1210
1194
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
1211
1195
|
// @ts-ignore
|
|
@@ -1300,22 +1284,22 @@ function SolidHomeIcon(props) {
|
|
|
1300
1284
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M15.039782,22 C14.6690193,22 14.3684378,21.6994185 14.3684378,21.3286559 L14.3684378,15.6029043 L9.34495251,15.6029043 L9.34495251,21.3286559 C9.34495251,21.6994185 9.04437101,22 8.67345678,22 L3.67134415,22 C3.3005815,22 3,21.6994185 3,21.3286559 L3,9.79560307 C3,9.60127857 3.08412644,9.41665514 3.23055192,9.28917706 L11.4158271,2.16495603 C11.6686612,1.94501466 12.0447291,1.94501466 12.2975632,2.16495603 L20.4828384,9.28917706 C20.6292639,9.41665514 20.7133903,9.60127857 20.7133903,9.79560307 L20.7133903,21.3286559 C20.7133903,21.6994185 20.4128088,22 20.0418946,22 L15.039782,22 Z", fillRule: "evenodd" }) }));
|
|
1301
1285
|
}
|
|
1302
1286
|
|
|
1303
|
-
var styles$
|
|
1287
|
+
var styles$Q = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
|
|
1304
1288
|
|
|
1305
1289
|
function BreadcrumbShort({ links }) {
|
|
1306
1290
|
const homeLink = links[0];
|
|
1307
1291
|
const previousLink = links[links.length - 2];
|
|
1308
|
-
return (jsx(Breadcrumbs, { className: styles$
|
|
1292
|
+
return (jsx(Breadcrumbs, { className: styles$Q.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$Q.breadcrumb, children: jsxs(RouteLink, { className: styles$Q.link, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$Q.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(SolidHomeIcon, { className: styles$Q.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
|
|
1309
1293
|
}
|
|
1310
1294
|
function BreadcrumbLongItem({ index, isDisabled, link, }) {
|
|
1311
|
-
return (jsx(Breadcrumb$1, { className: styles$
|
|
1295
|
+
return (jsx(Breadcrumb$1, { className: styles$Q.breadcrumb, children: jsxs(RouteLink, { className: styles$Q.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$Q['previous-icon'], styles$Q.icon) }), link.label] }) }, index));
|
|
1312
1296
|
}
|
|
1313
1297
|
function BreadcrumbLong({ links }) {
|
|
1314
1298
|
const linksWithoutFirst = links.slice(1);
|
|
1315
1299
|
const homeLink = links[0];
|
|
1316
1300
|
if (!homeLink)
|
|
1317
1301
|
return null;
|
|
1318
|
-
return (jsxs(Breadcrumbs, { className: styles$
|
|
1302
|
+
return (jsxs(Breadcrumbs, { className: styles$Q.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$Q.breadcrumb, children: jsx(RouteLink, { className: styles$Q.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$Q['home-icon'], styles$Q.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
|
|
1319
1303
|
}
|
|
1320
1304
|
function Breadcrumb({ links }) {
|
|
1321
1305
|
const { lg } = useBreakpoint();
|
|
@@ -1324,10 +1308,10 @@ function Breadcrumb({ links }) {
|
|
|
1324
1308
|
return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
|
|
1325
1309
|
}
|
|
1326
1310
|
|
|
1327
|
-
var styles$
|
|
1311
|
+
var styles$P = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
|
|
1328
1312
|
|
|
1329
1313
|
function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', type = 'button', }) {
|
|
1330
|
-
return (jsx(Button$1, { className: clsx(styles$
|
|
1314
|
+
return (jsx(Button$1, { className: clsx(styles$P['icon-button'], styles$P[size], styles$P[color], className), isDisabled: isDisabled,
|
|
1331
1315
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
1332
1316
|
// @ts-expect-error
|
|
1333
1317
|
onClick: e => e.preventDefault(), onPress: onPress, type: type, children: children }));
|
|
@@ -1341,21 +1325,21 @@ function StrokeFavoriteIcon(props) {
|
|
|
1341
1325
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.33319295,3.33090958 C5.12714802,3.33090958 3.33232058,5.12348359 3.33232058,7.32679321 C3.33232058,8.18447047 3.64878056,9.03643889 4.29989998,9.93107334 L11.9997744,20.2227497 L19.7053643,9.92401241 C20.351069,9.03643889 20.6673786,8.1846207 20.6673786,7.32679321 C20.6673786,5.12348359 18.8727016,3.33090958 16.6666566,3.33090958 C14.8537801,3.33090958 13.1222748,4.56251549 12.6388611,6.19569283 C12.5552338,6.47843037 12.2951771,6.67253074 11.9999248,6.67253074 C11.7046724,6.67253074 11.4447662,6.47843037 11.3609885,6.19569283 C10.8775748,4.56251549 9.14606944,3.33090958 7.33319295,3.33090958 M11.9997744,22 L11.9997744,22 C11.7898038,22 11.5918659,21.9008466 11.4662746,21.7327364 L3.22718487,10.720545 C2.41106707,9.59905954 2,8.45954615 2,7.32679321 C2,4.3895979 4.39240135,2 7.33319295,2 C9.22488362,2 11.0018124,2.98206975 11.9999248,4.46786903 C12.9978868,2.98206975 14.774966,2 16.6666566,2 C19.6072978,2 22,4.3895979 22,7.32679321 C22,8.45969638 21.5887825,9.59920978 20.777929,10.7136343 L12.5334246,21.7327364 C12.4076829,21.9008466 12.2098954,22 11.9997744,22", fillRule: "evenodd" }) }));
|
|
1342
1326
|
}
|
|
1343
1327
|
|
|
1344
|
-
var styles$
|
|
1328
|
+
var styles$O = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
|
|
1345
1329
|
|
|
1346
1330
|
function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
|
|
1347
|
-
return (jsx(IconButton, { className: clsx(styles$
|
|
1348
|
-
[styles$
|
|
1331
|
+
return (jsx(IconButton, { className: clsx(styles$O['favorite-button'], {
|
|
1332
|
+
[styles$O['is-favorite']]: isFavorite,
|
|
1349
1333
|
}), color: "secondary", isDisabled: isDisabled, onPress: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
|
|
1350
1334
|
}
|
|
1351
1335
|
|
|
1352
|
-
var styles$
|
|
1336
|
+
var styles$N = {"field-error":"field-error-module-FXnIg"};
|
|
1353
1337
|
|
|
1354
1338
|
function FieldError({ children }) {
|
|
1355
|
-
return (jsx(FieldError$1, { className: styles$
|
|
1339
|
+
return (jsx(FieldError$1, { className: styles$N['field-error'], children: children }));
|
|
1356
1340
|
}
|
|
1357
1341
|
|
|
1358
|
-
var styles$
|
|
1342
|
+
var styles$M = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
|
|
1359
1343
|
|
|
1360
1344
|
/**
|
|
1361
1345
|
* This component is used to create an input that grows as the user types.
|
|
@@ -1371,20 +1355,20 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
|
|
|
1371
1355
|
? onChange?.(event)
|
|
1372
1356
|
: setUncontrolledValue(event.target.value);
|
|
1373
1357
|
const { pressProps } = usePress({});
|
|
1374
|
-
return (jsx("div", { className: clsx(styles$
|
|
1358
|
+
return (jsx("div", { className: clsx(styles$M['input-container'], styles$M[size], styles$M[_pseudo]), children: jsxs("div", { className: clsx({ [styles$M['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
|
|
1375
1359
|
e.preventDefault();
|
|
1376
1360
|
e.stopPropagation();
|
|
1377
1361
|
e.target.focus();
|
|
1378
|
-
} }), autoGrow && jsx("span", { className: styles$
|
|
1362
|
+
} }), autoGrow && jsx("span", { className: styles$M['shadow-input'], children: value })] }) }));
|
|
1379
1363
|
});
|
|
1380
1364
|
Input.displayName = 'Input';
|
|
1381
1365
|
|
|
1382
|
-
var styles$
|
|
1366
|
+
var styles$L = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
|
|
1383
1367
|
|
|
1384
1368
|
function Label({ children, isRequired }) {
|
|
1385
1369
|
if (!children)
|
|
1386
1370
|
return null;
|
|
1387
|
-
return (jsxs(Label$1, { className: styles$
|
|
1371
|
+
return (jsxs(Label$1, { className: styles$L.label, children: [children, isRequired && jsx("span", { className: styles$L.required, children: "*" })] }));
|
|
1388
1372
|
}
|
|
1389
1373
|
|
|
1390
1374
|
function StrokeCollapseIcon(props) {
|
|
@@ -1399,7 +1383,7 @@ function StrokeTrashIcon(props) {
|
|
|
1399
1383
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.77273912,6.04398453 L9.07201126,6.04398453 L9.07201126,4.11757519 C9.07201126,3.84748949 9.15880324,3.63104347 9.33238719,3.46823712 C9.50597114,3.30543077 9.73570292,3.22402759 10.0215825,3.22402759 L13.3263825,3.22402759 C13.6186194,3.22402759 13.850313,3.30543077 14.0214633,3.46823712 C14.1926136,3.63104347 14.2781888,3.84748949 14.2781888,4.11757519 L14.2781888,6.04398453 L15.5846129,6.04398453 L15.5846129,4.04352264 C15.5846129,3.40769382 15.3900697,2.90814951 15.0009834,2.5448897 C14.6118971,2.1816299 14.0799703,2 13.405203,2 L9.942762,2 C9.26869007,2 8.73850162,2.1816299 8.35219662,2.5448897 C7.96589162,2.90814951 7.77273912,3.40769382 7.77273912,4.04352264 L7.77273912,6.04398453 Z M3.60955531,6.6940676 L19.7561406,6.6940676 C19.9248076,6.6940676 20.0683931,6.6332263 20.186897,6.51154371 C20.305401,6.38986111 20.3646529,6.242352 20.3646529,6.06901638 C20.3646529,5.9003494 20.3052023,5.75537328 20.186301,5.63408801 C20.0673997,5.51280275 19.9240129,5.45216011 19.7561406,5.45216011 L3.60955531,5.45216011 C3.44734496,5.45216011 3.30519982,5.51300141 3.18311989,5.63468401 C3.06103996,5.75636661 3,5.90114406 3,6.06901638 C3,6.24314666 3.06103996,6.39085444 3.18311989,6.5121397 C3.30519982,6.63342497 3.44734496,6.6940676 3.60955531,6.6940676 Z M7.56920636,22 L15.8049825,22 C16.4210441,22 16.9252074,21.8108208 17.3174724,21.4324624 C17.7097373,21.0541041 17.9209684,20.5545101 17.9511655,19.9336805 L18.6066126,6.5283806 L17.2870766,6.5283806 L16.6578534,19.8059883 C16.6444435,20.0808419 16.5455825,20.3084381 16.3612707,20.4887766 C16.1769588,20.6691152 15.9469787,20.7592845 15.6713303,20.7592845 L7.68497866,20.7592845 C7.41479362,20.7592845 7.18757,20.6677246 7.00330778,20.4846047 C6.81904556,20.3014848 6.72015983,20.0752793 6.70665057,19.8059883 L6.05358753,6.5295726 L4.76996029,6.5295726 L5.41587138,19.9420245 C5.4468632,20.562854 5.65806942,21.0610573 6.04949005,21.4366344 C6.44091068,21.8122115 6.94748278,22 7.56920636,22 Z M9.00213069,19.1375783 C9.15957307,19.1375783 9.2862223,19.0920591 9.38207839,19.0010206 C9.47793448,18.9099822 9.5230812,18.7917017 9.51751857,18.6461793 L9.2314403,8.86811345 C9.22587767,8.72338566 9.17618647,8.60729053 9.0823667,8.51982806 C8.98854694,8.43236558 8.86649184,8.38863435 8.71620142,8.38863435 C8.55945437,8.38863435 8.43436962,8.43395491 8.34094719,8.52459603 C8.24752475,8.61523714 8.20081354,8.73371626 8.20081354,8.88003338 L8.48555081,18.6485633 C8.49121278,18.7988537 8.54055631,18.9179288 8.63358142,19.0057886 C8.72660652,19.0936484 8.84945628,19.1375783 9.00213069,19.1375783 Z M11.6876904,19.1375783 C11.8451328,19.1375783 11.9717821,19.0922578 12.0676381,19.0016166 C12.1634942,18.9109755 12.2114223,18.7924964 12.2114223,18.6461793 L12.2114223,8.88003338 C12.2114223,8.73451092 12.1634942,8.61623047 12.0676381,8.52519202 C11.9717821,8.43415357 11.8451328,8.38863435 11.6876904,8.38863435 C11.5310427,8.38863435 11.4032015,8.43415357 11.3041668,8.52519202 C11.205132,8.61623047 11.1556147,8.73451092 11.1556147,8.88003338 L11.1556147,18.6461793 C11.1556147,18.7924964 11.205132,18.9109755 11.3041668,19.0016166 C11.4032015,19.0922578 11.5310427,19.1375783 11.6876904,19.1375783 Z M14.3635653,19.1387703 C14.516339,19.1387703 14.6392384,19.0948404 14.7322635,19.0069806 C14.8252886,18.9191208 14.8745825,18.802827 14.8801451,18.6580992 L15.1662234,8.88122537 C15.1662234,8.73490825 15.1194873,8.6166278 15.0260152,8.52638402 C14.9325431,8.43614023 14.8070859,8.39101833 14.6496435,8.39101833 C14.4993531,8.39101833 14.3772732,8.4345509 14.2834037,8.52161604 C14.1895343,8.60868118 14.1398183,8.7277563 14.1342556,8.87884138 L13.8483264,18.6485633 C13.8483264,18.7932911 13.8948389,18.9111742 13.987864,19.0022126 C14.0808891,19.0932511 14.2061229,19.1387703 14.3635653,19.1387703 Z" }) }));
|
|
1400
1384
|
}
|
|
1401
1385
|
|
|
1402
|
-
var styles$
|
|
1386
|
+
var styles$K = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
|
|
1403
1387
|
|
|
1404
1388
|
/**
|
|
1405
1389
|
* This component is used to create a number field.
|
|
@@ -1407,7 +1391,7 @@ var styles$L = {"field":"number-field-module-gmnog","button-input-container":"nu
|
|
|
1407
1391
|
*/
|
|
1408
1392
|
function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
|
|
1409
1393
|
const inputRef = useRef(null);
|
|
1410
|
-
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
1394
|
+
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$K.field, styles$K[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$K['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled,
|
|
1411
1395
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
1412
1396
|
// @ts-expect-error
|
|
1413
1397
|
onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled,
|
|
@@ -1420,7 +1404,7 @@ function SolidCartIcon(props) {
|
|
|
1420
1404
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.89619008,16.6656848 C9.33405626,16.6656848 10.4996925,17.831321 10.4996925,19.2690253 C10.4996925,20.7068915 9.33405626,21.8725278 7.89619008,21.8725278 C6.45832389,21.8725278 5.29268766,20.7068915 5.29268766,19.2690253 C5.29268766,17.831321 6.45832389,16.6656848 7.89619008,16.6656848 Z M16.8207199,16.6656848 C18.2585861,16.6656848 19.4242223,17.831321 19.4242223,19.2690253 C19.4242223,20.7068915 18.2585861,21.8725278 16.8207199,21.8725278 C15.3828537,21.8725278 14.2172175,20.7068915 14.2172175,19.2690253 C14.2172175,17.831321 15.3828537,16.6656848 16.8207199,16.6656848 Z M7.89619008,18.0995047 C7.25122196,18.0995047 6.72650762,18.6242191 6.72650762,19.2690253 C6.72650762,19.9139935 7.25122196,20.4387078 7.89619008,20.4387078 C8.54115819,20.4387078 9.06587253,19.9139935 9.06587253,19.2690253 C9.06587253,18.6242191 8.54115819,18.0995047 7.89619008,18.0995047 Z M16.8207199,18.0995047 C16.1757518,18.0995047 15.6510375,18.6242191 15.6510375,19.2690253 C15.6510375,19.9139935 16.1757518,20.4387078 16.8207199,20.4387078 C17.465688,20.4387078 17.9904024,19.9139935 17.9904024,19.2690253 C17.9904024,18.6242191 17.465688,18.0995047 16.8207199,18.0995047 Z M4.58909785,3 C4.6054446,3 4.6206584,3.00372253 4.63668145,3.00485547 C4.65869291,3.00631211 4.68038067,3.0079306 4.70174473,3.01132943 C4.72958275,3.0158612 4.75628783,3.02233516 4.78299291,3.02994206 C4.8001489,3.03479753 4.81698119,3.03949115 4.83365164,3.04564141 C4.8622989,3.05616159 4.88948953,3.06862396 4.91619461,3.08254297 L4.956495,3.10439258 C4.98287638,3.12025378 5.00763927,3.13789532 5.03175477,3.15699349 L5.06736154,3.18645 C5.08921115,3.20603373 5.10911857,3.22707409 5.1283786,3.2492474 C5.13986987,3.26251902 5.1511993,3.27562878 5.16171948,3.28970964 C5.17806623,3.31155925 5.19230894,3.33421811 5.2060661,3.35768621 C5.21626258,3.37500405 5.22597352,3.39216004 5.23455152,3.41028712 C5.24555725,3.43326967 5.25462079,3.45706147 5.26319878,3.48150066 C5.27032014,3.50205548 5.27711779,3.52244845 5.28245881,3.54381251 C5.28860907,3.56825171 5.29249345,3.59317645 5.29605412,3.61858673 C5.29799631,3.63299129 5.30252808,3.64642476 5.30382287,3.66115301 L5.510504,6.30738355 L21.2869744,6.30772748 C21.3139222,6.30835464 21.3370666,6.31256272 21.3603729,6.3151523 C21.3861069,6.31790373 21.4120027,6.31936037 21.4369275,6.32486324 C21.4591008,6.32923316 21.4726961,6.33603082 21.4875862,6.34056259 C21.5163953,6.34914058 21.5452044,6.35723303 21.5722332,6.36920985 C21.5918169,6.37778785 21.6092966,6.38911728 21.6275855,6.39931376 C21.6497588,6.41145243 21.6722559,6.42278186 21.6928107,6.43718642 C21.711747,6.45029618 21.7280937,6.46583368 21.7455734,6.48072379 C21.763215,6.49577574 21.7815039,6.51001845 21.7976888,6.52668889 C21.8132263,6.54287379 21.8261742,6.56067718 21.8400932,6.57815686 C21.8551452,6.59676949 21.8706827,6.61473473 21.8836306,6.634804 C21.8954456,6.65293108 21.9043473,6.67251481 21.9145437,6.69161299 C21.9258732,6.71330075 21.9381737,6.73434111 21.9473991,6.75716182 C21.9559771,6.77868773 21.9614799,6.80134658 21.9679539,6.82368174 C21.9744279,6.8456932 21.9820348,6.86705726 21.9864047,6.89003981 C21.9915839,6.91658304 21.9925549,6.94393552 21.994659,6.97128799 C21.9959538,6.98909138 22,7.00608552 22,7.0242126 C21.9988671,7.05496391 21.994659,7.07794646 21.9922312,7.10109086 C21.9894798,7.1269867 21.9880232,7.15320623 21.9825203,7.17813097 L20.5915903,13.2322533 L20.587706,13.2487619 C20.5797754,13.2835594 20.5681222,13.3164147 20.555498,13.3486227 C20.5524229,13.3567151 20.5499951,13.3651313 20.5465963,13.3730619 C20.5299259,13.4117438 20.5096948,13.4483216 20.4870359,13.4827955 C20.4797527,13.4938012 20.4710129,13.5031884 20.4632441,13.5137086 C20.445117,13.5381478 20.4265044,13.5619396 20.4056259,13.5836274 C20.3944583,13.5952805 20.3823196,13.605477 20.3705046,13.6163208 C20.3505972,13.6344479 20.3302043,13.6517658 20.3083546,13.6674651 C20.2941119,13.6778235 20.2795455,13.6872107 20.2646554,13.6964361 C20.2424821,13.7101932 20.2198233,13.7223319 20.1963552,13.7334995 L20.148286,13.7550254 C20.1214191,13.7655456 20.0935811,13.7734762 20.0654194,13.7807594 C20.0513385,13.7843201 20.037905,13.7888518 20.0235005,13.7916033 C19.9798012,13.8000194 19.9351309,13.8053604 19.8898132,13.8053604 L6.09623539,13.8051986 L6.20774933,15.2317353 L19.411064,15.2317353 C19.8069466,15.2317353 20.1278931,15.5528437 20.1278931,15.9487262 C20.1278931,16.3446088 19.8069466,16.6657172 19.411064,16.6657172 L5.54384488,16.6657172 C5.49593759,16.6657172 5.44932509,16.660538 5.40384553,16.6514744 C5.38863173,16.6483993 5.37471272,16.6425728 5.35998446,16.6386884 C5.33052795,16.6307578 5.30090959,16.6231509 5.27290972,16.6116596 C5.25543003,16.6043764 5.23940699,16.5945036 5.22257469,16.5859256 C5.19910659,16.5741106 5.17547665,16.5627812 5.15362704,16.5485385 C5.13711844,16.5376946 5.12255203,16.5249086 5.10701453,16.5127699 C5.08694526,16.4972324 5.06687599,16.4821804 5.04874891,16.4647007 C5.03434435,16.4509436 5.02204383,16.4357298 5.00893406,16.4208397 C4.99226362,16.4019033 4.97575503,16.3834526 4.96118862,16.3628977 C4.94937364,16.3463891 4.93966271,16.3285858 4.92930437,16.3111061 C4.91668015,16.2899039 4.90437963,16.2688635 4.8940213,16.2462046 C4.88511961,16.2267828 4.87832195,16.2065516 4.87103875,16.1861587 C4.86310815,16.163338 4.8553394,16.1406791 4.84967468,16.1168873 C4.84433367,16.0950377 4.84109669,16.0728644 4.83785971,16.0502055 L4.82992911,16.0045641 L3.92600265,4.43381996 L2.7169909,4.43381996 C2.32110834,4.43381996 2,4.11287347 2,3.7169909 C2,3.32094649 2.32110834,3 2.7169909,3 Z", fillRule: "evenodd" }) }));
|
|
1421
1405
|
}
|
|
1422
1406
|
|
|
1423
|
-
var styles$
|
|
1407
|
+
var styles$J = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
|
|
1424
1408
|
|
|
1425
1409
|
function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
|
|
1426
1410
|
const [currentState, setState] = useState(initialState);
|
|
@@ -1508,7 +1492,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
|
|
|
1508
1492
|
e.key === 'Enter' && onConfirm(ensureNumber(updatedQuantity));
|
|
1509
1493
|
e.key === 'Escape' && onCancel();
|
|
1510
1494
|
};
|
|
1511
|
-
return (jsxs("div", { className: styles$
|
|
1495
|
+
return (jsxs("div", { className: styles$J['manual-input-container'], children: [jsx("div", { className: styles$J['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
|
|
1512
1496
|
maximumFractionDigits: 0,
|
|
1513
1497
|
style: 'decimal',
|
|
1514
1498
|
useGrouping: false,
|
|
@@ -1558,12 +1542,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1558
1542
|
return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
|
|
1559
1543
|
};
|
|
1560
1544
|
|
|
1561
|
-
var styles$
|
|
1545
|
+
var styles$I = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
|
|
1562
1546
|
|
|
1563
1547
|
function Tag({ children }) {
|
|
1564
1548
|
if (!children)
|
|
1565
1549
|
return null;
|
|
1566
|
-
return (jsxs("div", { className: styles$
|
|
1550
|
+
return (jsxs("div", { className: styles$I.tag, children: [jsx("div", { className: styles$I.body, children: children }), jsx("svg", { className: styles$I.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
|
|
1567
1551
|
}
|
|
1568
1552
|
|
|
1569
1553
|
const IntlContext = createContext({
|
|
@@ -1599,7 +1583,7 @@ function useFormattedMessage() {
|
|
|
1599
1583
|
|
|
1600
1584
|
const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
|
|
1601
1585
|
|
|
1602
|
-
var styles$
|
|
1586
|
+
var styles$H = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
|
|
1603
1587
|
|
|
1604
1588
|
const formatPrice = (price) => new Intl.NumberFormat('en-US', {
|
|
1605
1589
|
maximumFractionDigits: 2,
|
|
@@ -1612,22 +1596,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
|
|
|
1612
1596
|
const priceWithCurrency = formatPrice(price);
|
|
1613
1597
|
const [wholes, decimals] = priceWithCurrency.split('.');
|
|
1614
1598
|
const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
|
|
1615
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
1616
|
-
[styles$
|
|
1617
|
-
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$
|
|
1599
|
+
return (jsxs("div", { className: clsx(className, styles$H['product-price']), children: [jsx("span", { className: clsx(styles$H['original-price'], {
|
|
1600
|
+
[styles$H['is-hidden']]: !showOriginalPrice,
|
|
1601
|
+
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$H['current-price-wrapper'], children: [jsxs("div", { className: styles$H['current-price'], children: [jsx("span", { className: styles$H.wholes, children: wholes }), jsx("span", { className: styles$H.dot, children: "." }), jsx("span", { className: styles$H.decimals, children: decimals })] }), jsx("span", { className: styles$H.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
|
|
1618
1602
|
}
|
|
1619
1603
|
|
|
1620
|
-
var styles$
|
|
1604
|
+
var styles$G = {"product-sku":"product-sku-module-ITb8x"};
|
|
1621
1605
|
|
|
1622
1606
|
function ProductSku({ sku }) {
|
|
1623
|
-
return (jsx("p", { className: styles$
|
|
1607
|
+
return (jsx("p", { className: styles$G['product-sku'], "data-test-selector": "productNumber", children: sku }));
|
|
1624
1608
|
}
|
|
1625
1609
|
|
|
1626
1610
|
function isResponsiveImage(image) {
|
|
1627
1611
|
return Boolean(image.lg);
|
|
1628
1612
|
}
|
|
1629
1613
|
|
|
1630
|
-
var styles$
|
|
1614
|
+
var styles$F = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
|
|
1631
1615
|
|
|
1632
1616
|
function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
|
|
1633
1617
|
const [hasError, setHasError] = useState(false);
|
|
@@ -1654,22 +1638,22 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
|
|
|
1654
1638
|
const srcSet = !hasError
|
|
1655
1639
|
? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
|
|
1656
1640
|
: undefined;
|
|
1657
|
-
return (jsx("img", { alt: image.altText, className: clsx(styles$
|
|
1658
|
-
[styles$
|
|
1641
|
+
return (jsx("img", { alt: image.altText, className: clsx(styles$F.image, className, styles$F[fit], {
|
|
1642
|
+
[styles$F['has-error']]: hasError,
|
|
1659
1643
|
}), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
|
|
1660
1644
|
}
|
|
1661
1645
|
function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1662
1646
|
if (!isResponsiveImage(image))
|
|
1663
1647
|
return null;
|
|
1664
|
-
return (jsxs("picture", { className: clsx(styles$
|
|
1665
|
-
[styles$
|
|
1648
|
+
return (jsxs("picture", { className: clsx(styles$F.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$F[fit], {
|
|
1649
|
+
[styles$F['has-error']]: hasError,
|
|
1666
1650
|
}), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
|
|
1667
1651
|
}
|
|
1668
1652
|
|
|
1669
|
-
var styles$
|
|
1653
|
+
var styles$E = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
|
|
1670
1654
|
|
|
1671
1655
|
function ProductCard({ addToCartButton: AddToCartButton, areaSelected, favoriteButton: FavoriteButton, href, id, image, onClick, onMouseDown, onMouseMove, onPress, price, role, sku, tags, title, }) {
|
|
1672
|
-
return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$
|
|
1656
|
+
return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$E['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$E.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$E['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$E.content, children: [jsxs("div", { className: styles$E.top, children: [jsx("div", { className: styles$E.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$E.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$E.bottom, children: [jsx("div", { className: styles$E.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$E['add-to-cart-button'], children: AddToCartButton })] })] })] }));
|
|
1673
1657
|
}
|
|
1674
1658
|
|
|
1675
1659
|
/**
|
|
@@ -6981,7 +6965,7 @@ function GlyphsArrowBoldCapsLeftIcon(props) {
|
|
|
6981
6965
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd", transform: "matrix(-1 0 0 1 11 0)" }) }));
|
|
6982
6966
|
}
|
|
6983
6967
|
|
|
6984
|
-
var styles$
|
|
6968
|
+
var styles$D = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button":"carousel-module-kcqEE","is-locked":"carousel-module-uCrOA","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
|
|
6985
6969
|
|
|
6986
6970
|
function CarouselNavigationButton({ direction, isDisabled = false, }) {
|
|
6987
6971
|
const swiper = useSwiper();
|
|
@@ -6993,8 +6977,8 @@ function CarouselNavigationButton({ direction, isDisabled = false, }) {
|
|
|
6993
6977
|
swiper.slidePrev();
|
|
6994
6978
|
}
|
|
6995
6979
|
}
|
|
6996
|
-
return (jsx(Button$1, { className: clsx(styles$
|
|
6997
|
-
[styles$
|
|
6980
|
+
return (jsx(Button$1, { className: clsx(styles$D['navigation-button'], {
|
|
6981
|
+
[styles$D['is-locked']]: swiper.isLocked,
|
|
6998
6982
|
}), isDisabled: isDisabled, onPress: handleNavigation, children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
|
|
6999
6983
|
}
|
|
7000
6984
|
|
|
@@ -7011,13 +6995,13 @@ function Carousel({ breakpoints, className, hasNavigation = true, hasOverflow =
|
|
|
7011
6995
|
const showNavigation = hasNavigation && !isLocked;
|
|
7012
6996
|
if (slides.length === 0)
|
|
7013
6997
|
return null;
|
|
7014
|
-
return (jsx("div", { className: clsx(styles$
|
|
7015
|
-
[styles$
|
|
7016
|
-
[styles$
|
|
6998
|
+
return (jsx("div", { className: clsx(styles$D.carousel, className), children: jsxs(Swiper, { breakpoints: breakpoints, className: clsx(styles$D.swiper, {
|
|
6999
|
+
[styles$D['is-dragging']]: isDragging,
|
|
7000
|
+
[styles$D['has-overflow']]: hasOverflow,
|
|
7017
7001
|
}), freeMode: {
|
|
7018
7002
|
enabled: true,
|
|
7019
7003
|
sticky: true,
|
|
7020
|
-
}, modules: [freeMode], onSlideChange: swiper => handleSlideChange(swiper), onSliderMove: () => setIsDragging(true), onSwiper: swiper => setIsLocked(swiper.isLocked), onTouchEnd: () => setIsDragging(false), onUpdate: swiper => handleSlideChange(swiper), slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$
|
|
7004
|
+
}, modules: [freeMode], onSlideChange: swiper => handleSlideChange(swiper), onSliderMove: () => setIsDragging(true), onSwiper: swiper => setIsLocked(swiper.isLocked), onTouchEnd: () => setIsDragging(false), onUpdate: swiper => handleSlideChange(swiper), slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$D.slide, slideClasses), children: slide }, index))), showNavigation && (jsxs("div", { className: clsx(styles$D['navigation-buttons'], styles$D[navigationButtonsPosition]), children: [jsx("div", { className: clsx(styles$D['navigation-button-wrapper'], styles$D['navigation-button-prev']), children: jsx(CarouselNavigationButton, { direction: "previous", isDisabled: isBeginning }) }), jsx("div", { className: clsx(styles$D['navigation-button-wrapper'], styles$D['navigation-button-next']), children: jsx(CarouselNavigationButton, { direction: "next", isDisabled: isEnd }) })] }))] }) }));
|
|
7021
7005
|
}
|
|
7022
7006
|
|
|
7023
7007
|
function CategoryCarousel({ categoryCards }) {
|
|
@@ -7031,10 +7015,10 @@ function CategoryCarousel({ categoryCards }) {
|
|
|
7031
7015
|
}, slides: categoryCards, spaceBetween: 8 }));
|
|
7032
7016
|
}
|
|
7033
7017
|
|
|
7034
|
-
var styles$
|
|
7018
|
+
var styles$C = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","border-top":"accordion-module-J1-Eb","border-bottom":"accordion-module-4LI1K","indented":"accordion-module-6CcEH","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
|
|
7035
7019
|
|
|
7036
7020
|
function Accordion({ borderPosition = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
|
|
7037
|
-
return (jsx("div", { className: clsx({ [styles$
|
|
7021
|
+
return (jsx("div", { className: clsx({ [styles$C.indented]: indented }, styles$C.accordion, styles$C[color], styles$C[size], styles$C[`border-${borderPosition}`], hasLineSeparator && styles$C['with-seperators']), children: children &&
|
|
7038
7022
|
Children.map(children, child => {
|
|
7039
7023
|
return cloneElement(child, { size });
|
|
7040
7024
|
}) }));
|
|
@@ -7044,7 +7028,7 @@ function GlyphsChevronsSlimDownIcon(props) {
|
|
|
7044
7028
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M6,9 L1,4.06645029 C1.08169007,3.87890406 1.19817561,3.69487412 1.34945663,3.51436046 C1.50073764,3.3338468 1.68216803,3.16239331 1.89374779,3 L5.98800959,7.08347812 L9.9960307,3 C10.2121071,3.16649238 10.4031847,3.33794587 10.5692635,3.51436046 C10.7353424,3.69077505 10.8789212,3.87480499 11,4.06645029 L6,9 Z", fillRule: "evenodd" }) }));
|
|
7045
7029
|
}
|
|
7046
7030
|
|
|
7047
|
-
var styles$
|
|
7031
|
+
var styles$B = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI"};
|
|
7048
7032
|
|
|
7049
7033
|
const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen, onToggle, }) => {
|
|
7050
7034
|
const showAllRef = useRef(null);
|
|
@@ -7053,14 +7037,14 @@ const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen,
|
|
|
7053
7037
|
return;
|
|
7054
7038
|
showAllRef.current.style.setProperty('--initital-height', `${initialHeight}px`);
|
|
7055
7039
|
}, [initialHeight]);
|
|
7056
|
-
return (jsxs("div", { ref: showAllRef, className: clsx(styles$
|
|
7057
|
-
[styles$
|
|
7058
|
-
}), children: [jsx("div", { className: styles$
|
|
7059
|
-
[styles$
|
|
7060
|
-
}), children: children }) }), jsxs(RouteLink, { className: styles$
|
|
7040
|
+
return (jsxs("div", { ref: showAllRef, className: clsx(styles$B['show-all'], {
|
|
7041
|
+
[styles$B['is-open']]: isOpen,
|
|
7042
|
+
}), children: [jsx("div", { className: styles$B.panel, children: jsx("div", { className: clsx(styles$B.content, {
|
|
7043
|
+
[styles$B['has-transparency']]: hasTransparency,
|
|
7044
|
+
}), children: children }) }), jsxs(RouteLink, { className: styles$B.button, color: "secondary", onPress: () => onToggle(!isOpen), children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$B.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
|
|
7061
7045
|
};
|
|
7062
7046
|
|
|
7063
|
-
var styles$
|
|
7047
|
+
var styles$A = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
|
|
7064
7048
|
|
|
7065
7049
|
function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
7066
7050
|
const shownOptions = options.slice(0, amountShown);
|
|
@@ -7071,28 +7055,28 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
|
7071
7055
|
options.filter(option => option.isSelected).length === 0) {
|
|
7072
7056
|
return null;
|
|
7073
7057
|
}
|
|
7074
|
-
return (jsxs("div", { className: styles$
|
|
7058
|
+
return (jsxs("div", { className: styles$A['multi-select'], children: [jsx("div", { className: styles$A['filter-items'], children: shownOptions
|
|
7075
7059
|
.concat(isOpen ? [] : hiddenSelectedOptions)
|
|
7076
|
-
.map(option => (jsxs("div", { className: styles$
|
|
7060
|
+
.map(option => (jsxs("div", { className: styles$A['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$A['filter-items'], styles$A['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$A['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
|
|
7077
7061
|
}
|
|
7078
7062
|
|
|
7079
|
-
var styles$
|
|
7063
|
+
var styles$z = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
|
|
7080
7064
|
|
|
7081
7065
|
function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
|
|
7082
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
7066
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$z.checkbox, styles$z[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$z.box, children: jsx("svg", { "aria-hidden": "true", className: styles$z.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
|
|
7083
7067
|
}
|
|
7084
7068
|
|
|
7085
7069
|
function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
|
|
7086
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
7070
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$z.checkbox, styles$z['color-checkbox'], styles$z[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
|
|
7087
7071
|
'--selected-color': color,
|
|
7088
|
-
}, value: value, children: [jsx("div", { className: styles$
|
|
7072
|
+
}, value: value, children: [jsx("div", { className: styles$z.box }), children] }));
|
|
7089
7073
|
}
|
|
7090
7074
|
|
|
7091
7075
|
function StrokeCheckmarkIcon(props) {
|
|
7092
7076
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M10.8641425,17 C10.6636971,17 10.4855234,16.9548533 10.3296214,16.8645598 C10.1737194,16.7742664 10.0252413,16.6388262 9.88418708,16.4582393 L6.27839644,12.2189616 C6.09279881,11.9857035 6,11.744921 6,11.496614 C6,11.2332581 6.08723088,11.0094056 6.26169265,10.8250564 C6.43615442,10.6407073 6.65330364,10.5485327 6.91314031,10.5485327 C7.06904232,10.5485327 7.21195249,10.5823928 7.34187082,10.6501129 C7.47178916,10.717833 7.59985152,10.8382242 7.72605791,11.0112867 L10.8195991,14.7200903 L16.2405345,6.53047404 C16.4558278,6.17682468 16.7230883,6 17.0423163,6 C17.2873051,6 17.5081663,6.08088789 17.7048998,6.24266366 C17.9016333,6.40443943 18,6.61700527 18,6.88036117 C18,7.00075245 17.9721604,7.12302483 17.9164811,7.24717833 C17.8608018,7.37133183 17.7958426,7.48984199 17.7216036,7.6027088 L11.7884187,16.4469526 C11.5582777,16.8156509 11.2501856,17 10.8641425,17 Z", fillRule: "evenodd" }) }));
|
|
7093
7077
|
}
|
|
7094
7078
|
|
|
7095
|
-
var styles$
|
|
7079
|
+
var styles$y = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","solid":"select-module-IRd4F","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
|
|
7096
7080
|
|
|
7097
7081
|
function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, size = 'md', variant = 'outline', }) {
|
|
7098
7082
|
const selectRef = useRef(null);
|
|
@@ -7109,12 +7093,12 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
|
|
|
7109
7093
|
window.addEventListener('resize', updateWidth);
|
|
7110
7094
|
return () => window.removeEventListener('resize', updateWidth);
|
|
7111
7095
|
}, []);
|
|
7112
|
-
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$
|
|
7096
|
+
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$y.select, styles$y[size], styles$y[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$y.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$y.chevron })] }), jsx(Popover, { ref: ref =>
|
|
7113
7097
|
// Workaround for react/react-aria #1513
|
|
7114
|
-
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$
|
|
7098
|
+
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$y.popover, styles$y[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$y.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$y.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$y.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$y.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
|
|
7115
7099
|
}
|
|
7116
7100
|
|
|
7117
|
-
var styles$
|
|
7101
|
+
var styles$x = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
|
|
7118
7102
|
|
|
7119
7103
|
/**
|
|
7120
7104
|
* This component is used to create a textarea that can grow as the user types.
|
|
@@ -7149,7 +7133,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7149
7133
|
}
|
|
7150
7134
|
updateHeight();
|
|
7151
7135
|
}, [ref, autoGrow, updateHeight, size]);
|
|
7152
|
-
return (jsx("div", { className: styles$
|
|
7136
|
+
return (jsx("div", { className: styles$x['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
|
|
7153
7137
|
ref.current =
|
|
7154
7138
|
node;
|
|
7155
7139
|
textAreaRef.current = node;
|
|
@@ -7160,7 +7144,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7160
7144
|
});
|
|
7161
7145
|
TextArea.displayName = 'TextArea';
|
|
7162
7146
|
|
|
7163
|
-
var styles$
|
|
7147
|
+
var styles$w = {"field":"text-field-module-JeaK0"};
|
|
7164
7148
|
|
|
7165
7149
|
/**
|
|
7166
7150
|
* This component is used to create a text field.
|
|
@@ -7168,7 +7152,7 @@ var styles$x = {"field":"text-field-module-JeaK0"};
|
|
|
7168
7152
|
* This field can also grow when a user types in text.
|
|
7169
7153
|
*/
|
|
7170
7154
|
function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
|
|
7171
|
-
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
7155
|
+
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$w.field, styles$w[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
|
|
7172
7156
|
onChange?.(value);
|
|
7173
7157
|
}, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
|
|
7174
7158
|
}
|
|
@@ -7178,31 +7162,31 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
|
|
|
7178
7162
|
return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
|
|
7179
7163
|
}
|
|
7180
7164
|
|
|
7181
|
-
var styles$
|
|
7165
|
+
var styles$v = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
|
|
7182
7166
|
|
|
7183
7167
|
function ProgressCircle({ className }) {
|
|
7184
|
-
return (jsxs("svg", { className: clsx(styles$
|
|
7168
|
+
return (jsxs("svg", { className: clsx(styles$v['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
|
|
7185
7169
|
}
|
|
7186
7170
|
|
|
7187
|
-
var styles$
|
|
7171
|
+
var styles$u = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
|
|
7188
7172
|
|
|
7189
7173
|
function ProductOverviewGrid({ children, isLoading, }) {
|
|
7190
|
-
return (jsxs("div", { className: styles$
|
|
7174
|
+
return (jsxs("div", { className: styles$u['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$u['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$u['loading-panel'], children: jsx(ProgressCircle, { className: styles$u['progress-circle'] }) }))] }));
|
|
7191
7175
|
}
|
|
7192
7176
|
|
|
7193
|
-
var styles$
|
|
7177
|
+
var styles$t = {"loading-overlay":"loading-overlay-module-L67Gy"};
|
|
7194
7178
|
|
|
7195
7179
|
function LoadingOverlay() {
|
|
7196
|
-
return (jsx("div", { className: styles$
|
|
7180
|
+
return (jsx("div", { className: styles$t['loading-overlay'], children: jsx(ProgressCircle, {}) }));
|
|
7197
7181
|
}
|
|
7198
7182
|
|
|
7199
|
-
var styles$
|
|
7183
|
+
var styles$s = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
|
|
7200
7184
|
|
|
7201
7185
|
function PageContainer({ children, className, }) {
|
|
7202
|
-
return (jsx("div", { className: styles$
|
|
7186
|
+
return (jsx("div", { className: styles$s['page-container'], children: jsx("div", { className: clsx(styles$s['inner-page-container'], className), children: children }) }));
|
|
7203
7187
|
}
|
|
7204
7188
|
|
|
7205
|
-
var styles$
|
|
7189
|
+
var styles$r = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
|
|
7206
7190
|
|
|
7207
7191
|
const sizeToTag = {
|
|
7208
7192
|
l: 'h3',
|
|
@@ -7215,22 +7199,22 @@ const sizeToTag = {
|
|
|
7215
7199
|
};
|
|
7216
7200
|
function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
|
|
7217
7201
|
return createElement$1(tag || sizeToTag[size], {
|
|
7218
|
-
className: clsx(className, styles$
|
|
7219
|
-
[styles$
|
|
7220
|
-
[styles$
|
|
7221
|
-
[styles$
|
|
7202
|
+
className: clsx(className, styles$r.heading, styles$r[size], {
|
|
7203
|
+
[styles$r.uppercase]: uppercase,
|
|
7204
|
+
[styles$r.italic]: italic,
|
|
7205
|
+
[styles$r.bold]: bold,
|
|
7222
7206
|
}),
|
|
7223
7207
|
}, children);
|
|
7224
7208
|
}
|
|
7225
7209
|
|
|
7226
|
-
var styles$
|
|
7210
|
+
var styles$q = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
|
|
7227
7211
|
|
|
7228
7212
|
function PageTitle({ children }) {
|
|
7229
7213
|
const { lg, xxl } = useBreakpoint();
|
|
7230
|
-
return (jsx(Heading, { italic: true, uppercase: true, className: styles$
|
|
7214
|
+
return (jsx(Heading, { italic: true, uppercase: true, className: styles$q.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
|
|
7231
7215
|
}
|
|
7232
7216
|
function Page({ breadCrumb, children, className, title }) {
|
|
7233
|
-
return (jsxs(PageContainer, { className: clsx(styles$
|
|
7217
|
+
return (jsxs(PageContainer, { className: clsx(styles$q.page, className), children: [jsx("div", { className: styles$q.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
|
|
7234
7218
|
}
|
|
7235
7219
|
|
|
7236
7220
|
const useSidebar = () => {
|
|
@@ -7276,12 +7260,12 @@ function GlyphsChevronsBoldDownIcon(props) {
|
|
|
7276
7260
|
function AccordionItem({ _pseudo = 'none', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
|
|
7277
7261
|
const { isOpen, toggle } = useDisclosure(initialIsOpen);
|
|
7278
7262
|
const panelId = `panel-${id}`;
|
|
7279
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
7280
|
-
[styles$
|
|
7281
|
-
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$
|
|
7263
|
+
return (jsxs("div", { className: clsx(className, styles$C['accordion-item'], {
|
|
7264
|
+
[styles$C['is-open']]: isOpen,
|
|
7265
|
+
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$C.button, styles$C[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$C.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$C.panel, id: panelId, role: "region", children: jsx("div", { className: styles$C.content, children: children }) })] }));
|
|
7282
7266
|
}
|
|
7283
7267
|
|
|
7284
|
-
var styles$
|
|
7268
|
+
var styles$p = {"filter-section":"filter-section-module-q1Ob8","default":"filter-section-module-JkP09","title":"filter-section-module-hWVv-","with-action":"filter-section-module-9qc6L","header":"filter-section-module-zi2ZE","content":"filter-section-module-15-YW","sm":"filter-section-module-crU-3","md":"filter-section-module-vHRQu","border-top":"filter-section-module-dGcTY"};
|
|
7285
7269
|
|
|
7286
7270
|
function FilterSection({ ...props }) {
|
|
7287
7271
|
const variant = props.variant;
|
|
@@ -7299,16 +7283,16 @@ function FilterSection({ ...props }) {
|
|
|
7299
7283
|
/* eslint-enable @typescript-eslint/no-unnecessary-condition */
|
|
7300
7284
|
}
|
|
7301
7285
|
function CollapsibleFilterSection({ children, gap = 'md', initialIsOpen = true, title, variant, }) {
|
|
7302
|
-
return (jsx("section", { className: clsx(styles$
|
|
7286
|
+
return (jsx("section", { className: clsx(styles$p['filter-section'], styles$p[variant], styles$p[gap]), children: jsx(Accordion, { borderPosition: "top", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: styles$p['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: children }) }) }));
|
|
7303
7287
|
}
|
|
7304
7288
|
function WithActionFilterSection({ button, children, gap = 'md', title, variant, }) {
|
|
7305
|
-
return (jsxs("section", { className: clsx(styles$
|
|
7289
|
+
return (jsxs("section", { className: clsx(styles$p['filter-section'], styles$p[variant], styles$p[gap]), children: [jsxs("div", { className: styles$p.header, children: [jsx("h3", { className: styles$p.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: styles$p.content, children: children })] }));
|
|
7306
7290
|
}
|
|
7307
7291
|
function DefaultFilterSection({ children, gap = 'md', title, variant, }) {
|
|
7308
|
-
return (jsxs("section", { className: clsx(styles$
|
|
7292
|
+
return (jsxs("section", { className: clsx(styles$p['filter-section'], styles$p[variant], styles$p[gap]), children: [jsx("h3", { className: styles$p.title, children: title }), jsx("div", { className: styles$p.content, children: children })] }));
|
|
7309
7293
|
}
|
|
7310
7294
|
|
|
7311
|
-
var styles$
|
|
7295
|
+
var styles$o = {"filter-panel":"algolia-filter-panel-module-GfhOO","scroll-container":"algolia-filter-panel-module-4ubB1","category":"algolia-filter-panel-module-LKet3","is-active":"algolia-filter-panel-module-yf8kI","value":"algolia-filter-panel-module-gQzED","count":"algolia-filter-panel-module-uAHPx","button":"algolia-filter-panel-module-ABOYv"};
|
|
7312
7296
|
|
|
7313
7297
|
function AlgoliaActiveCategories() {
|
|
7314
7298
|
const { items: categories } = useHierarchicalMenu({
|
|
@@ -7330,8 +7314,8 @@ function Categories({ categories, path: _path, }) {
|
|
|
7330
7314
|
const categorySlug = category.label.toLowerCase().replace(/ /g, '-');
|
|
7331
7315
|
const path = `${_path}/${categorySlug}`;
|
|
7332
7316
|
const isActive = !category.data || !category.data.some(c => c.isRefined);
|
|
7333
|
-
return (jsxs(Fragment, { children: [jsxs(RouteLink, { hasUnderline: true, className: clsx(styles$
|
|
7334
|
-
[styles$
|
|
7317
|
+
return (jsxs(Fragment, { children: [jsxs(RouteLink, { hasUnderline: true, className: clsx(styles$o.category, {
|
|
7318
|
+
[styles$o['is-active']]: isActive,
|
|
7335
7319
|
}), href: path, isDisabled: isActive, children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label })] }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
|
|
7336
7320
|
});
|
|
7337
7321
|
}
|
|
@@ -7340,13 +7324,13 @@ function StrokeCloseboxIcon(props) {
|
|
|
7340
7324
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
|
|
7341
7325
|
}
|
|
7342
7326
|
|
|
7343
|
-
var styles$
|
|
7327
|
+
var styles$n = {"active-filter-item":"active-filters-module-Rrmhy","category":"active-filters-module-u9TTE","active-filter-value":"active-filters-module-CIuPU"};
|
|
7344
7328
|
|
|
7345
7329
|
const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
|
|
7346
7330
|
const t = useFormattedMessage();
|
|
7347
7331
|
if (selectedFilterCategories.length === 0)
|
|
7348
7332
|
return null;
|
|
7349
|
-
return (jsx(FilterSection, { button: jsx(RouteLink, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$
|
|
7333
|
+
return (jsx(FilterSection, { button: jsx(RouteLink, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$n.category, children: category.filters.map(filter => (jsxs("div", { className: styles$n['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles$n['active-filter-value'], children: filter.label })] }), jsx(IconButton, { color: "secondary", onPress: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`))) }, `${category.label}-${index}`))) }));
|
|
7350
7334
|
};
|
|
7351
7335
|
|
|
7352
7336
|
function AlgoliaActiveFilters() {
|
|
@@ -7387,9 +7371,9 @@ function AlgoliaCategoriesFilters() {
|
|
|
7387
7371
|
const t = useFormattedMessage();
|
|
7388
7372
|
if (categories.length <= 0)
|
|
7389
7373
|
return null;
|
|
7390
|
-
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs(Link, { className: clsx(styles$
|
|
7391
|
-
[styles$
|
|
7392
|
-
}), isDisabled: isRefined, onClick: () => refine(value), children: [jsx("span", { className: styles$
|
|
7374
|
+
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs(Link, { className: clsx(styles$o.category, {
|
|
7375
|
+
[styles$o['is-active']]: isRefined,
|
|
7376
|
+
}), isDisabled: isRefined, onClick: () => refine(value), children: [jsx("span", { className: styles$o.value, children: value }), ' ', jsxs("span", { className: styles$o.count, children: ["(", count, ")"] })] }, value))) }));
|
|
7393
7377
|
}
|
|
7394
7378
|
|
|
7395
7379
|
function AlgoliaDummyRefinementListConsumer() {
|
|
@@ -7441,7 +7425,7 @@ const MULTISELECT_ATTRIBUTE_IGNORE_LIST = [
|
|
|
7441
7425
|
];
|
|
7442
7426
|
function PanelCloseButton() {
|
|
7443
7427
|
const { close } = useSidebarActions();
|
|
7444
|
-
return (jsx("div", { className: styles$
|
|
7428
|
+
return (jsx("div", { className: styles$o.button, children: jsxs(Button, { withArrow: true, onPress: close, size: "md", children: [jsx(FormattedMessage, { id: "Show" }), " ", jsx(AlgoliaResultsCount, {})] }) }));
|
|
7445
7429
|
}
|
|
7446
7430
|
function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilters = false, }) {
|
|
7447
7431
|
/*
|
|
@@ -7456,7 +7440,7 @@ function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilter
|
|
|
7456
7440
|
facets: ['*'],
|
|
7457
7441
|
maxValuesPerFacet: 100,
|
|
7458
7442
|
});
|
|
7459
|
-
return (jsx("div", { className: styles$
|
|
7443
|
+
return (jsx("div", { className: styles$o['filter-panel'], children: jsxs("div", { className: styles$o['scroll-container'], children: [showActiveCategories && jsx(AlgoliaActiveCategories, {}), showCategoriesFilters && jsx(AlgoliaCategoriesFilters, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length === 0 ? (jsx(AlgoliaDummyRefinementListConsumer, {})) : (jsx("section", { children: attributesToRender
|
|
7460
7444
|
.filter(attribute => !MULTISELECT_ATTRIBUTE_IGNORE_LIST.includes(attribute))
|
|
7461
7445
|
.map((attribute, index) => {
|
|
7462
7446
|
return (jsx(AlgoliaMultiSelectFilterSection, { attribute: attribute }, `attribute-${index}`));
|
|
@@ -7467,10 +7451,10 @@ function GlyphsChevronsSlimRightIcon(props) {
|
|
|
7467
7451
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M9,6 L4.06645029,1 C3.87890406,1.08169007 3.69487412,1.19817561 3.51436046,1.34945663 C3.3338468,1.50073764 3.16239331,1.68216803 3,1.89374779 L7.08347812,5.98800959 L3,9.9960307 C3.16649238,10.2121071 3.33794587,10.4031847 3.51436046,10.5692635 C3.69077505,10.7353424 3.87480499,10.8789212 4.06645029,11 L9,6 Z", fillRule: "evenodd" }) }));
|
|
7468
7452
|
}
|
|
7469
7453
|
|
|
7470
|
-
var styles$
|
|
7454
|
+
var styles$m = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
|
|
7471
7455
|
|
|
7472
7456
|
function Pagination({ currentPage, onChange, totalPages, }) {
|
|
7473
|
-
return (jsxs("div", { className: styles$
|
|
7457
|
+
return (jsxs("div", { className: styles$m.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles$m['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
|
|
7474
7458
|
}
|
|
7475
7459
|
|
|
7476
7460
|
function AlgoliaPagination({ onChange }) {
|
|
@@ -7830,12 +7814,12 @@ function AlgoliaSortBy() {
|
|
|
7830
7814
|
return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
|
|
7831
7815
|
}
|
|
7832
7816
|
|
|
7833
|
-
var styles$
|
|
7817
|
+
var styles$l = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
|
|
7834
7818
|
|
|
7835
7819
|
function CategoryCard({ href, image, isSelected = false, onClick, title, withArrow = false, }) {
|
|
7836
7820
|
return (jsxs(RouteLink, { className: clsx({
|
|
7837
|
-
[styles$
|
|
7838
|
-
}, styles$
|
|
7821
|
+
[styles$l['is-selected']]: isSelected,
|
|
7822
|
+
}, styles$l['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$l['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsxs("p", { className: styles$l.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$l.arrow })] })] }));
|
|
7839
7823
|
}
|
|
7840
7824
|
|
|
7841
7825
|
const ProductListingPageContext = createContext({
|
|
@@ -7864,26 +7848,26 @@ function ConnectedCategoryCarousel() {
|
|
|
7864
7848
|
}, title: category.title }, index))) }));
|
|
7865
7849
|
}
|
|
7866
7850
|
|
|
7867
|
-
var styles$
|
|
7851
|
+
var styles$k = {"blank-page-spacer":"blank-page-spacer-module-lXxle","loading-overlay":"blank-page-spacer-module-hbxDP"};
|
|
7868
7852
|
|
|
7869
7853
|
function BlankPageSpacer({ children }) {
|
|
7870
|
-
return jsx("div", { className: styles$
|
|
7854
|
+
return jsx("div", { className: styles$k['blank-page-spacer'], children: children });
|
|
7871
7855
|
}
|
|
7872
7856
|
|
|
7873
|
-
var styles$
|
|
7857
|
+
var styles$j = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
|
|
7874
7858
|
|
|
7875
7859
|
function PromoCard({ href, image, variant }) {
|
|
7876
|
-
return (jsx(RouteLink, { className: clsx(styles$
|
|
7860
|
+
return (jsx(RouteLink, { className: clsx(styles$j['promo-card'], styles$j[variant]), href: href, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
|
|
7877
7861
|
}
|
|
7878
7862
|
|
|
7879
|
-
var styles$
|
|
7863
|
+
var styles$i = {"promos":"promo-cards-module-Dy4p3"};
|
|
7880
7864
|
|
|
7881
7865
|
function PromoCards({ promoCardsData = [], }) {
|
|
7882
7866
|
const { lg } = useBreakpoint();
|
|
7883
7867
|
const promoCards = promoCardsData.map((promoCard, index) => (jsx(PromoCard, { href: promoCard.href, image: promoCard.image, variant: index % 2 === 0 ? 'lg' : 'sm' }, `promo-card-${index}`)));
|
|
7884
7868
|
if (promoCardsData.length === 0)
|
|
7885
7869
|
return null;
|
|
7886
|
-
return (jsx("div", { className: styles$
|
|
7870
|
+
return (jsx("div", { className: styles$i.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
|
|
7887
7871
|
}
|
|
7888
7872
|
|
|
7889
7873
|
const scrollToTop = (scrollOptions) => {
|
|
@@ -7893,17 +7877,17 @@ const scrollToTop = (scrollOptions) => {
|
|
|
7893
7877
|
});
|
|
7894
7878
|
};
|
|
7895
7879
|
|
|
7896
|
-
var styles$
|
|
7880
|
+
var styles$h = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","is-not-docked":"sidebar-module-Scw7D"};
|
|
7897
7881
|
|
|
7898
7882
|
function InnerSidebar({ children }) {
|
|
7899
7883
|
const { isDocked, isOpen, toggle, transition } = useSidebar();
|
|
7900
|
-
return (jsxs("aside", { className: clsx(styles$
|
|
7901
|
-
[styles$
|
|
7902
|
-
[styles$
|
|
7903
|
-
[styles$
|
|
7904
|
-
[styles$
|
|
7905
|
-
[styles$
|
|
7906
|
-
}), children: [jsx("div", { className: styles$
|
|
7884
|
+
return (jsxs("aside", { className: clsx(styles$h.sidebar, {
|
|
7885
|
+
[styles$h['transition']]: transition,
|
|
7886
|
+
[styles$h['is-open']]: isOpen,
|
|
7887
|
+
[styles$h['is-closed']]: !isOpen,
|
|
7888
|
+
[styles$h['is-docked']]: isDocked,
|
|
7889
|
+
[styles$h['is-not-docked']]: !isDocked,
|
|
7890
|
+
}), children: [jsx("div", { className: styles$h.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
|
|
7907
7891
|
}
|
|
7908
7892
|
function Sidebar({ children }) {
|
|
7909
7893
|
return jsx(InnerSidebar, { children: children });
|
|
@@ -7918,11 +7902,11 @@ const ToggleSidebarButton = () => {
|
|
|
7918
7902
|
return (jsx(Button, { color: "secondary", icon: jsx(StrokeFilterIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
|
|
7919
7903
|
};
|
|
7920
7904
|
|
|
7921
|
-
var styles$
|
|
7905
|
+
var styles$g = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
|
|
7922
7906
|
|
|
7923
7907
|
function NoResults$1({ content, title }) {
|
|
7924
7908
|
const { lg } = useBreakpoint();
|
|
7925
|
-
return (jsxs("div", { className: styles$
|
|
7909
|
+
return (jsxs("div", { className: styles$g['no-results'], children: [jsx(Heading, { bold: false, className: styles$g.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles$g.body, children: content }), jsx("div", { className: styles$g.buttons, children: jsx(RouteButton, { withArrow: true, href: `${config.SHOP_API_URL}`, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
|
|
7926
7910
|
}
|
|
7927
7911
|
|
|
7928
7912
|
function getCookies() {
|
|
@@ -8134,19 +8118,19 @@ function useAlgoliaInsights() {
|
|
|
8134
8118
|
sendEvents: Parameters<ReturnType<typeof makeSendEvents>>;
|
|
8135
8119
|
*/
|
|
8136
8120
|
|
|
8137
|
-
var styles$
|
|
8121
|
+
var styles$f = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X"};
|
|
8138
8122
|
|
|
8139
8123
|
function Modal({ children, className, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
|
|
8140
|
-
return (jsx(ModalOverlay, { className: clsx(styles$
|
|
8124
|
+
return (jsx(ModalOverlay, { className: clsx(styles$f['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: styles$f.modal, children: children }) }));
|
|
8141
8125
|
}
|
|
8142
8126
|
|
|
8143
|
-
var styles$
|
|
8127
|
+
var styles$e = {"header":"dialog-module-ZnsAe","heading":"dialog-module-SwpuZ","close":"dialog-module-Y7Tqg","content":"dialog-module-Koqia","footer":"dialog-module-y7Axm"};
|
|
8144
8128
|
|
|
8145
8129
|
function Footer({ close }) {
|
|
8146
8130
|
return (jsx(Button, { onPress: close, size: "md", children: "Close" }));
|
|
8147
8131
|
}
|
|
8148
8132
|
function Dialog({ allowClose = true, children, className, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
|
|
8149
|
-
return (jsx(Modal, { className: clsx(styles$
|
|
8133
|
+
return (jsx(Modal, { className: clsx(styles$e['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, children: ({ close }) => (jsxs(Form, { onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$e.header, children: [!hideTitle && (jsx(Heading, { className: styles$e.heading, size: "xs", children: title })), jsx("div", { className: styles$e.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onPress: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$e.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$e.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
|
|
8150
8134
|
}
|
|
8151
8135
|
|
|
8152
8136
|
function SignInDialog({ isOpen, onOpenChange }) {
|
|
@@ -8160,13 +8144,13 @@ function ConnectedFavoriteButton({ onFavorite: _onFavorite, productId, }) {
|
|
|
8160
8144
|
const isAuthenticated = useIsAuthenticated();
|
|
8161
8145
|
const [showSignInDialog, setShowSignInDialog] = useState(false);
|
|
8162
8146
|
const { mutate: addWishListItemToCurrentWishList } = useAddWishListItemToCurrentWishList();
|
|
8163
|
-
const { mutate:
|
|
8147
|
+
const { mutate: deleteWishListItemFromWishList } = useDeleteWishListItemFromWishList();
|
|
8164
8148
|
function onFavorite() {
|
|
8165
8149
|
if (!isAuthenticated) {
|
|
8166
8150
|
return setShowSignInDialog(true);
|
|
8167
8151
|
}
|
|
8168
8152
|
if (wishList && wishListItem) {
|
|
8169
|
-
|
|
8153
|
+
deleteWishListItemFromWishList({
|
|
8170
8154
|
wishListId: wishList.id,
|
|
8171
8155
|
wishListItemId: wishListItem.id,
|
|
8172
8156
|
});
|
|
@@ -8207,7 +8191,7 @@ function ProductListingProductOverview() {
|
|
|
8207
8191
|
}, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
|
|
8208
8192
|
}
|
|
8209
8193
|
|
|
8210
|
-
var styles$
|
|
8194
|
+
var styles$d = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","promos":"product-listing-page-module-iY1yj","action-bar":"product-listing-page-module-XxGrr","sidebar-toggle":"product-listing-page-module-F7bxy","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
|
|
8211
8195
|
|
|
8212
8196
|
function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
|
|
8213
8197
|
const languageCode = useLanguageCode();
|
|
@@ -8231,15 +8215,15 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
|
|
|
8231
8215
|
return (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) }));
|
|
8232
8216
|
}
|
|
8233
8217
|
const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
|
|
8234
|
-
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$
|
|
8218
|
+
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$d['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { promoCards: data.promoCards?.top }) }) }) }));
|
|
8235
8219
|
}
|
|
8236
8220
|
function ProductListingPageContent({ promoCards, }) {
|
|
8237
8221
|
const { isLoading, products } = useAlgoliaProductHits();
|
|
8238
8222
|
const hasProducts = products.length > 0;
|
|
8239
8223
|
const t = useFormattedMessage();
|
|
8240
|
-
return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && jsx(LoadingOverlay, {}), isLoading === false && !hasProducts && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
|
|
8224
|
+
return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) })), isLoading === false && !hasProducts && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
|
|
8241
8225
|
display: !hasProducts ? 'none' : undefined,
|
|
8242
|
-
}, children: [promoCards?.length && (jsx("section", { className: styles$
|
|
8226
|
+
}, children: [promoCards?.length && (jsx("section", { className: styles$d.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$d.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$d['action-bar'], children: [jsx("div", { className: styles$d['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$d.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$d.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$d['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$d['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$d.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
|
|
8243
8227
|
setTimeout(() => {
|
|
8244
8228
|
scrollToTop();
|
|
8245
8229
|
}, 100);
|
|
@@ -8268,7 +8252,7 @@ function SearchResultProductOverview() {
|
|
|
8268
8252
|
}, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
|
|
8269
8253
|
}
|
|
8270
8254
|
|
|
8271
|
-
var styles$
|
|
8255
|
+
var styles$c = {"search-results":"search-results-page-module-M7SIu","header":"search-results-page-module-DpNT-","action-bar":"search-results-page-module-RJoMk","sidebar-toggle":"search-results-page-module-SzLQb","sort":"search-results-page-module-cgonp","count":"search-results-page-module-hunZp","categories":"search-results-page-module-n2lSj","product-grid-container":"search-results-page-module-TK-iE","product-grid":"search-results-page-module-HWUnk","pagination":"search-results-page-module-SZYiA"};
|
|
8272
8256
|
|
|
8273
8257
|
function SearchResultsPage({ location, searchClient, }) {
|
|
8274
8258
|
const languageCode = useLanguageCode();
|
|
@@ -8277,7 +8261,7 @@ function SearchResultsPage({ location, searchClient, }) {
|
|
|
8277
8261
|
const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
|
|
8278
8262
|
if (!keyword)
|
|
8279
8263
|
return jsx("h1", { children: "No search results...." });
|
|
8280
|
-
return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$
|
|
8264
|
+
return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$c['search-results'], title: t("'{0}' in all products", {
|
|
8281
8265
|
replacementValues: { 0: keyword },
|
|
8282
8266
|
}), children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
|
|
8283
8267
|
}
|
|
@@ -8289,14 +8273,14 @@ function SearchResultsPageContent({ keyword }) {
|
|
|
8289
8273
|
replacementValues: { 0: keyword },
|
|
8290
8274
|
}) })), jsxs("div", { style: {
|
|
8291
8275
|
display: !hasProducts ? 'none' : undefined,
|
|
8292
|
-
}, children: [jsxs("section", { className: styles$
|
|
8276
|
+
}, children: [jsxs("section", { className: styles$c['action-bar'], children: [jsx("div", { className: styles$c['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$c.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$c.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$c['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$c['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$c.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
|
|
8293
8277
|
setTimeout(() => {
|
|
8294
8278
|
scrollToTop();
|
|
8295
8279
|
}, 100);
|
|
8296
8280
|
} }) })] })] }) })] })] }));
|
|
8297
8281
|
}
|
|
8298
8282
|
|
|
8299
|
-
var styles$
|
|
8283
|
+
var styles$b = {"overlay-background":"overlay-background-module-j7R7T","open":"overlay-background-module-DZWsP","close":"overlay-background-module-8pcWN"};
|
|
8300
8284
|
|
|
8301
8285
|
function OverlayBackground({ className, isOpen, onClick, }) {
|
|
8302
8286
|
const [, setRender] = useState(isOpen);
|
|
@@ -8317,13 +8301,13 @@ function OverlayBackground({ className, isOpen, onClick, }) {
|
|
|
8317
8301
|
}, [isOpen]);
|
|
8318
8302
|
if (typeof window === 'undefined')
|
|
8319
8303
|
return null;
|
|
8320
|
-
return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$
|
|
8321
|
-
[styles$
|
|
8322
|
-
[styles$
|
|
8304
|
+
return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$b['overlay-background'], {
|
|
8305
|
+
[styles$b['open']]: isOpen,
|
|
8306
|
+
[styles$b['close']]: !isOpen,
|
|
8323
8307
|
}, className), onClick: onClick }), document.body);
|
|
8324
8308
|
}
|
|
8325
8309
|
|
|
8326
|
-
var styles$
|
|
8310
|
+
var styles$a = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
|
|
8327
8311
|
|
|
8328
8312
|
function SidebarDetectBreakpoint() {
|
|
8329
8313
|
const xxl = useIsBreakpoint('xxl');
|
|
@@ -8353,10 +8337,10 @@ function SidebarDetectBreakpoint() {
|
|
|
8353
8337
|
function SidebarProvider({ children }) {
|
|
8354
8338
|
const state = useSidebar();
|
|
8355
8339
|
const { close, isDocked, isOpen, transition } = state;
|
|
8356
|
-
return (jsxs("div", { className: clsx(styles$
|
|
8357
|
-
[styles$
|
|
8358
|
-
[styles$
|
|
8359
|
-
[styles$
|
|
8340
|
+
return (jsxs("div", { className: clsx(styles$a['sidebar-container'], {
|
|
8341
|
+
[styles$a['transition']]: transition,
|
|
8342
|
+
[styles$a['docked']]: isDocked,
|
|
8343
|
+
[styles$a['open']]: isOpen,
|
|
8360
8344
|
}), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(OverlayBackground, { isOpen: isOpen, onClick: close }))] }));
|
|
8361
8345
|
}
|
|
8362
8346
|
|
|
@@ -8554,11 +8538,30 @@ function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
|
|
|
8554
8538
|
const productsIndexName = index.default;
|
|
8555
8539
|
const productsQuerySuggestionsIndexName = index.suggestions;
|
|
8556
8540
|
const { sendProductClickFromSearchEvent } = useAlgoliaInsights();
|
|
8541
|
+
const getSources = useDebouncedCallback(({ query }) => {
|
|
8542
|
+
return [
|
|
8543
|
+
{
|
|
8544
|
+
getItems() {
|
|
8545
|
+
return getAlgoliaResults({
|
|
8546
|
+
queries: [
|
|
8547
|
+
{
|
|
8548
|
+
indexName: productsIndexName,
|
|
8549
|
+
query,
|
|
8550
|
+
},
|
|
8551
|
+
],
|
|
8552
|
+
searchClient,
|
|
8553
|
+
});
|
|
8554
|
+
},
|
|
8555
|
+
sourceId: 'productsPlugin',
|
|
8556
|
+
},
|
|
8557
|
+
];
|
|
8558
|
+
}, 300);
|
|
8557
8559
|
/**
|
|
8558
8560
|
* https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#mirror-a-native-mobile-experience
|
|
8559
8561
|
*/
|
|
8560
8562
|
const autocomplete = useMemo(() => createAutocomplete({
|
|
8561
8563
|
autoFocus: true,
|
|
8564
|
+
getSources,
|
|
8562
8565
|
insights: {
|
|
8563
8566
|
onSelect({ insightsEvents }) {
|
|
8564
8567
|
insightsEvents.forEach(event => {
|
|
@@ -8675,13 +8678,12 @@ function useAlgoliaSearch() {
|
|
|
8675
8678
|
};
|
|
8676
8679
|
}
|
|
8677
8680
|
|
|
8678
|
-
var styles$
|
|
8681
|
+
var styles$9 = {"global-search-overlay-background-position":"global-search-module-mmXv1","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
|
|
8679
8682
|
|
|
8680
8683
|
const GlobalSearchDisclosureContext = createContext(null);
|
|
8681
|
-
function
|
|
8684
|
+
function GlobalSearchProvider({ children, searchClient, }) {
|
|
8682
8685
|
const { close, isOpen, open, toggle } = useDisclosure(false);
|
|
8683
|
-
|
|
8684
|
-
return (jsx(TransitionGroup, { children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: children })) }), jsx(OverlayBackground, { className: styles$a['global-search-overlay-background-position'], isOpen: isOpen, onClick: toggle })] }) }));
|
|
8686
|
+
return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [children, jsx(OverlayBackground, { className: styles$9['global-search-overlay-background-position'], isOpen: isOpen, onClick: toggle })] }) }));
|
|
8685
8687
|
}
|
|
8686
8688
|
|
|
8687
8689
|
const useGlobalSearchDisclosure = () => {
|
|
@@ -8700,7 +8702,7 @@ function StrokeSearchIcon(props) {
|
|
|
8700
8702
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M10.1044994,16.5738466 C6.53724234,16.5738466 3.63503896,13.6716658 3.63503896,10.1044364 C3.63503896,6.53739167 6.53724234,3.63521084 10.1044994,3.63521084 C13.6717564,3.63521084 16.5737752,6.53739167 16.5737752,10.1044364 C16.5737752,13.6716658 13.6717564,16.5738466 10.1044994,16.5738466 M21.7583512,20.6019769 L16.3655653,15.2505791 C17.5171805,13.8510793 18.2089988,12.0586047 18.2089988,10.1044364 C18.2089988,5.62851052 14.5804601,2 10.1044994,2 C5.62853871,2 2,5.62851052 2,10.1044364 C2,14.5805469 5.62853871,18.2090574 10.1044994,18.2090574 C12.0372712,18.2090574 13.8113014,17.5312728 15.2041671,16.4020009 L20.6065514,21.7628123 C20.7660314,21.9208144 20.9742413,22 21.1824513,22 C21.3925071,22 21.6029321,21.9191531 21.7627812,21.7581977 C22.0808183,21.4377636 22.0787879,20.9200114 21.7583512,20.6019769", fillRule: "evenodd" }) }));
|
|
8701
8703
|
}
|
|
8702
8704
|
|
|
8703
|
-
var styles$
|
|
8705
|
+
var styles$8 = {"form":"search-input-module-xCCzd","input-container":"search-input-module-okP8k","icon":"search-input-module-GZbhK","label":"search-input-module-vKCm4","reset-btn":"search-input-module-lYseZ","input":"search-input-module-bELFK"};
|
|
8704
8706
|
|
|
8705
8707
|
function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, placeholder, }) {
|
|
8706
8708
|
const formProps = autocomplete?.getFormProps({
|
|
@@ -8716,10 +8718,10 @@ function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, plac
|
|
|
8716
8718
|
formProps?.onSubmit(e);
|
|
8717
8719
|
onSubmit?.();
|
|
8718
8720
|
}
|
|
8719
|
-
return (jsx("form", { ref: formRef, className: styles$
|
|
8721
|
+
return (jsx("form", { ref: formRef, className: styles$8.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles$8['input-container'], children: [jsx("label", { className: styles$8.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$8['icon-search'], styles$8.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
|
|
8720
8722
|
if (e.key === 'Escape')
|
|
8721
8723
|
onCancel?.();
|
|
8722
|
-
}, ...inputProps, className: styles$
|
|
8724
|
+
}, ...inputProps, className: styles$8.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles$8['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
|
|
8723
8725
|
}
|
|
8724
8726
|
|
|
8725
8727
|
function ConnectedSearchInput() {
|
|
@@ -8730,29 +8732,29 @@ function ConnectedSearchInput() {
|
|
|
8730
8732
|
return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close, onSubmit: () => {
|
|
8731
8733
|
navigate(`/search?keyword=${inputRef.current?.value}`);
|
|
8732
8734
|
return close();
|
|
8733
|
-
}, placeholder: t('
|
|
8735
|
+
}, placeholder: t('What are you searching for?') }));
|
|
8734
8736
|
}
|
|
8735
8737
|
|
|
8736
|
-
var styles$
|
|
8738
|
+
var styles$7 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
|
|
8737
8739
|
|
|
8738
8740
|
function CategoriesGrid({ categories, onItemClick, }) {
|
|
8739
|
-
return (jsx("div", { className: styles$
|
|
8741
|
+
return (jsx("div", { className: styles$7['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$7['category'], children: jsx(CategoryCard, { withArrow: true, href: category.href, image: {
|
|
8740
8742
|
fit: 'contain',
|
|
8741
8743
|
image: category.image,
|
|
8742
8744
|
title: category.title,
|
|
8743
8745
|
}, onClick: onItemClick, title: category.title }, category.title) }, category.title))) }));
|
|
8744
8746
|
}
|
|
8745
8747
|
|
|
8746
|
-
var styles$
|
|
8748
|
+
var styles$6 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR","content":"search-section-module-VZlvZ"};
|
|
8747
8749
|
|
|
8748
8750
|
function SearchSection({ button, children, className, title, }) {
|
|
8749
|
-
return (jsxs("div", { className: clsx(styles$
|
|
8751
|
+
return (jsxs("div", { className: clsx(styles$6['search-section'], className), children: [jsxs("div", { className: styles$6.header, children: [title && jsx("h2", { className: styles$6.title, children: title }), button && button] }), jsx("div", { className: styles$6.content, children: children })] }));
|
|
8750
8752
|
}
|
|
8751
8753
|
|
|
8752
|
-
var styles$
|
|
8754
|
+
var styles$5 = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
|
|
8753
8755
|
|
|
8754
8756
|
function SectionContainer({ buttons, leftContent, rightContent, }) {
|
|
8755
|
-
return (jsx("div", { className: styles$
|
|
8757
|
+
return (jsx("div", { className: styles$5['section-container'], children: jsxs("div", { className: styles$5['content'], children: [jsx("div", { className: styles$5['left'], children: leftContent }), jsxs("div", { className: styles$5['right'], children: [rightContent, jsx("div", { className: styles$5['button-container'], children: buttons })] })] }) }));
|
|
8756
8758
|
}
|
|
8757
8759
|
|
|
8758
8760
|
function NoResults() {
|
|
@@ -8761,7 +8763,7 @@ function NoResults() {
|
|
|
8761
8763
|
function NotFound() {
|
|
8762
8764
|
const { state } = useAlgoliaSearch();
|
|
8763
8765
|
const t = useFormattedMessage();
|
|
8764
|
-
return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles$
|
|
8766
|
+
return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles$5['no-results-text'], children: jsxs("div", { className: styles$5.section, children: [jsxs("p", { className: styles$5.query, children: ["'", state.query, "'"] }), jsxs("div", { className: styles$5.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles$5.list, children: [jsx("li", { children: jsx(FormattedMessage, { id: "Searching again using more general terms" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Double check your spelling" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Use fewer keywords" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Exploring our products by category" }) })] })] })] }) }) }));
|
|
8765
8767
|
}
|
|
8766
8768
|
function PopularCategoriesSection() {
|
|
8767
8769
|
const { popularCategories: collection } = useAlgoliaSearch();
|
|
@@ -8770,7 +8772,7 @@ function PopularCategoriesSection() {
|
|
|
8770
8772
|
if (!collection)
|
|
8771
8773
|
return null;
|
|
8772
8774
|
const { items } = collection;
|
|
8773
|
-
return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$
|
|
8775
|
+
return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$5['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
|
|
8774
8776
|
}
|
|
8775
8777
|
|
|
8776
8778
|
function Highlight({ attribute, hit, tagName = 'mark', }) {
|
|
@@ -8782,19 +8784,19 @@ function Highlight({ attribute, hit, tagName = 'mark', }) {
|
|
|
8782
8784
|
}));
|
|
8783
8785
|
}
|
|
8784
8786
|
|
|
8785
|
-
var styles$
|
|
8787
|
+
var styles$4 = {"search-list":"search-list-module-vRuMO"};
|
|
8786
8788
|
|
|
8787
8789
|
function SearchList({ ariaLabelledby, children, className, id, }) {
|
|
8788
|
-
return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$
|
|
8790
|
+
return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$4['search-list'], className), id: id, children: children }));
|
|
8789
8791
|
}
|
|
8790
8792
|
|
|
8791
|
-
var styles$
|
|
8793
|
+
var styles$3 = {"search-list-item":"search-list-item-module-WXp77","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN"};
|
|
8792
8794
|
|
|
8793
8795
|
function SearchListItem({ icon, isRemovable = false, onClick, onRemove, text, }) {
|
|
8794
|
-
return (jsxs("li", { className: styles$
|
|
8796
|
+
return (jsxs("li", { className: styles$3['search-list-item'], onClick: onClick, role: "option", children: [jsxs("div", { className: styles$3.content, children: [icon && icon, text && jsx("span", { className: styles$3.text, children: text })] }), isRemovable && (jsx(IconButton, { color: "secondary", onPress: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
|
|
8795
8797
|
}
|
|
8796
8798
|
|
|
8797
|
-
var styles$
|
|
8799
|
+
var styles$2 = {"quick-access-section":"no-search-module-87NKV","quick-access-carousel":"no-search-module-beCXI","quick-access-card":"no-search-module-dtT5J"};
|
|
8798
8800
|
|
|
8799
8801
|
function NoSearch() {
|
|
8800
8802
|
return (jsx(SectionContainer, { leftContent: jsxs("div", { children: [jsx(RecentSearchesSection, {}), jsx(PopularSearchesSection, {})] }), rightContent: jsx(QuickAccessSection, {}) }));
|
|
@@ -8831,13 +8833,13 @@ function QuickAccessSection() {
|
|
|
8831
8833
|
if (!collection)
|
|
8832
8834
|
return;
|
|
8833
8835
|
const { items } = collection;
|
|
8834
|
-
return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$
|
|
8836
|
+
return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$2['quick-access-section'], children: jsx(Carousel, { className: styles$2['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$2['quick-access-card'], href: item.action.url, onClick: close, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), spaceBetween: 16 }) }) }));
|
|
8835
8837
|
}
|
|
8836
8838
|
|
|
8837
|
-
var styles$
|
|
8839
|
+
var styles$1 = {"slide":"product-carousel-module-XVTB1"};
|
|
8838
8840
|
|
|
8839
8841
|
function ProductCarousel({ productCards }) {
|
|
8840
|
-
return (jsx(Carousel, { hasOverflow: false, navigationButtonsPosition: "center", slideClasses: styles$
|
|
8842
|
+
return (jsx(Carousel, { hasOverflow: false, navigationButtonsPosition: "center", slideClasses: styles$1.slide, slides: productCards, spaceBetween: 16 }));
|
|
8841
8843
|
}
|
|
8842
8844
|
|
|
8843
8845
|
function StrokeRecentIcon(props) {
|
|
@@ -8847,12 +8849,12 @@ function StrokeRecentIcon(props) {
|
|
|
8847
8849
|
function WithResults() {
|
|
8848
8850
|
const { state } = useAlgoliaSearch();
|
|
8849
8851
|
const { close } = useGlobalSearchDisclosure();
|
|
8850
|
-
return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$
|
|
8852
|
+
return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$5['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onPress: close, children: [jsx(FormattedMessage, { id: "See all results" }), jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
|
|
8851
8853
|
}
|
|
8852
8854
|
function SuggestionsSection() {
|
|
8853
8855
|
const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
|
|
8854
8856
|
const t = useFormattedMessage();
|
|
8855
|
-
return (jsxs(SearchSection, { className: styles$
|
|
8857
|
+
return (jsxs(SearchSection, { className: styles$5['product-results-section'], title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
|
|
8856
8858
|
source: recentSearches.source,
|
|
8857
8859
|
}), children: recentSearches.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
|
|
8858
8860
|
item,
|
|
@@ -8882,7 +8884,7 @@ function ProductResultsSection() {
|
|
|
8882
8884
|
if (!collection)
|
|
8883
8885
|
return null;
|
|
8884
8886
|
const { items, source } = collection;
|
|
8885
|
-
return (jsx(SearchSection, { className: styles$
|
|
8887
|
+
return (jsx(SearchSection, { className: styles$5['product-results-section'], title: t('Products'), children: jsx("div", { className: styles$5['product-results'], ...autocomplete.getListProps({ source }), children: jsx(ProductCarousel, { productCards: items.map((product, index) => (createElement$1(ConnectedProductCard, { ...autocomplete.getItemProps({
|
|
8886
8888
|
item: product.hit,
|
|
8887
8889
|
source: source,
|
|
8888
8890
|
}), key: product.storefrontId, href: product.storefrontSlug, image: {
|
|
@@ -8912,17 +8914,15 @@ function PanelContent() {
|
|
|
8912
8914
|
return (jsx(Fragment, { children: !state.query.length ? (jsx(NoSearch, {})) : hasResults ? (jsx(WithResults, {})) : (jsx(NoResults, {})) }));
|
|
8913
8915
|
}
|
|
8914
8916
|
|
|
8915
|
-
var styles
|
|
8917
|
+
var styles = {"search-result-panel":"search-result-panel-module-KBrc9","entering":"search-result-panel-module-Us8rb","entered":"search-result-panel-module-7UxfH","exiting":"search-result-panel-module-3xEiy","exited":"search-result-panel-module-xSeC-"};
|
|
8916
8918
|
|
|
8917
8919
|
function SearchResultPanel() {
|
|
8918
8920
|
const { autocomplete, panelRef } = useAlgoliaSearch();
|
|
8919
8921
|
const { isOpen } = useGlobalSearchDisclosure();
|
|
8920
8922
|
// https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#check-network-status
|
|
8921
|
-
return (jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: transitionState => (jsx("div", { ref: panelRef, className: clsx(styles
|
|
8923
|
+
return (jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: transitionState => (jsx("div", { ref: panelRef, className: clsx(styles['search-result-panel'], styles[transitionState]), ...autocomplete.getPanelProps({}), children: jsx(PanelContent, {}) })) }));
|
|
8922
8924
|
}
|
|
8923
8925
|
|
|
8924
|
-
var styles = {"search-container":"search-root-module-g9MP0","input":"search-root-module-X7N83","entering":"search-root-module-dQDFs","entered":"search-root-module-fXUUb","exiting":"search-root-module-ZFQys","exited":"search-root-module-gd9xY"};
|
|
8925
|
-
|
|
8926
8926
|
function SearchRoot() {
|
|
8927
8927
|
const { autocomplete, inputRef } = useAlgoliaSearch();
|
|
8928
8928
|
const { isOpen } = useGlobalSearchDisclosure();
|
|
@@ -8936,9 +8936,8 @@ function SearchRoot() {
|
|
|
8936
8936
|
inputRef.current.blur();
|
|
8937
8937
|
}
|
|
8938
8938
|
}, [inputRef, isOpen]);
|
|
8939
|
-
return (jsx(
|
|
8939
|
+
return (jsx("div", { className: styles$9['search-root'], children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles$9['search-container'], styles$9[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles$9.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles$9.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
|
|
8940
8940
|
}
|
|
8941
|
-
|
|
8942
8941
|
/**
|
|
8943
8942
|
* Global search using algolia autocomplete with a custom renderer
|
|
8944
8943
|
* https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/
|
|
@@ -8947,8 +8946,10 @@ function SearchRoot() {
|
|
|
8947
8946
|
* uses the autocomplete widgets
|
|
8948
8947
|
* https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
|
|
8949
8948
|
*/
|
|
8950
|
-
function GlobalSearch(
|
|
8951
|
-
|
|
8949
|
+
function GlobalSearch() {
|
|
8950
|
+
const panelRef = useRef(null);
|
|
8951
|
+
const { isOpen } = useGlobalSearchDisclosure();
|
|
8952
|
+
return (jsx(TransitionGroup, { children: jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: jsx("div", { className: styles$9['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
|
|
8952
8953
|
}
|
|
8953
8954
|
|
|
8954
8955
|
const queryClient = new QueryClient({
|
|
@@ -8965,4 +8966,4 @@ function ReactQueryContainer({ children }) {
|
|
|
8965
8966
|
return (jsx(QueryClientProvider, { client: queryClient, children: children }));
|
|
8966
8967
|
}
|
|
8967
8968
|
|
|
8968
|
-
export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch,
|
|
8969
|
+
export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, InternalServerErrorRequest, IntlProvider, Link, LoadingOverlay, MultiSelect, NotFoundRequestError, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RequestError, RouteButton, RouteLink, RouteProvider, SearchResultsPage, SearchRoot, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchProductListingPageData, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
|