@sonic-equipment/ui 0.0.82 → 0.0.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +6 -1
- package/dist/index.js +132 -121
- package/dist/src/badges/badge/badge.d.ts +5 -0
- package/dist/src/badges/badge/badge.stories.d.ts +17 -0
- package/dist/src/badges/badge/icon-with-badge/icon-with-badge.d.ts +6 -0
- package/dist/src/badges/badge/icon-with-badge/icon-with-badge.stories.d.ts +14 -0
- package/dist/src/carousel/carousel-navigation-button.d.ts +0 -1
- package/dist/src/intl/translation-id.d.ts +1 -1
- package/dist/src/lists/ul/list-item.stories.d.ts +14 -0
- package/dist/src/lists/ul/list.d.ts +10 -0
- package/dist/src/lists/ul/list.stories.d.ts +13 -0
- package/dist/src/modals/dialog/dialog.d.ts +2 -1
- package/dist/styles.css +70 -32
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -3827,6 +3827,7 @@ type TranslationId$1 =
|
|
|
3827
3827
|
| 'Clear'
|
|
3828
3828
|
| 'Continue shopping'
|
|
3829
3829
|
| 'Create new list'
|
|
3830
|
+
| 'create account'
|
|
3830
3831
|
| 'Double check your spelling'
|
|
3831
3832
|
| 'Downloads'
|
|
3832
3833
|
| 'Excl. VAT'
|
|
@@ -3848,6 +3849,10 @@ type TranslationId$1 =
|
|
|
3848
3849
|
| 'Searching again using more general terms'
|
|
3849
3850
|
| 'See all results'
|
|
3850
3851
|
| 'Select a list'
|
|
3852
|
+
| 'Shop more efficiently and quicker with a favorites list'
|
|
3853
|
+
| 'Easily add your favorite products'
|
|
3854
|
+
| 'Your favorites are available on multiple devices'
|
|
3855
|
+
| 'Share your favorite list with others'
|
|
3851
3856
|
| 'Show all'
|
|
3852
3857
|
| 'Show filters'
|
|
3853
3858
|
| 'Show less'
|
|
@@ -3948,7 +3953,7 @@ interface UpdateCartLineParams {
|
|
|
3948
3953
|
}
|
|
3949
3954
|
declare function useUpdateCartLineById(): _tanstack_react_query.UseMutationResult<void, Error, UpdateCartLineParams, unknown>;
|
|
3950
3955
|
|
|
3951
|
-
type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Create new list' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Suggestions' | 'Try another search' | 'Use fewer keywords' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
|
|
3956
|
+
type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Create new list' | 'create account' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Share your favorite list with others' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Suggestions' | 'Try another search' | 'Use fewer keywords' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
|
|
3952
3957
|
|
|
3953
3958
|
type Translations = Record<TranslationId, string>;
|
|
3954
3959
|
type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string | undefined;
|
package/dist/index.js
CHANGED
|
@@ -1164,10 +1164,10 @@ function useNavigate() {
|
|
|
1164
1164
|
};
|
|
1165
1165
|
}
|
|
1166
1166
|
|
|
1167
|
-
var styles
|
|
1167
|
+
var styles$11 = {"link":"link-module-xLqBn","has-underline":"link-module-UuCEp","secondary":"link-module-v31wH","primary":"link-module-bGD6u"};
|
|
1168
1168
|
|
|
1169
1169
|
function Link({ children, className, color = 'primary', hasUnderline, isDisabled, onClick, ...props }) {
|
|
1170
|
-
return (jsx("a", { className: clsx({ [styles
|
|
1170
|
+
return (jsx("a", { className: clsx({ [styles$11['has-underline']]: hasUnderline }, styles$11['link'], styles$11[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, ...props, children: children }));
|
|
1171
1171
|
}
|
|
1172
1172
|
|
|
1173
1173
|
function RouteLink({ children, ...props }) {
|
|
@@ -1260,24 +1260,24 @@ function SolidHomeIcon(props) {
|
|
|
1260
1260
|
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" }) }));
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var styles$
|
|
1263
|
+
var styles$10 = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
|
|
1264
1264
|
|
|
1265
1265
|
function BreadcrumbShort({ links }) {
|
|
1266
1266
|
const homeLink = links[0];
|
|
1267
1267
|
const previousLink = links[links.length - 2];
|
|
1268
1268
|
const isHomeLink = previousLink === undefined || previousLink === homeLink;
|
|
1269
1269
|
const href = previousLink?.href || homeLink?.href;
|
|
1270
|
-
return (jsx(Breadcrumbs, { className: styles$
|
|
1270
|
+
return (jsx(Breadcrumbs, { className: styles$10.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$10.breadcrumb, children: jsxs(RouteLink, { className: styles$10.link, href: href, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$10.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles$10.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
|
|
1271
1271
|
}
|
|
1272
1272
|
function BreadcrumbLongItem({ index, isDisabled, link, }) {
|
|
1273
|
-
return (jsx(Breadcrumb$1, { className: styles$
|
|
1273
|
+
return (jsx(Breadcrumb$1, { className: styles$10.breadcrumb, children: jsxs(RouteLink, { className: styles$10.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$10['previous-icon'], styles$10.icon) }), link.label] }) }, index));
|
|
1274
1274
|
}
|
|
1275
1275
|
function BreadcrumbLong({ links }) {
|
|
1276
1276
|
const linksWithoutFirst = links.slice(1);
|
|
1277
1277
|
const homeLink = links[0];
|
|
1278
1278
|
if (!homeLink)
|
|
1279
1279
|
return null;
|
|
1280
|
-
return (jsxs(Breadcrumbs, { className: styles$
|
|
1280
|
+
return (jsxs(Breadcrumbs, { className: styles$10.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$10.breadcrumb, children: jsx(RouteLink, { className: styles$10.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$10['home-icon'], styles$10.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
|
|
1281
1281
|
}
|
|
1282
1282
|
function Breadcrumb({ links }) {
|
|
1283
1283
|
const { lg } = useBreakpoint();
|
|
@@ -1286,10 +1286,10 @@ function Breadcrumb({ links }) {
|
|
|
1286
1286
|
return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
|
|
1287
1287
|
}
|
|
1288
1288
|
|
|
1289
|
-
var styles
|
|
1289
|
+
var styles$$ = {"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"};
|
|
1290
1290
|
|
|
1291
1291
|
function IconButton({ children, className, color = 'primary', isDisabled, onClick, size = 'md', type = 'button', }) {
|
|
1292
|
-
return (jsx("button", { className: clsx(styles
|
|
1292
|
+
return (jsx("button", { className: clsx(styles$$['icon-button'], styles$$[size], styles$$[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: e => {
|
|
1293
1293
|
onClick?.(e);
|
|
1294
1294
|
e.preventDefault();
|
|
1295
1295
|
e.stopPropagation();
|
|
@@ -1304,21 +1304,21 @@ function StrokeFavoriteIcon(props) {
|
|
|
1304
1304
|
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" }) }));
|
|
1305
1305
|
}
|
|
1306
1306
|
|
|
1307
|
-
var styles$
|
|
1307
|
+
var styles$_ = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
|
|
1308
1308
|
|
|
1309
1309
|
function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
|
|
1310
|
-
return (jsx(IconButton, { className: clsx(styles$
|
|
1311
|
-
[styles$
|
|
1310
|
+
return (jsx(IconButton, { className: clsx(styles$_['favorite-button'], {
|
|
1311
|
+
[styles$_['is-favorite']]: isFavorite,
|
|
1312
1312
|
}), color: "secondary", isDisabled: isDisabled, onClick: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
|
|
1313
1313
|
}
|
|
1314
1314
|
|
|
1315
|
-
var styles$
|
|
1315
|
+
var styles$Z = {"field-error":"field-error-module-FXnIg"};
|
|
1316
1316
|
|
|
1317
1317
|
function FieldError({ children }) {
|
|
1318
|
-
return (jsx(FieldError$1, { className: styles$
|
|
1318
|
+
return (jsx(FieldError$1, { className: styles$Z['field-error'], children: children }));
|
|
1319
1319
|
}
|
|
1320
1320
|
|
|
1321
|
-
var styles$
|
|
1321
|
+
var styles$Y = {"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"};
|
|
1322
1322
|
|
|
1323
1323
|
/**
|
|
1324
1324
|
* This component is used to create an input that grows as the user types.
|
|
@@ -1334,20 +1334,20 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
|
|
|
1334
1334
|
? onChange?.(event)
|
|
1335
1335
|
: setUncontrolledValue(event.target.value);
|
|
1336
1336
|
const { pressProps } = usePress({});
|
|
1337
|
-
return (jsx("div", { className: clsx(styles$
|
|
1337
|
+
return (jsx("div", { className: clsx(styles$Y['input-container'], styles$Y[size], styles$Y[_pseudo]), children: jsxs("div", { className: clsx({ [styles$Y['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
|
|
1338
1338
|
e.preventDefault();
|
|
1339
1339
|
e.stopPropagation();
|
|
1340
1340
|
e.target.focus();
|
|
1341
|
-
} }), autoGrow && jsx("span", { className: styles$
|
|
1341
|
+
} }), autoGrow && jsx("span", { className: styles$Y['shadow-input'], children: value })] }) }));
|
|
1342
1342
|
});
|
|
1343
1343
|
Input.displayName = 'Input';
|
|
1344
1344
|
|
|
1345
|
-
var styles$
|
|
1345
|
+
var styles$X = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
|
|
1346
1346
|
|
|
1347
1347
|
function Label({ children, isRequired }) {
|
|
1348
1348
|
if (!children)
|
|
1349
1349
|
return null;
|
|
1350
|
-
return (jsxs(Label$1, { className: styles$
|
|
1350
|
+
return (jsxs(Label$1, { className: styles$X.label, children: [children, isRequired && jsx("span", { className: styles$X.required, children: "*" })] }));
|
|
1351
1351
|
}
|
|
1352
1352
|
|
|
1353
1353
|
function StrokeCollapseIcon(props) {
|
|
@@ -1362,7 +1362,7 @@ function StrokeTrashIcon(props) {
|
|
|
1362
1362
|
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" }) }));
|
|
1363
1363
|
}
|
|
1364
1364
|
|
|
1365
|
-
var styles$
|
|
1365
|
+
var styles$W = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
|
|
1366
1366
|
|
|
1367
1367
|
/**
|
|
1368
1368
|
* This component is used to create a number field.
|
|
@@ -1370,7 +1370,7 @@ var styles$U = {"field":"number-field-module-gmnog","button-input-container":"nu
|
|
|
1370
1370
|
*/
|
|
1371
1371
|
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, }) {
|
|
1372
1372
|
const inputRef = useRef(null);
|
|
1373
|
-
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
1373
|
+
return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$W.field, styles$W[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$W['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled,
|
|
1374
1374
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
1375
1375
|
// @ts-expect-error
|
|
1376
1376
|
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,
|
|
@@ -1383,7 +1383,7 @@ function SolidCartIcon(props) {
|
|
|
1383
1383
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.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" }) }));
|
|
1384
1384
|
}
|
|
1385
1385
|
|
|
1386
|
-
var styles$
|
|
1386
|
+
var styles$V = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
|
|
1387
1387
|
|
|
1388
1388
|
function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
|
|
1389
1389
|
const [currentState, setState] = useState(initialState);
|
|
@@ -1475,7 +1475,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
|
|
|
1475
1475
|
e.key === 'Enter' && onConfirm(ensureNumber(updatedQuantity));
|
|
1476
1476
|
e.key === 'Escape' && onCancel();
|
|
1477
1477
|
};
|
|
1478
|
-
return (jsxs("div", { className: styles$
|
|
1478
|
+
return (jsxs("div", { className: styles$V['manual-input-container'], children: [jsx("div", { className: styles$V['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
|
|
1479
1479
|
maximumFractionDigits: 0,
|
|
1480
1480
|
style: 'decimal',
|
|
1481
1481
|
useGrouping: false,
|
|
@@ -1529,12 +1529,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
|
|
|
1529
1529
|
return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
|
|
1530
1530
|
};
|
|
1531
1531
|
|
|
1532
|
-
var styles$
|
|
1532
|
+
var styles$U = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
|
|
1533
1533
|
|
|
1534
1534
|
function Tag({ children }) {
|
|
1535
1535
|
if (!children)
|
|
1536
1536
|
return null;
|
|
1537
|
-
return (jsxs("div", { className: styles$
|
|
1537
|
+
return (jsxs("div", { className: styles$U.tag, children: [jsx("div", { className: styles$U.body, children: children }), jsx("svg", { className: styles$U.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" }) })] }));
|
|
1538
1538
|
}
|
|
1539
1539
|
|
|
1540
1540
|
const IntlContext = createContext({
|
|
@@ -1570,7 +1570,7 @@ function useFormattedMessage() {
|
|
|
1570
1570
|
|
|
1571
1571
|
const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
|
|
1572
1572
|
|
|
1573
|
-
var styles$
|
|
1573
|
+
var styles$T = {"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"};
|
|
1574
1574
|
|
|
1575
1575
|
const formatPrice = (price) => new Intl.NumberFormat('en-US', {
|
|
1576
1576
|
maximumFractionDigits: 2,
|
|
@@ -1583,22 +1583,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
|
|
|
1583
1583
|
const priceWithCurrency = formatPrice(price);
|
|
1584
1584
|
const [wholes, decimals] = priceWithCurrency.split('.');
|
|
1585
1585
|
const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
|
|
1586
|
-
return (jsxs("div", { className: clsx(className, styles$
|
|
1587
|
-
[styles$
|
|
1588
|
-
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$
|
|
1586
|
+
return (jsxs("div", { className: clsx(className, styles$T['product-price']), children: [jsx("span", { className: clsx(styles$T['original-price'], {
|
|
1587
|
+
[styles$T['is-hidden']]: !showOriginalPrice,
|
|
1588
|
+
}), children: originalPriceWithCurrency }), jsxs("div", { className: styles$T['current-price-wrapper'], children: [jsxs("div", { className: styles$T['current-price'], children: [jsx("span", { className: styles$T.wholes, children: wholes }), jsx("span", { className: styles$T.dot, children: "." }), jsx("span", { className: styles$T.decimals, children: decimals })] }), jsx("span", { className: styles$T.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
|
|
1589
1589
|
}
|
|
1590
1590
|
|
|
1591
|
-
var styles$
|
|
1591
|
+
var styles$S = {"product-sku":"product-sku-module-ITb8x"};
|
|
1592
1592
|
|
|
1593
1593
|
function ProductSku({ sku }) {
|
|
1594
|
-
return (jsx("p", { className: styles$
|
|
1594
|
+
return (jsx("p", { className: styles$S['product-sku'], "data-test-selector": "productNumber", children: sku }));
|
|
1595
1595
|
}
|
|
1596
1596
|
|
|
1597
1597
|
function isResponsiveImage(image) {
|
|
1598
1598
|
return Boolean(image?.lg);
|
|
1599
1599
|
}
|
|
1600
1600
|
|
|
1601
|
-
var styles$
|
|
1601
|
+
var styles$R = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
|
|
1602
1602
|
|
|
1603
1603
|
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, }) {
|
|
1604
1604
|
const [hasError, setHasError] = useState(false);
|
|
@@ -1622,26 +1622,26 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
|
|
|
1622
1622
|
}
|
|
1623
1623
|
function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1624
1624
|
if (!image)
|
|
1625
|
-
return (jsx("img", { className: clsx(styles$
|
|
1625
|
+
return (jsx("img", { className: clsx(styles$R.image, className, styles$R[fit], styles$R['has-error']), src: fallbackSrc, ...rest }));
|
|
1626
1626
|
const srcSet = !hasError
|
|
1627
1627
|
? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
|
|
1628
1628
|
: undefined;
|
|
1629
|
-
return (jsx("img", { alt: image.altText, className: clsx(styles$
|
|
1630
|
-
[styles$
|
|
1629
|
+
return (jsx("img", { alt: image.altText, className: clsx(styles$R.image, className, styles$R[fit], {
|
|
1630
|
+
[styles$R['has-error']]: hasError,
|
|
1631
1631
|
}), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
|
|
1632
1632
|
}
|
|
1633
1633
|
function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
|
|
1634
1634
|
if (!image)
|
|
1635
|
-
return (jsx("picture", { className: clsx(styles$
|
|
1636
|
-
return (jsxs("picture", { className: clsx(styles$
|
|
1637
|
-
[styles$
|
|
1635
|
+
return (jsx("picture", { className: clsx(styles$R.picture, className), children: jsx("img", { className: clsx(styles$R[fit], styles$R['has-error']), src: fallbackSrc, ...rest }) }));
|
|
1636
|
+
return (jsxs("picture", { className: clsx(styles$R.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$R[fit], {
|
|
1637
|
+
[styles$R['has-error']]: hasError,
|
|
1638
1638
|
}), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
|
|
1639
1639
|
}
|
|
1640
1640
|
|
|
1641
|
-
var styles$
|
|
1641
|
+
var styles$Q = {"product-card-container":"product-card-module-LepTy","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"};
|
|
1642
1642
|
|
|
1643
1643
|
function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
|
|
1644
|
-
return (jsx("div", { className: styles$
|
|
1644
|
+
return (jsx("div", { className: styles$Q['product-card-container'], children: jsxs(RouteLink, { className: styles$Q['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles$Q.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$Q['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$Q.content, children: [jsxs("div", { className: styles$Q.top, children: [jsx("div", { className: styles$Q.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$Q.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$Q.bottom, children: [jsx("div", { className: styles$Q.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$Q['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
|
|
1645
1645
|
}
|
|
1646
1646
|
|
|
1647
1647
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -7420,13 +7420,13 @@ function GlyphsArrowBoldCapsLeftIcon(props) {
|
|
|
7420
7420
|
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)" }) }));
|
|
7421
7421
|
}
|
|
7422
7422
|
|
|
7423
|
-
var styles$
|
|
7423
|
+
var styles$P = {"carousel-navigation-button":"carousel-navigation-button-module-a1-I4"};
|
|
7424
7424
|
|
|
7425
|
-
const CarouselNavigationButton = forwardRef(function NavigationButton({ className, direction,
|
|
7426
|
-
return (jsx(Button$1, { ref: ref, className: clsx(styles$
|
|
7425
|
+
const CarouselNavigationButton = forwardRef(function NavigationButton({ className, direction, onClick }, ref) {
|
|
7426
|
+
return (jsx(Button$1, { ref: ref, className: clsx(styles$P['carousel-navigation-button'], className), onPress: () => (onClick ? onClick(direction) : undefined), children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
|
|
7427
7427
|
});
|
|
7428
7428
|
|
|
7429
|
-
var styles$
|
|
7429
|
+
var styles$O = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button":"carousel-module-kcqEE","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
|
|
7430
7430
|
|
|
7431
7431
|
function generateSlidesPerViewBreakpoints(slidesPerView) {
|
|
7432
7432
|
return Object.keys(slidesPerView).reduce((result, breakpoint) => ({
|
|
@@ -7465,35 +7465,35 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
|
|
|
7465
7465
|
}
|
|
7466
7466
|
if (slides.length === 0)
|
|
7467
7467
|
return null;
|
|
7468
|
-
return (
|
|
7468
|
+
return (jsxs("div", { className: clsx(styles$O.carousel, className), style: spaceBetween !== undefined
|
|
7469
7469
|
? { '--column-gap': `${spaceBetween}px` }
|
|
7470
|
-
: undefined, children:
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7474
|
-
|
|
7475
|
-
|
|
7476
|
-
|
|
7477
|
-
|
|
7478
|
-
|
|
7479
|
-
|
|
7480
|
-
|
|
7481
|
-
|
|
7482
|
-
|
|
7483
|
-
|
|
7484
|
-
|
|
7485
|
-
}
|
|
7486
|
-
|
|
7487
|
-
var styles$
|
|
7470
|
+
: undefined, children: [jsx(Swiper, { breakpoints: _breakpoints, className: clsx(styles$O.swiper, {
|
|
7471
|
+
[styles$O['is-dragging']]: isDragging,
|
|
7472
|
+
[styles$O['has-overflow']]: hasOverflow,
|
|
7473
|
+
[styles$O['is-ready']]: isReady,
|
|
7474
|
+
}), freeMode: {
|
|
7475
|
+
enabled: false,
|
|
7476
|
+
sticky: true,
|
|
7477
|
+
}, modules: [freeMode, Navigation], navigation: {
|
|
7478
|
+
enabled: hasNavigation,
|
|
7479
|
+
nextEl: nextEl.current,
|
|
7480
|
+
prevEl: prevEl.current,
|
|
7481
|
+
}, onBeforeInit: swiper => (swiperRef.current = swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
|
|
7482
|
+
if (!isReady)
|
|
7483
|
+
setIsReady(true);
|
|
7484
|
+
}, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$O.slide, slideClasses), children: slide }, index))) }), hasNavigation && (jsxs("div", { className: clsx(styles$O['navigation-buttons'], styles$O[navigationButtonsPosition]), children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$O['navigation-button'], styles$O['navigation-button-prev']), direction: "previous", onClick: direction => handleNavigationButtonClick(direction) }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$O['navigation-button'], styles$O['navigation-button-next']), direction: "next", onClick: direction => handleNavigationButtonClick(direction) })] }))] }));
|
|
7485
|
+
}
|
|
7486
|
+
|
|
7487
|
+
var styles$N = {"slide":"category-carousel-module-muLq-"};
|
|
7488
7488
|
|
|
7489
7489
|
function CategoryCarousel({ categoryCards }) {
|
|
7490
|
-
return jsx(Carousel, { slideClasses: styles$
|
|
7490
|
+
return jsx(Carousel, { slideClasses: styles$N.slide, slides: categoryCards });
|
|
7491
7491
|
}
|
|
7492
7492
|
|
|
7493
|
-
var styles$
|
|
7493
|
+
var styles$M = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
|
|
7494
7494
|
|
|
7495
7495
|
function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
|
|
7496
|
-
return (jsx("div", { className: clsx({ [styles$
|
|
7496
|
+
return (jsx("div", { className: clsx({ [styles$M.indented]: indented }, styles$M.accordion, styles$M[color], styles$M[size], hasLineSeparator && styles$M['with-seperators']), children: Boolean(children) &&
|
|
7497
7497
|
Children.map(children, child => {
|
|
7498
7498
|
if (!child)
|
|
7499
7499
|
return null;
|
|
@@ -7530,7 +7530,7 @@ function useResizeObserver(resizeCallback) {
|
|
|
7530
7530
|
};
|
|
7531
7531
|
}
|
|
7532
7532
|
|
|
7533
|
-
var styles$
|
|
7533
|
+
var styles$L = {"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","content-fits":"show-all-module-OhPfm"};
|
|
7534
7534
|
|
|
7535
7535
|
function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
|
|
7536
7536
|
const isControlled = isControlledOpen !== undefined && onToggle !== undefined;
|
|
@@ -7541,19 +7541,19 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
|
|
|
7541
7541
|
const { ref } = useResizeObserver((_target, size) => {
|
|
7542
7542
|
setContentFits((size.height || 0) <= initialHeight);
|
|
7543
7543
|
});
|
|
7544
|
-
return (jsxs("div", { ref: showAllRef, className: clsx(styles$
|
|
7545
|
-
[styles$
|
|
7546
|
-
[styles$
|
|
7547
|
-
}), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$
|
|
7548
|
-
[styles$
|
|
7549
|
-
}), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$
|
|
7544
|
+
return (jsxs("div", { ref: showAllRef, className: clsx(styles$L['show-all'], {
|
|
7545
|
+
[styles$L['content-fits']]: contentFits,
|
|
7546
|
+
[styles$L['is-open']]: isReallyOpen,
|
|
7547
|
+
}), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$L.panel, children: jsx("div", { className: clsx(styles$L.content, {
|
|
7548
|
+
[styles$L['has-transparency']]: !contentFits && hasTransparency,
|
|
7549
|
+
}), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$L.button, color: "secondary", onClick: () => {
|
|
7550
7550
|
if (isControlled)
|
|
7551
7551
|
return onToggle(!isControlled);
|
|
7552
7552
|
toggle();
|
|
7553
|
-
}, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$
|
|
7553
|
+
}, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$L.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
|
|
7554
7554
|
}
|
|
7555
7555
|
|
|
7556
|
-
var styles$
|
|
7556
|
+
var styles$K = {"multi-select":"multi-select-module-DC7Ix","filter-item":"multi-select-module-OW-NK"};
|
|
7557
7557
|
|
|
7558
7558
|
function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
7559
7559
|
const shownOptions = options.slice(0, amountShown);
|
|
@@ -7564,28 +7564,28 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
|
|
|
7564
7564
|
options.filter(option => option.isSelected).length === 0) {
|
|
7565
7565
|
return null;
|
|
7566
7566
|
}
|
|
7567
|
-
return (jsxs("div", { className: styles$
|
|
7567
|
+
return (jsxs("div", { className: styles$K['multi-select'], children: [jsx("div", { className: styles$K['filter-items'], children: shownOptions
|
|
7568
7568
|
.concat(isOpen ? [] : hiddenSelectedOptions)
|
|
7569
|
-
.map(option => (jsxs("div", { className: styles$
|
|
7569
|
+
.map(option => (jsxs("div", { className: styles$K['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$K['filter-items'], styles$K['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$K['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
|
|
7570
7570
|
}
|
|
7571
7571
|
|
|
7572
|
-
var styles$
|
|
7572
|
+
var styles$J = {"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"};
|
|
7573
7573
|
|
|
7574
7574
|
function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
|
|
7575
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
7575
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$J.checkbox, styles$J[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$J.box, children: jsx("svg", { "aria-hidden": "true", className: styles$J.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
|
|
7576
7576
|
}
|
|
7577
7577
|
|
|
7578
7578
|
function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
|
|
7579
|
-
return (jsxs(Checkbox$1, { className: clsx(className, styles$
|
|
7579
|
+
return (jsxs(Checkbox$1, { className: clsx(className, styles$J.checkbox, styles$J['color-checkbox'], styles$J[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
|
|
7580
7580
|
'--selected-color': color,
|
|
7581
|
-
}, value: value, children: [jsx("div", { className: styles$
|
|
7581
|
+
}, value: value, children: [jsx("div", { className: styles$J.box }), children] }));
|
|
7582
7582
|
}
|
|
7583
7583
|
|
|
7584
7584
|
function StrokeCheckmarkIcon(props) {
|
|
7585
7585
|
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" }) }));
|
|
7586
7586
|
}
|
|
7587
7587
|
|
|
7588
|
-
var styles$
|
|
7588
|
+
var styles$I = {"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"};
|
|
7589
7589
|
|
|
7590
7590
|
function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, size = 'md', variant = 'outline', }) {
|
|
7591
7591
|
const selectRef = useRef(null);
|
|
@@ -7602,12 +7602,12 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
|
|
|
7602
7602
|
window.addEventListener('resize', updateWidth);
|
|
7603
7603
|
return () => window.removeEventListener('resize', updateWidth);
|
|
7604
7604
|
}, []);
|
|
7605
|
-
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$
|
|
7605
|
+
return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$I.select, styles$I[size], styles$I[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$I.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$I.chevron })] }), jsx(Popover, { ref: ref =>
|
|
7606
7606
|
// Workaround for react/react-aria #1513
|
|
7607
|
-
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$
|
|
7607
|
+
ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$I.popover, styles$I[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$I.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$I.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$I.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$I.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
|
|
7608
7608
|
}
|
|
7609
7609
|
|
|
7610
|
-
var styles$
|
|
7610
|
+
var styles$H = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
|
|
7611
7611
|
|
|
7612
7612
|
/**
|
|
7613
7613
|
* This component is used to create a textarea that can grow as the user types.
|
|
@@ -7642,7 +7642,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7642
7642
|
}
|
|
7643
7643
|
updateHeight();
|
|
7644
7644
|
}, [ref, autoGrow, updateHeight, size]);
|
|
7645
|
-
return (jsx("div", { className: styles$
|
|
7645
|
+
return (jsx("div", { className: styles$H['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
|
|
7646
7646
|
ref.current =
|
|
7647
7647
|
node;
|
|
7648
7648
|
textAreaRef.current = node;
|
|
@@ -7653,7 +7653,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
|
|
|
7653
7653
|
});
|
|
7654
7654
|
TextArea.displayName = 'TextArea';
|
|
7655
7655
|
|
|
7656
|
-
var styles$
|
|
7656
|
+
var styles$G = {"field":"text-field-module-JeaK0"};
|
|
7657
7657
|
|
|
7658
7658
|
/**
|
|
7659
7659
|
* This component is used to create a text field.
|
|
@@ -7661,7 +7661,7 @@ var styles$E = {"field":"text-field-module-JeaK0"};
|
|
|
7661
7661
|
* This field can also grow when a user types in text.
|
|
7662
7662
|
*/
|
|
7663
7663
|
function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
|
|
7664
|
-
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$
|
|
7664
|
+
return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$G.field, styles$G[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
|
|
7665
7665
|
onChange?.(value);
|
|
7666
7666
|
}, 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, {})] }));
|
|
7667
7667
|
}
|
|
@@ -7671,31 +7671,31 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
|
|
|
7671
7671
|
return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
|
|
7672
7672
|
}
|
|
7673
7673
|
|
|
7674
|
-
var styles$
|
|
7674
|
+
var styles$F = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
|
|
7675
7675
|
|
|
7676
7676
|
function ProgressCircle({ className }) {
|
|
7677
|
-
return (jsxs("svg", { className: clsx(styles$
|
|
7677
|
+
return (jsxs("svg", { className: clsx(styles$F['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" }) })] }));
|
|
7678
7678
|
}
|
|
7679
7679
|
|
|
7680
|
-
var styles$
|
|
7680
|
+
var styles$E = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
|
|
7681
7681
|
|
|
7682
7682
|
function ProductOverviewGrid({ children, isLoading, }) {
|
|
7683
|
-
return (jsxs("div", { className: styles$
|
|
7683
|
+
return (jsxs("div", { className: styles$E['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$E['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$E['loading-panel'], children: jsx(ProgressCircle, { className: styles$E['progress-circle'] }) }))] }));
|
|
7684
7684
|
}
|
|
7685
7685
|
|
|
7686
|
-
var styles$
|
|
7686
|
+
var styles$D = {"loading-overlay":"loading-overlay-module-L67Gy"};
|
|
7687
7687
|
|
|
7688
7688
|
function LoadingOverlay() {
|
|
7689
|
-
return (jsx("div", { className: styles$
|
|
7689
|
+
return (jsx("div", { className: styles$D['loading-overlay'], children: jsx(ProgressCircle, {}) }));
|
|
7690
7690
|
}
|
|
7691
7691
|
|
|
7692
|
-
var styles$
|
|
7692
|
+
var styles$C = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
|
|
7693
7693
|
|
|
7694
7694
|
function PageContainer({ children, className, }) {
|
|
7695
|
-
return (jsx("div", { className: styles$
|
|
7695
|
+
return (jsx("div", { className: styles$C['page-container'], children: jsx("div", { className: clsx(styles$C['inner-page-container'], className), children: children }) }));
|
|
7696
7696
|
}
|
|
7697
7697
|
|
|
7698
|
-
var styles$
|
|
7698
|
+
var styles$B = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
|
|
7699
7699
|
|
|
7700
7700
|
const sizeToTag = {
|
|
7701
7701
|
l: 'h3',
|
|
@@ -7708,49 +7708,64 @@ const sizeToTag = {
|
|
|
7708
7708
|
};
|
|
7709
7709
|
function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
|
|
7710
7710
|
return createElement$1(tag || sizeToTag[size], {
|
|
7711
|
-
className: clsx(className, styles$
|
|
7712
|
-
[styles$
|
|
7713
|
-
[styles$
|
|
7714
|
-
[styles$
|
|
7711
|
+
className: clsx(className, styles$B.heading, styles$B[size], {
|
|
7712
|
+
[styles$B.uppercase]: uppercase,
|
|
7713
|
+
[styles$B.italic]: italic,
|
|
7714
|
+
[styles$B.bold]: bold,
|
|
7715
7715
|
}),
|
|
7716
7716
|
}, children);
|
|
7717
7717
|
}
|
|
7718
7718
|
|
|
7719
|
-
var styles$
|
|
7719
|
+
var styles$A = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
|
|
7720
7720
|
|
|
7721
7721
|
function PageTitle({ children }) {
|
|
7722
7722
|
const { lg, xxl } = useBreakpoint();
|
|
7723
|
-
return (jsx(Heading, { italic: true, uppercase: true, className: styles$
|
|
7723
|
+
return (jsx(Heading, { italic: true, uppercase: true, className: styles$A.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
|
|
7724
7724
|
}
|
|
7725
7725
|
function Page({ breadCrumb, children, className, title }) {
|
|
7726
|
-
return (jsxs(PageContainer, { className: clsx(styles$
|
|
7726
|
+
return (jsxs(PageContainer, { className: clsx(styles$A.page, className), children: [jsx("div", { className: styles$A.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
|
|
7727
|
+
}
|
|
7728
|
+
|
|
7729
|
+
function SolidOkayIcon(props) {
|
|
7730
|
+
return (jsx("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M12.0051467,22 C13.3707325,22 14.6574026,21.7375193 15.865157,21.2125579 C17.0729113,20.6875965 18.1365586,19.9653457 19.0560988,19.0458055 C19.975639,18.1262652 20.6961743,17.0643335 21.2177046,15.8600103 C21.7392349,14.6556871 22,13.3673014 22,11.9948533 C22,10.6292675 21.7375193,9.34259736 21.2125579,8.13484303 C20.6875965,6.92708869 19.9653457,5.86172585 19.0458055,4.9387545 C18.1262652,4.01578315 17.0626179,3.2952479 15.8548636,2.77714874 C14.6471093,2.25904958 13.3604392,2 11.9948533,2 C10.6292675,2 9.34431292,2.25904958 8.13998971,2.77714874 C6.9356665,3.2952479 5.87201921,4.01578315 4.94904786,4.9387545 C4.02607651,5.86172585 3.3038257,6.92708869 2.78229542,8.13484303 C2.26076514,9.34259736 2,10.6292675 2,11.9948533 C2,13.3673014 2.2624807,14.6556871 2.7874421,15.8600103 C3.3124035,17.0643335 4.03465431,18.1262652 4.95419454,19.0458055 C5.87373477,19.9653457 6.9356665,20.6875965 8.13998971,21.2125579 C9.34431292,21.7375193 10.6326986,22 12.0051467,22 Z M10.9243438,16.7812661 C10.7390633,16.7812661 10.5743695,16.7400926 10.4302625,16.6577458 C10.2861554,16.5753989 10.1489106,16.4518785 10.018528,16.2871848 L7.60988163,13.3329902 C7.43832561,13.1202608 7.35254761,12.9006691 7.35254761,12.6742151 C7.35254761,12.4340367 7.43317893,12.2298851 7.59444159,12.0617602 C7.75570424,11.8936353 7.95642477,11.8095728 8.19660319,11.8095728 C8.34071024,11.8095728 8.47280837,11.8404529 8.59289758,11.9022131 C8.71298679,11.9639732 8.83136044,12.0737691 8.94801853,12.2316006 L10.8831704,14.7020072 L14.9696346,8.14513639 C15.1686396,7.82261108 15.4156802,7.66134843 15.7107566,7.66134843 C15.9372105,7.66134843 16.1413622,7.73511752 16.3232115,7.88265569 C16.5050609,8.03019386 16.5959856,8.22405215 16.5959856,8.46423057 C16.5959856,8.57402642 16.5702522,8.68553783 16.5187854,8.7987648 C16.4673186,8.91199177 16.407274,9.02007205 16.3386516,9.12300566 L11.7786927,16.2768914 C11.5659633,16.6131412 11.2811803,16.7812661 10.9243438,16.7812661 Z" }) }));
|
|
7731
|
+
}
|
|
7732
|
+
|
|
7733
|
+
var styles$z = {"list":"list-module-7-DFP","list-item":"list-module-YMLVY","icon":"list-module-wTIOA"};
|
|
7734
|
+
|
|
7735
|
+
function List({ children }) {
|
|
7736
|
+
return jsx("ul", { className: styles$z.list, children: children });
|
|
7737
|
+
}
|
|
7738
|
+
function ListItem({ icon, text }) {
|
|
7739
|
+
return (jsxs("li", { className: styles$z['list-item'], children: [icon && jsx("span", { className: styles$z.icon, children: icon }), text] }));
|
|
7727
7740
|
}
|
|
7728
7741
|
|
|
7729
7742
|
function StrokeCloseboxIcon(props) {
|
|
7730
7743
|
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" }) }));
|
|
7731
7744
|
}
|
|
7732
7745
|
|
|
7733
|
-
var styles$
|
|
7746
|
+
var styles$y = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X","dialog":"modal-module-7c3-9","close":"modal-module-7zIZE"};
|
|
7734
7747
|
|
|
7735
7748
|
function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
|
|
7736
|
-
return (jsx(ModalOverlay, { className: clsx(styles$
|
|
7737
|
-
[styles$
|
|
7738
|
-
}), children: jsxs(Dialog$1, { className: styles$
|
|
7749
|
+
return (jsx(ModalOverlay, { className: clsx(styles$y['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: clsx(styles$y.modal, {
|
|
7750
|
+
[styles$y['is-full-screen']]: isFullScreen,
|
|
7751
|
+
}), children: jsxs(Dialog$1, { className: styles$y.dialog, children: [hasCloseButton && (jsx("div", { className: styles$y.close, children: jsx(IconButton, { color: "secondary", onClick: () => onOpenChange(false), children: jsx(StrokeCloseboxIcon, {}) }) })), children] }) }) }));
|
|
7739
7752
|
}
|
|
7740
7753
|
|
|
7741
|
-
var styles$
|
|
7754
|
+
var styles$x = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
|
|
7742
7755
|
|
|
7743
7756
|
function Footer({ close }) {
|
|
7744
7757
|
return (jsx(Button, { onClick: close, size: "md", children: "Close" }));
|
|
7745
7758
|
}
|
|
7746
|
-
function Dialog({ allowClose = true, children, className, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
|
|
7747
|
-
return (jsx(Modal, { className: clsx(styles$
|
|
7759
|
+
function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
|
|
7760
|
+
return (jsx(Modal, { className: clsx(styles$x['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$x.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$x.header, children: [!hideTitle && (jsx(Heading, { className: styles$x.heading, size: "xs", children: title })), jsx("div", { className: styles$x.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$x.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$x.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
|
|
7748
7761
|
}
|
|
7749
7762
|
|
|
7763
|
+
var styles$w = {"sign-in-dialog":"sign-in-dialog-module-P-AHV"};
|
|
7764
|
+
|
|
7750
7765
|
function SignInDialog({ isOpen, onOpenChange }) {
|
|
7751
|
-
const t = useFormattedMessage();
|
|
7752
7766
|
const { signInUrl } = useFavorite();
|
|
7753
|
-
|
|
7767
|
+
const t = useFormattedMessage();
|
|
7768
|
+
return (jsx(Dialog, { isDismissable: true, dialogClassName: styles$w['sign-in-dialog'], footer: jsxs(Fragment, { children: [jsx(RouteButton, { color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(List, { children: [jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
|
|
7754
7769
|
}
|
|
7755
7770
|
|
|
7756
7771
|
function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onFavoriting, productId, }) {
|
|
@@ -8216,9 +8231,9 @@ function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, clas
|
|
|
8216
8231
|
const panelId = `panel-${id}`;
|
|
8217
8232
|
return (jsxs("div", { className: clsx(className, ...[]
|
|
8218
8233
|
.concat(borderType)
|
|
8219
|
-
.map(type => styles$
|
|
8220
|
-
[styles$
|
|
8221
|
-
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$
|
|
8234
|
+
.map(type => styles$M[`border-type-${type}`]), styles$M['accordion-item'], {
|
|
8235
|
+
[styles$M['is-open']]: isOpen,
|
|
8236
|
+
}), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$M.button, styles$M[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$M.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$M.panel, id: panelId, role: "region", children: jsx("div", { className: styles$M.content, children: children }) })] }));
|
|
8222
8237
|
}
|
|
8223
8238
|
|
|
8224
8239
|
function StrokeDownloadIcon(props) {
|
|
@@ -8229,10 +8244,6 @@ function SolidCloseIcon(props) {
|
|
|
8229
8244
|
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: "M11.9997748,2 C17.5138784,2 22,6.48597148 22,11.9997748 C22,17.5138784 17.5138784,22 11.9997748,22 C6.48597148,22 2,17.5138784 2,11.9997748 C2,6.48597148 6.48597148,2 11.9997748,2 Z M16.4949747,7.50502525 C16.2216077,7.23165825 15.7783923,7.23165825 15.5050253,7.50502525 L12,11.011 L8.49497475,7.50502525 C8.22160774,7.23165825 7.77839226,7.23165825 7.50502525,7.50502525 L7.43121616,7.59179111 C7.23439192,7.86533687 7.25899495,8.24894444 7.50502525,8.49497475 L11.011,12 L7.50502525,15.5050253 C7.23165825,15.7783923 7.23165825,16.2216077 7.50502525,16.4949747 L7.59179111,16.5687838 C7.86533687,16.7656081 8.24894444,16.7410051 8.49497475,16.4949747 L12,12.988 L15.5050253,16.4949747 C15.7783923,16.7683418 16.2216077,16.7683418 16.4949747,16.4949747 L16.5687838,16.4082089 C16.7656081,16.1346631 16.7410051,15.7510556 16.4949747,15.5050253 L12.988,12 L16.4949747,8.49497475 C16.7683418,8.22160774 16.7683418,7.77839226 16.4949747,7.50502525 Z", fillRule: "evenodd" }) }));
|
|
8230
8245
|
}
|
|
8231
8246
|
|
|
8232
|
-
function SolidOkayIcon(props) {
|
|
8233
|
-
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: "M12.0051467,22 C13.3707325,22 14.6574026,21.7375193 15.865157,21.2125579 C17.0729113,20.6875965 18.1365586,19.9653457 19.0560988,19.0458055 C19.975639,18.1262652 20.6961743,17.0643335 21.2177046,15.8600103 C21.7392349,14.6556871 22,13.3673014 22,11.9948533 C22,10.6292675 21.7375193,9.34259736 21.2125579,8.13484303 C20.6875965,6.92708869 19.9653457,5.86172585 19.0458055,4.9387545 C18.1262652,4.01578315 17.0626179,3.2952479 15.8548636,2.77714874 C14.6471093,2.25904958 13.3604392,2 11.9948533,2 C10.6292675,2 9.34431292,2.25904958 8.13998971,2.77714874 C6.9356665,3.2952479 5.87201921,4.01578315 4.94904786,4.9387545 C4.02607651,5.86172585 3.3038257,6.92708869 2.78229542,8.13484303 C2.26076514,9.34259736 2,10.6292675 2,11.9948533 C2,13.3673014 2.2624807,14.6556871 2.7874421,15.8600103 C3.3124035,17.0643335 4.03465431,18.1262652 4.95419454,19.0458055 C5.87373477,19.9653457 6.9356665,20.6875965 8.13998971,21.2125579 C9.34431292,21.7375193 10.6326986,22 12.0051467,22 Z M10.9243438,16.7812661 C10.7390633,16.7812661 10.5743695,16.7400926 10.4302625,16.6577458 C10.2861554,16.5753989 10.1489106,16.4518785 10.018528,16.2871848 L7.60988163,13.3329902 C7.43832561,13.1202608 7.35254761,12.9006691 7.35254761,12.6742151 C7.35254761,12.4340367 7.43317893,12.2298851 7.59444159,12.0617602 C7.75570424,11.8936353 7.95642477,11.8095728 8.19660319,11.8095728 C8.34071024,11.8095728 8.47280837,11.8404529 8.59289758,11.9022131 C8.71298679,11.9639732 8.83136044,12.0737691 8.94801853,12.2316006 L10.8831704,14.7020072 L14.9696346,8.14513639 C15.1686396,7.82261108 15.4156802,7.66134843 15.7107566,7.66134843 C15.9372105,7.66134843 16.1413622,7.73511752 16.3232115,7.88265569 C16.5050609,8.03019386 16.5959856,8.22405215 16.5959856,8.46423057 C16.5959856,8.57402642 16.5702522,8.68553783 16.5187854,8.7987648 C16.4673186,8.91199177 16.407274,9.02007205 16.3386516,9.12300566 L11.7786927,16.2768914 C11.5659633,16.6131412 11.2811803,16.7812661 10.9243438,16.7812661 Z" }) }));
|
|
8234
|
-
}
|
|
8235
|
-
|
|
8236
8247
|
var styles$n = {"feature-list":"feature-list-module-cxc8U","row":"feature-list-module-tTJ2r","column":"feature-list-module-Tw0KD","column-label":"feature-list-module-J6Xfj","alignment-right":"feature-list-module-deI1-","column-value":"feature-list-module-CqSj1","icon-true":"feature-list-module-ojZvf","icon-false":"feature-list-module-4IjrA"};
|
|
8237
8248
|
|
|
8238
8249
|
function FeatureKey({ label }) {
|
|
@@ -9791,7 +9802,7 @@ function CategoriesGrid({ categories, onItemClick, }) {
|
|
|
9791
9802
|
}, onClick: onItemClick, title: category.title }, category.title) }, category.title))) }));
|
|
9792
9803
|
}
|
|
9793
9804
|
|
|
9794
|
-
var styles$5 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR"
|
|
9805
|
+
var styles$5 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR"};
|
|
9795
9806
|
|
|
9796
9807
|
function SearchSection({ button, children, className, title, }) {
|
|
9797
9808
|
return (jsxs("div", { className: clsx(styles$5['search-section'], className), children: [jsxs("div", { className: styles$5.header, children: [title && jsx("h2", { className: styles$5.title, children: title }), button && button] }), jsx("div", { className: styles$5.content, children: children })] }));
|
|
@@ -9879,7 +9890,7 @@ function QuickAccessSection() {
|
|
|
9879
9890
|
if (!collection)
|
|
9880
9891
|
return;
|
|
9881
9892
|
const { items } = collection;
|
|
9882
|
-
return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$1['quick-access-section'], children: jsx(Carousel, { className: styles$1['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$1['quick-access-card'], href: item.action.url, onClick: close, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), spaceBetween: 16 }) }) }));
|
|
9893
|
+
return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$1['quick-access-section'], children: jsx(Carousel, { className: styles$1['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$1['quick-access-card'], href: item.action.url, onClick: close, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), slidesPerView: "auto", spaceBetween: 16 }) }) }));
|
|
9883
9894
|
}
|
|
9884
9895
|
|
|
9885
9896
|
function StrokeRecentIcon(props) {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Badge } from './badge';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: typeof Badge;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
title: string;
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Red: Story;
|
|
14
|
+
export declare const Orange: Story;
|
|
15
|
+
export declare const Green: Story;
|
|
16
|
+
export declare const WithNumber: Story;
|
|
17
|
+
export declare const WithLongNumber: Story;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { IconWithBadge } from './icon-with-badge';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: typeof IconWithBadge;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
title: string;
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const WithIcon: Story;
|
|
14
|
+
export declare const InIconButton: Story;
|
|
@@ -2,7 +2,6 @@ export type SwipeDirection = 'previous' | 'next';
|
|
|
2
2
|
interface CarouselNavigationButtonProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
direction: SwipeDirection;
|
|
5
|
-
isDisabled?: boolean;
|
|
6
5
|
onClick?: (direction: SwipeDirection) => void;
|
|
7
6
|
}
|
|
8
7
|
export declare const CarouselNavigationButton: React.ForwardRefExoticComponent<CarouselNavigationButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Create new list' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Suggestions' | 'Try another search' | 'Use fewer keywords' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
|
|
1
|
+
export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Create new list' | 'create account' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Share your favorite list with others' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Suggestions' | 'Try another search' | 'Use fewer keywords' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { ListItem } from './list';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: typeof ListItem;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
title: string;
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const WithIcon: Story;
|
|
14
|
+
export declare const WithoutIcon: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ListProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
export declare function List({ children }: ListProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export interface ListItemProps {
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
text: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export declare function ListItem({ icon, text }: ListItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { List } from './list';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: typeof List;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
title: string;
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Default: Story;
|
|
@@ -6,6 +6,7 @@ interface DialogProps extends Omit<ModalProps, 'children'> {
|
|
|
6
6
|
children: ReactNode | ((props: {
|
|
7
7
|
close: VoidFunction;
|
|
8
8
|
}) => ReactNode);
|
|
9
|
+
dialogClassName?: string;
|
|
9
10
|
footer?: ReactNode | ((props: {
|
|
10
11
|
close: VoidFunction;
|
|
11
12
|
}) => ReactNode);
|
|
@@ -14,5 +15,5 @@ interface DialogProps extends Omit<ModalProps, 'children'> {
|
|
|
14
15
|
title: string;
|
|
15
16
|
validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
|
|
16
17
|
}
|
|
17
|
-
export declare function Dialog({ allowClose, children, className, footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
package/dist/styles.css
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
--font-family-sonic: 'Pancetta', sans-serif;
|
|
4
4
|
|
|
5
5
|
/* font sizes */
|
|
6
|
+
--font-size-8: 0.5rem;
|
|
6
7
|
--font-size-11: 0.6875rem;
|
|
7
8
|
--font-size-12: 0.75rem;
|
|
8
9
|
--font-size-14: 0.875rem;
|
|
@@ -1336,9 +1337,9 @@
|
|
|
1336
1337
|
|
|
1337
1338
|
.carousel-navigation-button-module-a1-I4[data-disabled],
|
|
1338
1339
|
.carousel-navigation-button-module-a1-I4.swiper-button-disabled {
|
|
1340
|
+
background-color: var(--color-brand-white);
|
|
1339
1341
|
color: #bcbcbc66;
|
|
1340
1342
|
cursor: default;
|
|
1341
|
-
pointer-events: none;
|
|
1342
1343
|
}
|
|
1343
1344
|
|
|
1344
1345
|
.carousel-navigation-button-module-a1-I4.swiper-button-lock {
|
|
@@ -2218,6 +2219,31 @@
|
|
|
2218
2219
|
margin-bottom: var(--space-44);
|
|
2219
2220
|
}
|
|
2220
2221
|
|
|
2222
|
+
.list-module-7-DFP {
|
|
2223
|
+
display: flex;
|
|
2224
|
+
flex-direction: column;
|
|
2225
|
+
padding: 0;
|
|
2226
|
+
margin: 0;
|
|
2227
|
+
gap: var(--space-8);
|
|
2228
|
+
list-style: none;
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
.list-module-YMLVY .list-module-wTIOA {
|
|
2232
|
+
display: block;
|
|
2233
|
+
width: 24px;
|
|
2234
|
+
height: 24px;
|
|
2235
|
+
}
|
|
2236
|
+
|
|
2237
|
+
.list-module-YMLVY {
|
|
2238
|
+
|
|
2239
|
+
display: flex;
|
|
2240
|
+
align-items: center;
|
|
2241
|
+
color: var(--color-brand-black);
|
|
2242
|
+
font-size: var(--font-size-base);
|
|
2243
|
+
gap: var(--space-8);
|
|
2244
|
+
line-height: 1;
|
|
2245
|
+
}
|
|
2246
|
+
|
|
2221
2247
|
.modal-module-rVFJc {
|
|
2222
2248
|
position: fixed;
|
|
2223
2249
|
z-index: calc(var(--modal-layer) - 1);
|
|
@@ -2251,7 +2277,7 @@
|
|
|
2251
2277
|
min-width: 300px;
|
|
2252
2278
|
max-width: 90%;
|
|
2253
2279
|
border: 1px solid var(--gray-400);
|
|
2254
|
-
border-radius:
|
|
2280
|
+
border-radius: 12px;
|
|
2255
2281
|
background: var(--color-white);
|
|
2256
2282
|
box-shadow: 0 8px 20px rgba(0 0 0 / 10%);
|
|
2257
2283
|
color: var(--text-color);
|
|
@@ -2313,33 +2339,41 @@
|
|
|
2313
2339
|
}
|
|
2314
2340
|
}
|
|
2315
2341
|
|
|
2316
|
-
.dialog-module-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
justify-content: space-between;
|
|
2320
|
-
border-bottom: 1px solid #e0e0e0;
|
|
2321
|
-
gap: 8px;
|
|
2342
|
+
.dialog-module-qKzgy {
|
|
2343
|
+
position: relative;
|
|
2344
|
+
padding: 1rem;
|
|
2322
2345
|
}
|
|
2323
2346
|
|
|
2324
|
-
.dialog-module-
|
|
2325
|
-
|
|
2347
|
+
.dialog-module-qKzgy,
|
|
2348
|
+
.dialog-module-qKzgy * {
|
|
2349
|
+
box-sizing: border-box;
|
|
2326
2350
|
}
|
|
2327
2351
|
|
|
2328
|
-
.dialog-module-
|
|
2329
|
-
|
|
2352
|
+
.dialog-module-qKzgy .dialog-module-ZnsAe {
|
|
2353
|
+
display: flex;
|
|
2354
|
+
align-items: center;
|
|
2355
|
+
justify-content: space-between;
|
|
2356
|
+
margin-bottom: var(--space-16);
|
|
2357
|
+
gap: 8px;
|
|
2358
|
+
line-height: 1;
|
|
2330
2359
|
}
|
|
2331
2360
|
|
|
2332
|
-
.dialog-module-
|
|
2333
|
-
|
|
2334
|
-
|
|
2361
|
+
.dialog-module-qKzgy .dialog-module-ZnsAe .dialog-module-Y7Tqg {
|
|
2362
|
+
position: absolute;
|
|
2363
|
+
top: 0;
|
|
2364
|
+
right: 0;
|
|
2365
|
+
}
|
|
2335
2366
|
|
|
2336
|
-
.dialog-module-y7Axm {
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2367
|
+
.dialog-module-qKzgy .dialog-module-y7Axm {
|
|
2368
|
+
display: flex;
|
|
2369
|
+
flex-direction: column;
|
|
2370
|
+
margin-top: var(--space-32);
|
|
2371
|
+
gap: 8px;
|
|
2372
|
+
}
|
|
2373
|
+
|
|
2374
|
+
.sign-in-dialog-module-P-AHV {
|
|
2375
|
+
max-width: 403px;
|
|
2376
|
+
padding: 28px 24px 36px;
|
|
2343
2377
|
}
|
|
2344
2378
|
|
|
2345
2379
|
.product-carousel-module-DpUaX {
|
|
@@ -2355,6 +2389,16 @@
|
|
|
2355
2389
|
}
|
|
2356
2390
|
}
|
|
2357
2391
|
|
|
2392
|
+
.product-carousel-module-DpUaX .swiper {
|
|
2393
|
+
--padding: var(--space-16);
|
|
2394
|
+
|
|
2395
|
+
width: calc(100% + (2 * var(--padding)));
|
|
2396
|
+
padding: var(--padding);
|
|
2397
|
+
margin-top: calc(var(--padding) * -1);
|
|
2398
|
+
margin-bottom: calc(var(--padding) * -1);
|
|
2399
|
+
margin-left: calc(var(--padding) * -1);
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2358
2402
|
.product-carousel-module-XVTB1 {
|
|
2359
2403
|
--slide-width-normal: 300px;
|
|
2360
2404
|
--slide-width-narrow: 154px;
|
|
@@ -3945,16 +3989,16 @@ button.swiper-pagination-bullet {
|
|
|
3945
3989
|
.search-input-module-xCCzd .search-input-module-okP8k .search-input-module-vKCm4 {
|
|
3946
3990
|
left: var(--space-24);
|
|
3947
3991
|
}
|
|
3992
|
+
|
|
3993
|
+
.search-input-module-xCCzd .search-input-module-okP8k .search-input-module-bELFK {
|
|
3994
|
+
padding: var(--space-24) var(--space-64);
|
|
3995
|
+
}
|
|
3948
3996
|
}
|
|
3949
3997
|
|
|
3950
3998
|
@media (width >= 1024px) {
|
|
3951
3999
|
.search-input-module-xCCzd .search-input-module-okP8k .search-input-module-lYseZ {
|
|
3952
4000
|
right: var(--space-32);
|
|
3953
4001
|
}
|
|
3954
|
-
|
|
3955
|
-
.search-input-module-xCCzd .search-input-module-okP8k .search-input-module-bELFK {
|
|
3956
|
-
padding: var(--space-24) var(--space-64);
|
|
3957
|
-
}
|
|
3958
4002
|
}
|
|
3959
4003
|
|
|
3960
4004
|
.categories-grid-module-C751R {
|
|
@@ -4045,11 +4089,6 @@ button.swiper-pagination-bullet {
|
|
|
4045
4089
|
line-height: 1;
|
|
4046
4090
|
}
|
|
4047
4091
|
|
|
4048
|
-
.search-section-module-qaTiw .search-section-module-VZlvZ {
|
|
4049
|
-
display: grid;
|
|
4050
|
-
gap: var(--space-16);
|
|
4051
|
-
}
|
|
4052
|
-
|
|
4053
4092
|
.search-content-module-ZMwlB {
|
|
4054
4093
|
--padding-inline: var(--space-16);
|
|
4055
4094
|
--padding-block: var(--space-20);
|
|
@@ -4094,7 +4133,6 @@ button.swiper-pagination-bullet {
|
|
|
4094
4133
|
margin-top: -32px;
|
|
4095
4134
|
gap: var(--column-gap);
|
|
4096
4135
|
padding-block-end: var(--padding-block);
|
|
4097
|
-
padding-inline: var(--padding-inline);
|
|
4098
4136
|
}
|
|
4099
4137
|
|
|
4100
4138
|
.search-content-module-H-FX2 .search-content-module-LbQnK {
|