@hhgtech/hhg-components 1.29.418-beta-1 → 1.29.418-beta-3

package/build/esm/healthToolsForm.js

@@ -1,57 +1,57 @@
-export { D as DueDateForm } from './index-4ff4aa01.js';
-export { B as BmiForm } from './index-af07302f.js';
-export { B as BabyPoopForm } from './index-dbdb7969.js';
-export { T as ThrForm } from './index-3aabd966.js';
-export { O as OvulationForm } from './index-0d7e20fb.js';
-export { B as BabyVaccineForm } from './index-042f50ef.js';
-export { P as PWGForm } from './index-f63af2b6.js';
-import './tslib.es6-973fb363.js';
+export { D as DueDateForm } from './index-f97f0c42.js';
+export { B as BmiForm } from './index-d082f546.js';
+export { B as BabyPoopForm } from './index-dc27d92e.js';
+export { T as ThrForm } from './index-c0c02d35.js';
+export { O as OvulationForm } from './index-d332b86b.js';
+export { B as BabyVaccineForm } from './index-bcf14946.js';
+export { P as PWGForm } from './index-6be55a19.js';
+import './tslib.es6-de53a8a5.js';
 import 'react';
 import '@mantine/core';
 import 'date-fns';
-import './LastPeriod-2ff290d5.js';
-import './Locale-11dbaf70.js';
+import './LastPeriod-91714e8e.js';
+import './Locale-5fc62371.js';
 import '@mantine/form';
 import 'dayjs';
-import './index-6032d7e1.js';
+import './index-1743ebdb.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-98afb88a.js';
+import './index-798a40af.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './index-4a0b263e.js';
-import './utils-06a90493.js';
+import './index-b06ca257.js';
+import './utils-40aba57b.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-96606b7b.js';
-import './text-a592e4ae.js';
-import './index-ba18ee42.js';
-import './index-e120177a.js';
+import './index-d1a7c4db.js';
+import './text-7830a7e2.js';
+import './index-ef440f07.js';
+import './index-c777f37a.js';
 import '@mantine/notifications';
-import './index-8a5a2683.js';
+import './index-2e7804a1.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
-import './shared-d57c70b8.js';
+import './shared-7a039009.js';
 import 'classnames';
-import './useUniqueId-ad30e709.js';
+import './useUniqueId-07162e4d.js';
 import '@hhgtech/icons/core';
-import './index-8c6e583f.js';
-import './index-9d7cc01e.js';
+import './index-fc9e7147.js';
+import './index-1827d9e9.js';
 import '@mantine/dates';
-import './index.styles-957894a9.js';
-import './index-f82ced74.js';
-import './translationsContext-c729899a.js';
-import './index-c9890de4.js';
-import './index-4e8bfaa1.js';
+import './index.styles-581981d5.js';
+import './index-cdb1aebe.js';
+import './translationsContext-024bdf2e.js';
+import './index-5bb4691f.js';
+import './index-6bf5e8ee.js';
 import 'react-keyed-flatten-children';
 import 'react-hook-form';
-import './useHealthToolCache-fadb05cf.js';
+import './useHealthToolCache-c1ffd041.js';
 import './miscGetDynamicHealthTool.js';
-import './normalizeLink-ea55309e.js';
-import './core-fb88905a.js';
-import './constants-95131dca.js';
-import './index-121b44de.js';
+import './normalizeLink-11e4e632.js';
+import './core-a7736b47.js';
+import './constants-80c32eee.js';
+import './index-b84c957a.js';
 import './embeddedHeathToolCards_helpers.js';
-import './constants-986e9e22.js';
+import './constants-432dd915.js';

package/build/esm/hooks.js

@@ -1,19 +1,19 @@
-export { u as useTranslations } from './index-f82ced74.js';
-export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-e6daae39.js';
-export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, a as usePrevious, b as useRafState } from './useCategory-1e39a713.js';
-export { u as useHealthToolsCache } from './useHealthToolCache-fadb05cf.js';
-export { u as useIsInit } from './useIsInit-313d337a.js';
-export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-8d3edd19.js';
-export { u as useInitialMount, a as useUniqueId } from './useUniqueId-ad30e709.js';
+export { u as useTranslations } from './index-cdb1aebe.js';
+export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-79b76fce.js';
+export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, a as usePrevious, b as useRafState } from './useCategory-28058329.js';
+export { u as useHealthToolsCache } from './useHealthToolCache-c1ffd041.js';
+export { u as useIsInit } from './useIsInit-7c930e98.js';
+export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-f54f5616.js';
+export { u as useInitialMount, a as useUniqueId } from './useUniqueId-07162e4d.js';
 import 'react';
-import './translationsContext-c729899a.js';
+import './translationsContext-024bdf2e.js';
 import 'lodash/debounce';
-import './tslib.es6-973fb363.js';
+import './tslib.es6-de53a8a5.js';
 import './miscCookieHelper.js';
-import './index-e120177a.js';
-import './Locale-11dbaf70.js';
+import './index-c777f37a.js';
+import './Locale-5fc62371.js';
 import './miscGetDynamicHealthTool.js';
-import './normalizeLink-ea55309e.js';
+import './normalizeLink-11e4e632.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './core-fb88905a.js';
+import './core-a7736b47.js';

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-export { T as TranslationsContext } from './translationsContext-c729899a.js';
-export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-c677cefb.js';
+export { T as TranslationsContext } from './translationsContext-024bdf2e.js';
+export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-55b52532.js';
 import 'react';
 import './i18n-values/en-PH.js';
 import './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-c729899a.js';
-export { T as TranslationsContext } from './translationsContext-c729899a.js';
+import { T as TranslationsContext } from './translationsContext-024bdf2e.js';
+export { T as TranslationsContext } from './translationsContext-024bdf2e.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/icons/CurrentLocation.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const CurrentLocation: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default CurrentLocation;

package/build/esm/icons/Search2.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const Search2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default Search2;

package/build/esm/icons/index.d.ts

@@ -6,13 +6,15 @@ import ChevronLeft from "./ChevronLeft";
 import ChevronRight from "./ChevronRight";
 import ChevronUp from "./ChevronUp";
 import Close from "./Close";
+import CurrentLocation from "./CurrentLocation";
 import EmailCheck from "./EmailCheck";
 import EmailFail from "./EmailFail";
 import Facebook from "./Facebook";
 import Google from "./Google";
 import InVisible from "./InVisible";
 import Search from "./Search";
+import Search2 from "./Search2";
 import Visible from "./Visible";
 import Circle from "./Circle";
 import Spinning from "./Spinning";
-export { CaretDown, ChatbotBg, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, EmailCheck, EmailFail, Facebook, Google, InVisible, Search, Visible, Circle, Spinning, };
+export { CaretDown, ChatbotBg, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, CurrentLocation, EmailCheck, EmailFail, Facebook, Google, InVisible, Search, Search2, Visible, Circle, Spinning, };

package/build/esm/{index-9fabc760.js → index-003e3ecb.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-973fb363.js';
+import { _ as __rest } from './tslib.es6-de53a8a5.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme, Box, Flex, rem, createStyles } from '@mantine/core';
 import { RedCross } from '@hhgtech/icons/other';
-import './index-6032d7e1.js';
+import './index-1743ebdb.js';
 import '@mantine/dates';
-import './index-8a5a2683.js';
-import './index-e120177a.js';
-import './index-98afb88a.js';
-import { t as themeColors } from './index-ba18ee42.js';
-import { T as Text } from './index-96606b7b.js';
-import './index-8c6e583f.js';
-import './index.styles-957894a9.js';
-import { u as useTranslations } from './index-f82ced74.js';
+import './index-2e7804a1.js';
+import './index-c777f37a.js';
+import './index-798a40af.js';
+import { t as themeColors } from './index-ef440f07.js';
+import { T as Text } from './index-d1a7c4db.js';
+import './index-fc9e7147.js';
+import './index.styles-581981d5.js';
+import { u as useTranslations } from './index-cdb1aebe.js';
 import '@mantine/hooks';
-import './text-a592e4ae.js';
-import { M as MediaQueries } from './utils-06a90493.js';
-import './index-c9890de4.js';
+import './text-7830a7e2.js';
+import { M as MediaQueries } from './utils-40aba57b.js';
+import './index-5bb4691f.js';
 import styled from '@emotion/styled';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-36dfca92.js → index-04288c12.js}

@@ -1,48 +1,50 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-973fb363.js';
-import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
-import { R as Radio } from './index-6032d7e1.js';
-import { Stack, Group, createStyles, getStylesRef, Box } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-de53a8a5.js';
+import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
+import { R as Radio } from './index-1743ebdb.js';
+import { Stack, Group, createStyles, getStylesRef, Box, clsx, rem, Button as Button$2, AspectRatio } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-8a5a2683.js';
-import './index-e120177a.js';
-import { C as CommonGAssets } from './index-98afb88a.js';
-import './index-ba18ee42.js';
-import { T as Text } from './index-96606b7b.js';
-import { B as Button$1 } from './index-8c6e583f.js';
-import './index.styles-957894a9.js';
-import './translationsContext-c729899a.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-2e7804a1.js';
+import './index-c777f37a.js';
+import { C as CommonGAssets } from './index-798a40af.js';
+import './index-ef440f07.js';
+import { T as Text } from './index-d1a7c4db.js';
+import { B as Button$1 } from './index-fc9e7147.js';
+import './index.styles-581981d5.js';
+import './translationsContext-024bdf2e.js';
 import '@mantine/hooks';
-import './text-a592e4ae.js';
-import { M as MediaQueries } from './utils-06a90493.js';
-import './index-c9890de4.js';
-import { i as isInternalLink } from './index-42c9a783.js';
+import './text-7830a7e2.js';
+import { M as MediaQueries } from './utils-40aba57b.js';
+import './index-5bb4691f.js';
+import { i as isInternalLink } from './index-7c5f8ef0.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, P as PureInput } from './index-16013e37.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-7d315dd4.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-8f7394ed.js';
+import { L as Logo } from './index-f6987e59.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-8d3edd19.js';
+import { a as useOutsideClick } from './useOutsideClick-f54f5616.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-cc834f3f.js';
-import { u as useScreenSize } from './index-4a0b263e.js';
-import { u as useTranslations } from './index-f82ced74.js';
-import { D as Dropdown } from './index-2463b156.js';
+import { B as Button } from './index-2e4d8b2e.js';
+import { u as useScreenSize, I as ImageWrap } from './index-b06ca257.js';
+import { u as useTranslations } from './index-cdb1aebe.js';
+import { D as Dropdown } from './index-31f32525.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-576cde59.js';
-import { D as Drawer } from './index-c2ea33ab.js';
+import { I as Input } from './index-5b0a6fe5.js';
+import { D as Drawer } from './index-20a9832e.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-11dbaf70.js';
+import { L as LOCALE } from './Locale-5fc62371.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
+import { L as Loading } from './index-d470b8b0.js';
+import { debounce } from 'lodash';
 
 const StyledCategoryCard = styled.a `
   display: flex;
@@ -4634,4 +4636,332 @@ const WidgetChatbotAi = ({}) => {
                     React__default.createElement(Button$1, { className: "submitBtn", type: "submit", variant: value ? 'primary' : 'ghost', leftIcon: React__default.createElement(ArrowRight, { size: 16, color: value ? '#fff' : '#595959' }) }))))));
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, IconText as I, RadioGroup as R, ScrollList as S, Tabs as T, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k };
+const ListContext = createContext(null);
+function useListContext() {
+    const ctx = useContext(ListContext);
+    if (!ctx)
+        throw new Error('useListContext must be used within ListProvider');
+    return ctx;
+}
+
+function Content({ className, children, customLoading, customEmpty, }) {
+    const { loading, items } = useListContext();
+    if (loading) {
+        return customLoading ? React__default.createElement(React__default.Fragment, null, customLoading) : React__default.createElement(Loading, null);
+    }
+    if (!items.length) {
+        return customEmpty ? React__default.createElement(React__default.Fragment, null, customEmpty) : React__default.createElement("div", null, "No Result");
+    }
+    return React__default.createElement("div", { className: className }, children);
+}
+
+function Item({ render, }) {
+    const { items, loading, loadingMore } = useListContext();
+    return (React__default.createElement(React__default.Fragment, null, items.map((item, idx) => (React__default.createElement("div", { key: idx }, render(item, loading, loadingMore))))));
+}
+
+const DEFAULT_PAGE_SIZE = 10;
+function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, }) {
+    const [items, setItems] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+    const [search, setSearch] = useState(defaultSearch);
+    const [loading, setLoading] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [filters, setFilters] = useState(defaultFilters);
+    const loadData = ({ page, search, isMore, pageSize: customPage, filters: filtersData, }) => __awaiter(this, void 0, void 0, function* () {
+        setLoading(!isMore);
+        setLoadingMore(isMore);
+        try {
+            const res = yield fetcher({
+                page,
+                pageSize: customPage || pageSize,
+                search,
+                filters: filtersData,
+            });
+            if (isMore) {
+                setItems((prevState) => [...prevState, ...res.data]);
+            }
+            else {
+                setItems(res.data);
+            }
+            setPage(page);
+            setTotal(res.total);
+        }
+        finally {
+            setLoading(false);
+            setLoadingMore(false);
+        }
+    });
+    const loadDataDebounce = useCallback(debounce(loadData, 300), []);
+    const handleChangePage = (page) => {
+        loadDataDebounce({
+            search,
+            page,
+        });
+    };
+    const handleLoadMore = () => {
+        const nextPage = page + 1;
+        loadDataDebounce({
+            search,
+            page: nextPage,
+            isMore: true,
+            filters,
+        });
+    };
+    const handleChangeSearch = (value) => {
+        setSearch(value);
+        loadDataDebounce({
+            search: value,
+            page: 1,
+            filters,
+        });
+    };
+    const resetData = () => {
+        setSearch('');
+        setFilters({});
+        loadDataDebounce({
+            page: 1,
+            search: '',
+            filters: {},
+        });
+    };
+    const handleChangeFilter = (filterData) => {
+        const nextFilter = Object.assign({}, filters);
+        if (filterData.filterKey in nextFilter &&
+            nextFilter[filterData.filterKey] === filterData.value) {
+            delete nextFilter[filterData.filterKey];
+        }
+        else {
+            nextFilter[filterData.filterKey] = filterData.value;
+        }
+        setFilters(nextFilter);
+        loadDataDebounce({
+            page: 1,
+            search: search,
+            filters: nextFilter,
+        });
+    };
+    const handleUpdateFilter = (filterObject) => {
+        const nextFilter = Object.assign(Object.assign({}, filters), filterObject);
+        console.log('nextFilter', nextFilter);
+        setFilters(nextFilter);
+        loadDataDebounce({
+            page: 1,
+            search: search,
+            filters: nextFilter,
+        });
+    };
+    return {
+        items,
+        total,
+        page,
+        pageSize,
+        search,
+        loading,
+        loadingMore,
+        filters,
+        handleChangePage,
+        handleChangeSearch,
+        handleLoadMore,
+        handleChangeFilter,
+        handleUpdateFilter,
+        resetData,
+    };
+}
+
+function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSize, }) {
+    const listState = useList({
+        fetcher,
+        defaultFilters,
+        defaultSearch,
+        pageSize,
+    });
+    const value = useMemo(() => (Object.assign({}, listState)), [
+        listState.items,
+        listState.page,
+        listState.loading,
+        listState.loadingMore,
+        listState.search,
+        listState.total,
+        listState.filters,
+    ]);
+    return React__default.createElement(ListContext.Provider, { value: value }, children);
+}
+
+const StyledFilterItem = styled.div `
+  display: inline-flex;
+  border: 1px solid ${theme.colors.neutral100};
+  padding: 0.5rem 0.75rem;
+  color: ${theme.colors.gray800};
+  text-align: center;
+  font-size: 0.8125rem;
+  border-radius: 0.5rem;
+  line-height: 1.25rem;
+  background-color: ${theme.colors.white};
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid ${theme.colors.blue100};
+    background-color: ${theme.colors.blue50};
+  }
+`;
+
+const StyledVaccineFilter = styled.div `
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+`;
+function QuickFilter({ filterOptions, activeFilter, onChange, }) {
+    const handleChange = (item) => {
+        return ((e) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(item);
+            const target = e.target;
+            if (target) {
+                target.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'center',
+                    behavior: 'auto',
+                });
+            }
+        });
+    };
+    return (React__default.createElement(StyledVaccineFilter, { className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, filterOptions.map((item, index) => (React__default.createElement(StyledFilterItem, { key: `filter_${index}`, onClick: handleChange(item), className: clsx('snap-center', {
+            active: activeFilter[item.filterKey] === item.value,
+        }), "data-event-label": item.label }, item.label)))));
+}
+
+function ListQuickFilter({ filterOptions }) {
+    const { handleChangeFilter, filters } = useListContext();
+    return (React__default.createElement(QuickFilter, { filterOptions: filterOptions, onChange: handleChangeFilter, activeFilter: filters }));
+}
+
+function LoadMore({ renderLoadMore, }) {
+    const { loadingMore, handleLoadMore, pageSize, page, total } = useListContext();
+    const totalPages = Math.ceil(total / pageSize);
+    const isEndLoadMore = totalPages === page || !total;
+    if (isEndLoadMore) {
+        return null;
+    }
+    return (React__default.createElement(Box, { mt: rem(24), className: "text-center" },
+        React__default.createElement(Button$2, { loading: loadingMore, onClick: handleLoadMore, variant: "white", radius: 30, py: 8, px: 32, lh: rem(20), sx: {
+                color: theme.colors.gray800,
+                fontSize: 13,
+                transition: 'color 0.2s',
+                ':hover': {
+                    color: theme.colors.gray600,
+                },
+            } }, typeof renderLoadMore === 'function'
+            ? renderLoadMore({
+                loadingMore,
+                page,
+                pageSize,
+            })
+            : `Load more ${pageSize} items`)));
+}
+
+function Pagination() {
+    const { total, page, handleChangePage, pageSize } = useListContext();
+    const totalPages = Math.ceil(total / pageSize);
+    return (React__default.createElement(Pagination$1, { pagesAmount: totalPages, currentPage: page, onChange: handleChangePage }));
+}
+
+function Search({ className, placeholder = 'Search...', formatValue, }) {
+    const { search, handleChangeSearch } = useListContext();
+    const onChange = (value) => {
+        if (formatValue) {
+            handleChangeSearch(formatValue(value));
+            return;
+        }
+        handleChangeSearch(value);
+    };
+    return (React__default.createElement(SearchInput, { value: search, onChange: onChange, placeholder: placeholder, className: className }));
+}
+
+const List = {
+    Provider: ListProvider,
+    Search,
+    Content,
+    Pagination,
+    Item,
+    LoadMore,
+    QuickFilter: ListQuickFilter,
+};
+
+const StyleCardItem = styled.div `
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 84px;
+  background-color: ${theme.colors.white};
+  gap: 0.75rem;
+
+  .logo {
+    width: 84px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  /* grid-rows-1 grid-cols-2 order-2 w-[84px] */
+
+  .title {
+    font-size: 0.9375rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    color: #1e1e1e;
+  }
+
+  .description {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    color: ${theme.colors.gray600};
+    letter-spacing: -0.3px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .info {
+    gap: 4px;
+    display: flex;
+    flex-direction: column;
+  }
+`;
+styled.div `
+  position: relative;
+  width: 85px;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+`;
+
+function CardListItem({ title, href, description, logo, defaultImage, LinkComponent = 'a', children, contentInfo, className, }) {
+    return (React__default.createElement(StyleCardItem, { className: className },
+        React__default.createElement("div", { className: "info" },
+            React__default.createElement(LinkComponent, { href: href },
+                React__default.createElement("h5", { className: "title" }, title)),
+            description && (React__default.createElement(LinkComponent, { href: href },
+                React__default.createElement("p", { className: "description" }, description))),
+            contentInfo),
+        React__default.createElement("div", { className: "logo" },
+            React__default.createElement(LinkComponent, { href: href },
+                React__default.createElement(AspectRatio, { ratio: 1, bg: "#EFF4FF" },
+                    React__default.createElement(ImageWrap, { src: logo || defaultImage, width: 84, height: 84, alt: title, backupSrc: defaultImage })))),
+        children));
+}
+
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, IconText as I, List as L, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, ListContext as l, CardListItem as m, useListContext as u };

package/build/esm/{index-5bcc8107.js → index-09c26e13.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-e6daae39.js';
+import { u as useScrollbarSize } from './useScrollbarSize-79b76fce.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-06a90493.js';
+import { M as MediaQueries } from './utils-40aba57b.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-10f57124.js → index-0b6bb6af.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-973fb363.js';
+import { _ as __rest } from './tslib.es6-de53a8a5.js';
 import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from '@mantine/core';
 import { Drawer } from 'vaul';
 import styled from '@emotion/styled';
-import { Z as ZINDEX_SSO } from './index-8a5a2683.js';
+import { Z as ZINDEX_SSO } from './index-2e7804a1.js';
 
 const StyledDrawerComponentContent = styled(Drawer.Content) `
   position: fixed;