@sonic-equipment/ui 0.0.101 → 0.0.102

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
@@ -7731,10 +7731,10 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
7731
7731
 
7732
7732
  var styles$Q = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","content":"modal-module-FJxzx","modal-slide":"modal-module-jkAe7","modal-delayed-fade":"modal-module-WOZ01","close":"modal-module-7zIZE","modal-zoom":"modal-module-aPJ7X"};
7733
7733
 
7734
- function Modal({ children, className, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
7735
- return (jsx(ModalOverlay, { className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: clsx(styles$Q.modal, {
7734
+ function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside = true, }) {
7735
+ return (jsx(ModalOverlay, { className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$Q.modal, {
7736
7736
  [styles$Q['is-full-screen']]: isFullScreen,
7737
- }), children: jsx("div", { className: styles$Q.content, children: children }) }) }));
7737
+ }), children: [hasCloseButton && (jsx("div", { className: styles$Q.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$Q.content, children: children })] }) }));
7738
7738
  }
7739
7739
 
7740
7740
  var styles$P = {"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"};
@@ -7763,8 +7763,8 @@ var styles$O = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","c
7763
7763
  function Footer({ close }) {
7764
7764
  return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: "Submit" }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: "Close" })] }));
7765
7765
  }
7766
- function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
7767
- return (jsx(Modal, { className: clsx(styles$O['modal-overlay'], className), isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$O.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$O.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$O.header, children: [!hideTitle && (jsx(Heading, { className: styles$O.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$O.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$O.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$O.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
7766
+ function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }) {
7767
+ return (jsx(Modal, { className: clsx(styles$O['modal-overlay'], className), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$O.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$O.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$O.header, children: [!hideTitle && (jsx(Heading, { className: styles$O.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$O.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$O.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$O.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
7768
7768
  }
7769
7769
 
7770
7770
  var styles$N = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};
@@ -8675,7 +8675,7 @@ function ImagesGrid({ images, onSelectImage }) {
8675
8675
  }), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles$r.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
8676
8676
  }
8677
8677
 
8678
- var styles$q = {"image-lightbox":"image-lightbox-module-9k3oJ","slide":"image-lightbox-module-K5Gd0","active-image":"image-lightbox-module-UNPOi","thumb":"image-lightbox-module-PUOMT","image":"image-lightbox-module-4RKLg","main-swiper":"image-lightbox-module-hAy3O","pagination":"image-lightbox-module-nN1Kr","sm":"image-lightbox-module-1idAN","thumbs-swiper":"image-lightbox-module-Xbxcn","lg":"image-lightbox-module--V8Xo","navigation-button":"image-lightbox-module-RP7KS","navigation-button-prev":"image-lightbox-module-wOPYF","navigation-button-next":"image-lightbox-module-knizp"};
8678
+ var styles$q = {"image-lightbox":"image-lightbox-module-9k3oJ","slide":"image-lightbox-module-K5Gd0","active-image":"image-lightbox-module-UNPOi","thumb":"image-lightbox-module-PUOMT","image":"image-lightbox-module-4RKLg","main-swiper":"image-lightbox-module-hAy3O","pagination":"image-lightbox-module-nN1Kr","sm":"image-lightbox-module-1idAN","thumbs-swiper":"image-lightbox-module-Xbxcn","lg":"image-lightbox-module--V8Xo","navigation-button":"image-lightbox-module-RP7KS","navigation-button-prev":"image-lightbox-module-wOPYF","navigation-button-next":"image-lightbox-module-knizp","zoomed-overlay":"image-lightbox-module-UVzAg","zoomed-container":"image-lightbox-module-sBtWE","zoomed-image":"image-lightbox-module-aehw-"};
8679
8679
 
8680
8680
  function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
8681
8681
  const [thumbsSwiper, setThumbsSwiper] = useState();
@@ -8683,10 +8683,19 @@ function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
8683
8683
  const nextEl = useRef(null);
8684
8684
  const prevEl = useRef(null);
8685
8685
  const mainSwiperRef = useRef(null);
8686
+ const [isZoomed, setIsZoomed] = useState(false);
8687
+ function handleZoom() {
8688
+ setIsZoomed(!isZoomed);
8689
+ }
8686
8690
  return (jsxs("div", { className: clsx(styles$q['image-lightbox'], styles$q[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles$q['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("div", { className: styles$q.thumb, children: jsx(Image, { className: styles$q.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles$q['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
8687
8691
  nextEl: nextEl.current,
8688
8692
  prevEl: prevEl.current,
8689
- }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("div", { className: styles$q['active-image'], children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] })] }));
8693
+ }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("button", { className: styles$q['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isZoomed, onClose: handleZoom })] }));
8694
+ }
8695
+ function ZoomImage({ currentImage, isZoomed, onClose, }) {
8696
+ if (!isZoomed || !currentImage)
8697
+ return null;
8698
+ return (jsx(Modal, { className: styles$q['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: () => onClose(), children: jsx("div", { className: styles$q['zoomed-container'], onClick: onClose, children: jsx(Image, { className: styles$q['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
8690
8699
  }
8691
8700
 
8692
8701
  var styles$p = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};
@@ -8706,7 +8715,7 @@ function ProductDetailImages({ images }) {
8706
8715
  if (!isXl) {
8707
8716
  return jsx(ImageLightbox, { images: images });
8708
8717
  }
8709
- return (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Dialog, { hasCloseButton: true, hideTitle: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: toggle, title: "Product images", children: jsx("div", { className: styles$p['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, variant: "lg" }) }) })] }));
8718
+ return (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Modal, { hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: toggle, shouldCloseOnInteractOutside: false, children: jsx("div", { className: styles$p['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, variant: "lg" }) }) })] }));
8710
8719
  }
8711
8720
 
8712
8721
  function GlyphsChevronsBoldDownIcon(props) {
@@ -10311,11 +10320,11 @@ function CategoriesGrid({ categories, onItemClick, }) {
10311
10320
 
10312
10321
  var styles$4 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR"};
10313
10322
 
10314
- function SearchSection({ button, children, className, title, }) {
10315
- return (jsxs("div", { className: clsx(styles$4['search-section'], className), children: [jsxs("div", { className: styles$4.header, children: [title && jsx("h2", { className: styles$4.title, children: title }), button && button] }), children] }));
10323
+ function SearchSection({ button, children, className, headerClassName, title, }) {
10324
+ return (jsxs("div", { className: clsx(styles$4['search-section'], className), children: [jsxs("div", { className: clsx(styles$4.header, headerClassName), children: [title && jsx("h2", { className: styles$4.title, children: title }), button && button] }), children] }));
10316
10325
  }
10317
10326
 
10318
- var styles$3 = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
10327
+ var styles$3 = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
10319
10328
 
10320
10329
  function SectionContainer({ buttons, leftContent, rightContent, }) {
10321
10330
  return (jsx("div", { className: styles$3['section-container'], children: jsxs("div", { className: styles$3['content'], children: [jsx("div", { className: styles$3['left'], children: leftContent }), jsxs("div", { className: styles$3['right'], children: [rightContent, jsx("div", { className: styles$3['button-container'], children: buttons })] })] }) }));
@@ -10395,7 +10404,7 @@ function QuickAccessSection() {
10395
10404
  if (!collection)
10396
10405
  return;
10397
10406
  const { items } = collection;
10398
- return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$3['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard, { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
10407
+ return (jsx(SearchSection, { headerClassName: styles$3['quick-access-section-header'], title: t('Quick access'), children: jsx("div", { className: styles$3['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard, { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
10399
10408
  }
10400
10409
 
10401
10410
  function StrokeRecentIcon(props) {
@@ -10410,7 +10419,7 @@ function WithResults() {
10410
10419
  function SuggestionsSection() {
10411
10420
  const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
10412
10421
  const t = useFormattedMessage();
10413
- return (jsxs(SearchSection, { className: styles$3['product-results-section'], title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
10422
+ return (jsxs(SearchSection, { title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
10414
10423
  source: recentSearches.source,
10415
10424
  }), children: recentSearches.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
10416
10425
  item,
@@ -10473,7 +10482,7 @@ function ProductResultsSection() {
10473
10482
  if (!collection)
10474
10483
  return null;
10475
10484
  const { items, source } = collection;
10476
- return (jsx(SearchSection, { className: styles$3['product-results-section'], title: t('Products'), children: jsx("div", { className: styles$3['product-results'], ...autocomplete.getListProps({ source }), children: jsx(CardCarousel, { cards: items.map((hit, index) => isProductHit(hit) ? (jsx(ProductHitCard, { autocomplete: autocomplete, hit: hit, index: index, source: source }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
10485
+ return (jsx(SearchSection, { className: styles$3['product-results-section'], headerClassName: styles$3['product-results-section-header'], title: t('Products'), children: jsx("div", { className: styles$3['product-results'], ...autocomplete.getListProps({ source }), children: jsx(CardCarousel, { cards: items.map((hit, index) => isProductHit(hit) ? (jsx(ProductHitCard, { autocomplete: autocomplete, hit: hit, index: index, source: source }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
10477
10486
  }
10478
10487
 
10479
10488
  function PanelContent() {
@@ -3,7 +3,8 @@ interface SearchSectionProps {
3
3
  button?: ReactElement;
4
4
  children: ReactNode;
5
5
  className?: string;
6
+ headerClassName?: string;
6
7
  title?: string;
7
8
  }
8
- export declare function SearchSection({ button, children, className, title, }: SearchSectionProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function SearchSection({ button, children, className, headerClassName, title, }: SearchSectionProps): import("react/jsx-runtime").JSX.Element;
9
10
  export {};
@@ -15,5 +15,5 @@ interface DialogProps extends Omit<ModalProps, 'children'> {
15
15
  title: string;
16
16
  validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
17
17
  }
18
- export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
18
+ export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
19
19
  export {};
@@ -8,5 +8,6 @@ export interface ModalProps {
8
8
  isKeyboardDismissDisabled?: boolean;
9
9
  isOpen: boolean;
10
10
  onOpenChange: (isOpen: boolean) => void;
11
+ shouldCloseOnInteractOutside?: boolean;
11
12
  }
12
- export declare function Modal({ children, className, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }: ModalProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element;
package/dist/styles.css CHANGED
@@ -220,6 +220,7 @@
220
220
  --sidebar-layer: 100;
221
221
  --search-layer: 200;
222
222
  --modal-layer: 300;
223
+ --zoom-image-layer: 400;
223
224
  }
224
225
  :root {
225
226
  --header-height-desktop: 96px;
@@ -3433,6 +3434,13 @@ button.swiper-pagination-bullet {
3433
3434
  width: auto;
3434
3435
  }
3435
3436
 
3437
+ .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
3438
+ all: unset;
3439
+ width: 100%;
3440
+ aspect-ratio: 1;
3441
+ cursor: zoom-in;
3442
+ }
3443
+
3436
3444
  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi,
3437
3445
  .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
3438
3446
  display: flex;
@@ -3443,11 +3451,6 @@ button.swiper-pagination-bullet {
3443
3451
  mix-blend-mode: multiply;
3444
3452
  }
3445
3453
 
3446
- .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
3447
- width: 100%;
3448
- aspect-ratio: 1;
3449
- }
3450
-
3451
3454
  .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
3452
3455
  width: var(--thumb-size);
3453
3456
  height: var(--thumb-size);
@@ -3524,6 +3527,26 @@ button.swiper-pagination-bullet {
3524
3527
  }
3525
3528
  }
3526
3529
 
3530
+ .image-lightbox-module-UVzAg {
3531
+ z-index: var(--zoom-image-layer);
3532
+ cursor: zoom-out;
3533
+ }
3534
+
3535
+ .image-lightbox-module-UVzAg .image-lightbox-module-sBtWE {
3536
+ display: grid;
3537
+ overflow: auto;
3538
+ width: 100%;
3539
+ height: 100%;
3540
+ place-items: center;
3541
+ }
3542
+
3543
+ .image-lightbox-module-UVzAg .image-lightbox-module-sBtWE .image-lightbox-module-aehw- {
3544
+ width: 100%;
3545
+ height: auto;
3546
+ -o-object-fit: contain;
3547
+ object-fit: contain;
3548
+ }
3549
+
3527
3550
  .product-detail-images-module-N3Ms- {
3528
3551
  display: flex;
3529
3552
  width: 100%;
@@ -5372,14 +5395,22 @@ button.swiper-pagination-bullet {
5372
5395
  .search-content-module-w-ORq {
5373
5396
  display: flex;
5374
5397
  flex-wrap: wrap;
5398
+ padding-right: var(--padding-inline);
5399
+ padding-left: var(--padding-inline);
5375
5400
  gap: var(--space-16);
5376
- padding-inline: var(--padding-inline);
5377
5401
  }
5378
5402
 
5379
5403
  .search-content-module-w-ORq:not(:empty) {
5380
5404
  padding-bottom: var(--padding-block);
5381
5405
  }
5382
5406
 
5407
+ @media (width >= 768px) {
5408
+
5409
+ .search-content-module-w-ORq {
5410
+ padding-left: var(--space-48)
5411
+ }
5412
+ }
5413
+
5383
5414
  @media (width < 768px) {
5384
5415
  .search-content-module-w-ORq .search-content-module-bO1Q0 {
5385
5416
  width: 100%;
@@ -5397,6 +5428,14 @@ button.swiper-pagination-bullet {
5397
5428
  padding-block-end: var(--padding-block);
5398
5429
  }
5399
5430
 
5431
+ @media (width >= 768px) {
5432
+
5433
+ .search-content-module-HrHCE,
5434
+ .search-content-module-9bgxF {
5435
+ padding-left: 22px
5436
+ }
5437
+ }
5438
+
5400
5439
  .search-content-module-H-FX2 .search-content-module-LbQnK {
5401
5440
  margin-top: var(--space-12);
5402
5441
  margin-bottom: var(--space-24);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sonic-equipment/ui",
3
- "version": "0.0.101",
3
+ "version": "0.0.102",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -15,10 +15,7 @@
15
15
  "default": "./dist/index.js"
16
16
  }
17
17
  },
18
- "files": [
19
- "dist",
20
- "README.md"
21
- ],
18
+ "files": ["dist", "README.md"],
22
19
  "main": "dist/index.js",
23
20
  "types": "./dist/index.d.ts",
24
21
  "scripts": {
@@ -53,93 +50,93 @@
53
50
  "react-instantsearch-core": "^7"
54
51
  },
55
52
  "devDependencies": {
56
- "@chromatic-com/storybook": "^3.2.2",
57
- "@csstools/postcss-global-data": "^3.0.0",
58
- "@rollup/plugin-alias": "^5.1.1",
59
- "@rollup/plugin-commonjs": "^28.0.1",
60
- "@rollup/plugin-node-resolve": "^15.3.0",
61
- "@rollup/plugin-replace": "^6.0.1",
62
- "@rollup/plugin-typescript": "^12.1.1",
63
- "@storybook/addon-docs": "^8.4.2",
64
- "@storybook/addon-essentials": "^8.4.2",
65
- "@storybook/addon-interactions": "^8.4.2",
66
- "@storybook/addon-links": "^8.4.2",
67
- "@storybook/addon-viewport": "^8.4.2",
68
- "@storybook/blocks": "^8.4.2",
69
- "@storybook/preview-api": "^8.4.2",
70
- "@storybook/react": "^8.4.2",
71
- "@storybook/react-vite": "^8.4.2",
72
- "@storybook/test": "^8.4.2",
73
- "@types/js-cookie": "^3.0.6",
74
- "@types/node": "^22.9.0",
75
- "@types/react": "^18.3.12",
76
- "@types/react-dom": "^18.3.1",
77
- "@typescript-eslint/eslint-plugin": "^8.13.0",
78
- "@typescript-eslint/parser": "^8.13.0",
79
- "@vitejs/plugin-react": "^4.3.3",
80
- "autoprefixer": "^10.4.20",
81
- "concurrently": "^9.1.0",
82
- "eslint": "^8.57.0",
83
- "eslint-config-prettier": "^9.1.0",
84
- "eslint-import-resolver-typescript": "^3.6.3",
85
- "eslint-plugin-import": "^2.31.0",
86
- "eslint-plugin-mdx": "^3.1.5",
87
- "eslint-plugin-no-relative-import-paths": "^1.5.5",
88
- "eslint-plugin-prettier": "^5.2.1",
53
+ "@chromatic-com/storybook": "3.2.2",
54
+ "@csstools/postcss-global-data": "3.0.0",
55
+ "@rollup/plugin-alias": "5.1.1",
56
+ "@rollup/plugin-commonjs": "28.0.1",
57
+ "@rollup/plugin-node-resolve": "15.3.0",
58
+ "@rollup/plugin-replace": "6.0.1",
59
+ "@rollup/plugin-typescript": "12.1.1",
60
+ "@storybook/addon-docs": "8.4.2",
61
+ "@storybook/addon-essentials": "8.4.2",
62
+ "@storybook/addon-interactions": "8.4.2",
63
+ "@storybook/addon-links": "8.4.2",
64
+ "@storybook/addon-viewport": "8.4.2",
65
+ "@storybook/blocks": "8.4.2",
66
+ "@storybook/preview-api": "8.4.2",
67
+ "@storybook/react": "8.4.2",
68
+ "@storybook/react-vite": "8.4.2",
69
+ "@storybook/test": "8.4.2",
70
+ "@types/js-cookie": "3.0.6",
71
+ "@types/node": "22.9.0",
72
+ "@types/react": "18.3.12",
73
+ "@types/react-dom": "18.3.1",
74
+ "@typescript-eslint/eslint-plugin": "8.13.0",
75
+ "@typescript-eslint/parser": "8.13.0",
76
+ "@vitejs/plugin-react": "4.3.3",
77
+ "autoprefixer": "10.4.20",
78
+ "concurrently": "9.1.0",
79
+ "eslint": "8.57.0",
80
+ "eslint-config-prettier": "9.1.0",
81
+ "eslint-import-resolver-typescript": "3.6.3",
82
+ "eslint-plugin-import": "2.31.0",
83
+ "eslint-plugin-mdx": "3.1.5",
84
+ "eslint-plugin-no-relative-import-paths": "1.5.5",
85
+ "eslint-plugin-prettier": "5.2.1",
89
86
  "eslint-plugin-react": "7.37.2",
90
- "eslint-plugin-react-hooks": "^5.0.0",
91
- "eslint-plugin-simple-import-sort": "^12.1.1",
92
- "eslint-plugin-sort-destructure-keys": "^2.0.0",
93
- "eslint-plugin-sort-keys-fix": "^1.1.2",
94
- "eslint-plugin-storybook": "^0.11.0",
95
- "eslint-plugin-typescript-sort-keys": "^3.3.0",
96
- "eslint-plugin-unused-imports": "^4.1.4",
97
- "http-server": "^14.1.1",
98
- "husky": "^9.1.6",
99
- "instantsearch.js": "^4.75.4",
100
- "nodemon": "^3.1.7",
101
- "postcss": "^8.4.47",
102
- "postcss-custom-media": "^11.0.5",
103
- "postcss-import": "^16.1.0",
104
- "postcss-nested": "^7.0.2",
105
- "react": "^18.3.1",
106
- "react-dom": "^18.3.1",
107
- "rimraf": "^6.0.1",
108
- "rollup": "^4.24.4",
109
- "rollup-plugin-dts": "^6.1.1",
110
- "rollup-plugin-peer-deps-external": "^2.2.4",
111
- "rollup-plugin-postcss": "^4.0.2",
112
- "storybook": "^8.4.2",
113
- "stylelint": "^16.10.0",
114
- "stylelint-config-css-modules": "^4.4.0",
115
- "stylelint-config-idiomatic-order": "^10.0.0",
116
- "stylelint-config-standard": "^36.0.1",
117
- "typescript": "^5.6.3",
118
- "vite": "^5.4.10",
119
- "vite-tsconfig-paths": "^5.1.0"
87
+ "eslint-plugin-react-hooks": "5.0.0",
88
+ "eslint-plugin-simple-import-sort": "12.1.1",
89
+ "eslint-plugin-sort-destructure-keys": "2.0.0",
90
+ "eslint-plugin-sort-keys-fix": "1.1.2",
91
+ "eslint-plugin-storybook": "0.11.0",
92
+ "eslint-plugin-typescript-sort-keys": "3.3.0",
93
+ "eslint-plugin-unused-imports": "4.1.4",
94
+ "http-server": "14.1.1",
95
+ "husky": "9.1.6",
96
+ "instantsearch.js": "4.75.4",
97
+ "nodemon": "3.1.7",
98
+ "postcss": "8.4.47",
99
+ "postcss-custom-media": "11.0.5",
100
+ "postcss-import": "16.1.0",
101
+ "postcss-nested": "7.0.2",
102
+ "react": "18.3.1",
103
+ "react-dom": "18.3.1",
104
+ "rimraf": "6.0.1",
105
+ "rollup": "4.24.4",
106
+ "rollup-plugin-dts": "6.1.1",
107
+ "rollup-plugin-peer-deps-external": "2.2.4",
108
+ "rollup-plugin-postcss": "4.0.2",
109
+ "storybook": "8.4.2",
110
+ "stylelint": "16.10.0",
111
+ "stylelint-config-css-modules": "4.4.0",
112
+ "stylelint-config-idiomatic-order": "10.0.0",
113
+ "stylelint-config-standard": "36.0.1",
114
+ "typescript": "5.6.3",
115
+ "vite": "5.4.10",
116
+ "vite-tsconfig-paths": "5.1.0"
120
117
  },
121
118
  "dependencies": {
122
- "@algolia/autocomplete-core": "^1.17.7",
123
- "@algolia/autocomplete-plugin-query-suggestions": "^1.17.7",
124
- "@algolia/autocomplete-plugin-recent-searches": "^1.17.7",
125
- "@algolia/autocomplete-preset-algolia": "^1.17.7",
126
- "@algolia/client-search": "^4.24.0",
127
- "@tanstack/react-query": "^5.59.20",
128
- "@tanstack/react-query-devtools": "^5.59.20",
129
- "@types/react-transition-group": "^4.4.11",
130
- "algoliasearch": "^4.24.0",
131
- "clsx": "^2.1.1",
132
- "fast-equals": "^5.0.1",
133
- "instantsearch.js": "^4.75.4",
134
- "js-cookie": "^3.0.5",
135
- "query-string": "^9.1.1",
136
- "react-aria": "^3.35.1",
137
- "react-aria-components": "^1.4.1",
138
- "react-instantsearch": "^7.13.7",
139
- "react-toastify": "^10.0.6",
140
- "react-transition-group": "^4.4.5",
119
+ "@algolia/autocomplete-core": "1.17.7",
120
+ "@algolia/autocomplete-plugin-query-suggestions": "1.17.7",
121
+ "@algolia/autocomplete-plugin-recent-searches": "1.17.7",
122
+ "@algolia/autocomplete-preset-algolia": "1.17.7",
123
+ "@algolia/client-search": "4.24.0",
124
+ "@tanstack/react-query": "5.59.20",
125
+ "@tanstack/react-query-devtools": "5.59.20",
126
+ "@types/react-transition-group": "4.4.11",
127
+ "algoliasearch": "4.24.0",
128
+ "clsx": "2.1.1",
129
+ "fast-equals": "5.0.1",
130
+ "instantsearch.js": "4.75.4",
131
+ "js-cookie": "3.0.5",
132
+ "query-string": "9.1.1",
133
+ "react-aria": "3.35.1",
134
+ "react-aria-components": "1.4.1",
135
+ "react-instantsearch": "7.13.7",
136
+ "react-toastify": "10.0.6",
137
+ "react-transition-group": "4.4.5",
141
138
  "search-insights": "2.17.2",
142
- "swiper": "^11.1.14"
139
+ "swiper": "11.1.14"
143
140
  },
144
141
  "publishConfig": {
145
142
  "access": "public"