ublo-lib 1.21.6 → 1.21.7

package/es/lbm/components/lumiplan/lumiplan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lumiplan.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/lumiplan.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CA+H/B"}
+{"version":3,"file":"lumiplan.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/lumiplan.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CAyI/B"}

package/es/lbm/components/lumiplan/lumiplan.js

@@ -28,6 +28,8 @@ export default function Lumiplan() {
     const isOpeningsInView = useInView(openingsRef, IN_VIEW_CONFIG);
     const isPoisInView = useInView(poisRef, IN_VIEW_CONFIG);
     const [currentResortId, setCurrentResortId] = React.useState(lumiplanResorts[0].id);
+    const currentResort = lumiplanResorts.find((resort) => resort.id === currentResortId);
+    const showOpening = Boolean(currentResort.showOpening);
     const [resortOpening, setResortOpening] = React.useState();
     const [weather, setWeather] = React.useState();
     const [resortAccess, setResortAccess] = React.useState();
@@ -114,5 +116,5 @@ export default function Lumiplan() {
             fetchData();
         }
     }, [currentResortId, isPoisInView]);
-    return (_jsxs("div", { className: css.lumiplan, children: [_jsx(ResortSelector, { resorts: lumiplanResorts, currentResortId: currentResortId, setCurrentResortId: setCurrentResortId }), _jsx(TodaysTips, { ref: todaysTipsRef, resortOpening: resortOpening }), _jsx(Weather, { ref: weatherRef, weather: weather }), _jsx(RoadCondition, { ref: roadConditionRef, resortAccess: resortAccess }), _jsx(Domain, { ref: domainRef, domain: domain }), _jsx(Pois, { ref: poisRef, pois: pois }), _jsx(Opening, { ref: openingsRef, resortOpening: resortOpening })] }));
+    return (_jsxs("div", { className: css.lumiplan, children: [_jsx(ResortSelector, { resorts: lumiplanResorts, currentResortId: currentResortId, setCurrentResortId: setCurrentResortId }), _jsx(TodaysTips, { ref: todaysTipsRef, resortOpening: resortOpening }), _jsx(Weather, { ref: weatherRef, weather: weather }), _jsx(RoadCondition, { ref: roadConditionRef, resortAccess: resortAccess }), _jsx(Domain, { ref: domainRef, domain: domain }), _jsx(Pois, { ref: poisRef, pois: pois }), showOpening && (_jsx(Opening, { ref: openingsRef, resortOpening: resortOpening, showOpening: currentResort.showOpening }))] }));
 }

package/es/lbm/components/lumiplan/lumiplan.module.css

@@ -1,9 +1,9 @@
 .lumiplan {
-  padding: 28px 0;
+  padding-top: 20px;
 }
 
 @media (min-width: 780px) {
   .lumiplan {
-    padding: 64px 0;
+    padding-top: 34px;
   }
 }

package/es/lbm/components/lumiplan/opening.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import type { ResortOpening } from "./types";
 type Props = {
     resortOpening?: ResortOpening | null;
+    showOpening?: string[];
 };
 declare const Opening: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Opening;

package/es/lbm/components/lumiplan/opening.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"opening.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/opening.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAO,MAAM,SAAS,CAAC;AAGlD,KAAK,KAAK,GAAG;IACX,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,OAAO,8EAuEZ,CAAC;AAuCF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"opening.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/lumiplan/opening.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAO,MAAM,SAAS,CAAC;AAGlD,KAAK,KAAK,GAAG;IACX,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,OAAO,8EAsEZ,CAAC;AAqCF,eAAe,OAAO,CAAC"}

package/es/lbm/components/lumiplan/opening.js

@@ -8,7 +8,7 @@ import NightIcon from "./icons/night";
 import DawnIcon from "./icons/dawn";
 import T, { t } from "./i18n/translations";
 import css from "./opening.module.css";
-const Opening = React.forwardRef(({ resortOpening }, ref) => {
+const Opening = React.forwardRef(({ resortOpening, showOpening }, ref) => {
     const { lang } = useUbloContext();
     if (resortOpening === undefined) {
         return (_jsx("div", { ref: ref, className: css.loader, "data-tags": t(lang, "opening.navigation-title"), children: _jsx(Loader, { variant: "overlay" }) }));
@@ -21,15 +21,15 @@ const Opening = React.forwardRef(({ resortOpening }, ref) => {
     const dayIndex = new Date().getDay() - 1;
     const orderedDays = reorganizeDays(dawnSkiingDays, dayIndex);
     const orderedNights = reorganizeDays(nightSkiingDays, dayIndex);
-    return (_jsx("div", { ref: ref, className: css.opening, "data-tags": t(lang, "opening.navigation-title"), children: _jsx("div", { className: css.tableOuter, children: _jsxs("table", { className: css.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: css.headingMini }), orderedDays.map((day, i) => {
+    return (_jsx("div", { ref: ref, className: css.opening, "data-tags": t(lang, "opening.navigation-title"), children: _jsx("div", { className: css.tableOuter, children: _jsxs("table", { className: css.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), orderedDays.map((day, i) => {
                                     const dayNumber = new Date();
                                     dayNumber.setDate(dayNumber.getDate() + i);
                                     return (_jsx("th", { className: css.heading, children: _jsxs("div", { className: css.headingInner, children: [_jsx(T, { id: `opening.days.${day.dayType}` }), " ", dayNumber.getDate()] }) }, day.dayType));
-                                })] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx(Rows, { kind: "dawn", rows: orderedDays }) }), _jsx("tr", { children: _jsx(Rows, { kind: "night", rows: orderedNights }) })] })] }) }) }));
+                                })] }) }), _jsxs("tbody", { children: [showOpening?.includes("dawn") && (_jsx("tr", { children: _jsx(Rows, { kind: "dawn", rows: orderedDays }) })), showOpening?.includes("night") && (_jsx("tr", { children: _jsx(Rows, { kind: "night", rows: orderedNights }) }))] })] }) }) }));
 });
 function Rows({ kind, rows }) {
     const Icon = kind === "dawn" ? DawnIcon : NightIcon;
-    return (_jsxs(_Fragment, { children: [_jsx("td", { className: css.headingMini, children: _jsxs("span", { className: css.headingInner, children: [_jsx(Icon, {}), _jsx("span", { className: css.headingInnerText, children: _jsx(T, { id: `opening.${kind}` }) })] }) }), rows.map(({ dayType, open }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("td", { className: css.heading, children: _jsxs("span", { className: css.headingInner, children: [_jsx(Icon, {}), _jsx(T, { id: `opening.${kind}` })] }) }), rows.map(({ dayType, open }) => {
                 const code = open ? "opening.available" : "opening.unavailable";
                 const classes = classNames(css.cell, {
                     [css.cellAvailable]: open,

package/es/lbm/components/lumiplan/opening.module.css

@@ -3,7 +3,7 @@
   width: 100%;
   max-width: 1200px;
   height: 300px;
-  margin: 30px auto;
+  margin: 40px auto;
   border-radius: var(--radius-200);
   overflow: hidden;
 }
@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
   gap: 40px;
-  margin: 36px auto;
+  margin: 40px auto;
   padding: 0 10px;
 }
 
@@ -29,6 +29,17 @@
   padding: 20px;
   border: 2px solid hsl(var(--primary));
   border-radius: calc(var(--radius-400) * 2);
+  background-image: linear-gradient(to right, white, white),
+    linear-gradient(to right, white, white),
+    linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
+    linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
+
+  background-attachment: local, local, scroll, scroll;
+
   overflow: auto;
 }
 
@@ -61,7 +72,6 @@
   line-height: 1;
   white-space: nowrap;
   min-width: 60px;
-  margin-top: 25px;
 }
 
 @media (min-width: 580px) {
@@ -71,29 +81,21 @@
 }
 
 .headingInner {
-  display: block;
-  height: 100%;
-  /* height: 18px; */
-  line-height: 1;
+  height: 18px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+  margin: 20px 0;
   background-color: hsla(var(--secondary), 10%);
   white-space: nowrap;
 }
 
-.headingInnerText {
-  display: none;
-}
-
-@media (min-width: 580px) {
-  .headingInnerText {
-    display: inline-block;
-  }
-}
-
 .headingInner > svg {
   min-width: 30px;
   width: 30px;
   height: 30px;
-  margin-right: 6%;
 }
 
 .table td {
@@ -119,20 +121,13 @@
 }
 
 .cellInner {
-  margin-top: 35px;
-  padding: 0 10px;
+  padding: 20px 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }
 
-@media (min-width: 580px) {
-  .cellInner {
-    margin-top: 40px;
-  }
-}
-
 .cellAvailable {
   color: hsl(var(--secondary));
 }

package/es/lbm/components/lumiplan/pois.js

@@ -106,7 +106,7 @@ const Pois = React.forwardRef(({ pois }, ref) => {
                         const trailLevelLabel = hasTrailLevel
                             ? `(${t(lang, `pois.trailLevels.${trailLevel}`)})`
                             : null;
-                        const specialTrail = Object.keys(SPECIAL_TRAILS).find((key) => name.includes(key));
+                        const specialTrail = Object.keys(SPECIAL_TRAILS).find((key) => name?.includes(key));
                         const message = messagePoi?.data?.find(({ language }) => {
                             const _lang = lang === "fr" ? "fr_FR" : "en_US";
                             return language === _lang;
@@ -117,7 +117,7 @@ const Pois = React.forwardRef(({ pois }, ref) => {
                             [css[trailLevel]]: hasTrailLevel,
                         });
                         let status = "OPEN";
-                        if (openingStatus.includes("DELAYED")) {
+                        if (openingStatus?.includes("DELAYED")) {
                             status = "DELAYED";
                         }
                         else {

package/es/lbm/components/lumiplan/resort-selector.module.css

@@ -3,12 +3,12 @@
   justify-content: center;
   flex-wrap: wrap;
   gap: 20px;
-  margin-bottom: 40px;
+  margin-bottom: 10px;
 }
 
 button.button {
-  --ds-button-padding: 12px;
-  --ds-button-font-size: 16px;
+  --ds-button-padding: 14px;
+  --ds-button-font-size: 19px;
   --ds-button-foreground: hsl(var(--primary));
   --ds-button-font-weight: 400;
   --ds-button-background: transparent;

package/es/lbm/components/lumiplan/weather/snow-data.js

@@ -4,5 +4,5 @@ import SnowCover from "../icons/snow-cover";
 import css from "./snow-data.module.css";
 export default function SnowData({ data, expanded }) {
     const { snowQuality, snowTotalDepth, freshSnowFallDepth12H, freshSnowFallDepth24H, freshSnowFallDepth48H, freshSnowFallDepth72H, } = data;
-    return (_jsxs("div", { className: css.snow, children: [_jsx(SnowCover, { className: css.snowIcon }), _jsxs("div", { className: css.snowInfo, children: [_jsxs("div", { className: css.snowState, children: [_jsx(T, { id: "snow.snow-quality.title" }), " ", snowQuality && snowQuality !== "UNDEF" && (_jsxs(_Fragment, { children: [": ", _jsx(T, { id: `snow.snow-quality.states.${snowQuality}` })] }))] }), _jsxs("div", { className: css.snowDepth, children: [snowTotalDepth?.value || 0, _jsx(T, { id: snowTotalDepth?.unit || "CENTIMETER" })] }), expanded && (_jsxs("div", { className: css.expanded, children: [freshSnowFallDepth12H && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 12h :", " ", freshSnowFallDepth12H.value, _jsx(T, { id: freshSnowFallDepth12H.unit })] })), freshSnowFallDepth24H && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 24h :", " ", freshSnowFallDepth24H.value, _jsx(T, { id: freshSnowFallDepth24H.unit })] })), freshSnowFallDepth48H && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 48h :", " ", freshSnowFallDepth48H.value, _jsx(T, { id: freshSnowFallDepth48H.unit })] })), freshSnowFallDepth72H && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 72h :", " ", freshSnowFallDepth72H.value, _jsx(T, { id: freshSnowFallDepth72H.unit })] }))] }))] })] }));
+    return (_jsxs("div", { className: css.snow, children: [_jsx(SnowCover, { className: css.snowIcon }), _jsxs("div", { className: css.snowInfo, children: [_jsxs("div", { className: css.snowState, children: [_jsx(T, { id: "snow.snow-quality.title" }), " ", snowQuality && snowQuality !== "UNDEF" && (_jsxs(_Fragment, { children: [": ", _jsx(T, { id: `snow.snow-quality.states.${snowQuality}` })] }))] }), _jsxs("div", { className: css.snowDepth, children: [snowTotalDepth?.value || 0, _jsx(T, { id: snowTotalDepth?.unit || "CENTIMETER" })] }), expanded && (_jsxs("div", { className: css.expanded, children: [freshSnowFallDepth12H?.value && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 12h :", " ", freshSnowFallDepth12H.value, _jsx(T, { id: freshSnowFallDepth12H.unit })] })), freshSnowFallDepth24H?.value && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 24h :", " ", freshSnowFallDepth24H.value, _jsx(T, { id: freshSnowFallDepth24H.unit })] })), freshSnowFallDepth48H?.value && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 48h :", " ", freshSnowFallDepth48H.value, _jsx(T, { id: freshSnowFallDepth48H.unit })] })), freshSnowFallDepth72H?.value && (_jsxs("div", { className: css.snowFall, children: [_jsx(T, { id: "snow.fresh-snow-fall" }), " 72h :", " ", freshSnowFallDepth72H.value, _jsx(T, { id: freshSnowFallDepth72H.unit })] }))] }))] })] }));
 }

package/es/lbm/components/lumiplan/weather/weather-days.d.ts

@@ -0,0 +1,7 @@
+export default function Days({ days, currentDayIndex, setCurrentDayIndex, lang, }: {
+    days: any;
+    currentDayIndex: any;
+    setCurrentDayIndex: any;
+    lang: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=weather-days.d.ts.map

package/es/lbm/components/lumiplan/weather/weather-days.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weather-days.d.ts","sourceRoot":"","sources":["../../../../../src/lbm/components/lumiplan/weather/weather-days.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,eAAe,EACf,kBAAkB,EAClB,IAAI,GACL;;;;;CAAA,2CAiEA"}

package/es/lbm/components/lumiplan/weather/weather-days.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import Button from "dt-design-system/es/button";
+import T from "../i18n/translations";
+import useWindowSizes from "../../../../common/hooks/use-window-sizes";
+// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
+import css from "./weather-days.module.css";
+export default function Days({ days, currentDayIndex, setCurrentDayIndex, lang, }) {
+    const [showLeftShadow, setShowLeftShadow] = React.useState(false);
+    const [showRightShadow, setShowRightShadow] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const scrollerRef = React.useRef(null);
+    const { width, height } = useWindowSizes();
+    const refreshShadows = React.useCallback(() => {
+        const container = containerRef.current;
+        const scroller = scrollerRef.current;
+        if (container && scroller) {
+            setShowLeftShadow(scroller.scrollLeft > 50);
+            const maxScroll = Math.round(scroller.scrollWidth) - Math.round(scroller.clientWidth);
+            setShowRightShadow(scroller.scrollLeft < maxScroll - 50);
+        }
+    }, []);
+    React.useEffect(() => {
+        refreshShadows();
+    }, [refreshShadows, width, height]);
+    const daysClasses = classNames(css.days, {
+        [css.leftShadow]: showLeftShadow,
+        [css.rightShadow]: showRightShadow,
+    });
+    return (_jsx("div", { ref: containerRef, className: daysClasses, children: _jsx("div", { ref: scrollerRef, onScroll: refreshShadows, className: css.content, children: days.map((day, i) => {
+                const { date, am, pm } = day;
+                if (!pm || !am)
+                    return null;
+                const isSelected = i === currentDayIndex;
+                const updateCurrentDay = () => {
+                    setCurrentDayIndex(i);
+                };
+                const isToday = new Date(date).getDate() === new Date().getDate();
+                const locale = lang === "fr" ? "fr-FR" : "en-UK";
+                const today = new Date(date).toLocaleDateString(locale, {
+                    weekday: "long",
+                });
+                const formatedDate = new Date(date).toLocaleDateString(locale, {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                });
+                const classes = classNames(css.day, {
+                    [css.daySelected]: isSelected,
+                });
+                return (_jsxs(Button, { className: classes, onClick: updateCurrentDay, children: [_jsx("b", { children: isToday ? _jsx(T, { id: "weather.today" }) : today }), formatedDate] }, date));
+            }) }) }));
+}

package/es/lbm/components/lumiplan/weather/weather-days.module.css

@@ -0,0 +1,66 @@
+.days {
+  position: relative;
+}
+
+.days::before,
+.days::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 40px;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    #fff,
+    rgba(255, 255, 255, 0.6),
+    transparent
+  );
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 320ms ease;
+  pointer-events: none;
+}
+
+.days::before {
+  left: 0;
+}
+
+.days::after {
+  right: 0;
+  transform: rotate(0.5turn);
+}
+
+.leftShadow::before,
+.rightShadow::after {
+  opacity: 1;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: auto;
+  scroll-snap-type: x proximity;
+}
+
+button.day {
+  --ds-button-padding: 16px;
+  --ds-button-font-size: 14px;
+  --ds-button-foreground: hsl(var(--primary));
+  --ds-button-font-weight: 400;
+  --ds-button-background: transparent;
+  --ds-button-hover-background: hsla(var(--primary), 10%);
+  --ds-button-radius: 0;
+
+  flex-direction: column;
+  scroll-snap-align: start;
+}
+
+button.daySelected {
+  position: relative;
+  --ds-button-background: hsla(var(--primary), 10%);
+}
+
+button.day b {
+  text-transform: uppercase;
+}

package/es/lbm/components/lumiplan/weather/weather-zones.d.ts

@@ -0,0 +1,6 @@
+export default function Zones({ weatherZones, currentZoneIndex, setCurrentZoneIndex, }: {
+    weatherZones: any;
+    currentZoneIndex: any;
+    setCurrentZoneIndex: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=weather-zones.d.ts.map

package/es/lbm/components/lumiplan/weather/weather-zones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weather-zones.d.ts","sourceRoot":"","sources":["../../../../../src/lbm/components/lumiplan/weather/weather-zones.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,GACpB;;;;CAAA,2CAgEA"}

package/es/lbm/components/lumiplan/weather/weather-zones.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import useWindowSizes from "../../../../common/hooks/use-window-sizes";
+// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
+import Button from "dt-design-system/es/button";
+import T from "../i18n/translations";
+import css from "./weather-zones.module.css";
+export default function Zones({ weatherZones, currentZoneIndex, setCurrentZoneIndex, }) {
+    const [showLeftShadow, setShowLeftShadow] = React.useState(false);
+    const [showRightShadow, setShowRightShadow] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const scrollerRef = React.useRef(null);
+    const { width, height } = useWindowSizes();
+    const refreshShadows = React.useCallback(() => {
+        const container = containerRef.current;
+        const scroller = scrollerRef.current;
+        if (container && scroller) {
+            setShowLeftShadow(scroller.scrollLeft > 50);
+            const maxScroll = Math.round(scroller.scrollWidth) - Math.round(scroller.clientWidth);
+            setShowRightShadow(scroller.scrollLeft < maxScroll - 50);
+        }
+    }, []);
+    React.useEffect(() => {
+        refreshShadows();
+    }, [refreshShadows, width, height]);
+    const zonesClasses = classNames(css.zones, {
+        [css.leftShadow]: showLeftShadow,
+        [css.rightShadow]: showRightShadow,
+    });
+    return (_jsx("div", { ref: containerRef, className: zonesClasses, children: _jsx("div", { ref: scrollerRef, onScroll: refreshShadows, className: css.content, children: weatherZones.map((zone, i) => {
+                const hasData = Boolean(zone.weatherInfos.length > 0 &&
+                    zone.weatherInfos[0].am &&
+                    zone.weatherInfos[0].pm);
+                if (!hasData)
+                    return null;
+                const { name, altitude } = zone;
+                const { value, unit } = altitude;
+                const isSelected = i === currentZoneIndex;
+                const updateCurrentZone = () => {
+                    setCurrentZoneIndex(i);
+                };
+                const classes = classNames(css.zone, {
+                    [css.zoneSelected]: isSelected,
+                });
+                return (_jsxs(Button, { className: classes, onClick: updateCurrentZone, children: [_jsx("b", { children: name }), " ", value, _jsx("span", { children: _jsx(T, { id: unit }) })] }, name));
+            }) }) }));
+}

package/es/lbm/components/lumiplan/weather/weather-zones.module.css

@@ -0,0 +1,79 @@
+.zones {
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.zones::before,
+.zones::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 40px;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    #fff,
+    rgba(255, 255, 255, 0.6),
+    transparent
+  );
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 320ms ease;
+  pointer-events: none;
+}
+
+.zones::before {
+  left: 0;
+}
+
+.zones::after {
+  right: 0;
+  transform: rotate(0.5turn);
+}
+
+.leftShadow::before,
+.rightShadow::after {
+  opacity: 1;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: auto;
+  scroll-snap-type: x proximity;
+}
+
+button.zone {
+  --ds-button-padding: 8px;
+  --ds-button-font-size: 14px;
+  --ds-button-foreground: hsl(var(--primary));
+  --ds-button-font-weight: 400;
+  --ds-button-background: transparent;
+  --ds-button-hover-background: hsla(var(--primary), 10%);
+  --ds-button-shadow: 0 0 0 1px hsl(var(--primary)) inset;
+
+  display: block;
+  white-space: nowrap;
+  scroll-snap-align: start;
+}
+
+button.zone:first-child {
+  margin-left: auto;
+}
+
+button.zone:last-child {
+  margin-right: auto;
+}
+
+button.zoneSelected {
+  --ds-button-foreground: hsl(var(--grey-000));
+  --ds-button-shadow: 0;
+
+  background: var(--blue-gradient);
+}
+
+button.zone b {
+  text-transform: uppercase;
+}

package/es/lbm/components/lumiplan/weather/weather.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"weather.d.ts","sourceRoot":"","sources":["../../../../../src/lbm/components/lumiplan/weather/weather.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,OAAO,8EA+IZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"weather.d.ts","sourceRoot":"","sources":["../../../../../src/lbm/components/lumiplan/weather/weather.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAKhD,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,OAAO,8EA+EZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/es/lbm/components/lumiplan/weather/weather.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import classNames from "classnames";
 import { useUbloContext } from "ublo/with-ublo";
 import Button from "dt-design-system/es/button";
 import Tooltip from "dt-design-system/es/tooltip";
@@ -9,8 +8,10 @@ import * as Icons from "dt-design-system/es/icons";
 import AvalancheRisk from "./avalanche-risk";
 import SnowData from "./snow-data";
 import WeatherData from "./weather-data";
-import T, { t } from "../i18n/translations";
+import { t } from "../i18n/translations";
 import css from "./weather.module.css";
+import Days from "./weather-days";
+import Zones from "./weather-zones";
 const Weather = React.forwardRef(({ weather }, ref) => {
     const { lang } = useUbloContext();
     const [currentZoneIndex, setCurrentZoneIndex] = React.useState(0);
@@ -36,45 +37,7 @@ const Weather = React.forwardRef(({ weather }, ref) => {
     const toggleExpanded = () => {
         setExpanded(!expanded);
     };
-    return (_jsxs("div", { ref: ref, className: css.weather, "data-tags": t(lang, "weather.title"), children: [_jsxs("div", { className: css.header, children: [_jsx("div", { className: css.days, children: days.map((day, i) => {
-                            const { date, am, pm } = day;
-                            if (!pm || !am)
-                                return null;
-                            const isSelected = i === currentDayIndex;
-                            const updateCurrentDay = () => {
-                                setCurrentDayIndex(i);
-                            };
-                            const isToday = new Date(date).getDate() === new Date().getDate();
-                            const locale = lang === "fr" ? "fr-FR" : "en-UK";
-                            const today = new Date(date).toLocaleDateString(locale, {
-                                weekday: "long",
-                            });
-                            const formatedDate = new Date(date).toLocaleDateString(locale, {
-                                day: "2-digit",
-                                month: "2-digit",
-                                year: "numeric",
-                            });
-                            const classes = classNames(css.day, {
-                                [css.daySelected]: isSelected,
-                            });
-                            return (_jsxs(Button, { className: classes, onClick: updateCurrentDay, children: [_jsx("b", { children: isToday ? _jsx(T, { id: "weather.today" }) : today }), formatedDate] }, date));
-                        }) }), _jsx("div", { className: css.zones, children: weatherZones.map((zone, i) => {
-                            const hasData = Boolean(zone.weatherInfos.length > 0 &&
-                                zone.weatherInfos[0].am &&
-                                zone.weatherInfos[0].pm);
-                            if (!hasData)
-                                return null;
-                            const { name, altitude } = zone;
-                            const { value, unit } = altitude;
-                            const isSelected = i === currentZoneIndex;
-                            const updateCurrentZone = () => {
-                                setCurrentZoneIndex(i);
-                            };
-                            const classes = classNames(css.zone, {
-                                [css.zoneSelected]: isSelected,
-                            });
-                            return (_jsxs(Button, { className: classes, onClick: updateCurrentZone, children: [_jsx("b", { children: name }), " ", value, _jsx("span", { children: _jsx(T, { id: unit }) })] }, name));
-                        }) })] }), _jsxs("div", { className: css.info, children: [_jsx(AvalancheRisk, { avalancheRisk: snowData.avalancheRisk }), _jsxs("div", { className: css.infoBottom, children: [_jsx(SnowData, { data: snowData, expanded: expanded }), _jsx(WeatherData, { kind: "am", data: am, expanded: expanded }), _jsx(WeatherData, { kind: "pm", data: pm, expanded: expanded })] }), _jsx(Tooltip, { content: t(lang, expanded ? "see-less" : "see-more"), children: _jsx(Button, { className: css.expandButton, variant: "transparent", onClick: toggleExpanded, children: _jsx(ExpandIcon, {}) }) })] })] }));
+    return (_jsxs("div", { ref: ref, className: css.weather, "data-tags": t(lang, "weather.title"), children: [_jsx(Zones, { weatherZones: weatherZones, currentZoneIndex: currentZoneIndex, setCurrentZoneIndex: setCurrentZoneIndex }), _jsx(Days, { days: days, currentDayIndex: currentDayIndex, setCurrentDayIndex: setCurrentDayIndex, lang: lang }), _jsxs("div", { className: css.info, children: [_jsx(AvalancheRisk, { avalancheRisk: snowData.avalancheRisk }), _jsxs("div", { className: css.infoBottom, children: [_jsx(SnowData, { data: snowData, expanded: expanded }), _jsx(WeatherData, { kind: "am", data: am, expanded: expanded }), _jsx(WeatherData, { kind: "pm", data: pm, expanded: expanded })] }), _jsx(Tooltip, { content: t(lang, expanded ? "see-less" : "see-more"), children: _jsx(Button, { className: css.expandButton, variant: "transparent", onClick: toggleExpanded, children: _jsx(ExpandIcon, {}) }) })] })] }));
 });
 Weather.displayName = "Weather";
 export default Weather;

package/es/lbm/components/lumiplan/weather/weather.module.css

@@ -3,7 +3,7 @@
   width: 100%;
   max-width: 1200px;
   height: 300px;
-  margin: 30px auto;
+  margin: 20px auto;
   border-radius: var(--radius-200);
   overflow: hidden;
 }
@@ -13,7 +13,7 @@
   max-width: 1200px;
   display: flex;
   flex-direction: column;
-  margin: 36px auto;
+  margin: 20px auto;
   padding: 0 10px;
 }
 
@@ -23,74 +23,6 @@
   }
 }
 
-.header {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 16px;
-  overflow: auto;
-}
-
-@media (min-width: 700px) {
-  .header {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-
-.days {
-  display: flex;
-}
-
-.zones {
-  display: flex;
-  gap: 10px;
-}
-
-button.zone {
-  --ds-button-padding: 12px;
-  --ds-button-font-size: 14px;
-  --ds-button-foreground: hsl(var(--primary));
-  --ds-button-font-weight: 400;
-  --ds-button-background: transparent;
-  --ds-button-hover-background: hsla(var(--primary), 10%);
-  --ds-button-shadow: 0 0 0 1px hsl(var(--primary)) inset;
-
-  display: block;
-}
-
-button.zoneSelected {
-  --ds-button-foreground: hsl(var(--grey-000));
-  --ds-button-shadow: 0;
-
-  background: var(--blue-gradient);
-}
-
-button.zone b {
-  text-transform: uppercase;
-}
-
-button.day {
-  --ds-button-padding: 16px;
-  --ds-button-font-size: 14px;
-  --ds-button-foreground: hsl(var(--primary));
-  --ds-button-font-weight: 400;
-  --ds-button-background: transparent;
-  --ds-button-hover-background: hsla(var(--primary), 10%);
-  --ds-button-radius: 0;
-
-  flex-direction: column;
-}
-
-button.daySelected {
-  position: relative;
-  --ds-button-background: hsla(var(--primary), 10%);
-}
-
-button.day b {
-  text-transform: uppercase;
-}
-
 .info {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.21.6",
+  "version": "1.21.7",
   "peerDependencies": {
     "dt-design-system": "^3.1.5",
     "leaflet": "^1.9.1",