@sonic-equipment/ui 0.0.52 → 0.0.53
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.js
CHANGED
|
@@ -881,22 +881,22 @@ function SolidHomeIcon(props) {
|
|
|
881
881
|
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" }) }));
|
|
882
882
|
}
|
|
883
883
|
|
|
884
|
-
var styles$
|
|
884
|
+
var styles$R = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
|
|
885
885
|
|
|
886
886
|
function BreadcrumbShort({ links }) {
|
|
887
887
|
const homeLink = links[0];
|
|
888
888
|
const previousLink = links[links.length - 2];
|
|
889
|
-
return (jsx(Breadcrumbs, { className: styles$
|
|
889
|
+
return (jsx(Breadcrumbs, { className: styles$R.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$R.breadcrumb, children: jsxs(RouteLink, { className: styles$R.link, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$R.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(SolidHomeIcon, { className: styles$R.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
|
|
890
890
|
}
|
|
891
891
|
function BreadcrumbLongItem({ index, isDisabled, link, }) {
|
|
892
|
-
return (jsx(Breadcrumb$1, { className: styles$
|
|
892
|
+
return (jsx(Breadcrumb$1, { className: styles$R.breadcrumb, children: jsxs(RouteLink, { className: styles$R.link, href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$R['previous-icon'], styles$R.icon) }), link.label] }) }, index));
|
|
893
893
|
}
|
|
894
894
|
function BreadcrumbLong({ links }) {
|
|
895
895
|
const linksWithoutFirst = links.slice(1);
|
|
896
896
|
const homeLink = links[0];
|
|
897
897
|
if (!homeLink)
|
|
898
898
|
return null;
|
|
899
|
-
return (jsxs(Breadcrumbs, { className: styles$
|
|
899
|
+
return (jsxs(Breadcrumbs, { className: styles$R.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$R.breadcrumb, children: jsx(RouteLink, { className: styles$R.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$R['home-icon'], styles$R.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
|
|
900
900
|
}
|
|
901
901
|
function Breadcrumb({ links }) {
|
|
902
902
|
const { lg } = useBreakpoint();
|
|
@@ -909,20 +909,20 @@ function GlyphsArrowBoldCapsRightIcon(props) {
|
|
|
909
909
|
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" }) }));
|
|
910
910
|
}
|
|
911
911
|
|
|
912
|
-
var styles$
|
|
912
|
+
var styles$Q = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
|
|
913
913
|
|
|
914
914
|
function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
|
|
915
|
-
return (jsxs(Button$1, { className: clsx(className, styles$
|
|
915
|
+
return (jsxs(Button$1, { className: clsx(className, styles$Q.button, styles$Q[variant], styles$Q[size], styles$Q[color], { [styles$Q.condensed]: condensed }, { [styles$Q.icon]: icon }, styles$Q[_pseudo]), isDisabled: isDisabled,
|
|
916
916
|
// Workaround for adobe/react-spectrum #963
|
|
917
917
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
918
918
|
// @ts-ignore
|
|
919
|
-
onClick: e => e.preventDefault(), onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$
|
|
919
|
+
onClick: e => e.preventDefault(), onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$Q.icon, children: icon })), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$Q['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$Q.icon, children: icon }))] }));
|
|
920
920
|
}
|
|
921
921
|
|
|
922
|
-
var styles$
|
|
922
|
+
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"};
|
|
923
923
|
|
|
924
924
|
function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', type = 'button', }) {
|
|
925
|
-
return (jsx(Button$1, { className: clsx(styles$
|
|
925
|
+
return (jsx(Button$1, { className: clsx(styles$P['icon-button'], styles$P[size], styles$P[color], className), isDisabled: isDisabled,
|
|
926
926
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
927
927
|
// @ts-expect-error
|
|
928
928
|
onClick: e => e.preventDefault(), onPress: onPress, type: type, children: children }));
|
|
@@ -936,34 +936,34 @@ function StrokeFavoriteIcon(props) {
|
|
|
936
936
|
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" }) }));
|
|
937
937
|
}
|
|
938
938
|
|
|
939
|
-
var styles$
|
|
939
|
+
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"};
|
|
940
940
|
|
|
941
941
|
function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
|
|
942
|
-
return (jsx(IconButton, { className: clsx(styles$
|
|
943
|
-
[styles$
|
|
942
|
+
return (jsx(IconButton, { className: clsx(styles$O['favorite-button'], {
|
|
943
|
+
[styles$O['is-favorite']]: isFavorite,
|
|
944
944
|
}), color: "secondary", isDisabled: isDisabled, onPress: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
|
|
945
945
|
}
|
|
946
946
|
|
|
947
|
-
var styles$
|
|
947
|
+
var styles$N = {"link-button":"link-button-module-6i75g"};
|
|
948
948
|
|
|
949
949
|
function LinkButton({ children, className, href, isDisabled, onPress, route, target, type = href ? 'link' : 'button', }) {
|
|
950
950
|
if (type === 'link') {
|
|
951
|
-
return (jsx(RouteLink, { className: clsx(styles$
|
|
951
|
+
return (jsx(RouteLink, { className: clsx(styles$N['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, route: route, target: target, children: children }));
|
|
952
952
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
953
953
|
}
|
|
954
954
|
else if (type === 'button') {
|
|
955
|
-
return (jsx(RouteButton, { className: clsx(styles$
|
|
955
|
+
return (jsx(RouteButton, { className: clsx(styles$N['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, route: route, type: "button", children: children }));
|
|
956
956
|
}
|
|
957
957
|
throw new Error('Invalid type ${type} for LinkButton component');
|
|
958
958
|
}
|
|
959
959
|
|
|
960
|
-
var styles$
|
|
960
|
+
var styles$M = {"field-error":"field-error-module-FXnIg"};
|
|
961
961
|
|
|
962
962
|
function FieldError({ children }) {
|
|
963
|
-
return (jsx(FieldError$1, { className: styles$
|
|
963
|
+
return (jsx(FieldError$1, { className: styles$M['field-error'], children: children }));
|
|
964
964
|
}
|
|
965
965
|
|
|
966
|
-
var styles$
|
|
966
|
+
var styles$L = {"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"};
|
|
967
967
|
|
|
968
968
|
/**
|
|
969
969
|
* This component is used to create an input that grows as the user types.
|
|
@@ -978,20 +978,20 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
|
|
|
978
978
|
const handleChange = (event) => isControlled
|
|
979
979
|
? onChange?.(event)
|
|
980
980
|
: setUncontrolledValue(event.target.value);
|
|
981
|
-
return (jsx("div", { className: clsx(styles$
|
|
981
|
+
return (jsx("div", { className: clsx(styles$L['input-container'], styles$L[size], styles$L[_pseudo]), children: jsxs("div", { className: clsx({ [styles$L['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange, onClick: e => {
|
|
982
982
|
e.preventDefault();
|
|
983
983
|
e.stopPropagation();
|
|
984
984
|
e.target.focus();
|
|
985
|
-
} }), autoGrow && jsx("span", { className: styles$
|
|
985
|
+
} }), autoGrow && jsx("span", { className: styles$L['shadow-input'], children: value })] }) }));
|
|
986
986
|
});
|
|
987
987
|
Input.displayName = 'Input';
|
|
988
988
|
|
|
989
|
-
var styles$
|
|
989
|
+
var styles$K = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
|
|
990
990
|
|
|
991
991
|
function Label({ children, isRequired }) {
|
|
992
992
|
if (!children)
|
|
993
993
|
return null;
|
|
994
|
-
return (jsxs(Label$1, { className: styles$
|
|
994
|
+
return (jsxs(Label$1, { className: styles$K.label, children: [children, isRequired && jsx("span", { className: styles$K.required, children: "*" })] }));
|
|
995
995
|
}
|
|
996
996
|
|
|
997
997
|
function StrokeCollapseIcon(props) {
|
|
@@ -1006,7 +1006,7 @@ function StrokeTrashIcon(props) {
|
|
|
1006
1006
|
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" }) }));
|
|
1007
1007
|
}
|
|
1008
1008
|
|
|
1009
|
-
var styles$
|
|
1009
|
+
var styles$J = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
|
|
1010
1010
|
|
|
1011
1011
|
/**
|
|
1012
1012
|
* This component is used to create a number field.
|
|
@@ -1014,7 +1014,7 @@ var styles$I = {"field":"number-field-module-gmnog","button-input-container":"nu
|
|
|
1014
1014
|
*/
|
|
1015
1015
|
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, }) {
|
|
1016
1016
|
const inputRef = useRef(null);
|
|
1017
|
-
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
1017
|
+
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$J.field, styles$J[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$J['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled,
|
|
1018
1018
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
1019
1019
|
// @ts-expect-error
|
|
1020
1020
|
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,
|
|
@@ -1027,7 +1027,7 @@ function SolidCartIcon(props) {
|
|
|
1027
1027
|
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" }) }));
|
|
1028
1028
|
}
|
|
1029
1029
|
|
|
1030
|
-
var styles$
|
|
1030
|
+
var styles$I = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
|
|
1031
1031
|
|
|
1032
1032
|
function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
|
|
1033
1033
|
const [currentState, setState] = useState(initialState);
|
|
@@ -1115,7 +1115,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
|
|
|
1115
1115
|
e.key === 'Enter' && onConfirm(ensureNumber(updatedQuantity));
|
|
1116
1116
|
e.key === 'Escape' && onCancel();
|
|
1117
1117
|
};
|
|
1118
|
-
return (jsxs("div", { className: styles$
|
|
1118
|
+
return (jsxs("div", { className: styles$I['manual-input-container'], children: [jsx("div", { className: styles$I['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
|
|
1119
1119
|
maximumFractionDigits: 0,
|
|
1120
1120
|
style: 'decimal',
|
|
1121
1121
|
useGrouping: false,
|
|
@@ -1165,12 +1165,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1165
1165
|
return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
|
|
1166
1166
|
};
|
|
1167
1167
|
|
|
1168
|
-
var styles$
|
|
1168
|
+
var styles$H = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
|
|
1169
1169
|
|
|
1170
1170
|
function Tag({ children }) {
|
|
1171
1171
|
if (!children)
|
|
1172
1172
|
return null;
|
|
1173
|
-
return (jsxs("div", { className: styles$
|
|
1173
|
+
return (jsxs("div", { className: styles$H.tag, children: [jsx("div", { className: styles$H.body, children: children }), jsx("svg", { className: styles$H.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" }) })] }));
|
|
1174
1174
|
}
|
|
1175
1175
|
|
|
1176
1176
|
const IntlContext = createContext({
|
|
@@ -1206,7 +1206,7 @@ function useFormattedMessage() {
|
|
|
1206
1206
|
|
|
1207
1207
|
const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
|
|
1208
1208
|
|
|
1209
|
-
var styles$
|
|
1209
|
+
var styles$G = {"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"};
|
|
1210
1210
|
|
|
1211
1211
|
const formatPrice = (price) => new Intl.NumberFormat('en-US', {
|
|
1212
1212
|
maximumFractionDigits: 2,
|
|
@@ -1219,22 +1219,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
|
|
|
1219
1219
|
const priceWithCurrency = formatPrice(price);
|
|
1220
1220
|
const [wholes, decimals] = priceWithCurrency.split('.');
|
|
1221
1221
|
const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
|
|
1222
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
1223
|
-
[styles$
|
|
1224
|
-
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$
|
|
1222
|
+
return (jsxs("div", { className: clsx(className, styles$G['product-price']), children: [jsx("span", { className: clsx(styles$G['original-price'], {
|
|
1223
|
+
[styles$G['is-hidden']]: !showOriginalPrice,
|
|
1224
|
+
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$G['current-price-wrapper'], children: [jsxs("div", { className: styles$G['current-price'], children: [jsx("span", { className: styles$G.wholes, children: wholes }), jsx("span", { className: styles$G.dot, children: "." }), jsx("span", { className: styles$G.decimals, children: decimals })] }), jsx("span", { className: styles$G.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
|
|
1225
1225
|
}
|
|
1226
1226
|
|
|
1227
|
-
var styles$
|
|
1227
|
+
var styles$F = {"product-sku":"product-sku-module-ITb8x"};
|
|
1228
1228
|
|
|
1229
1229
|
function ProductSku({ sku }) {
|
|
1230
|
-
return jsx("p", { className: styles$
|
|
1230
|
+
return jsx("p", { className: styles$F['product-sku'], children: sku });
|
|
1231
1231
|
}
|
|
1232
1232
|
|
|
1233
1233
|
function isResponsiveImage(image) {
|
|
1234
1234
|
return Boolean(image.lg);
|
|
1235
1235
|
}
|
|
1236
1236
|
|
|
1237
|
-
var styles$
|
|
1237
|
+
var styles$E = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
|
|
1238
1238
|
|
|
1239
1239
|
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, }) {
|
|
1240
1240
|
const [hasError, setHasError] = useState(false);
|
|
@@ -1261,22 +1261,22 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
|
|
|
1261
1261
|
const srcSet = !hasError
|
|
1262
1262
|
? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
|
|
1263
1263
|
: undefined;
|
|
1264
|
-
return (jsx("img", { alt: image.altText, className: clsx(styles$
|
|
1265
|
-
[styles$
|
|
1264
|
+
return (jsx("img", { alt: image.altText, className: clsx(styles$E.image, className, styles$E[fit], {
|
|
1265
|
+
[styles$E['has-error']]: hasError,
|
|
1266
1266
|
}), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
|
|
1267
1267
|
}
|
|
1268
1268
|
function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1269
1269
|
if (!isResponsiveImage(image))
|
|
1270
1270
|
return null;
|
|
1271
|
-
return (jsxs("picture", { className: clsx(styles$
|
|
1272
|
-
[styles$
|
|
1271
|
+
return (jsxs("picture", { className: clsx(styles$E.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$E[fit], {
|
|
1272
|
+
[styles$E['has-error']]: hasError,
|
|
1273
1273
|
}), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
|
|
1274
1274
|
}
|
|
1275
1275
|
|
|
1276
|
-
var styles$
|
|
1276
|
+
var styles$D = {"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"};
|
|
1277
1277
|
|
|
1278
1278
|
function ProductCard({ addToCartButton: AddToCartButton, areaSelected, favoriteButton: FavoriteButton, href, id, image, onClick, onMouseDown, onMouseMove, onPress, price, role, sku, tags, title, }) {
|
|
1279
|
-
return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$
|
|
1279
|
+
return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$D['product-card'], href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$D.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$D['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$D.content, children: [jsxs("div", { className: styles$D.top, children: [jsx("div", { className: styles$D.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$D.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$D.bottom, children: [jsx("div", { className: styles$D.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$D['add-to-cart-button'], children: AddToCartButton })] })] })] }));
|
|
1280
1280
|
}
|
|
1281
1281
|
|
|
1282
1282
|
/**
|
|
@@ -6586,7 +6586,7 @@ function GlyphsArrowBoldCapsLeftIcon(props) {
|
|
|
6586
6586
|
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)" }) }));
|
|
6587
6587
|
}
|
|
6588
6588
|
|
|
6589
|
-
var styles$
|
|
6589
|
+
var styles$C = {"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"};
|
|
6590
6590
|
|
|
6591
6591
|
function CarouselNavigationButton({ direction, isDisabled = false, }) {
|
|
6592
6592
|
const swiper = useSwiper();
|
|
@@ -6598,8 +6598,8 @@ function CarouselNavigationButton({ direction, isDisabled = false, }) {
|
|
|
6598
6598
|
swiper.slidePrev();
|
|
6599
6599
|
}
|
|
6600
6600
|
}
|
|
6601
|
-
return (jsx(Button$1, { className: clsx(styles$
|
|
6602
|
-
[styles$
|
|
6601
|
+
return (jsx(Button$1, { className: clsx(styles$C['navigation-button'], {
|
|
6602
|
+
[styles$C['is-locked']]: swiper.isLocked,
|
|
6603
6603
|
}), isDisabled: isDisabled, onPress: handleNavigation, children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
|
|
6604
6604
|
}
|
|
6605
6605
|
|
|
@@ -6614,13 +6614,13 @@ function Carousel({ breakpoints, className, hasNavigation = true, hasOverflow =
|
|
|
6614
6614
|
setIsBeginning(swiper.activeIndex === 0);
|
|
6615
6615
|
}
|
|
6616
6616
|
const showNavigation = hasNavigation && !isLocked;
|
|
6617
|
-
return (jsx("div", { className: clsx(styles$
|
|
6618
|
-
[styles$
|
|
6619
|
-
[styles$
|
|
6617
|
+
return (jsx("div", { className: clsx(styles$C.carousel, className), children: jsxs(Swiper, { breakpoints: breakpoints, className: clsx(styles$C.swiper, {
|
|
6618
|
+
[styles$C['is-dragging']]: isDragging,
|
|
6619
|
+
[styles$C['has-overflow']]: hasOverflow,
|
|
6620
6620
|
}), freeMode: {
|
|
6621
6621
|
enabled: true,
|
|
6622
6622
|
sticky: true,
|
|
6623
|
-
}, modules: [freeMode], onSlideChange: swiper => handleSlideChange(swiper), onSwiper: swiper => setIsLocked(swiper.isLocked), onTouchEnd: () => setIsDragging(false), onTouchStart: () => setIsDragging(true), onUpdate: swiper => handleSlideChange(swiper), slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$
|
|
6623
|
+
}, modules: [freeMode], onSlideChange: swiper => handleSlideChange(swiper), onSwiper: swiper => setIsLocked(swiper.isLocked), onTouchEnd: () => setIsDragging(false), onTouchStart: () => setIsDragging(true), onUpdate: swiper => handleSlideChange(swiper), slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$C.slide, slideClasses), children: slide }, index))), showNavigation && (jsxs("div", { className: clsx(styles$C['navigation-buttons'], styles$C[navigationButtonsPosition]), children: [jsx("div", { className: clsx(styles$C['navigation-button-wrapper'], styles$C['navigation-button-prev']), children: jsx(CarouselNavigationButton, { direction: "previous", isDisabled: isBeginning }) }), jsx("div", { className: clsx(styles$C['navigation-button-wrapper'], styles$C['navigation-button-next']), children: jsx(CarouselNavigationButton, { direction: "next", isDisabled: isEnd }) })] }))] }) }));
|
|
6624
6624
|
}
|
|
6625
6625
|
|
|
6626
6626
|
function CategoryCarousel({ categoryCards }) {
|
|
@@ -6634,10 +6634,10 @@ function CategoryCarousel({ categoryCards }) {
|
|
|
6634
6634
|
}, slides: categoryCards, spaceBetween: 8 }));
|
|
6635
6635
|
}
|
|
6636
6636
|
|
|
6637
|
-
var styles$
|
|
6637
|
+
var styles$B = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","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"};
|
|
6638
6638
|
|
|
6639
6639
|
function Accordion({ children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
|
|
6640
|
-
return (jsx("div", { className: clsx({ [styles$
|
|
6640
|
+
return (jsx("div", { className: clsx({ [styles$B.indented]: indented }, styles$B.accordion, styles$B[color], styles$B[size], hasLineSeparator && styles$B['with-seperators']), children: children &&
|
|
6641
6641
|
Children.map(children, child => {
|
|
6642
6642
|
return cloneElement(child, { size });
|
|
6643
6643
|
}) }));
|
|
@@ -6647,7 +6647,7 @@ function GlyphsChevronsSlimDownIcon(props) {
|
|
|
6647
6647
|
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" }) }));
|
|
6648
6648
|
}
|
|
6649
6649
|
|
|
6650
|
-
var styles$
|
|
6650
|
+
var styles$A = {"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"};
|
|
6651
6651
|
|
|
6652
6652
|
const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen, onToggle, }) => {
|
|
6653
6653
|
const showAllRef = useRef(null);
|
|
@@ -6656,14 +6656,14 @@ const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen,
|
|
|
6656
6656
|
return;
|
|
6657
6657
|
showAllRef.current.style.setProperty('--initital-height', `${initialHeight}px`);
|
|
6658
6658
|
}, [initialHeight]);
|
|
6659
|
-
return (jsxs("div", { ref: showAllRef, className: clsx(styles$
|
|
6660
|
-
[styles$
|
|
6661
|
-
}), children: [jsx("div", { className: styles$
|
|
6662
|
-
[styles$
|
|
6663
|
-
}), children: children }) }), jsxs(LinkButton, { className: styles$
|
|
6659
|
+
return (jsxs("div", { ref: showAllRef, className: clsx(styles$A['show-all'], {
|
|
6660
|
+
[styles$A['is-open']]: isOpen,
|
|
6661
|
+
}), children: [jsx("div", { className: styles$A.panel, children: jsx("div", { className: clsx(styles$A.content, {
|
|
6662
|
+
[styles$A['has-transparency']]: hasTransparency,
|
|
6663
|
+
}), children: children }) }), jsxs(LinkButton, { className: styles$A.button, onPress: () => onToggle(!isOpen), children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$A.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
|
|
6664
6664
|
};
|
|
6665
6665
|
|
|
6666
|
-
var styles$
|
|
6666
|
+
var styles$z = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
|
|
6667
6667
|
|
|
6668
6668
|
function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
6669
6669
|
const shownOptions = options.slice(0, amountShown);
|
|
@@ -6674,28 +6674,28 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
|
6674
6674
|
options.filter(option => option.isSelected).length === 0) {
|
|
6675
6675
|
return null;
|
|
6676
6676
|
}
|
|
6677
|
-
return (jsxs("div", { className: styles$
|
|
6677
|
+
return (jsxs("div", { className: styles$z['multi-select'], children: [jsx("div", { className: styles$z['filter-items'], children: shownOptions
|
|
6678
6678
|
.concat(isOpen ? [] : hiddenSelectedOptions)
|
|
6679
|
-
.map(option => (jsxs("div", { className: styles$
|
|
6679
|
+
.map(option => (jsxs("div", { className: styles$z['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$z['filter-items'], styles$z['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$z['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
|
|
6680
6680
|
}
|
|
6681
6681
|
|
|
6682
|
-
var styles$
|
|
6682
|
+
var styles$y = {"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"};
|
|
6683
6683
|
|
|
6684
6684
|
function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
|
|
6685
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
6685
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$y.checkbox, styles$y[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$y.box, children: jsx("svg", { "aria-hidden": "true", className: styles$y.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
|
|
6686
6686
|
}
|
|
6687
6687
|
|
|
6688
6688
|
function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
|
|
6689
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
6689
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$y.checkbox, styles$y['color-checkbox'], styles$y[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
|
|
6690
6690
|
'--selected-color': color,
|
|
6691
|
-
}, value: value, children: [jsx("div", { className: styles$
|
|
6691
|
+
}, value: value, children: [jsx("div", { className: styles$y.box }), children] }));
|
|
6692
6692
|
}
|
|
6693
6693
|
|
|
6694
6694
|
function StrokeCheckmarkIcon(props) {
|
|
6695
6695
|
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" }) }));
|
|
6696
6696
|
}
|
|
6697
6697
|
|
|
6698
|
-
var styles$
|
|
6698
|
+
var styles$x = {"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"};
|
|
6699
6699
|
|
|
6700
6700
|
function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, size = 'md', variant = 'outline', }) {
|
|
6701
6701
|
const selectRef = useRef(null);
|
|
@@ -6712,12 +6712,12 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
|
|
|
6712
6712
|
window.addEventListener('resize', updateWidth);
|
|
6713
6713
|
return () => window.removeEventListener('resize', updateWidth);
|
|
6714
6714
|
}, []);
|
|
6715
|
-
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$
|
|
6715
|
+
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$x.select, styles$x[size], styles$x[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$x.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$x.chevron })] }), jsx(Popover, { ref: ref =>
|
|
6716
6716
|
// Workaround for react/react-aria #1513
|
|
6717
|
-
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$
|
|
6717
|
+
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$x.popover, styles$x[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$x.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$x.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$x.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$x.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
|
|
6718
6718
|
}
|
|
6719
6719
|
|
|
6720
|
-
var styles$
|
|
6720
|
+
var styles$w = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
|
|
6721
6721
|
|
|
6722
6722
|
/**
|
|
6723
6723
|
* This component is used to create a textarea that can grow as the user types.
|
|
@@ -6752,7 +6752,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
6752
6752
|
}
|
|
6753
6753
|
updateHeight();
|
|
6754
6754
|
}, [ref, autoGrow, updateHeight, size]);
|
|
6755
|
-
return (jsx("div", { className: styles$
|
|
6755
|
+
return (jsx("div", { className: styles$w['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
|
|
6756
6756
|
ref.current =
|
|
6757
6757
|
node;
|
|
6758
6758
|
textAreaRef.current = node;
|
|
@@ -6763,7 +6763,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
6763
6763
|
});
|
|
6764
6764
|
TextArea.displayName = 'TextArea';
|
|
6765
6765
|
|
|
6766
|
-
var styles$
|
|
6766
|
+
var styles$v = {"field":"text-field-module-JeaK0"};
|
|
6767
6767
|
|
|
6768
6768
|
/**
|
|
6769
6769
|
* This component is used to create a text field.
|
|
@@ -6771,7 +6771,7 @@ var styles$u = {"field":"text-field-module-JeaK0"};
|
|
|
6771
6771
|
* This field can also grow when a user types in text.
|
|
6772
6772
|
*/
|
|
6773
6773
|
function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
|
|
6774
|
-
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
6774
|
+
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$v.field, styles$v[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
|
|
6775
6775
|
onChange?.(value);
|
|
6776
6776
|
}, 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, {})] }));
|
|
6777
6777
|
}
|
|
@@ -6781,31 +6781,31 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
|
|
|
6781
6781
|
return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
|
|
6782
6782
|
}
|
|
6783
6783
|
|
|
6784
|
-
var styles$
|
|
6784
|
+
var styles$u = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
|
|
6785
6785
|
|
|
6786
6786
|
function ProductOverviewGrid({ children }) {
|
|
6787
|
-
return (jsx("div", { className: styles$
|
|
6787
|
+
return (jsx("div", { className: styles$u['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$u['grid-item'], children: child }, index))) }));
|
|
6788
6788
|
}
|
|
6789
6789
|
|
|
6790
|
-
var styles$
|
|
6790
|
+
var styles$t = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
|
|
6791
6791
|
|
|
6792
6792
|
function ProgressCircle({ className }) {
|
|
6793
|
-
return (jsxs("svg", { className: clsx(styles$
|
|
6793
|
+
return (jsxs("svg", { className: clsx(styles$t['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" }) })] }));
|
|
6794
6794
|
}
|
|
6795
6795
|
|
|
6796
|
-
var styles$
|
|
6796
|
+
var styles$s = {"loading-overlay":"loading-overlay-module-L67Gy"};
|
|
6797
6797
|
|
|
6798
6798
|
function LoadingOverlay() {
|
|
6799
|
-
return (jsx("div", { className: styles$
|
|
6799
|
+
return (jsx("div", { className: styles$s['loading-overlay'], children: jsx(ProgressCircle, {}) }));
|
|
6800
6800
|
}
|
|
6801
6801
|
|
|
6802
|
-
var styles$
|
|
6802
|
+
var styles$r = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
|
|
6803
6803
|
|
|
6804
6804
|
function PageContainer({ children, className, }) {
|
|
6805
|
-
return (jsx("div", { className: styles$
|
|
6805
|
+
return (jsx("div", { className: styles$r['page-container'], children: jsx("div", { className: clsx(styles$r['inner-page-container'], className), children: children }) }));
|
|
6806
6806
|
}
|
|
6807
6807
|
|
|
6808
|
-
var styles$
|
|
6808
|
+
var styles$q = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","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"};
|
|
6809
6809
|
|
|
6810
6810
|
const sizeToTag = {
|
|
6811
6811
|
l: 'h3',
|
|
@@ -6818,21 +6818,21 @@ const sizeToTag = {
|
|
|
6818
6818
|
};
|
|
6819
6819
|
function Heading({ children, className, italic, size = 'xxl', tag, uppercase, }) {
|
|
6820
6820
|
return createElement$1(tag || sizeToTag[size], {
|
|
6821
|
-
className: clsx(className, styles$
|
|
6822
|
-
[styles$
|
|
6823
|
-
[styles$
|
|
6821
|
+
className: clsx(className, styles$q.heading, styles$q[size], {
|
|
6822
|
+
[styles$q.uppercase]: uppercase,
|
|
6823
|
+
[styles$q.italic]: italic,
|
|
6824
6824
|
}),
|
|
6825
6825
|
}, children);
|
|
6826
6826
|
}
|
|
6827
6827
|
|
|
6828
|
-
var styles$
|
|
6828
|
+
var styles$p = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
|
|
6829
6829
|
|
|
6830
6830
|
function PageTitle({ children }) {
|
|
6831
6831
|
const { lg, xxl } = useBreakpoint();
|
|
6832
|
-
return (jsx(Heading, { italic: true, uppercase: true, className: styles$
|
|
6832
|
+
return (jsx(Heading, { italic: true, uppercase: true, className: styles$p.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
|
|
6833
6833
|
}
|
|
6834
6834
|
function Page({ breadCrumb, children, className, title }) {
|
|
6835
|
-
return (jsxs(PageContainer, { className: clsx(styles$
|
|
6835
|
+
return (jsxs(PageContainer, { className: clsx(styles$p.page, className), children: [jsx("div", { className: styles$p.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
|
|
6836
6836
|
}
|
|
6837
6837
|
|
|
6838
6838
|
const useSidebar = () => {
|
|
@@ -6874,12 +6874,12 @@ function GlyphsChevronsBoldDownIcon(props) {
|
|
|
6874
6874
|
function AccordionItem({ _pseudo = 'none', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
|
|
6875
6875
|
const { isOpen, toggle } = useDisclosure(initialIsOpen);
|
|
6876
6876
|
const panelId = `panel-${id}`;
|
|
6877
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
6878
|
-
[styles$
|
|
6879
|
-
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$
|
|
6877
|
+
return (jsxs("div", { className: clsx(className, styles$B['accordion-item'], {
|
|
6878
|
+
[styles$B['is-open']]: isOpen,
|
|
6879
|
+
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$B.button, styles$B[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$B.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$B.panel, id: panelId, role: "region", children: jsx("div", { className: styles$B.content, children: children }) })] }));
|
|
6880
6880
|
}
|
|
6881
6881
|
|
|
6882
|
-
var styles$
|
|
6882
|
+
var styles$o = {"filter-section":"filter-section-module-q1Ob8","default":"filter-section-module-JkP09","with-action":"filter-section-module-9qc6L","header":"filter-section-module-zi2ZE","title":"filter-section-module-hWVv-","content":"filter-section-module-15-YW"};
|
|
6883
6883
|
|
|
6884
6884
|
function FilterSection({ ...props }) {
|
|
6885
6885
|
const variant = props.variant;
|
|
@@ -6897,16 +6897,16 @@ function FilterSection({ ...props }) {
|
|
|
6897
6897
|
/* eslint-enable @typescript-eslint/no-unnecessary-condition */
|
|
6898
6898
|
}
|
|
6899
6899
|
function CollapsibleFilterSection({ children, initialIsOpen = true, title, variant, }) {
|
|
6900
|
-
return (jsx("section", { className: clsx(styles$
|
|
6900
|
+
return (jsx("section", { className: clsx(styles$o['filter-section'], styles$o[variant]), children: jsx(Accordion, { children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: styles$o['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: children }) }) }));
|
|
6901
6901
|
}
|
|
6902
6902
|
function WithActionFilterSection({ button, children, title, variant, }) {
|
|
6903
|
-
return (jsxs("section", { className: clsx(styles$
|
|
6903
|
+
return (jsxs("section", { className: clsx(styles$o['filter-section'], styles$o[variant]), children: [jsxs("div", { className: styles$o.header, children: [jsx("h3", { className: styles$o.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: styles$o.content, children: children })] }));
|
|
6904
6904
|
}
|
|
6905
6905
|
function DefaultFilterSection({ children, title, variant, }) {
|
|
6906
|
-
return (jsxs("section", { className: clsx(styles$
|
|
6906
|
+
return (jsxs("section", { className: clsx(styles$o['filter-section'], styles$o[variant]), children: [jsx("h3", { className: styles$o.title, children: title }), jsx("div", { className: styles$o.content, children: children })] }));
|
|
6907
6907
|
}
|
|
6908
6908
|
|
|
6909
|
-
var styles$
|
|
6909
|
+
var styles$n = {"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","count":"algolia-filter-panel-module-uAHPx","button":"algolia-filter-panel-module-ABOYv"};
|
|
6910
6910
|
|
|
6911
6911
|
function AlgoliaActiveCategories() {
|
|
6912
6912
|
const { items: categories } = useHierarchicalMenu({
|
|
@@ -6927,8 +6927,8 @@ function Categories({ categories, path: _path, }) {
|
|
|
6927
6927
|
.map(category => {
|
|
6928
6928
|
const path = _path + '/' + category.label;
|
|
6929
6929
|
const isActive = !category.data || !category.data.some(c => c.isRefined);
|
|
6930
|
-
return (jsxs(Fragment, { children: [jsx(RouteLink, { className: clsx(styles$
|
|
6931
|
-
[styles$
|
|
6930
|
+
return (jsxs(Fragment, { children: [jsx(RouteLink, { className: clsx(styles$n.category, {
|
|
6931
|
+
[styles$n['is-active']]: isActive,
|
|
6932
6932
|
}), href: path, isDisabled: isActive, children: category.label }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
|
|
6933
6933
|
});
|
|
6934
6934
|
}
|
|
@@ -6937,12 +6937,12 @@ function StrokeCloseboxIcon(props) {
|
|
|
6937
6937
|
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" }) }));
|
|
6938
6938
|
}
|
|
6939
6939
|
|
|
6940
|
-
var styles$
|
|
6940
|
+
var styles$m = {"active-filter-item":"active-filters-module-Rrmhy","category":"active-filters-module-u9TTE","active-filter-value":"active-filters-module-CIuPU"};
|
|
6941
6941
|
|
|
6942
6942
|
const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
|
|
6943
6943
|
if (selectedFilterCategories.length === 0)
|
|
6944
6944
|
return null;
|
|
6945
|
-
return (jsx(FilterSection, { button: jsx(LinkButton, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: "Chosen filters", variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$
|
|
6945
|
+
return (jsx(FilterSection, { button: jsx(LinkButton, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: "Chosen filters", variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$m.category, children: category.filters.map(filter => (jsxs("div", { className: styles$m['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [category.label, ": "] }), jsx("span", { className: styles$m['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}`))) }));
|
|
6946
6946
|
};
|
|
6947
6947
|
|
|
6948
6948
|
function AlgoliaActiveFilters() {
|
|
@@ -6981,9 +6981,9 @@ function AlgoliaCategoriesFilters() {
|
|
|
6981
6981
|
const t = useFormattedMessage();
|
|
6982
6982
|
if (categories.length <= 0)
|
|
6983
6983
|
return null;
|
|
6984
|
-
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs("button", { className: clsx(styles$
|
|
6985
|
-
[styles$
|
|
6986
|
-
}), onClick: () => refine(value), type: "button", children: [jsx("span", { children: value }), " ", jsxs("span", { className: styles$
|
|
6984
|
+
return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs("button", { className: clsx(styles$n.category, {
|
|
6985
|
+
[styles$n['is-active']]: isRefined,
|
|
6986
|
+
}), onClick: () => refine(value), type: "button", children: [jsx("span", { children: value }), " ", jsxs("span", { className: styles$n.count, children: ["(", count, ")"] })] }, value))) }));
|
|
6987
6987
|
}
|
|
6988
6988
|
|
|
6989
6989
|
function AlgoliaMultiSelectFilterSection({ attribute, }) {
|
|
@@ -7015,23 +7015,23 @@ function AlgoliaResultsCount() {
|
|
|
7015
7015
|
|
|
7016
7016
|
function PanelCloseButton() {
|
|
7017
7017
|
const { toggle } = useSidebarActions();
|
|
7018
|
-
return (jsx("div", { className: styles$
|
|
7018
|
+
return (jsx("div", { className: styles$n.button, children: jsxs(Button, { withArrow: true, onPress: toggle, size: "md", children: [jsx(FormattedMessage, { id: "Show" }), " ", jsx(AlgoliaResultsCount, {})] }) }));
|
|
7019
7019
|
}
|
|
7020
7020
|
function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilters = false, }) {
|
|
7021
7021
|
const { attributesToRender } = useDynamicWidgets({
|
|
7022
7022
|
maxValuesPerFacet: 100,
|
|
7023
7023
|
});
|
|
7024
|
-
return (jsx("div", { className: styles$
|
|
7024
|
+
return (jsx("div", { className: styles$n['filter-panel'], children: jsxs("div", { className: styles$n['scroll-container'], children: [showActiveCategories && jsx(AlgoliaActiveCategories, {}), showCategoriesFilters && jsx(AlgoliaCategoriesFilters, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length > 0 && (jsx("section", { children: attributesToRender.map((attribute, index) => (jsx(AlgoliaMultiSelectFilterSection, { attribute: attribute }, `attribute-${index}`))) })), jsx(PanelCloseButton, {})] }) }));
|
|
7025
7025
|
}
|
|
7026
7026
|
|
|
7027
7027
|
function GlyphsChevronsSlimRightIcon(props) {
|
|
7028
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: "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" }) }));
|
|
7029
7029
|
}
|
|
7030
7030
|
|
|
7031
|
-
var styles$
|
|
7031
|
+
var styles$l = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
|
|
7032
7032
|
|
|
7033
7033
|
function Pagination({ currentPage, onChange, totalPages, }) {
|
|
7034
|
-
return (jsxs("div", { className: styles$
|
|
7034
|
+
return (jsxs("div", { className: styles$l.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles$l['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, {}) })] }));
|
|
7035
7035
|
}
|
|
7036
7036
|
|
|
7037
7037
|
function AlgoliaPagination({ onChange }) {
|
|
@@ -7192,19 +7192,19 @@ function useAlgoliaInsights() {
|
|
|
7192
7192
|
sendEvents: Parameters<ReturnType<typeof makeSendEvents>>;
|
|
7193
7193
|
*/
|
|
7194
7194
|
|
|
7195
|
-
var styles$
|
|
7195
|
+
var styles$k = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X"};
|
|
7196
7196
|
|
|
7197
7197
|
function Modal({ children, className, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
|
|
7198
|
-
return (jsx(ModalOverlay, { className: clsx(styles$
|
|
7198
|
+
return (jsx(ModalOverlay, { className: clsx(styles$k['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: styles$k.modal, children: children }) }));
|
|
7199
7199
|
}
|
|
7200
7200
|
|
|
7201
|
-
var styles$
|
|
7201
|
+
var styles$j = {"header":"dialog-module-ZnsAe","heading":"dialog-module-SwpuZ","close":"dialog-module-Y7Tqg","content":"dialog-module-Koqia","footer":"dialog-module-y7Axm"};
|
|
7202
7202
|
|
|
7203
7203
|
function Footer({ close }) {
|
|
7204
7204
|
return (jsx(Button, { onPress: close, size: "md", children: "Close" }));
|
|
7205
7205
|
}
|
|
7206
7206
|
function Dialog({ allowClose = true, children, className, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
|
|
7207
|
-
return (jsx(Modal, { className: clsx(styles$
|
|
7207
|
+
return (jsx(Modal, { className: clsx(styles$j['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$j.header, children: [!hideTitle && (jsx(Heading, { className: styles$j.heading, size: "xs", children: title })), jsx("div", { className: styles$j.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onPress: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$j.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$j.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
|
|
7208
7208
|
}
|
|
7209
7209
|
|
|
7210
7210
|
class WishListNameAlreadyExistsError extends Error {
|
|
@@ -7255,7 +7255,7 @@ function useFetchWishLists() {
|
|
|
7255
7255
|
});
|
|
7256
7256
|
}
|
|
7257
7257
|
|
|
7258
|
-
var styles$
|
|
7258
|
+
var styles$i = {"content":"add-to-favorite-dialog-module-WJYMb","footer-button-panel":"add-to-favorite-dialog-module--0-Ln","loading-panel":"add-to-favorite-dialog-module-ZAuzE"};
|
|
7259
7259
|
|
|
7260
7260
|
function InnerAddToFavoriteDialog({ isOpen, onCancel, onSubmit, }) {
|
|
7261
7261
|
const t = useFormattedMessage();
|
|
@@ -7280,13 +7280,13 @@ function InnerAddToFavoriteDialog({ isOpen, onCancel, onSubmit, }) {
|
|
|
7280
7280
|
}
|
|
7281
7281
|
selectedWishListid && onSubmit(selectedWishListid);
|
|
7282
7282
|
}
|
|
7283
|
-
return (jsx(Dialog, { allowClose: !isLoading, footer: jsxs("div", { className: styles$
|
|
7283
|
+
return (jsx(Dialog, { allowClose: !isLoading, footer: jsxs("div", { className: styles$i['footer-button-panel'], children: [jsx(Button, { isDisabled: !allowSubmit, onPress: handleOnSubmit, type: "submit", children: t('Submit') }), jsx(Button, { color: "secondary", isDisabled: !allowCancel, onPress: onCancel, variant: "outline", children: t('Cancel') })] }), isDismissable: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: onCancel, onSubmit: handleOnSubmit, title: t('Add to list'), validationErrors: addWishListError
|
|
7284
7284
|
? {
|
|
7285
7285
|
wishListName: addWishListError instanceof WishListNameAlreadyExistsError
|
|
7286
7286
|
? t('List name already exists')
|
|
7287
7287
|
: t('An unexpected error occured'),
|
|
7288
7288
|
}
|
|
7289
|
-
: undefined, children: isFetching ? (jsxs("div", { className: styles$
|
|
7289
|
+
: undefined, children: isFetching ? (jsxs("div", { className: styles$i['loading-panel'], children: [jsx("p", { children: "Loading..." }), jsx(ProgressCircle, {})] })) : fetchWishListError ? (jsx("div", { children: "Oopsie" })) : (jsxs("div", { className: styles$i.content, children: [jsx(Select, { isDisabled: isLoading, label: t('Select a list'), onChange: wishListId => {
|
|
7290
7290
|
const isCreateNewList = wishListId === 'new';
|
|
7291
7291
|
setIsCreatingNewList(isCreateNewList);
|
|
7292
7292
|
setSelectedWishListId(isCreateNewList ? undefined : wishListId);
|
|
@@ -7374,6 +7374,10 @@ function ProductOverview() {
|
|
|
7374
7374
|
}, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
|
|
7375
7375
|
}
|
|
7376
7376
|
|
|
7377
|
+
const defaultLanguageCodes = {
|
|
7378
|
+
pl: 'en',
|
|
7379
|
+
};
|
|
7380
|
+
const getLanguageForAlgoliaIndex = (languageCode) => defaultLanguageCodes[languageCode] || languageCode;
|
|
7377
7381
|
const algoliaIndexesPerEnvironment = {
|
|
7378
7382
|
production: {
|
|
7379
7383
|
default: 'prod_sonic_products_<languageCode>',
|
|
@@ -7427,13 +7431,14 @@ const getAlgoliaIndex = (environment, languageCode) => {
|
|
|
7427
7431
|
throw new Error('Language code not detected');
|
|
7428
7432
|
if (!environmentIndex)
|
|
7429
7433
|
throw new Error('Environment not detected');
|
|
7434
|
+
const language = getLanguageForAlgoliaIndex(shortLanguageCode);
|
|
7430
7435
|
return {
|
|
7431
|
-
default: environmentIndex.default.replace(/<languageCode>/,
|
|
7436
|
+
default: environmentIndex.default.replace(/<languageCode>/, language),
|
|
7432
7437
|
sort: environmentIndex.sort.map(({ index, name }) => ({
|
|
7433
|
-
index: index.replace(/<languageCode>/,
|
|
7438
|
+
index: index.replace(/<languageCode>/, language),
|
|
7434
7439
|
name,
|
|
7435
7440
|
})),
|
|
7436
|
-
suggestions: environmentIndex.suggestions.replace(/<languageCode>/,
|
|
7441
|
+
suggestions: environmentIndex.suggestions.replace(/<languageCode>/, language),
|
|
7437
7442
|
};
|
|
7438
7443
|
};
|
|
7439
7444
|
|
|
@@ -7605,12 +7610,12 @@ function AlgoliaSortBy() {
|
|
|
7605
7610
|
return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
|
|
7606
7611
|
}
|
|
7607
7612
|
|
|
7608
|
-
var styles$
|
|
7613
|
+
var styles$h = {"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"};
|
|
7609
7614
|
|
|
7610
7615
|
function CategoryCard({ href, image, isSelected = false, title, withArrow = false, }) {
|
|
7611
7616
|
return (jsxs(RouteLink, { className: clsx({
|
|
7612
|
-
[styles$
|
|
7613
|
-
}, styles$
|
|
7617
|
+
[styles$h['is-selected']]: isSelected,
|
|
7618
|
+
}, styles$h['category-card']), href: href, children: [jsx("div", { className: styles$h['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsxs("p", { className: styles$h.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$h.arrow })] })] }));
|
|
7614
7619
|
}
|
|
7615
7620
|
|
|
7616
7621
|
const ProductListingPageContext = createContext({
|
|
@@ -7639,20 +7644,20 @@ function ConnectedCategoryCarousel() {
|
|
|
7639
7644
|
}, title: category.title }, index))) }));
|
|
7640
7645
|
}
|
|
7641
7646
|
|
|
7642
|
-
var styles$
|
|
7647
|
+
var styles$g = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
|
|
7643
7648
|
|
|
7644
7649
|
function PromoCard({ href, image, variant }) {
|
|
7645
|
-
return (jsx(RouteLink, { className: clsx(styles$
|
|
7650
|
+
return (jsx(RouteLink, { className: clsx(styles$g['promo-card'], styles$g[variant]), href: href, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
|
|
7646
7651
|
}
|
|
7647
7652
|
|
|
7648
|
-
var styles$
|
|
7653
|
+
var styles$f = {"promos":"promo-cards-module-Dy4p3"};
|
|
7649
7654
|
|
|
7650
7655
|
function PromoCards({ promoCardsData = [], }) {
|
|
7651
7656
|
const { lg } = useBreakpoint();
|
|
7652
7657
|
const promoCards = promoCardsData.map((promoCard, index) => (jsx(PromoCard, { href: promoCard.href, image: promoCard.image, variant: index % 2 === 0 ? 'lg' : 'sm' }, `promo-card-${index}`)));
|
|
7653
7658
|
if (promoCardsData.length === 0)
|
|
7654
7659
|
return null;
|
|
7655
|
-
return (jsx("div", { className: styles$
|
|
7660
|
+
return (jsx("div", { className: styles$f.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
|
|
7656
7661
|
}
|
|
7657
7662
|
|
|
7658
7663
|
const scrollToTop = (scrollOptions) => {
|
|
@@ -7662,17 +7667,17 @@ const scrollToTop = (scrollOptions) => {
|
|
|
7662
7667
|
});
|
|
7663
7668
|
};
|
|
7664
7669
|
|
|
7665
|
-
var styles$
|
|
7670
|
+
var styles$e = {"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"};
|
|
7666
7671
|
|
|
7667
7672
|
function InnerSidebar({ children }) {
|
|
7668
7673
|
const { isDocked, isOpen, toggle, transition } = useSidebar();
|
|
7669
|
-
return (jsxs("aside", { className: clsx(styles$
|
|
7670
|
-
[styles$
|
|
7671
|
-
[styles$
|
|
7672
|
-
[styles$
|
|
7673
|
-
[styles$
|
|
7674
|
-
[styles$
|
|
7675
|
-
}), children: [jsx("div", { className: styles$
|
|
7674
|
+
return (jsxs("aside", { className: clsx(styles$e.sidebar, {
|
|
7675
|
+
[styles$e['transition']]: transition,
|
|
7676
|
+
[styles$e['is-open']]: isOpen,
|
|
7677
|
+
[styles$e['is-closed']]: !isOpen,
|
|
7678
|
+
[styles$e['is-docked']]: isDocked,
|
|
7679
|
+
[styles$e['is-not-docked']]: !isDocked,
|
|
7680
|
+
}), children: [jsx("div", { className: styles$e.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
|
|
7676
7681
|
}
|
|
7677
7682
|
function Sidebar({ children }) {
|
|
7678
7683
|
return jsx(InnerSidebar, { children: children });
|
|
@@ -7687,7 +7692,7 @@ const ToggleSidebarButton = () => {
|
|
|
7687
7692
|
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" })) }));
|
|
7688
7693
|
};
|
|
7689
7694
|
|
|
7690
|
-
var styles$
|
|
7695
|
+
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"};
|
|
7691
7696
|
|
|
7692
7697
|
function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
|
|
7693
7698
|
const languageCode = useLanguageCode();
|
|
@@ -7712,13 +7717,13 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
|
|
|
7712
7717
|
return jsx(LoadingOverlay, {});
|
|
7713
7718
|
}
|
|
7714
7719
|
const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
|
|
7715
|
-
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$
|
|
7720
|
+
return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, 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 }) }) }) }));
|
|
7716
7721
|
}
|
|
7717
7722
|
function ProductListingPageContent({ promoCards, }) {
|
|
7718
|
-
return (jsxs(Fragment, { children: [promoCards?.length && (jsx("section", { className: styles$
|
|
7723
|
+
return (jsxs(Fragment, { 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(ProductOverview, {}), jsx("div", { className: styles$d.pagination, children: jsx(AlgoliaPagination, { onChange: () => scrollToTop() }) })] })] }) })] }));
|
|
7719
7724
|
}
|
|
7720
7725
|
|
|
7721
|
-
var styles$
|
|
7726
|
+
var styles$c = {"overlay-background":"overlay-background-module-j7R7T","open":"overlay-background-module-DZWsP","close":"overlay-background-module-8pcWN"};
|
|
7722
7727
|
|
|
7723
7728
|
function OverlayBackground({ className, isOpen, onClick, }) {
|
|
7724
7729
|
const [, setRender] = useState(isOpen);
|
|
@@ -7739,9 +7744,9 @@ function OverlayBackground({ className, isOpen, onClick, }) {
|
|
|
7739
7744
|
}, [isOpen]);
|
|
7740
7745
|
if (typeof window === 'undefined')
|
|
7741
7746
|
return null;
|
|
7742
|
-
return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$
|
|
7743
|
-
[styles$
|
|
7744
|
-
[styles$
|
|
7747
|
+
return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$c['overlay-background'], {
|
|
7748
|
+
[styles$c['open']]: isOpen,
|
|
7749
|
+
[styles$c['close']]: !isOpen,
|
|
7745
7750
|
}, className), onClick: onClick }), document.body);
|
|
7746
7751
|
}
|
|
7747
7752
|
|
|
@@ -7758,7 +7763,7 @@ function useIsBreakpoint(breakpoint) {
|
|
|
7758
7763
|
return isMatch;
|
|
7759
7764
|
}
|
|
7760
7765
|
|
|
7761
|
-
var styles$
|
|
7766
|
+
var styles$b = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
|
|
7762
7767
|
|
|
7763
7768
|
function SidebarDetectBreakpoint() {
|
|
7764
7769
|
const xxl = useIsBreakpoint('xxl');
|
|
@@ -7788,10 +7793,10 @@ function SidebarDetectBreakpoint() {
|
|
|
7788
7793
|
function SidebarProvider({ children }) {
|
|
7789
7794
|
const state = useSidebar();
|
|
7790
7795
|
const { close, isDocked, isOpen, transition } = state;
|
|
7791
|
-
return (jsxs("div", { className: clsx(styles$
|
|
7792
|
-
[styles$
|
|
7793
|
-
[styles$
|
|
7794
|
-
[styles$
|
|
7796
|
+
return (jsxs("div", { className: clsx(styles$b['sidebar-container'], {
|
|
7797
|
+
[styles$b['transition']]: transition,
|
|
7798
|
+
[styles$b['docked']]: isDocked,
|
|
7799
|
+
[styles$b['open']]: isOpen,
|
|
7795
7800
|
}), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(OverlayBackground, { isOpen: isOpen, onClick: close }))] }));
|
|
7796
7801
|
}
|
|
7797
7802
|
|
|
@@ -8115,13 +8120,13 @@ function useAlgoliaSearch() {
|
|
|
8115
8120
|
};
|
|
8116
8121
|
}
|
|
8117
8122
|
|
|
8118
|
-
var styles$
|
|
8123
|
+
var styles$a = {"global-search-overlay-background-position":"global-search-module-mmXv1","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx"};
|
|
8119
8124
|
|
|
8120
8125
|
const GlobalSearchDisclosureContext = createContext(null);
|
|
8121
8126
|
function GlobalSearchContainer({ children, }) {
|
|
8122
8127
|
const { close, isOpen, open, toggle } = useDisclosure(false);
|
|
8123
8128
|
const panelRef = useRef(null);
|
|
8124
|
-
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$
|
|
8129
|
+
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 })] }) }));
|
|
8125
8130
|
}
|
|
8126
8131
|
|
|
8127
8132
|
const useGlobalSearchDisclosure = () => {
|
|
@@ -8140,7 +8145,7 @@ function StrokeSearchIcon(props) {
|
|
|
8140
8145
|
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" }) }));
|
|
8141
8146
|
}
|
|
8142
8147
|
|
|
8143
|
-
var styles$
|
|
8148
|
+
var styles$9 = {"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"};
|
|
8144
8149
|
|
|
8145
8150
|
function SearchInput({ autocomplete, formRef, inputRef, onCancel, }) {
|
|
8146
8151
|
const formProps = autocomplete?.getFormProps({
|
|
@@ -8150,10 +8155,10 @@ function SearchInput({ autocomplete, formRef, inputRef, onCancel, }) {
|
|
|
8150
8155
|
inputElement: inputRef.current,
|
|
8151
8156
|
});
|
|
8152
8157
|
const labelProps = autocomplete?.getLabelProps({});
|
|
8153
|
-
return (jsx("form", { ref: formRef, className: styles$
|
|
8158
|
+
return (jsx("form", { ref: formRef, className: styles$9.form, ...formProps, children: jsxs("div", { className: styles$9['input-container'], children: [jsx("label", { className: styles$9.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$9['icon-search'], styles$9.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
|
|
8154
8159
|
if (e.key === 'Escape')
|
|
8155
8160
|
onCancel?.();
|
|
8156
|
-
}, ...inputProps, className: styles$
|
|
8161
|
+
}, ...inputProps, className: styles$9.input }), inputProps?.value && (jsx(IconButton, { className: styles$9['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
|
|
8157
8162
|
}
|
|
8158
8163
|
|
|
8159
8164
|
function ConnectedSearchInput() {
|
|
@@ -8162,12 +8167,12 @@ function ConnectedSearchInput() {
|
|
|
8162
8167
|
return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close }));
|
|
8163
8168
|
}
|
|
8164
8169
|
|
|
8165
|
-
var styles$
|
|
8170
|
+
var styles$8 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
|
|
8166
8171
|
|
|
8167
8172
|
function CategoriesGrid({ categories }) {
|
|
8168
8173
|
// eslint-disable-next-line no-console
|
|
8169
8174
|
console.log(categories);
|
|
8170
|
-
return (jsx("div", { className: styles$
|
|
8175
|
+
return (jsx("div", { className: styles$8['categories-grid'], children: Array.from({ length: 16 }).map((_, index) => (jsx("div", { className: styles$8['category'], children: jsx(CategoryCard, { withArrow: true, href: "/", image: {
|
|
8171
8176
|
image: {
|
|
8172
8177
|
1: 'https://images.sonic-equipment.com/categories/Wire_strippers_Pliers.webp',
|
|
8173
8178
|
2: 'https://images.sonic-equipment.com/categories/Wire_strippers_Pliers.webp',
|
|
@@ -8178,16 +8183,16 @@ function CategoriesGrid({ categories }) {
|
|
|
8178
8183
|
}, title: "Bits & Bits Sets" }) }, index))) }));
|
|
8179
8184
|
}
|
|
8180
8185
|
|
|
8181
|
-
var styles$
|
|
8186
|
+
var styles$7 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR","content":"search-section-module-VZlvZ"};
|
|
8182
8187
|
|
|
8183
8188
|
function SearchSection({ button, children, className, title, }) {
|
|
8184
|
-
return (jsxs("div", { className: clsx(styles$
|
|
8189
|
+
return (jsxs("div", { className: clsx(styles$7['search-section'], className), children: [jsxs("div", { className: styles$7.header, children: [title && jsx("h2", { className: styles$7.title, children: title }), button && button] }), jsx("div", { className: styles$7.content, children: children })] }));
|
|
8185
8190
|
}
|
|
8186
8191
|
|
|
8187
|
-
var styles$
|
|
8192
|
+
var styles$6 = {"content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","product-results":"search-content-module-bcFCH","no-results-text":"search-content-module-H-FX2","title":"search-content-module-ywvOI","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
|
|
8188
8193
|
|
|
8189
8194
|
function SectionContainer({ leftContent, rightContent, }) {
|
|
8190
|
-
return (jsxs("div", { className: styles$
|
|
8195
|
+
return (jsxs("div", { className: styles$6['content'], children: [jsx("div", { className: styles$6['left'], children: leftContent }), jsx("div", { className: styles$6['right'], children: rightContent })] }));
|
|
8191
8196
|
}
|
|
8192
8197
|
|
|
8193
8198
|
function NoResults() {
|
|
@@ -8196,7 +8201,7 @@ function NoResults() {
|
|
|
8196
8201
|
function NotFound() {
|
|
8197
8202
|
const { state } = useAlgoliaSearch();
|
|
8198
8203
|
const t = useFormattedMessage();
|
|
8199
|
-
return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles$
|
|
8204
|
+
return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles$6['no-results-text'], children: jsxs("div", { className: styles$6.section, children: [jsxs("h3", { className: styles$6.title, children: ["'", state.query, "'"] }), jsxs("div", { className: styles$6.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles$6.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" }) })] })] })] }) }) }));
|
|
8200
8205
|
}
|
|
8201
8206
|
function PopularCategoriesSection() {
|
|
8202
8207
|
const { autocomplete, popularCategories: collection } = useAlgoliaSearch();
|
|
@@ -8229,18 +8234,20 @@ function Highlight({ attribute, hit, tagName = 'mark', }) {
|
|
|
8229
8234
|
}));
|
|
8230
8235
|
}
|
|
8231
8236
|
|
|
8232
|
-
var styles$
|
|
8237
|
+
var styles$5 = {"search-list":"search-list-module-vRuMO"};
|
|
8233
8238
|
|
|
8234
8239
|
function SearchList({ ariaLabelledby, children, className, id, }) {
|
|
8235
|
-
return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$
|
|
8240
|
+
return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$5['search-list'], className), id: id, children: children }));
|
|
8236
8241
|
}
|
|
8237
8242
|
|
|
8238
|
-
var styles$
|
|
8243
|
+
var styles$4 = {"search-list-item":"search-list-item-module-WXp77","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN"};
|
|
8239
8244
|
|
|
8240
8245
|
function SearchListItem({ icon, isRemovable = false, onClick, onRemove, text, }) {
|
|
8241
|
-
return (jsxs("li", { className: styles$
|
|
8246
|
+
return (jsxs("li", { className: styles$4['search-list-item'], onClick: onClick, role: "option", children: [jsxs("div", { className: styles$4.content, children: [icon && icon, text && jsx("span", { className: styles$4.text, children: text })] }), isRemovable && (jsx(IconButton, { color: "secondary", onPress: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
|
|
8242
8247
|
}
|
|
8243
8248
|
|
|
8249
|
+
var styles$3 = {"quick-access-section":"no-search-module-87NKV","quick-access-carousel":"no-search-module-beCXI","quick-access-card":"no-search-module-dtT5J"};
|
|
8250
|
+
|
|
8244
8251
|
function NoSearch() {
|
|
8245
8252
|
return (jsx(SectionContainer, { leftContent: jsxs("div", { children: [jsx(RecentSearchesSection, {}), jsx(PopularSearchesSection, {})] }), rightContent: jsx(QuickAccessSection, {}) }));
|
|
8246
8253
|
}
|
|
@@ -8270,14 +8277,12 @@ function RecentSearchesSection() {
|
|
|
8270
8277
|
}), icon: jsx(StrokeSearchIcon, {}), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
|
|
8271
8278
|
}
|
|
8272
8279
|
function QuickAccessSection() {
|
|
8273
|
-
const {
|
|
8280
|
+
const { quickAccess: collection } = useAlgoliaSearch();
|
|
8281
|
+
const t = useFormattedMessage();
|
|
8274
8282
|
if (!collection)
|
|
8275
8283
|
return;
|
|
8276
|
-
const { items
|
|
8277
|
-
return (jsx(SearchSection, { title:
|
|
8278
|
-
item,
|
|
8279
|
-
source: source,
|
|
8280
|
-
}), children: item.title }, `quick-access-${index}`))) }) }));
|
|
8284
|
+
const { items } = collection;
|
|
8285
|
+
return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$3['quick-access-section'], children: jsx(Carousel, { className: styles$3['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx("div", { className: styles$3['quick-access-card'], children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), spaceBetween: 16 }) }) }));
|
|
8281
8286
|
}
|
|
8282
8287
|
|
|
8283
8288
|
var styles$2 = {"slide":"product-carousel-module-XVTB1"};
|
|
@@ -8296,7 +8301,7 @@ function WithResults() {
|
|
|
8296
8301
|
function SuggestionsSection() {
|
|
8297
8302
|
const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
|
|
8298
8303
|
const t = useFormattedMessage();
|
|
8299
|
-
return (jsxs(SearchSection, { className: styles$
|
|
8304
|
+
return (jsxs(SearchSection, { className: styles$6['product-results-section'], title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
|
|
8300
8305
|
source: recentSearches.source,
|
|
8301
8306
|
}), children: recentSearches.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
|
|
8302
8307
|
item,
|
|
@@ -8326,7 +8331,7 @@ function ProductResultsSection() {
|
|
|
8326
8331
|
if (!collection)
|
|
8327
8332
|
return null;
|
|
8328
8333
|
const { items, source } = collection;
|
|
8329
|
-
return (jsx(SearchSection, { className: styles$
|
|
8334
|
+
return (jsx(SearchSection, { className: styles$6['product-results-section'], title: t('Products'), children: jsx("div", { className: styles$6['product-results'], ...autocomplete.getListProps({ source }), children: jsx(ProductCarousel, { productCards: items.map(product => (createElement$1(ConnectedProductCard, { ...autocomplete.getItemProps({
|
|
8330
8335
|
item: product.hit,
|
|
8331
8336
|
source: source,
|
|
8332
8337
|
}), key: product.storefrontId, href: product.storefrontSlug, image: {
|
|
@@ -8385,7 +8390,7 @@ function SearchRoot() {
|
|
|
8385
8390
|
* https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
|
|
8386
8391
|
*/
|
|
8387
8392
|
function GlobalSearch({ children, searchClient }) {
|
|
8388
|
-
return (jsx(GlobalSearchContainer, { children: jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs("div", { className: styles$
|
|
8393
|
+
return (jsx(GlobalSearchContainer, { children: jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs("div", { className: styles$a['search-wrapper'], children: [children, jsx("div", { className: styles$a['search-root'], children: jsx(SearchRoot, {}) })] }) }) }));
|
|
8389
8394
|
}
|
|
8390
8395
|
|
|
8391
8396
|
export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightInstantSearchProvider, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, FormattedMessage, GlobalSearch, GlobalSearchContainer, GlobalSearchDisclosureContext, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, IntlProvider, LinkButton, LoadingOverlay, MultiSelect, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, RouteButton, RouteLink, RouteProvider, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, VariantDisplayTypeValues, config, configPerEnvironment, createSonicSearchClient, transformAlgoliaProductHitToProductHit, useAddProductToCurrentCart, useAlgolia, useAlgoliaSearch, useBreakpoint, useCartEvents, useDebouncedCallback, useDeleteCartLineById, useDisclosure, useFavorite, useFavoriteProduct, useFetchCurrentCartLines, useFetchProductListingPageData, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useNavigate, useScrollLock, useUpdateCartLineById, userToken, userTokenEventEmitter };
|