@licklist/design 0.70.0-dev.4 → 0.70.0-dev.6

package/dist/assets/iframe/available.svg

@@ -1,5 +1,5 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<svg  viewBox="auto" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14%" y="0" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
+<rect x="14%" y="33%" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
+<rect x="14%" y="66%" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
 </svg>

package/dist/assets/iframe/available.svg.js

@@ -4,33 +4,31 @@ var _rect, _rect2, _rect3;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgAvailable = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 7,
-  height: 11,
-  fill: "none"
+  fill: "none",
+  viewBox: "auto"
 }, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
-  width: 5.252,
-  height: 3.049,
-  x: 0.944,
-  y: 1.037,
+  width: "63%",
+  height: "29%",
+  x: "14%",
   fill: "#4CF973",
   stroke: "#fff",
-  rx: 1.5
+  rx: "15%"
 })), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
-  width: 5.252,
-  height: 3.049,
-  x: 0.944,
-  y: 4.11,
+  width: "63%",
+  height: "29%",
+  x: "14%",
+  y: "33%",
   fill: "#4CF973",
   stroke: "#fff",
-  rx: 1.5
+  rx: "15%"
 })), _rect3 || (_rect3 = /*#__PURE__*/React.createElement("rect", {
-  width: 5.252,
-  height: 3.049,
-  x: 0.944,
-  y: 7.183,
+  width: "63%",
+  height: "29%",
+  x: "14%",
+  y: "66%",
   fill: "#4CF973",
   stroke: "#fff",
-  rx: 1.5
+  rx: "15%"
 })));
 
 export { SvgAvailable as ReactComponent };

package/dist/availability-indicator/AvailabilityIndicator.d.ts

@@ -1,9 +1,11 @@
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 type AvailabilityIndicatorProps = {
     resources: ZoneResourcesAvailability;
     isUnavailable?: boolean;
     isSoldOut?: boolean;
+    availabilityFormat?: AvailabilityFormat | null;
 };
-export declare const AvailabilityIndicator: ({ resources, isUnavailable, isSoldOut, }: AvailabilityIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AvailabilityIndicator: ({ resources, isUnavailable, isSoldOut: _isSoldOut, availabilityFormat, }: AvailabilityIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AvailabilityIndicator.d.ts.map

package/dist/availability-indicator/AvailabilityIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvailabilityIndicator.d.ts","sourceRoot":"","sources":["../../src/availability-indicator/AvailabilityIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AAiCpH,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,yBAAyB,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,qBAAqB,6CAI/B,0BAA0B,4CAc5B,CAAA"}
+{"version":3,"file":"AvailabilityIndicator.d.ts","sourceRoot":"","sources":["../../src/availability-indicator/AvailabilityIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAEL,kBAAkB,EACnB,MAAM,2DAA2D,CAAA;AAuFlE,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,yBAAyB,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,qBAAqB,6EAK/B,0BAA0B,4CAwB5B,CAAA"}

package/dist/availability-indicator/AvailabilityIndicator.js

@@ -1,40 +1,117 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
+import { AVAILABILITY_FORMAT_NUMBER } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
+import { useWindowDimensions } from '@licklist/plugins';
 import { ReactComponent as SvgAvailable } from '../assets/iframe/available.svg.js';
 import { ReactComponent as SvgLimited } from '../assets/iframe/limited.svg.js';
 import { ReactComponent as SvgSoldOut } from '../assets/iframe/soldOut.svg.js';
+import { TAB_WIDTH } from '../iframe/page/components/PageBody/constants.js';
 
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 var LOTS_OF_SPACE_LIMIT = 0.2;
 var LIMITED_LIMIT = 0.8;
-var getIconsAndLabels = function(param) {
-    var bookedResources = param.bookedResources, totalResources = param.totalResources;
-    if (bookedResources === totalResources) {
+var getLabelsWithArgument = function(param) {
+    var bookedResources = param.bookedResources, totalResources = param.totalResources, availabilityFormat = param.availabilityFormat, label = param.label;
+    var availableResources = totalResources - bookedResources;
+    if (availabilityFormat !== AVAILABILITY_FORMAT_NUMBER) {
         return {
-            label: 'soldOut',
-            Icon: SvgSoldOut
+            label: label
         };
     }
+    return availableResources === 1 ? {
+        label: 'availableSingleResource'
+    } : {
+        label: 'availableMultipleResources',
+        argument: availableResources
+    };
+};
+var getIconsAndLabelsWithArgument = function(param) {
+    var bookedResources = param.bookedResources, totalResources = param.totalResources, availabilityFormat = param.availabilityFormat;
     // lots of space if less than 80% booked
     if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
-        return {
-            label: 'lotsOfSpace',
+        return _object_spread_props(_object_spread({}, getLabelsWithArgument({
+            bookedResources: bookedResources,
+            totalResources: totalResources,
+            availabilityFormat: availabilityFormat,
+            label: 'lotsOfSpace'
+        })), {
             Icon: SvgAvailable
-        };
+        });
     }
     if (bookedResources / totalResources >= LIMITED_LIMIT) {
-        return {
-            label: 'limited',
+        return _object_spread_props(_object_spread({}, getLabelsWithArgument({
+            bookedResources: bookedResources,
+            totalResources: totalResources,
+            availabilityFormat: availabilityFormat,
+            label: 'limited'
+        })), {
             Icon: SvgLimited
-        };
+        });
     }
-    return {
-        label: 'available',
+    return _object_spread_props(_object_spread({}, getLabelsWithArgument({
+        bookedResources: bookedResources,
+        totalResources: totalResources,
+        availabilityFormat: availabilityFormat,
+        label: 'available'
+    })), {
         Icon: SvgAvailable
-    };
+    });
 };
 var AvailabilityIndicator = function(param) {
-    var resources = param.resources, isUnavailable = param.isUnavailable, isSoldOut = param.isSoldOut;
+    var resources = param.resources, isUnavailable = param.isUnavailable, _isSoldOut = param.isSoldOut, availabilityFormat = param.availabilityFormat;
     var t = useTranslation('Design').t;
+    var isSoldOut = _isSoldOut || resources.bookedResources === resources.totalResources;
     if (isUnavailable) {
         return /*#__PURE__*/ jsx(Indicator, {
             Icon: SvgSoldOut,
@@ -47,19 +124,36 @@ var AvailabilityIndicator = function(param) {
             label: t('soldOut')
         });
     }
-    var _getIconsAndLabels = getIconsAndLabels(resources), Icon = _getIconsAndLabels.Icon, label = _getIconsAndLabels.label;
+    var _getIconsAndLabelsWithArgument = getIconsAndLabelsWithArgument(_object_spread_props(_object_spread({}, resources), {
+        availabilityFormat: availabilityFormat
+    })), Icon = _getIconsAndLabelsWithArgument.Icon, label = _getIconsAndLabelsWithArgument.label, argument = _getIconsAndLabelsWithArgument.argument;
     return /*#__PURE__*/ jsx(Indicator, {
         Icon: Icon,
-        label: t(label)
+        label: t(label, argument ? {
+            argument: argument
+        } : undefined)
     });
 };
 var Indicator = function(param) {
     var Icon = param.Icon, label = param.label;
+    var width = useWindowDimensions().width;
+    var iconSizes = width > TAB_WIDTH ? {
+        height: 15,
+        width: 11
+    } : {
+        height: 11,
+        width: 7
+    };
     return /*#__PURE__*/ jsxs("div", {
         className: "availability-indicator",
         children: [
-            /*#__PURE__*/ jsx(Icon, {}),
+            /*#__PURE__*/ jsx(Icon, {
+                height: iconSizes.height,
+                width: iconSizes.width,
+                viewBox: "auto"
+            }),
             /*#__PURE__*/ jsx("div", {
+                className: "indicator-label",
                 children: label
             })
         ]

package/dist/calendar/Calendar.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { DateTime } from 'luxon';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 import { DateTimeButtonProps } from 'src/date-time-button';
 export declare const defaultStartDay: DateTime<true>;
 export type CalendarProps = {
@@ -11,6 +12,7 @@ export type CalendarProps = {
     fromPrice?: string | ReactElement | null;
     isLoading?: boolean;
     initialDate?: DateTime;
+    availabilityFormat?: AvailabilityFormat | null;
     getDateTimeButtonProps: (date: DateTime) => Pick<DateTimeButtonProps, 'resources' | 'showResources' | 'isDisabled'>;
 };
 export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAK1D,eAAO,MAAM,eAAe,gBAK1B,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAA;IAClD,aAAa,EAAE,QAAQ,EAAE,CAAA;IACzB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC7B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAA;IAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,sBAAsB,EAAE,CACtB,IAAI,EAAE,QAAQ,KACX,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,eAAe,GAAG,YAAY,CAAC,CAAA;CAC7E,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,aAAa,4CAW5C,CAAA"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAK1D,eAAO,MAAM,eAAe,gBAK1B,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAA;IAClD,aAAa,EAAE,QAAQ,EAAE,CAAA;IACzB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC7B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAA;IAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC9C,sBAAsB,EAAE,CACtB,IAAI,EAAE,QAAQ,KACX,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,eAAe,GAAG,YAAY,CAAC,CAAA;CAC7E,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,aAAa,4CAW5C,CAAA"}

package/dist/calendar/components/CalendarDates/CalendarDates.d.ts

@@ -1,4 +1,4 @@
 import { CalendarProps } from '../../Calendar';
-export type CalendarDatesProps = Pick<CalendarProps, 'calendarDates' | 'selectedDate' | 'setSelectedDate' | 'fromPrice' | 'getDateTimeButtonProps'>;
-export declare const CalendarDates: ({ calendarDates, selectedDate, setSelectedDate, fromPrice, getDateTimeButtonProps, }: CalendarDatesProps) => import("react/jsx-runtime").JSX.Element;
+export type CalendarDatesProps = Pick<CalendarProps, 'calendarDates' | 'selectedDate' | 'setSelectedDate' | 'fromPrice' | 'getDateTimeButtonProps' | 'availabilityFormat'>;
+export declare const CalendarDates: ({ calendarDates, selectedDate, setSelectedDate, fromPrice, availabilityFormat, getDateTimeButtonProps, }: CalendarDatesProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CalendarDates.d.ts.map

package/dist/calendar/components/CalendarDates/CalendarDates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,eAAe,GACf,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,wBAAwB,CAC3B,CAAA;AAED,eAAO,MAAM,aAAa,yFAMvB,kBAAkB,4CA4CpB,CAAA"}
+{"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,eAAe,GACf,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,wBAAwB,GACxB,oBAAoB,CACvB,CAAA;AAED,eAAO,MAAM,aAAa,6GAOvB,kBAAkB,4CA6CpB,CAAA"}

package/dist/calendar/components/CalendarDates/CalendarDates.js

@@ -57,7 +57,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var CalendarDates = function(param) {
-    var calendarDates = param.calendarDates, selectedDate = param.selectedDate, setSelectedDate = param.setSelectedDate, fromPrice = param.fromPrice, getDateTimeButtonProps = param.getDateTimeButtonProps;
+    var calendarDates = param.calendarDates, selectedDate = param.selectedDate, setSelectedDate = param.setSelectedDate, fromPrice = param.fromPrice, availabilityFormat = param.availabilityFormat, getDateTimeButtonProps = param.getDateTimeButtonProps;
     var fillCalendarDates = useMemo(function() {
         var _calendarDates_;
         var _calendarDates__weekday;
@@ -90,7 +90,8 @@ var CalendarDates = function(param) {
                             return setSelectedDate(date);
                         },
                         price: fromPrice,
-                        variant: Variant.month
+                        variant: Variant.month,
+                        availabilityFormat: availabilityFormat
                     }, props), +date);
                 })
             })

package/dist/date-time-button/DateTimeButton.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { DateTime } from 'luxon';
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 export declare enum Variant {
     week = "week",
     month = "month",
@@ -16,6 +17,7 @@ export type DateTimeButtonProps = {
     resources?: ZoneResourcesAvailability | null;
     showResources?: boolean;
     variant: Variant;
+    availabilityFormat?: AvailabilityFormat | null;
 };
-export declare const DateTimeButton: ({ date, isDisabled: _isDisabled, isSelected, isSoldOut: _isSoldOut, onSelect, price, resources, showResources, variant, }: DateTimeButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeButton: ({ date, isDisabled: _isDisabled, isSelected, isSoldOut: _isSoldOut, onSelect, price, resources, showResources, variant, availabilityFormat, }: DateTimeButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateTimeButton.d.ts.map

package/dist/date-time-button/DateTimeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AAIpH,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,cAAc,8HAUxB,mBAAmB,4CA2CrB,CAAA"}
+{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAI9F,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,cAAc,kJAWxB,mBAAmB,4CA4CrB,CAAA"}

package/dist/date-time-button/DateTimeButton.js

@@ -11,7 +11,7 @@ var Variant;
     Variant["time"] = "time";
 })(Variant || (Variant = {}));
 var DateTimeButton = function(param) {
-    var date = param.date, _isDisabled = param.isDisabled, isSelected = param.isSelected, _isSoldOut = param.isSoldOut, onSelect = param.onSelect, price = param.price, resources = param.resources, showResources = param.showResources, _param_variant = param.variant, variant = _param_variant === void 0 ? "week" : _param_variant;
+    var date = param.date, _isDisabled = param.isDisabled, isSelected = param.isSelected, _isSoldOut = param.isSoldOut, onSelect = param.onSelect, price = param.price, resources = param.resources, showResources = param.showResources, _param_variant = param.variant, variant = _param_variant === void 0 ? "week" : _param_variant, availabilityFormat = param.availabilityFormat;
     var isSoldOut = _isSoldOut || resources && resources.bookedResources >= resources.totalResources;
     var isTimeVariant = variant === "time";
     var isPast = variant === "time" ? isPastTime(date) : isPastDate(date);
@@ -36,6 +36,7 @@ var DateTimeButton = function(param) {
                 children: price
             }),
             showResources && resources && /*#__PURE__*/ jsx(AvailabilityIndicator, {
+                availabilityFormat: availabilityFormat,
                 resources: resources,
                 isUnavailable: _isDisabled || isPast,
                 isSoldOut: isSoldOut

package/dist/iframe/activity-card/ActivityCard.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper';
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 export declare const LAYOUT_GRID = "grid";
 export declare const LAYOUT_LIST = "list";
 export type ActivityCardProps = {
@@ -14,6 +15,7 @@ export type ActivityCardProps = {
     availableTimes?: string | null;
     image?: Image | null;
     resources?: ZoneResourcesAvailability;
+    availabilityFormat?: AvailabilityFormat | null;
 };
-export declare const ActivityCard: ({ title, duration, price, description, availableTimes, image, onSelect, isSelected, layout, resources, }: ActivityCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActivityCard: ({ title, duration, price, description, availableTimes, image, onSelect, isSelected, layout, availabilityFormat, resources, }: ActivityCardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActivityCard.d.ts.map

package/dist/iframe/activity-card/ActivityCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../src/iframe/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AAGpH,eAAO,MAAM,WAAW,SAAS,CAAA;AACjC,eAAO,MAAM,WAAW,SAAS,CAAA;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,WAAW,GAAG,OAAO,WAAW,CAAA;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,yBAAyB,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,YAAY,6GAWtB,iBAAiB,4CAmDnB,CAAA"}
+{"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../src/iframe/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAG9F,eAAO,MAAM,WAAW,SAAS,CAAA;AACjC,eAAO,MAAM,WAAW,SAAS,CAAA;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,WAAW,GAAG,OAAO,WAAW,CAAA;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,yBAAyB,CAAA;IACrC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,iIAYtB,iBAAiB,4CA6DnB,CAAA"}

package/dist/iframe/activity-card/ActivityCard.js

@@ -5,7 +5,7 @@ import { AvailabilityIndicator } from '../../availability-indicator/Availability
 var LAYOUT_GRID = 'grid';
 var LAYOUT_LIST = 'list';
 var ActivityCard = function(param) {
-    var title = param.title, duration = param.duration, price = param.price, description = param.description, availableTimes = param.availableTimes, image = param.image, onSelect = param.onSelect, isSelected = param.isSelected, _param_layout = param.layout, layout = _param_layout === void 0 ? LAYOUT_GRID : _param_layout, resources = param.resources;
+    var title = param.title, duration = param.duration, price = param.price, description = param.description, availableTimes = param.availableTimes, image = param.image, onSelect = param.onSelect, isSelected = param.isSelected, _param_layout = param.layout, layout = _param_layout === void 0 ? LAYOUT_GRID : _param_layout, availabilityFormat = param.availabilityFormat, resources = param.resources;
     if (layout === LAYOUT_GRID) {
         return /*#__PURE__*/ jsxs("button", {
             type: "button",
@@ -35,7 +35,8 @@ var ActivityCard = function(param) {
                             children: description
                         }),
                         resources && /*#__PURE__*/ jsx(AvailabilityIndicator, {
-                            resources: resources
+                            resources: resources,
+                            availabilityFormat: availabilityFormat
                         })
                     ]
                 })
@@ -74,7 +75,8 @@ var ActivityCard = function(param) {
                         children: description
                     }),
                     resources && /*#__PURE__*/ jsx(AvailabilityIndicator, {
-                        resources: resources
+                        resources: resources,
+                        availabilityFormat: availabilityFormat
                     })
                 ]
             }),

package/dist/snippet/snippet-template/preview/Preview.js

@@ -56,6 +56,7 @@ import 'react-bootstrap/ModalTitle';
 import 'react-bootstrap/ModalBody';
 import 'react-bootstrap/Modal';
 import '../../../iframe/payment/payment-status-page/PaymentStatusPage.js';
+import '@licklist/plugins';
 import '@licklist/plugins/dist/services/Form/HookFormService';
 import 'luxon';
 import '../../../static/manual-date-picker/constants/index.js';

package/dist/styles/availability-indicator/AvailabilityIndicator.scss

@@ -4,6 +4,15 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 300;
+  width: 100%;
+
+
+  .indicator-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex-shrink: 2;
+  }
 
   @include media-breakpoint-down(sm) {
     div {

package/dist/styles/date-time-button/DateTimeButton.scss

@@ -79,7 +79,7 @@
 
   &.only-time-container {
     min-width: 5.3rem;
-    max-width: 5.3rem;
+    max-width: 8.3rem;
     min-height: 2.75rem;
     border: 2px solid $snippet-calendar-disabled-button-border-color;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.70.0-dev.4",
+  "version": "0.70.0-dev.6",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.0-dev.0",
+    "@licklist/core": "0.31.1-dev.4",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.34.0-dev.4",
     "lodash": "4.17.21",
@@ -61,7 +61,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.31.0-dev.0",
+    "@licklist/core": "0.31.1-dev.4",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.34.0-dev.4",
     "@mantine/core": "6.0.22",

package/src/assets/iframe/available.svg

@@ -1,5 +1,5 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<svg  viewBox="auto" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14%" y="0" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
+<rect x="14%" y="33%" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
+<rect x="14%" y="66%" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
 </svg>

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -1,9 +1,15 @@
 import { FunctionComponent, SVGProps } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import {
+  AVAILABILITY_FORMAT_NUMBER,
+  AvailabilityFormat,
+} from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
+import { useWindowDimensions } from '@licklist/plugins'
 import { ReactComponent as AvailableIcon } from '../assets/iframe/available.svg'
 import { ReactComponent as LimitedIcon } from '../assets/iframe/limited.svg'
 import { ReactComponent as SoldOutIcon } from '../assets/iframe/soldOut.svg'
+import { TAB_WIDTH } from '../iframe/page/components/PageBody/constants'
 
 const LOTS_OF_SPACE_LIMIT = 0.2
 const LIMITED_LIMIT = 0.8
@@ -13,38 +19,94 @@ type Config = {
   Icon: FunctionComponent<SVGProps<SVGSVGElement>>
 }
 
-const getIconsAndLabels = ({
+type GetIconsAndLabelsWithArgumentResult = Config & {
+  argument?: number
+}
+
+interface GetIconsAndLabels extends ZoneResourcesAvailability {
+  availabilityFormat?: AvailabilityFormat | null
+}
+interface GetAppropreateLabelFormat extends GetIconsAndLabels {
+  label?: string
+}
+
+const getLabelsWithArgument = ({
   bookedResources,
   totalResources,
-}: ZoneResourcesAvailability): Config => {
-  if (bookedResources === totalResources) {
-    return { label: 'soldOut', Icon: SoldOutIcon }
+  availabilityFormat,
+  label,
+}: GetAppropreateLabelFormat): {
+  label: string
+  argument?: number
+} => {
+  const availableResources = totalResources - bookedResources
+
+  if (availabilityFormat !== AVAILABILITY_FORMAT_NUMBER) {
+    return { label }
   }
 
+  return availableResources === 1
+    ? { label: 'availableSingleResource' }
+    : { label: 'availableMultipleResources', argument: availableResources }
+}
+
+const getIconsAndLabelsWithArgument = ({
+  bookedResources,
+  totalResources,
+  availabilityFormat,
+}: GetIconsAndLabels): GetIconsAndLabelsWithArgumentResult => {
   // lots of space if less than 80% booked
   if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
-    return { label: 'lotsOfSpace', Icon: AvailableIcon }
+    return {
+      ...getLabelsWithArgument({
+        bookedResources,
+        totalResources,
+        availabilityFormat,
+        label: 'lotsOfSpace',
+      }),
+      Icon: AvailableIcon,
+    }
   }
 
   if (bookedResources / totalResources >= LIMITED_LIMIT) {
-    return { label: 'limited', Icon: LimitedIcon }
+    return {
+      ...getLabelsWithArgument({
+        bookedResources,
+        totalResources,
+        availabilityFormat,
+        label: 'limited',
+      }),
+      Icon: LimitedIcon,
+    }
   }
 
-  return { label: 'available', Icon: AvailableIcon }
+  return {
+    ...getLabelsWithArgument({
+      bookedResources,
+      totalResources,
+      availabilityFormat,
+      label: 'available',
+    }),
+    Icon: AvailableIcon,
+  }
 }
 
 type AvailabilityIndicatorProps = {
   resources: ZoneResourcesAvailability
   isUnavailable?: boolean
   isSoldOut?: boolean
+  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const AvailabilityIndicator = ({
   resources,
   isUnavailable,
-  isSoldOut,
+  isSoldOut: _isSoldOut,
+  availabilityFormat,
 }: AvailabilityIndicatorProps) => {
   const { t } = useTranslation('Design')
+  const isSoldOut =
+    _isSoldOut || resources.bookedResources === resources.totalResources
 
   if (isUnavailable) {
     return <Indicator Icon={SoldOutIcon} label={t('notAvailable')} />
@@ -54,14 +116,27 @@ export const AvailabilityIndicator = ({
     return <Indicator Icon={SoldOutIcon} label={t('soldOut')} />
   }
 
-  const { Icon, label } = getIconsAndLabels(resources)
+  const { Icon, label, argument } = getIconsAndLabelsWithArgument({
+    ...resources,
+    availabilityFormat,
+  })
 
-  return <Indicator Icon={Icon} label={t(label)} />
+  return (
+    <Indicator
+      Icon={Icon}
+      label={t(label, argument ? { argument } : undefined)}
+    />
+  )
 }
 
-const Indicator = ({ Icon, label }: Config) => (
-  <div className='availability-indicator'>
-    <Icon />
-    <div>{label}</div>
-  </div>
-)
+const Indicator = ({ Icon, label }: Config) => {
+  const { width } = useWindowDimensions()
+  const iconSizes =
+    width > TAB_WIDTH ? { height: 15, width: 11 } : { height: 11, width: 7 }
+  return (
+    <div className='availability-indicator'>
+      <Icon height={iconSizes.height} width={iconSizes.width} viewBox='auto' />
+      <div className='indicator-label'>{label}</div>
+    </div>
+  )
+}

package/src/calendar/Calendar.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react'
 import { DateTime } from 'luxon'
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { DateTimeButtonProps } from 'src/date-time-button'
 import { CalendarButtons } from './components/CalendarButtons'
 import { CalendarDates } from './components/CalendarDates'
@@ -21,6 +22,7 @@ export type CalendarProps = {
   fromPrice?: string | ReactElement | null
   isLoading?: boolean
   initialDate?: DateTime
+  availabilityFormat?: AvailabilityFormat | null
   getDateTimeButtonProps: (
     date: DateTime,
   ) => Pick<DateTimeButtonProps, 'resources' | 'showResources' | 'isDisabled'>

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -11,6 +11,7 @@ export type CalendarDatesProps = Pick<
   | 'setSelectedDate'
   | 'fromPrice'
   | 'getDateTimeButtonProps'
+  | 'availabilityFormat'
 >
 
 export const CalendarDates = ({
@@ -18,6 +19,7 @@ export const CalendarDates = ({
   selectedDate,
   setSelectedDate,
   fromPrice,
+  availabilityFormat,
   getDateTimeButtonProps,
 }: CalendarDatesProps) => {
   const fillCalendarDates = useMemo(() => {
@@ -56,6 +58,7 @@ export const CalendarDates = ({
               onSelect={() => setSelectedDate(date)}
               price={fromPrice}
               variant={Variant.month}
+              availabilityFormat={availabilityFormat}
               {...props}
             />
           )

package/src/date-time-button/DateTimeButton.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react'
 import clsx from 'clsx'
 import { DateTime } from 'luxon'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { AvailabilityIndicator } from '../availability-indicator'
 import { DateContent } from './DateContent'
 
@@ -21,6 +22,7 @@ export type DateTimeButtonProps = {
   resources?: ZoneResourcesAvailability | null
   showResources?: boolean
   variant: Variant
+  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const DateTimeButton = ({
@@ -33,6 +35,7 @@ export const DateTimeButton = ({
   resources,
   showResources,
   variant = Variant.week,
+  availabilityFormat,
 }: DateTimeButtonProps) => {
   const isSoldOut =
     _isSoldOut ||
@@ -69,6 +72,7 @@ export const DateTimeButton = ({
       {price && !isDisabled && <div className='price'>{price}</div>}
       {showResources && resources && (
         <AvailabilityIndicator
+          availabilityFormat={availabilityFormat}
           resources={resources}
           isUnavailable={_isDisabled || isPast}
           isSoldOut={isSoldOut}

package/src/iframe/activity-card/ActivityCard.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import clsx from 'clsx'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { AvailabilityIndicator } from '../../availability-indicator'
 
 export const LAYOUT_GRID = 'grid'
@@ -18,6 +19,7 @@ export type ActivityCardProps = {
   availableTimes?: string | null
   image?: Image | null
   resources?: ZoneResourcesAvailability
+  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const ActivityCard = ({
@@ -30,6 +32,7 @@ export const ActivityCard = ({
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
+  availabilityFormat,
   resources,
 }: ActivityCardProps) => {
   if (layout === LAYOUT_GRID) {
@@ -50,7 +53,12 @@ export const ActivityCard = ({
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
           )}
-          {resources && <AvailabilityIndicator resources={resources} />}
+          {resources && (
+            <AvailabilityIndicator
+              resources={resources}
+              availabilityFormat={availabilityFormat}
+            />
+          )}
         </div>
       </button>
     )
@@ -76,7 +84,12 @@ export const ActivityCard = ({
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>
         )}
-        {resources && <AvailabilityIndicator resources={resources} />}
+        {resources && (
+          <AvailabilityIndicator
+            resources={resources}
+            availabilityFormat={availabilityFormat}
+          />
+        )}
       </div>
 
       <hr className='list-activity-card-hr' />

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -4,6 +4,15 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 300;
+  width: 100%;
+
+
+  .indicator-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex-shrink: 2;
+  }
 
   @include media-breakpoint-down(sm) {
     div {

package/src/styles/date-time-button/DateTimeButton.scss

@@ -79,7 +79,7 @@
 
   &.only-time-container {
     min-width: 5.3rem;
-    max-width: 5.3rem;
+    max-width: 8.3rem;
     min-height: 2.75rem;
     border: 2px solid $snippet-calendar-disabled-button-border-color;
   }

package/yarn.lock

@@ -2152,12 +2152,12 @@ __metadata:
   linkType: hard
 
 "@floating-ui/dom@npm:^1.2.1":
-  version: 1.6.11
-  resolution: "@floating-ui/dom@npm:1.6.11"
+  version: 1.6.12
+  resolution: "@floating-ui/dom@npm:1.6.12"
   dependencies:
     "@floating-ui/core": "npm:^1.6.0"
     "@floating-ui/utils": "npm:^0.2.8"
-  checksum: 10c0/02ef34a75a515543c772880338eea7b66724997bd5ec7cd58d26b50325709d46d480a306b84e7d5509d734434411a4bcf23af5680c2e461e6e6a8bf45d751df8
+  checksum: 10c0/c67b39862175b175c6ac299ea970f17a22c7482cfdf3b1bc79313407bf0880188b022b878953fa69d3ce166ff2bd9ae57c86043e5dd800c262b470d877591b7d
   languageName: node
   linkType: hard
 
@@ -2466,9 +2466,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@licklist/core@npm:0.31.0-dev.0":
-  version: 0.31.0-dev.0
-  resolution: "@licklist/core@npm:0.31.0-dev.0"
+"@licklist/core@npm:0.31.0-dev.2":
+  version: 0.31.0-dev.2
+  resolution: "@licklist/core@npm:0.31.0-dev.2"
   dependencies:
     "@sentry/browser": "npm:6.2.0"
     axios: "npm:0.26.0"
@@ -2490,13 +2490,13 @@ __metadata:
     react-i18next: 11.8.8
     react-intl: 6.6.8
     zustand: 3.7.2
-  checksum: 10c0/db5c0810a9837b67b9a410ed8232dfcef258242faf9b0ddb1a0ed7435c2bd4c23076882b569eec48dcd76fb6dcb73f20eae62eef35b75b466c87d932c3ff1d69
+  checksum: 10c0/fcefd4631fbf3d116a36833b748fc9b557cae8b580acae4c1bd7d29f1665a42456b1109a3f80620f6f7244161f8260d6243680ff739a2a544221e1b7e4a01e57
   languageName: node
   linkType: hard
 
-"@licklist/core@npm:0.31.0-dev.2":
-  version: 0.31.0-dev.2
-  resolution: "@licklist/core@npm:0.31.0-dev.2"
+"@licklist/core@npm:0.31.1-dev.4":
+  version: 0.31.1-dev.4
+  resolution: "@licklist/core@npm:0.31.1-dev.4"
   dependencies:
     "@sentry/browser": "npm:6.2.0"
     axios: "npm:0.26.0"
@@ -2518,7 +2518,7 @@ __metadata:
     react-i18next: 11.8.8
     react-intl: 6.6.8
     zustand: 3.7.2
-  checksum: 10c0/fcefd4631fbf3d116a36833b748fc9b557cae8b580acae4c1bd7d29f1665a42456b1109a3f80620f6f7244161f8260d6243680ff739a2a544221e1b7e4a01e57
+  checksum: 10c0/2cba12fe6e2d18ea5cf882489e03f2fe68fc9fb36fde88fabe2deba61fad99fd2dd22e445e6d5c0506008d138ba4b64c7f5d0e92ce131ea41ec72c16269901ab
   languageName: node
   linkType: hard
 
@@ -2533,7 +2533,7 @@ __metadata:
     "@dnd-kit/utilities": "npm:2.0.0"
     "@fortawesome/fontawesome-svg-core": "npm:1.2.34"
     "@fortawesome/free-solid-svg-icons": "npm:5.15.2"
-    "@licklist/core": "npm:0.31.0-dev.0"
+    "@licklist/core": "npm:0.31.1-dev.4"
     "@licklist/eslint-config": "npm:0.5.6"
     "@licklist/plugins": "npm:0.34.0-dev.4"
     "@mantine/core": "npm:6.0.22"
@@ -2664,7 +2664,7 @@ __metadata:
     vite-plugin-svgr: "npm:4.2.0"
     vite-tsconfig-paths: "npm:5.0.1"
   peerDependencies:
-    "@licklist/core": 0.31.0-dev.0
+    "@licklist/core": 0.31.1-dev.4
     "@licklist/eslint-config": 0.5.6
     "@licklist/plugins": 0.34.0-dev.4
     lodash: 4.17.21
@@ -3316,128 +3316,128 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.24.2"
+"@rollup/rollup-android-arm-eabi@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.24.3"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-android-arm64@npm:4.24.2"
+"@rollup/rollup-android-arm64@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-android-arm64@npm:4.24.3"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.24.2"
+"@rollup/rollup-darwin-arm64@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.24.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-darwin-x64@npm:4.24.2"
+"@rollup/rollup-darwin-x64@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-darwin-x64@npm:4.24.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.24.2"
+"@rollup/rollup-freebsd-arm64@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.24.3"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.24.2"
+"@rollup/rollup-freebsd-x64@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.24.3"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.2"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.3"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.24.2"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.24.3"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.24.2"
+"@rollup/rollup-linux-arm64-gnu@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.24.3"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.24.2"
+"@rollup/rollup-linux-arm64-musl@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.24.3"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.2"
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.3"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.24.2"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.24.3"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.24.2"
+"@rollup/rollup-linux-s390x-gnu@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.24.3"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.24.2"
+"@rollup/rollup-linux-x64-gnu@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.24.3"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.24.2"
+"@rollup/rollup-linux-x64-musl@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.24.3"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.24.2"
+"@rollup/rollup-win32-arm64-msvc@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.24.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.24.2"
+"@rollup/rollup-win32-ia32-msvc@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.24.3"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.24.2":
-  version: 4.24.2
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.24.2"
+"@rollup/rollup-win32-x64-msvc@npm:4.24.3":
+  version: 4.24.3
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.24.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -5698,11 +5698,11 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*":
-  version: 22.8.1
-  resolution: "@types/node@npm:22.8.1"
+  version: 22.8.4
+  resolution: "@types/node@npm:22.8.4"
   dependencies:
     undici-types: "npm:~6.19.8"
-  checksum: 10c0/83550fdf72a7db5b55eceac3f4fb038844eaee20202bdd2297a8248370cfa08317bda1605b781a8043eda4f173b75e73632e652fc85509eb14dfef78fa17337f
+  checksum: 10c0/f88d030480630194a9168772462ec09b2d86454f34368c46d2b7fda5dc6e14594b1576fcc5c35cc53b57a4d1e8dd2865a85ae81f34ded0d1af753a0f5d294c25
   languageName: node
   linkType: hard
 
@@ -8080,9 +8080,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669":
-  version: 1.0.30001673
-  resolution: "caniuse-lite@npm:1.0.30001673"
-  checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b
+  version: 1.0.30001675
+  resolution: "caniuse-lite@npm:1.0.30001675"
+  checksum: 10c0/95196bb508a35fa4e2bd1cb2458450cc73a71ed6aea034cd7e8831d569d4f6a2a78d63de75b5a00af5ef4dbf3f1c26b5841d270cb71556fdcd34c3b84c1b164f
   languageName: node
   linkType: hard
 
@@ -8218,8 +8218,8 @@ __metadata:
   linkType: hard
 
 "chromatic@npm:^11.4.0":
-  version: 11.16.1
-  resolution: "chromatic@npm:11.16.1"
+  version: 11.16.3
+  resolution: "chromatic@npm:11.16.3"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -8232,7 +8232,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/bd0b5ba68d44a9947677690e9fc72bcf76c4b4069580ed763900befd207e20baad22f45a9a1e46468ddeb6f0f867a33ee37149041c66991d088ca2cfb8c3fa42
+  checksum: 10c0/407e8c78ea8cea7a47ea427fe76380d5033dc3be3928b5d3537b81aa0f617db4944d7c1a377705e83900b6bb78ca6d7cbeb55ea4ebf2154f0739c15fc605b3b5
   languageName: node
   linkType: hard
 
@@ -9840,9 +9840,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.3.564, electron-to-chromium@npm:^1.5.41":
-  version: 1.5.47
-  resolution: "electron-to-chromium@npm:1.5.47"
-  checksum: 10c0/5f8c4a9f0698695960f7bef5242d52b1043020ce50b51fb534409a768847f9bdc9672cb4a6a560eeb8f8b47a04327ae9b31b2cee376cb637b3eb04a4daeaa3b8
+  version: 1.5.49
+  resolution: "electron-to-chromium@npm:1.5.49"
+  checksum: 10c0/7b22141c7ebea2f49b87adcbe2b353919abbe44066c50e5e44dd47759c4ef07f0a802b9fc8ce2eaa832a293945b6d49064c859f0fef36d10c12fb46af2c1005d
   languageName: node
   linkType: hard
 
@@ -16868,15 +16868,15 @@ __metadata:
   linkType: hard
 
 "prosemirror-tables@npm:^1.3.0":
-  version: 1.6.0
-  resolution: "prosemirror-tables@npm:1.6.0"
+  version: 1.6.1
+  resolution: "prosemirror-tables@npm:1.6.1"
   dependencies:
     prosemirror-keymap: "npm:^1.1.2"
     prosemirror-model: "npm:^1.8.1"
     prosemirror-state: "npm:^1.3.1"
     prosemirror-transform: "npm:^1.2.1"
     prosemirror-view: "npm:^1.13.3"
-  checksum: 10c0/f84bd03b29eaa2d76c01e01948cfc6aba6bacc73680f87c4e332dab382ad15ee244bd26e2dc7f5473af6ad5404ae9f71e647fef2bacac28617c98d2c629bd5bd
+  checksum: 10c0/a42e33a30f39fdaf546c078bdaa1dfe91d3d2a28d24caca381fb79b6fe4762347d913e2a1d042b9e125d89ce9cabdecf2399e7eb555a63743860f88c537cff22
   languageName: node
   linkType: hard
 
@@ -16904,13 +16904,13 @@ __metadata:
   linkType: hard
 
 "prosemirror-view@npm:^1.0.0, prosemirror-view@npm:^1.1.0, prosemirror-view@npm:^1.13.3, prosemirror-view@npm:^1.23.6, prosemirror-view@npm:^1.27.0, prosemirror-view@npm:^1.28.2, prosemirror-view@npm:^1.31.0":
-  version: 1.34.3
-  resolution: "prosemirror-view@npm:1.34.3"
+  version: 1.35.0
+  resolution: "prosemirror-view@npm:1.35.0"
   dependencies:
     prosemirror-model: "npm:^1.20.0"
     prosemirror-state: "npm:^1.0.0"
     prosemirror-transform: "npm:^1.1.0"
-  checksum: 10c0/f08a9eeb6988e2180ec19989bb11c11db02c37952d1ab8b3ae8c7c1ebf9ce143725855bfa8cee59e4819aab3c9045ef5721cc90e69353f8fd81b7bb3a1c4ea03
+  checksum: 10c0/3be83fb6cf6678b5fe233816e45af8895ee027f4996039081f7bedbe1576155c6fdbcf9de679e6847791c46baac31d8992bcd583d6971ff171605534d55b7bfc
   languageName: node
   linkType: hard
 
@@ -18740,27 +18740,27 @@ __metadata:
   linkType: hard
 
 "rollup@npm:^4.13.0":
-  version: 4.24.2
-  resolution: "rollup@npm:4.24.2"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.24.2"
-    "@rollup/rollup-android-arm64": "npm:4.24.2"
-    "@rollup/rollup-darwin-arm64": "npm:4.24.2"
-    "@rollup/rollup-darwin-x64": "npm:4.24.2"
-    "@rollup/rollup-freebsd-arm64": "npm:4.24.2"
-    "@rollup/rollup-freebsd-x64": "npm:4.24.2"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.24.2"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.24.2"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.24.2"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.24.2"
-    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.24.2"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.24.2"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.24.2"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.24.2"
-    "@rollup/rollup-linux-x64-musl": "npm:4.24.2"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.24.2"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.24.2"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.24.2"
+  version: 4.24.3
+  resolution: "rollup@npm:4.24.3"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.24.3"
+    "@rollup/rollup-android-arm64": "npm:4.24.3"
+    "@rollup/rollup-darwin-arm64": "npm:4.24.3"
+    "@rollup/rollup-darwin-x64": "npm:4.24.3"
+    "@rollup/rollup-freebsd-arm64": "npm:4.24.3"
+    "@rollup/rollup-freebsd-x64": "npm:4.24.3"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.24.3"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.24.3"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.24.3"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.24.3"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.24.3"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.24.3"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.24.3"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.24.3"
+    "@rollup/rollup-linux-x64-musl": "npm:4.24.3"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.24.3"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.24.3"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.24.3"
     "@types/estree": "npm:1.0.6"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
@@ -18804,7 +18804,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10c0/265de71cf6c20854514f0be1727fab3e615aa4afde2431f705c6f535182976c645703d2a21b4d25648a0212fb26a4043f892a83bba4d73c9ea965271a2f4a50e
+  checksum: 10c0/32425475db7a0bcb8937f92488ee8e48f7adaff711b5b5c52d86d37114c9f21fe756e21a91312d12d30da146d33d8478a11dfeb6249dbecc54fbfcc78da46005
   languageName: node
   linkType: hard