@lanaco/lnc-react-ui 4.0.23 → 4.0.26

package/dist/index.js

@@ -1,184 +1,212 @@
 import { default as r } from "./CheckBoxInput.js";
-import { default as t } from "./ColorInput.js";
-import { default as p, registerLocale as d } from "./DateInput.js";
-import { default as u } from "./DecimalInput.js";
-import { default as s } from "./DecimalInputV2.js";
+import { default as a } from "./ColorInput.js";
+import { default as d, registerLocale as p } from "./DateInput.js";
+import { default as l } from "./DecimalInput.js";
+import { default as m } from "./DecimalInputV2.js";
 import { default as n } from "./FileInput.js";
 import { default as c } from "./NumberInput.js";
 import { default as I } from "./PasswordInput.js";
-import { default as w } from "./RadioInput.js";
-import { default as g } from "./RangeSlider.js";
-import { default as S } from "./TextAreaInput.js";
-import { default as A } from "./TextInput.js";
-import { default as C } from "./TimeInput.js";
-import { default as v } from "./Badge.js";
+import { default as b } from "./RadioInput.js";
+import { default as T } from "./RangeSlider.js";
+import { default as B } from "./TextAreaInput.js";
+import { default as P } from "./TextInput.js";
+import { default as M } from "./TimeInput.js";
+import { default as A } from "./Badge.js";
 import { default as G } from "./Chip.js";
-import { default as V } from "./DataView.js";
-import { default as L } from "./DetailsView.js";
-import { default as R } from "./EditableTable.js";
-import { default as y } from "./FormView.js";
-import { default as U } from "./Kanban.js";
-import { K as q } from "./KanbanCard-CHZ_C9kk.js";
-import { default as J } from "./KanbanHeader.js";
-import { default as Q } from "./KanbanFooter.js";
+import { default as L } from "./DataView.js";
+import { default as V } from "./DetailsView.js";
+import { default as k } from "./EditableTable.js";
+import { default as H } from "./FormView.js";
+import { default as O } from "./Kanban.js";
+import { K as E } from "./KanbanCard-BDyFaKYd.js";
+import { default as q } from "./KanbanHeader.js";
+import { default as J } from "./KanbanFooter.js";
 import { default as X } from "./KanbanView.js";
 import { default as Z } from "./KanbanActionsToolbar.js";
 import { default as $ } from "./Table.js";
 import { default as oe } from "./TableView.js";
-import { default as ae } from "./ActionsToolbar.js";
+import { default as te } from "./ActionsToolbar.js";
 import { default as fe } from "./Alert.js";
-import { default as de } from "./Notification.js";
-import { default as ue } from "./NotificationContainer.js";
-import { default as se } from "./NotificationMessage.js";
+import { default as pe } from "./Notification.js";
+import { default as le } from "./NotificationContainer.js";
+import { default as me } from "./NotificationMessage.js";
 import { default as ne } from "./ProgressBar.js";
 import { default as ce } from "./Spinner.js";
 import { default as Ie } from "./Avatar.js";
-import { default as we } from "./Button.js";
-import { default as ge } from "./Icon.js";
-import { default as Se } from "./IconButton.js";
-import { default as Ae } from "./Link.js";
-import { default as Ce } from "./Surface.js";
-import { default as ve } from "./UploadedFile.js";
+import { default as be } from "./Button.js";
+import { default as Te } from "./Icon.js";
+import { default as Be } from "./IconButton.js";
+import { default as Pe } from "./Link.js";
+import { default as Me } from "./Surface.js";
+import { default as Ae } from "./UploadedFile.js";
 import { default as Ge } from "./DoubleRangeSlider.js";
-import { default as Ve } from "./DragAndDropFile.js";
-import { default as Le } from "./DragDropFiles.js";
-import { default as Re } from "./Dropdown.js";
-import { default as ye } from "./DropdownLookup.js";
-import { default as Ue } from "./MultiSelectDropdown.js";
-import { default as qe } from "./MultiSelectDropdownLookup.js";
-import { default as Je } from "./RadioGroup.js";
-import { default as Qe } from "./SearchBar.js";
+import { default as Le } from "./DragAndDropFile.js";
+import { default as Ve } from "./DragDropFiles.js";
+import { default as ke } from "./Dropdown.js";
+import { default as He } from "./DropdownLookup.js";
+import { default as Oe } from "./MultiSelectDropdown.js";
+import { default as Ee } from "./MultiSelectDropdownLookup.js";
+import { default as qe } from "./RadioGroup.js";
+import { default as Je } from "./SearchBar.js";
 import { default as Xe } from "./Toggle.js";
 import { default as Ze } from "./ButtonGroup.js";
 import { default as $e } from "./Content.js";
 import { default as oo } from "./FlexBox.js";
-import { default as ao } from "./FlexGrid.js";
+import { default as to } from "./FlexGrid.js";
 import { default as fo } from "./FlexGridItem.js";
-import { default as lo } from "./Footer.js";
-import { default as mo } from "./FormField.js";
+import { default as so } from "./Footer.js";
+import { default as uo } from "./FormField.js";
 import { default as xo } from "./Grid.js";
 import { default as io } from "./GridItem.js";
-import { default as Do } from "./Header.js";
-import { default as bo } from "./PageLayout.js";
-import { default as To } from "./Sidebar.js";
-import { default as Fo } from "./Tabs.js";
-import { default as Po } from "./TabItem.js";
-import { default as Bo } from "./Accordion.js";
-import { default as Mo } from "./AccordionSummary.js";
-import { default as Ko } from "./AccordionDetails.js";
-import { default as No } from "./Breadcrumbs.js";
-import { default as ho } from "./ConfirmationForm.js";
-import { default as ko } from "./Drawer.js";
-import { default as Ho } from "./DropdownMenu.js";
-import { default as Eo } from "./DropdownItem.js";
-import { default as jo } from "./NestedDropdownItem.js";
-import { default as zo } from "./Separator.js";
-import { default as Oo } from "./Modal.js";
-import { default as Wo } from "./Pagination.js";
+import { default as So } from "./Header.js";
+import { default as Do } from "./PageLayout.js";
+import { default as go } from "./Sidebar.js";
+import { default as wo } from "./Tabs.js";
+import { default as Fo } from "./TabItem.js";
+import { default as Co } from "./Accordion.js";
+import { default as ho } from "./AccordionSummary.js";
+import { default as vo } from "./AccordionDetails.js";
+import { default as Ko } from "./Breadcrumbs.js";
+import { default as No } from "./ConfirmationForm.js";
+import { default as Wo } from "./Drawer.js";
+import { default as yo } from "./DropdownMenu.js";
+import { default as Ro } from "./DropdownItem.js";
+import { default as Uo } from "./NestedDropdownItem.js";
+import { default as jo } from "./Separator.js";
+import { default as zo } from "./Modal.js";
+import { default as Qo } from "./Pagination.js";
 import { default as Yo } from "./Popover.js";
 import { default as _o } from "./PopoverClose.js";
 import { default as er } from "./PopoverHeading.js";
 import { default as rr } from "./PopoverContent.js";
-import { default as tr } from "./PopoverTrigger.js";
-import { default as pr } from "./PopoverDescription.js";
-import { default as lr } from "./SwipeableDrawer.js";
-import { default as mr } from "./TreeMenu.js";
+import { default as ar } from "./PopoverTrigger.js";
+import { default as dr } from "./PopoverDescription.js";
+import { default as sr } from "./SwipeableDrawer.js";
+import { default as ur } from "./TreeMenu.js";
 import { default as xr } from "./MenuItem.js";
 import { default as ir } from "./NestedMenuItem.js";
-import { default as Dr } from "./TreeMenuSeparator.js";
-import { default as br, useTheme as wr } from "./ThemeProvider.js";
-import { c as gr } from "./CustomStyles-BUSJ8bZt.js";
+import { default as Sr } from "./TreeMenuSeparator.js";
+import { default as Dr } from "./index9.js";
+import { default as gr } from "./index2.js";
+import { default as wr } from "./index10.js";
+import { default as Fr } from "./index3.js";
+import { default as Cr } from "./index4.js";
+import { default as hr } from "./index15.js";
+import { default as vr } from "./index5.js";
+import { default as Kr } from "./index6.js";
+import { default as Nr } from "./index7.js";
+import { default as Wr } from "./index8.js";
+import { default as yr } from "./index11.js";
+import { default as Rr } from "./index12.js";
+import { default as Ur } from "./index13.js";
+import { default as jr } from "./index14.js";
+import { default as zr, useTheme as Jr } from "./ThemeProvider.js";
+import { c as Xr } from "./CustomStyles-DuADCM-0.js";
 export {
-  Bo as Accordion,
-  Ko as AccordionDetails,
-  Mo as AccordionSummary,
-  ae as ActionsToolbar,
+  Co as Accordion,
+  vo as AccordionDetails,
+  ho as AccordionSummary,
+  te as ActionsToolbar,
   fe as Alert,
   Ie as Avatar,
-  v as Badge,
-  No as Breadcrumbs,
-  we as Button,
+  A as Badge,
+  hr as BannerSectionCarousel,
+  vr as BannerSectionGrid,
+  Kr as BannerSectionSimple,
+  Nr as BannerSectionWithList,
+  Wr as BannerSectionWithListImage,
+  yr as BrandHitsSection,
+  Ko as Breadcrumbs,
+  be as Button,
   Ze as ButtonGroup,
   r as CheckBoxInput,
   G as Chip,
-  t as ColorInput,
-  ho as ConfirmationForm,
+  a as ColorInput,
+  No as ConfirmationForm,
   $e as Content,
-  V as DataView,
-  p as DateInput,
-  u as DecimalInput,
-  s as DecimalInputV2,
-  L as DetailsView,
+  L as DataView,
+  d as DateInput,
+  l as DecimalInput,
+  m as DecimalInputV2,
+  gr as DetailedProductsSection,
+  V as DetailsView,
   Ge as DoubleRangeSlider,
-  Ve as DragAndDropFile,
-  Le as DragDropFiles,
-  ko as Drawer,
-  Re as Dropdown,
-  Eo as DropdownItem,
-  ye as DropdownLookup,
-  Ho as DropdownMenu,
-  R as EditableTable,
+  Le as DragAndDropFile,
+  Ve as DragDropFiles,
+  Wo as Drawer,
+  ke as Dropdown,
+  Ro as DropdownItem,
+  He as DropdownLookup,
+  yo as DropdownMenu,
+  k as EditableTable,
+  Rr as FieldOfInterestsMasonrySection,
+  Ur as FieldOfInterestsWithAvatarsCardsSection,
+  jr as FieldOfInterestsWithTagsCardsSection,
   n as FileInput,
   oo as FlexBox,
-  ao as FlexGrid,
+  to as FlexGrid,
   fo as FlexGridItem,
-  lo as Footer,
-  mo as FormField,
-  y as FormView,
+  so as Footer,
+  uo as FormField,
+  H as FormView,
   xo as Grid,
   io as GridItem,
-  Do as Header,
-  ge as Icon,
-  Se as IconButton,
-  U as Kanban,
+  So as Header,
+  Te as Icon,
+  Be as IconButton,
+  O as Kanban,
   Z as KanbanActionsToolbar,
-  q as KanbanCard,
-  Q as KanbanFooter,
-  J as KanbanHeader,
+  E as KanbanCard,
+  J as KanbanFooter,
+  q as KanbanHeader,
   X as KanbanView,
-  Ae as Link,
+  Pe as Link,
+  Dr as MasonryGeneralCardsSection,
   xr as MenuItem,
-  Oo as Modal,
-  Ue as MultiSelectDropdown,
-  qe as MultiSelectDropdownLookup,
-  jo as NestedDropdownItem,
+  zo as Modal,
+  Oe as MultiSelectDropdown,
+  Ee as MultiSelectDropdownLookup,
+  Uo as NestedDropdownItem,
   ir as NestedMenuItem,
-  de as Notification,
-  ue as NotificationContainer,
-  se as NotificationMessage,
+  pe as Notification,
+  le as NotificationContainer,
+  me as NotificationMessage,
   c as NumberInput,
-  bo as PageLayout,
-  Wo as Pagination,
+  Do as PageLayout,
+  Qo as Pagination,
   I as PasswordInput,
   Yo as Popover,
   _o as PopoverClose,
   rr as PopoverContent,
-  pr as PopoverDescription,
+  dr as PopoverDescription,
   er as PopoverHeading,
-  tr as PopoverTrigger,
+  ar as PopoverTrigger,
+  wr as ProductsWithBannerSection,
   ne as ProgressBar,
-  Je as RadioGroup,
-  w as RadioInput,
-  g as RangeSlider,
-  Qe as SearchBar,
-  zo as Separator,
-  To as Sidebar,
+  qe as RadioGroup,
+  b as RadioInput,
+  T as RangeSlider,
+  Je as SearchBar,
+  jo as Separator,
+  go as Sidebar,
+  Fr as SimpleProductsSection,
   ce as Spinner,
-  Ce as Surface,
-  lr as SwipeableDrawer,
-  Po as TabItem,
+  Me as Surface,
+  sr as SwipeableDrawer,
+  Fo as TabItem,
   $ as Table,
   oe as TableView,
-  Fo as Tabs,
-  S as TextAreaInput,
-  A as TextInput,
-  br as ThemeProvider,
-  C as TimeInput,
+  wo as Tabs,
+  B as TextAreaInput,
+  P as TextInput,
+  zr as ThemeProvider,
+  M as TimeInput,
   Xe as Toggle,
-  mr as TreeMenu,
-  Dr as TreeMenuSeparator,
-  ve as UploadedFile,
-  gr as components,
-  d as registerLocale,
-  wr as useTheme
+  ur as TreeMenu,
+  Sr as TreeMenuSeparator,
+  Ae as UploadedFile,
+  Cr as UrgentSaleProductsSection,
+  Xr as components,
+  p as registerLocale,
+  Jr as useTheme
 };

package/dist/index10.cjs

@@ -0,0 +1,90 @@
+"use strict";const i=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./consts-dNz9tpt4.cjs"),b=require("./useDetectMobile-rBe0FiP2.cjs"),f=require("./style-C3OB0uad.cjs"),a=require("./utils-CE6bljYe.cjs"),j=c.newStyled.div`
+  width: 100%;
+  height: 22.5rem;
+  min-height: 22.5rem;
+  max-height: 22.5rem;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-95008, #14161a14);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`,v=c.newStyled.div`
+  display: grid;
+  grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
+  }
+`,y=c.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & img {
+    width: 100%;
+    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
+    object-fit: cover; /* making sure the image isn't distorted */
+    border-radius: 0.75rem;
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+     ${a.truncateTextInRows(2)}
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+  }
+`,h=p.forwardRef((o,m)=>{const{uuid:d,title:r,image:n,sellerUuid:u,onSelectCard:t=()=>{},imageComponent:s}=o;return i.jsxs(y,{className:"product-card",onClick:t,children:[a.isDefined(s)?s:i.jsx("img",{src:n}),i.jsx("div",{className:"card-title",children:r})]})}),S=p.forwardRef((o,m)=>{const{icon:d,items:r,limit:n=4,bannerImage:u,onSelectCard:t=()=>{},title:s="Season inspiration"}=o,w=b.useDetectMobile();return i.jsxs(f.RegulatTitleSectionWrapper,{ref:m,children:[i.jsx("div",{className:"regular-title",children:i.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&i.jsx("i",{className:d}),i.jsx("span",{children:s})]})}),i.jsx(j,{className:"products-banner",children:i.jsx("img",{src:u})}),i.jsx(v,{limit:n,children:w===!0?r==null?void 0:r.map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,n).map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l))})]})});module.exports=S;

package/dist/index10.js

@@ -0,0 +1,152 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { n as s } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as f } from "./consts-DNVz1x1I.js";
+import { u as w } from "./useDetectMobile-BookNOsk.js";
+import { R as v } from "./style-Ch-xOasu.js";
+import { t as k, m as h, l as y, k as N } from "./utils-DtEdJZWa.js";
+const S = s.div`
+  width: 100%;
+  height: 22.5rem;
+  min-height: 22.5rem;
+  max-height: 22.5rem;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-95008, #14161a14);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`, $ = s.div`
+  display: grid;
+  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${f + "px"}) {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
+  }
+`, j = s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & img {
+    width: 100%;
+    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
+    object-fit: cover; /* making sure the image isn't distorted */
+    border-radius: 0.75rem;
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+     ${k(2)}
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${h("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${h("-90deg")};
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  @media (max-width: ${f + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+  }
+`, u = g((a, c) => {
+  const {
+    uuid: l,
+    title: i,
+    image: o,
+    sellerUuid: p,
+    onSelectCard: t = () => {
+    },
+    imageComponent: d
+  } = a;
+  return /* @__PURE__ */ m(j, { className: "product-card", onClick: t, children: [
+    y(d) ? d : /* @__PURE__ */ r("img", { src: o }),
+    /* @__PURE__ */ r("div", { className: "card-title", children: i })
+  ] });
+}), P = g((a, c) => {
+  const {
+    icon: l,
+    items: i,
+    limit: o = 4,
+    bannerImage: p,
+    onSelectCard: t = () => {
+    },
+    title: d = "Season inspiration"
+  } = a, b = w();
+  return /* @__PURE__ */ m(v, { ref: c, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
+      N(l) && /* @__PURE__ */ r("i", { className: l }),
+      /* @__PURE__ */ r("span", { children: d })
+    ] }) }),
+    /* @__PURE__ */ r(S, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: p }) }),
+    /* @__PURE__ */ r($, { limit: o, children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
+      u,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        sellerUuid: e == null ? void 0 : e.sellerUuid,
+        uuid: e == null ? void 0 : e.uuid,
+        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
+      },
+      n
+    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
+      u,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        sellerUuid: e == null ? void 0 : e.sellerUuid,
+        uuid: e == null ? void 0 : e.uuid,
+        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
+      },
+      n
+    )) })
+  ] });
+});
+export {
+  P as default
+};

package/dist/index11.cjs

@@ -0,0 +1,85 @@
+"use strict";const r=require("react/jsx-runtime"),s=require("react"),c=require("./utils-CE6bljYe.cjs"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./consts-dNz9tpt4.cjs"),h=d.newStyled.div`
+  width: 7.5rem;
+  height: auto;
+  max-height: 7.5rem;
+
+  & .wrapper__image {
+    width: 7.5rem;
+    height: auto;
+  }
+
+  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+    width: 4.5rem;
+    height: auto;
+    max-height: 4.5rem;
+
+    & .wrapper__image {
+      width: 4.5rem;
+      height: auto;
+    }
+  }
+`,_=d.newStyled.div`
+  width: 7.5rem;
+  height: 7.5rem;
+  background: ${c.linearGradientAnimation("-90deg")};
+
+  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+`,g=s.forwardRef(({imageComponent:t,image:n,onSelectCard:a},i)=>r.jsx(h,{children:c.isDefined(t)?t:r.jsx("img",{src:n,className:"wrapper__image",onSelectCard:a})})),w=s.forwardRef(({},t)=>r.jsx(_,{})),m=d.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      text-align: center;
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+      letter-spacing: -0.47px;
+    }
+
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
+  }
+
+  & .wrapper__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 3rem;
+    align-self: stretch;
+
+    & .wrapper__item {
+      max-width: 7.5rem;
+    }
+  }
+
+  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__content {
+      align-content: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+
+      & .wrapper__item {
+        max-width: 4 0.5rem;
+      }
+    }
+  }
+`,x=s.forwardRef(({title:t,subtitle:n,items:a=[],onSelectCard:i=()=>{}},f)=>{var o;return r.jsx(m,{children:r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n}),r.jsx("div",{className:"wrapper__content",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,p)=>r.jsx(g,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),className:"wrapper__item"},`brand-hit-card__${p+1}`)):(o=Array.from("12345"))==null?void 0:o.map((e,p)=>r.jsx(w,{},`brand-hit-card-skeleton__${p+1}`))})]})})});module.exports=x;