ublo-lib 1.30.10 → 1.31.0

package/es/common/components/breadcrumb.js

@@ -3,7 +3,48 @@ import Link from "ublo/link";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Item = ({
+export default function Breadcrumb({
+  breadcrumb,
+  exclusions = []
+}) {
+  return _jsx("div", {
+    className: "breadcrumb",
+    children: _jsx(Items, {
+      rawItem: breadcrumb,
+      exclusions: exclusions
+    })
+  });
+}
+function Items({
+  rawItem,
+  exclusions
+}) {
+  if (!rawItem) return null;
+  const {
+    next,
+    name,
+    title,
+    path,
+    page
+  } = rawItem;
+  const isCurrent = next === undefined;
+  const isNextExcluded = !isCurrent && exclusions.includes(next.name);
+  const itemToRender = isNextExcluded ? next.next : next;
+  const nextItem = !isCurrent ? _jsx(Items, {
+    rawItem: itemToRender,
+    exclusions: exclusions
+  }) : null;
+  return _jsx(Item, {
+    name: name,
+    page: page,
+    path: path,
+    itemTitle: title,
+    nextItem: nextItem,
+    isCurrent: isCurrent,
+    exclusions: exclusions
+  });
+}
+function Item({
   name,
   page,
   path,
@@ -11,7 +52,7 @@ const Item = ({
   nextItem,
   isCurrent,
   exclusions
-}) => {
+}) {
   const hasTemplate = page !== undefined;
   const isExternalUrl = /^((http|https):\/\/)/.test(path);
   const noHref = isCurrent || !hasTemplate;
@@ -38,45 +79,4 @@ const Item = ({
       ...props
     }), nextItem]
   });
-};
-const Items = ({
-  rawItem,
-  exclusions
-}) => {
-  if (!rawItem) return null;
-  const {
-    next,
-    name,
-    title,
-    path,
-    page,
-    shortTitle
-  } = rawItem;
-  const isCurrent = next === undefined;
-  const isNextExcluded = !isCurrent && exclusions.includes(next.name);
-  const itemToRender = isNextExcluded ? next.next : next;
-  const nextItem = !isCurrent ? _jsx(Items, {
-    rawItem: itemToRender,
-    exclusions: exclusions
-  }) : null;
-  return _jsx(Item, {
-    name: name,
-    page: page,
-    path: path,
-    itemTitle: shortTitle || title,
-    nextItem: nextItem,
-    isCurrent: isCurrent,
-    exclusions: exclusions
-  });
-};
-const Breadcrumb = ({
-  breadcrumb,
-  exclusions = []
-}) => _jsx("div", {
-  className: "breadcrumb",
-  children: _jsx(Items, {
-    rawItem: breadcrumb,
-    exclusions: exclusions
-  })
-});
-export default Breadcrumb;
+}

package/es/esf/components/period-picker/controls.js

@@ -1,14 +1,15 @@
 import * as React from "react";
+import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import css from "./controls.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LEFT = 0;
 const RIGHT = 1;
-const Controls = ({
+export default function Controls({
   barRef,
   distance
-}) => {
+}) {
   const scrollTo = direction => () => {
     const bar = barRef.current;
     if (!bar) return;
@@ -22,21 +23,22 @@ const Controls = ({
   };
   return _jsxs("div", {
     className: css.controls,
-    children: [_jsx("button", {
+    children: [_jsx(Button, {
+      variant: "transparent",
       className: css.control,
       onClick: scrollTo(LEFT),
       "aria-label": "Previous",
-      children: _jsx(Icons.ChevronsLeft, {
+      children: _jsx(Icons.ArrowLeft, {
         className: css.icon
       })
-    }), _jsx("button", {
+    }), _jsx(Button, {
+      variant: "transparent",
       className: css.control,
       onClick: scrollTo(RIGHT),
       "aria-label": "Next",
-      children: _jsx(Icons.ChevronsRight, {
+      children: _jsx(Icons.ArrowRight, {
         className: css.icon
       })
     })]
   });
-};
-export default Controls;
+}

package/es/esf/components/period-picker/date-display.js

@@ -8,9 +8,9 @@ import * as Motions from "./services/motions";
 import css from "./date-display.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DateDisplay = ({
+export default function DateDisplay({
   className
-}) => {
+}) {
   const [stay, setStay] = React.useState();
   const {
     lang,
@@ -64,5 +64,4 @@ const DateDisplay = ({
       }, `${word}-${index}`))
     })]
   });
-};
-export default DateDisplay;
+}

package/es/esf/components/period-picker/days.js

@@ -5,14 +5,62 @@ import * as Dates from "./services/dates";
 import css from "./days.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Day = ({
+const Days = React.forwardRef(({
+  lang,
+  fullStay,
+  interval,
+  onChange
+}, ref) => {
+  const [firstSelected, setFirstSelected] = React.useState();
+  const updateSelection = day => e => {
+    e.stopPropagation();
+    if (firstSelected) {
+      const isBefore = firstSelected.getTime() > day.getTime();
+      const range = {
+        from: Dates.format(isBefore ? day : firstSelected),
+        to: Dates.format(isBefore ? firstSelected : day)
+      };
+      Stay.update(range);
+      if (typeof onChange === "function") {
+        onChange(range);
+      }
+      cancelSelection();
+    } else {
+      setFirstSelected(day);
+    }
+  };
+  const cancelSelection = () => {
+    setFirstSelected(undefined);
+  };
+  React.useEffect(() => {
+    window.addEventListener("click", cancelSelection);
+    return () => {
+      window.removeEventListener("click", cancelSelection);
+    };
+  }, []);
+  return _jsx("div", {
+    ref: ref,
+    className: css.days,
+    children: interval.map((day, i) => _jsx(Day, {
+      index: i,
+      lang: lang,
+      day: day,
+      fullStay: fullStay,
+      firstSelected: firstSelected,
+      updateSelection: updateSelection
+    }, day))
+  });
+});
+Days.displayName = "Days";
+export default Days;
+function Day({
   lang,
   index,
   day,
   fullStay,
   firstSelected,
   updateSelection
-}) => {
+}) {
   const locale = Dates.locales[lang] || Dates.locales.en;
   const isFirstDayOfStay = day.getTime() === fullStay[0]?.getTime();
   const isLastDayOfStay = day.getTime() === fullStay[fullStay.length - 1].getTime();
@@ -60,52 +108,4 @@ const Day = ({
       children: formatedMonth
     })]
   });
-};
-const Days = React.forwardRef(({
-  lang,
-  fullStay,
-  interval,
-  onChange
-}, ref) => {
-  const [firstSelected, setFirstSelected] = React.useState();
-  const updateSelection = day => e => {
-    e.stopPropagation();
-    if (firstSelected) {
-      const isBefore = firstSelected.getTime() > day.getTime();
-      const range = {
-        from: Dates.format(isBefore ? day : firstSelected),
-        to: Dates.format(isBefore ? firstSelected : day)
-      };
-      Stay.update(range);
-      if (typeof onChange === "function") {
-        onChange(range);
-      }
-      cancelSelection();
-    } else {
-      setFirstSelected(day);
-    }
-  };
-  const cancelSelection = () => {
-    setFirstSelected(undefined);
-  };
-  React.useEffect(() => {
-    window.addEventListener("click", cancelSelection);
-    return () => {
-      window.removeEventListener("click", cancelSelection);
-    };
-  }, []);
-  return _jsx("div", {
-    ref: ref,
-    className: css.days,
-    children: interval.map((day, i) => _jsx(Day, {
-      index: i,
-      lang: lang,
-      day: day,
-      fullStay: fullStay,
-      firstSelected: firstSelected,
-      updateSelection: updateSelection
-    }, day))
-  });
-});
-Days.displayName = "Days";
-export default Days;
+}

package/es/esf/components/period-picker/extended-stay-picker.js

@@ -8,7 +8,7 @@ import * as Messages from "./messages";
 import css from "./extended-stay-picker.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ExtendedStayPicker = ({
+export default function ExtendedStayPicker({
   lang,
   stay,
   extend,
@@ -18,7 +18,7 @@ const ExtendedStayPicker = ({
   opened,
   setExtendedOpened,
   onChange
-}) => {
+}) {
   const barRef = React.useRef();
   const startDate = Dates.weekToDate(week, endWeek, forceSeasonSwitch);
   const endDate = Dates.weekToDate(week + 1, endWeek, forceSeasonSwitch);
@@ -53,5 +53,4 @@ const ExtendedStayPicker = ({
       })]
     })
   });
-};
-export default ExtendedStayPicker;
+}

package/es/esf/components/period-picker/messages.js

@@ -8,10 +8,13 @@ const messages = {
     "update-period": "Choisir une autre plage de dates",
     offers: "Les offres pour la période du",
     to: "au",
-    "extended-title": "Vous pouvez ajuster vos dates de séjour"
+    "extended-title": "Vous pouvez ajuster vos dates de séjour",
+    "low-period": "Basse saison",
+    "medium-period": "Saison",
+    "high-period": "Haute saison"
   },
   en: {
-    title: "<span>When</span> are you coming?",
+    title: "<b>When</b> are you coming?",
     "selected-title": "You are coming from",
     warn: "Warning, if you change your dates of stay, products in your cart will be removed",
     ok: "Confirm",
@@ -19,10 +22,55 @@ const messages = {
     "update-period": "Update your stay",
     offers: "Offers for the period from",
     to: "to",
-    "extended-title": "You are coming more precisely"
+    "extended-title": "You are coming more precisely",
+    "low-period": "Low season",
+    "medium-period": "Season",
+    "high-period": "High season"
+  },
+  es: {
+    title: "<b>¿Cuándo</b> vienes?",
+    "selected-title": "Vienes de",
+    warn: "Advertencia, si cambias tus fechas de estancia, se vaciará tu carrito",
+    ok: "Confirmar",
+    cancel: "Cancelar",
+    "update-period": "Actualizar tu estancia",
+    offers: "Ofertas para el periodo del",
+    to: "al",
+    "extended-title": "Vienes más precisamente",
+    "low-period": "Temporada baja",
+    "medium-period": "Temporada",
+    "high-period": "Temporada alta"
+  },
+  ca: {
+    title: "<b>Quan</b> vens?",
+    "selected-title": "Vens de",
+    warn: "Atenció, si canvies les teves dates d'estada, s'esborrarà el teu carretó",
+    ok: "Confirmar",
+    cancel: "Cancel·lar",
+    "update-period": "Actualitzar la teva estada",
+    offers: "Ofertes per al període del",
+    to: "al",
+    "extended-title": "Vens més precisament",
+    "low-period": "Temporada baixa",
+    "medium-period": "Temporada",
+    "high-period": "Temporada alta"
+  },
+  it: {
+    title: "<b>Quando</b> vieni?",
+    "selected-title": "Vieni da",
+    warn: "Attenzione, se modifichi le date del tuo soggiorno, il tuo carrello sarà svuotato",
+    ok: "Confermare",
+    cancel: "Annullare",
+    "update-period": "Aggiorna il tuo soggiorno",
+    offers: "Offerte per il periodo dal",
+    to: "al",
+    "extended-title": "Vieni più precisamente",
+    "low-period": "Bassa stagione",
+    "medium-period": "Stagione",
+    "high-period": "Alta stagione"
   },
   nl: {
-    title: "<span>Wanneer</span> kom je?",
+    title: "<b>Wanneer</b> kom je?",
     "selected-title": "Je komt van",
     warn: "Waarschuwing, als u uw verblijfsdata wijzigt, wordt uw winkelwagentje gewist",
     ok: "Aanpassen",
@@ -30,10 +78,13 @@ const messages = {
     "update-period": "Update je verblijf",
     offers: "Aanbiedingen voor de periode van",
     to: "tot",
-    "extended-title": "Je komt precies"
+    "extended-title": "Je komt precies",
+    "low-period": "Laagseizoen",
+    "medium-period": "Seizoen",
+    "high-period": "Hoogseizoen"
   }
 };
-export const get = (lang, message) => {
+export function get(lang, message) {
   const locale = !messages[lang] ? "en" : lang;
   return messages[locale][message];
-};
+}

package/es/esf/components/period-picker/period-picker.js

@@ -27,13 +27,13 @@ const {
 } = publicRuntimeConfig.season;
 const WEEK_STORAGE = "stayWeek";
 const EXTEND_STAY_PICKER_APPEARANCE_DELAY = 1000;
-const PeriodPicker = ({
+export default function PeriodPicker({
   setClosed = undefined,
   force = false,
   onChange = undefined,
   isPopup = false,
   ubloContext = {}
-}) => {
+}) {
   const ref = React.useRef();
   const {
     lang,
@@ -200,5 +200,4 @@ const PeriodPicker = ({
       onChange: onChange
     })]
   });
-};
-export default React.memo(PeriodPicker);
+}

package/es/esf/components/period-picker/period-picker.module.css

@@ -41,7 +41,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 14px;
   padding: 32px 0;
 }
 
@@ -59,7 +59,7 @@
   justify-content: center;
   align-items: center;
   gap: 12px;
-  margin: 0 auto;
+  margin: 0 auto 22px auto;
   padding: 0 10px;
   text-align: center;
 }

package/es/esf/components/period-picker/popup.js

@@ -5,13 +5,13 @@ import PeriodPicker from "./period-picker";
 import * as Motions from "./services/motions";
 import css from "./popup.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Popup = ({
+export default function Popup({
   mustFilterSections,
   showDialog,
   opened,
   onChange,
   selectAndClose
-}) => {
+}) {
   const [ready, setReady] = React.useState(false);
   React.useEffect(() => {
     setReady(true);
@@ -36,5 +36,4 @@ const Popup = ({
       })
     })
   }), document.body);
-};
-export default Popup;
+}

package/es/esf/components/period-picker/services/dates.js

@@ -3,34 +3,34 @@ export const locales = {
   en: "en-UK",
   nl: "nl-NL"
 };
-export const padStart = (value, count, pad) => {
+export function padStart(value, count, pad) {
   let str = String(value);
   while (str.length < count) {
     str = pad + str;
   }
   return str;
-};
-const createDate = (...args) => {
+}
+function createDate(...args) {
   const ref = new Date(...args);
   const yy = ref.getFullYear();
   const mm = padStart(ref.getMonth() + 1, 2, 0);
   const dd = padStart(ref.getDate(), 2, 0);
   const str = `${yy}-${mm}-${dd}`;
   return new Date(str);
-};
-const getPrevSaturday = date => {
+}
+function getPrevSaturday(date) {
   const clone = createDate(date);
   const day = 1 + clone.getDay();
   const prevSaturday = clone.getDate() - day % 7;
   clone.setDate(prevSaturday);
   return clone;
-};
-const addDays = (date, days) => {
+}
+function addDays(date, days) {
   const clone = createDate(date);
   clone.setDate(clone.getDate() + days);
   return clone;
-};
-const christmasWeek = (endWeek, forceSeasonSwitch) => {
+}
+function christmasWeek(endWeek, forceSeasonSwitch) {
   const now = createDate();
   const year = now.getFullYear();
   const month = now.getMonth();
@@ -41,29 +41,31 @@ const christmasWeek = (endWeek, forceSeasonSwitch) => {
   const nextChristmas = createDate(lastChristmasYear + 1, 11, 25);
   const dateSeasonEnd = addDays(getPrevSaturday(lastChristmas), endWeek * 7);
   return getPrevSaturday(now <= dateSeasonEnd ? lastChristmas : nextChristmas);
-};
-export const weekToDate = (week, endWeek, forceSeasonSwitch) => addDays(christmasWeek(endWeek, forceSeasonSwitch), week * 7);
-export const formatShort = date => {
+}
+export function weekToDate(week, endWeek, forceSeasonSwitch) {
+  return addDays(christmasWeek(endWeek, forceSeasonSwitch), week * 7);
+}
+export function formatShort(date) {
   const dd = padStart(date.getDate(), 2, 0);
   return dd;
-};
-export const weekToLongDate = (week, endWeek, forceSeasonSwitch) => {
+}
+export function weekToLongDate(week, endWeek, forceSeasonSwitch) {
   const date = weekToDate(week, endWeek, forceSeasonSwitch);
   const dd = padStart(date.getDate(), 2, 0);
   const mm = padStart(date.getMonth() + 1, 2, 0);
   const yy = date.getFullYear();
   return `${dd}/${mm}/${yy}`;
-};
-export const format = date => {
+}
+export function format(date) {
   const dd = padStart(date.getDate(), 2, 0);
   const mm = padStart(date.getMonth() + 1, 2, 0);
   const yy = date.getFullYear();
   return `${yy}-${mm}-${dd}`;
-};
-export const getInterval = (startDate, endDate, pad = {
+}
+export function getInterval(startDate, endDate, pad = {
   before: 0,
   after: 0
-}) => {
+}) {
   const dates = [];
   const addDays = function (days) {
     const date = new Date(this.valueOf());
@@ -77,12 +79,12 @@ export const getInterval = (startDate, endDate, pad = {
     currentDate = addDays.call(currentDate, 1);
   }
   return dates;
-};
-export const buildWeeks = (start, end) => {
+}
+export function buildWeeks(start, end) {
   const length = end - start;
   const array = [];
   for (let i = 0; i < length; i++) {
     array.push(start + i);
   }
   return array;
-};
+}

package/es/esf/components/period-picker/services/events.js

@@ -1,7 +1,7 @@
-export const fire = (domain, name, detail = {}) => {
+export function fire(domain, name, detail = {}) {
   const event = new window.CustomEvent(name, {
     detail,
     bubbles: true
   });
   domain.dispatchEvent(event);
-};
+}

package/es/esf/components/period-picker/services/stay.js

@@ -1,11 +1,11 @@
 import * as Events from "./events";
 import * as Dates from "./dates";
 import * as Messages from "../messages";
-export const update = stay => {
+export function update(stay) {
   window.sessionStorage.setItem("stay", JSON.stringify(stay));
   Events.fire(window, "msem-stay-changed", stay);
-};
-export const formatStay = (lang, stay) => {
+}
+export function formatStay(lang, stay) {
   const locale = Dates.locales[lang] || Dates.locales.en;
   const from = new Date(stay.from);
   const to = new Date(stay.to);
@@ -24,4 +24,4 @@ export const formatStay = (lang, stay) => {
   if (isOneDayStay) return `${toDay} ${toMonthLabel}`;
   const dates = `${fromDay} ${fromMonthLabel}${Messages.get(lang, "to")} ${toDay} ${toMonthLabel}`;
   return dates;
-};
+}

package/es/esf/components/period-picker/title.js

@@ -4,10 +4,10 @@ import * as Stay from "./services/stay";
 import css from "./title.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Title = ({
+export default function Title({
   lang,
   stay
-}) => {
+}) {
   if (!stay) {
     return _jsx("div", {
       className: css.title,
@@ -23,5 +23,4 @@ const Title = ({
       children: formatedStay
     })]
   });
-};
-export default Title;
+}

package/es/esf/components/period-picker/title.module.css

@@ -1,6 +1,5 @@
 .title {
   position: relative;
-  font-size: 20px;
-  text-transform: uppercase;
+  font-size: 22px;
   text-align: center;
 }

package/es/esf/components/period-picker/warning.js

@@ -7,13 +7,13 @@ import * as Motions from "./services/motions";
 import css from "./warning.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Warning = ({
+export default function Warning({
   lang,
   warn,
   setWarn,
   selectWeek,
   chosenWeek
-}) => {
+}) {
   const cancel = () => {
     setWarn(false);
   };
@@ -47,5 +47,4 @@ const Warning = ({
       })]
     })
   });
-};
-export default Warning;
+}

package/es/esf/components/period-picker/weeks.js

@@ -1,12 +1,72 @@
 import * as React from "react";
 import classNames from "classnames";
+import getConfig from "next/config";
 import { LayoutGroup, motion } from "framer-motion";
+import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
-import css from "./weeks.module.css";
 import * as Dates from "./services/dates";
+import * as Messages from "./messages";
+import css from "./weeks.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Week = ({
+const {
+  publicRuntimeConfig
+} = getConfig();
+const {
+  periods
+} = publicRuntimeConfig.season;
+const Weeks = React.forwardRef(({
+  weeks,
+  lang,
+  ...props
+}, ref) => {
+  React.useEffect(() => {
+    const bar = ref.current;
+    if (props.selected === undefined || !bar) return;
+    const selectedItem = bar.querySelector(`.${css.itemSelected}`);
+    if (!selectedItem) return;
+    const {
+      clientWidth,
+      offsetLeft
+    } = selectedItem;
+    bar.scrollLeft = offsetLeft - clientWidth * 1.5;
+  }, [props.selected, ref]);
+  return _jsxs(LayoutGroup, {
+    children: [_jsx("div", {
+      ref: ref,
+      className: css.weeks,
+      children: weeks.map(week => _jsx(Week, {
+        lang: lang,
+        week: week,
+        ...props
+      }, week))
+    }), periods && _jsxs("div", {
+      className: css.nomenclature,
+      children: [periods.high?.length > 0 && _jsxs("div", {
+        className: css.period,
+        "data-period": "high",
+        children: [_jsx("div", {
+          className: css.pill
+        }), Messages.get(lang, "high-period")]
+      }), periods.medium?.length > 0 && _jsxs("div", {
+        className: css.period,
+        "data-period": "medium",
+        children: [_jsx("div", {
+          className: css.pill
+        }), Messages.get(lang, "medium-period")]
+      }), periods.low?.length > 0 && _jsxs("div", {
+        className: css.period,
+        "data-period": "low",
+        children: [_jsx("div", {
+          className: css.pill
+        }), Messages.get(lang, "low-period")]
+      })]
+    })]
+  });
+});
+Weeks.displayName = "Weeks";
+export default Weeks;
+function Week({
   lang,
   week,
   beginWeek,
@@ -16,7 +76,7 @@ const Week = ({
   forceSeasonSwitch,
   openExtendedPicker,
   isPopup
-}) => {
+}) {
   const [checkVisible, setCheckVisible] = React.useState(false);
   const [checkTimeout, setCheckTimeout] = React.useState();
   const now = new Date();
@@ -40,8 +100,11 @@ const Week = ({
     month: "short"
   });
   const weekClasses = classNames(css.item, {
-    [css.itemSelected]: isSelected,
-    [css.itemPast]: isPast
+    [css.selected]: isSelected,
+    [css.past]: isPast,
+    [css.highPeriod]: periods?.high?.includes(week),
+    [css.mediumPeriod]: periods?.medium?.includes(week),
+    [css.lowPeriod]: periods?.low?.includes(week)
   });
   const selectWeek = () => {
     select(week);
@@ -55,7 +118,7 @@ const Week = ({
   const layoutId = isPopup ? "current-popup" : "current";
   return _jsxs("div", {
     className: weekClasses,
-    children: [_jsxs("button", {
+    children: [_jsxs(Button, {
       className: css.button,
       onClick: selectWeek,
       "aria-label": `${Dates.weekToLongDate(week)} - ${Dates.weekToLongDate(week + 1)}`,
@@ -83,32 +146,4 @@ const Week = ({
       })]
     })]
   });
-};
-const Weeks = React.forwardRef(({
-  weeks,
-  ...props
-}, ref) => {
-  React.useEffect(() => {
-    const bar = ref.current;
-    if (props.selected === undefined || !bar) return;
-    const selectedItem = bar.querySelector(`.${css.itemSelected}`);
-    if (!selectedItem) return;
-    const {
-      clientWidth,
-      offsetLeft
-    } = selectedItem;
-    bar.scrollLeft = offsetLeft - clientWidth * 1.5;
-  }, [props.selected, ref]);
-  return _jsx(LayoutGroup, {
-    children: _jsx("div", {
-      ref: ref,
-      className: css.weeks,
-      children: weeks.map(week => _jsx(Week, {
-        week: week,
-        ...props
-      }, week))
-    })
-  });
-});
-Weeks.displayName = "Weeks";
-export default Weeks;
+}

package/es/esf/components/period-picker/weeks.module.css

@@ -1,3 +1,10 @@
+.weeks,
+.nomenclature {
+  --high-period: #ff858c;
+  --medium-period: #f7d4a7;
+  --low-period: #9deebb;
+}
+
 .weeks {
   --gap: 2px;
   --item-height: 36px;
@@ -47,7 +54,19 @@
   flex-direction: column;
 }
 
-.itemPast {
+.highPeriod {
+  --button-bg-color: var(--high-period);
+}
+
+.mediumPeriod {
+  --button-bg-color: var(--medium-period);
+}
+
+.lowPeriod {
+  --button-bg-color: var(--low-period);
+}
+
+.past {
   --button-bg-color: var(--ds-grey-200, #efefef);
 
   cursor: not-allowed;
@@ -84,14 +103,15 @@
   border-radius: 0 var(--item-height) var(--item-height) 0;
 }
 
-.itemSelected {
+.selected {
   z-index: 1;
 }
 
-.button {
+button.button {
   position: relative;
   width: 100%;
   height: var(--item-height);
+  padding: 0;
   background-color: var(--button-bg-color);
   border-radius: inherit;
   cursor: pointer;
@@ -189,6 +209,43 @@
   flex-direction: column;
   margin-top: 6px;
   font-size: 11px;
-  text-transform: uppercase;
+  text-transform: capitalize;
   transform: translateX(calc(0px - (var(--item-width)) / 5));
 }
+
+.nomenclature {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 22px;
+  padding: 0 10px;
+}
+
+.period {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.period[data-period="high"] {
+  --pill-color: var(--high-period);
+}
+
+.period[data-period="medium"] {
+  --pill-color: var(--medium-period);
+}
+
+.period[data-period="low"] {
+  --pill-color: var(--low-period);
+}
+
+.pill {
+  flex: 0 0 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--pill-color);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.30.10",
+  "version": "1.31.0",
   "peerDependencies": {
     "dt-design-system": "^3.8.3",
     "leaflet": "^1.9.1",