@layerfi/components 0.1.129-alpha → 0.1.129-alpha.1

package/dist/cjs/index.cjs

@@ -222,7 +222,7 @@ const getIntlLocale = (locale) => {
 	return isSupportedLocale(locale) ? locale : DEFAULT_LOCALE;
 };
 const name = "@layerfi/components";
-const version$1 = "0.1.129-alpha";
+const version$1 = "0.1.129-alpha.1";
 const description = "Layer React Components";
 const main = "dist/cjs/index.cjs";
 const module$1 = "dist/esm/index.mjs";
@@ -22088,7 +22088,7 @@ const LinkedAccountOptions = ({ children, config, showLedgerBalance }) => {
 		}), children]
 	});
 };
-var getBadgeConfig = (quickbooksUiState, hasSynced) => {
+var getBadgeConfig$1 = (quickbooksUiState, hasSynced) => {
 	if (!hasSynced) return _objectSpread2({
 		variant: BadgeVariant.INFO,
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshCcw_default, { size: 12 })
@@ -22129,7 +22129,7 @@ const IntegrationsQuickbooksItemThumb = () => {
 	}, [t]);
 	if (!quickbooksConnectionStatus) return null;
 	const quickbooksUiState = getQuickbooksConnectionSyncUiState(quickbooksConnectionStatus);
-	const badgeConfig = getBadgeConfig(quickbooksUiState, hasSynced);
+	const badgeConfig = getBadgeConfig$1(quickbooksUiState, hasSynced);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkedAccountOptions, {
 		config: menuConfig,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
@@ -32619,34 +32619,28 @@ const TasksList = ({ pageSize = 8, mobile }) => {
 		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksEmptyState, {})
 	});
 };
-var useBadgeConfig = (status, tasksCount) => {
-	const { t } = (0, react_i18next.useTranslation)();
-	const { formatNumber: formatNumber$1 } = useIntlFormatter();
+var buildLongLabel = (t, formatNumber$1, tasksCount) => tPlural(t, "bookkeeping:label.count_tasks", {
+	count: tasksCount,
+	displayCount: formatNumber$1(tasksCount),
+	one: "{{displayCount}} task",
+	other: "{{displayCount}} tasks"
+});
+var getBadgeConfig = (status, tasksCount, t, formatNumber$1) => {
 	switch (status) {
 		case BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_BOOKKEEPER:
 		case BookkeepingPeriodStatus.NOT_STARTED:
 		case BookkeepingPeriodStatus.CLOSING_IN_REVIEW: return {
 			color: "info",
 			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Clock_default, { size: 12 }),
-			label: tasksCount ? tPlural(t, "bookkeeping:label.count_tasks", {
-				count: tasksCount,
-				displayCount: formatNumber$1(tasksCount),
-				one: "{{displayCount}} task",
-				other: "{{displayCount}} tasks"
-			}) : void 0,
+			label: tasksCount ? buildLongLabel(t, formatNumber$1, tasksCount) : void 0,
 			labelShort: tasksCount ? formatNumber$1(tasksCount) : void 0
 		};
 		case BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_CUSTOMER:
 		case BookkeepingPeriodStatus.CLOSED_OPEN_TASKS: return {
 			color: "warning",
-			label: tasksCount ? tPlural(t, "bookkeeping:label.count_tasks", {
-				count: tasksCount,
-				displayCount: formatNumber$1(tasksCount),
-				one: "{{displayCount}} task",
-				other: "{{displayCount}} tasks"
-			}) : void 0,
-			labelShort: tasksCount ? formatNumber$1(tasksCount) : void 0,
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertCircle_default, { size: 12 })
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertCircle_default, { size: 12 }),
+			label: tasksCount ? buildLongLabel(t, formatNumber$1, tasksCount) : void 0,
+			labelShort: tasksCount ? formatNumber$1(tasksCount) : void 0
 		};
 		case BookkeepingPeriodStatus.CLOSED_COMPLETE: return {
 			color: "success",
@@ -32660,37 +32654,38 @@ var useBadgeConfig = (status, tasksCount) => {
 		});
 	}
 };
-const TaskStatusBadge = ({ status, tasksCount }) => {
-	const badgeConfig = useBadgeConfig(status, tasksCount);
+var BadgeContent = ({ color, icon, display }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, _objectSpread2(_objectSpread2({ className: "Layer__TasksBadge" }, toDataProperties({
+		status: color,
+		icononly: !display
+	})), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HStack, {
+		align: "center",
+		justify: "center",
+		className: "Layer__TasksBadge__Icon",
+		"data-status": color,
+		children: icon
+	}), display ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+		className: "Layer__TasksBadge__Label",
+		size: TextSize.sm,
+		status: color,
+		invertColor: color === "warning",
+		weight: TextWeight.bold,
+		children: display
+	}) : null] }));
+};
+const TaskStatusBadge = ({ status, tasksCount, isMobile }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { formatNumber: formatNumber$1 } = useIntlFormatter();
+	const badgeConfig = getBadgeConfig(status, tasksCount, t, formatNumber$1);
 	if (!badgeConfig) return;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", _objectSpread2(_objectSpread2({ className: "Layer__tasks__badge" }, toDataProperties({
-		status: badgeConfig.color,
-		icononly: !badgeConfig.label
-	})), {}, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "Layer__tasks__badge__icon-wrapper",
-			"data-status": badgeConfig.color,
-			children: badgeConfig.icon
-		}),
-		badgeConfig.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-			className: "Layer__tasks__badge__label",
-			size: TextSize.sm,
-			status: badgeConfig.color,
-			invertColor: badgeConfig.color === "warning",
-			weight: TextWeight.bold,
-			children: badgeConfig.label
-		}),
-		badgeConfig.labelShort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-			className: "Layer__tasks__badge__label-short",
-			size: TextSize.sm,
-			status: badgeConfig.color,
-			invertColor: badgeConfig.color === "warning",
-			weight: TextWeight.bold,
-			children: badgeConfig.labelShort
-		})
-	] }));
+	const display = isMobile ? badgeConfig.labelShort : badgeConfig.label;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeContent, {
+		color: badgeConfig.color,
+		icon: badgeConfig.icon,
+		display
+	});
 };
-const TaskMonthTile = ({ data, onClick, active, disabled }) => {
+const TaskMonthTile = ({ data, onClick, active, disabled, isMobile }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({
 		className: "Layer__tasks-month-selector__month",
 		onClick: () => !disabled && onClick(new Date(data.year, data.month - 1, 1))
@@ -32703,7 +32698,8 @@ const TaskMonthTile = ({ data, onClick, active, disabled }) => {
 		children: data.monthStr
 	}), data.status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaskStatusBadge, {
 		status: data.status,
-		tasksCount: data.total - data.completed
+		tasksCount: data.total - data.completed,
+		isMobile
 	})] }));
 };
 function useActiveYearBookkeepingPeriods() {
@@ -32714,7 +32710,7 @@ function useActiveYearBookkeepingPeriods() {
 		return data === null || data === void 0 ? void 0 : data.filter((period) => period.year === activeYear);
 	}, [data, activeYear]) };
 }
-function TasksMonthSelector() {
+function TasksMonthSelector({ isMobile }) {
 	const { date } = useGlobalDate();
 	const { formatDate: formatDate$1 } = useIntlFormatter();
 	const { setMonthByPeriod } = useGlobalDatePeriodAlignedActions();
@@ -32764,7 +32760,8 @@ function TasksMonthSelector() {
 				}),
 				data: monthData,
 				active: monthData.month === activeMonthNumber,
-				disabled: monthData.disabled
+				disabled: monthData.disabled,
+				isMobile
 			}, idx);
 		})
 	});
@@ -33132,7 +33129,7 @@ const Tabs = ({ name: name$1, options, selected, onChange }) => {
 		})
 	});
 };
-const TasksYearsTabs = () => {
+const TasksYearsTabs = ({ isMobile }) => {
 	const { date } = useGlobalDate();
 	const { setMonthByPeriod } = useGlobalDatePeriodAlignedActions();
 	const { formatDate: formatDate$1 } = useIntlFormatter();
@@ -33153,11 +33150,16 @@ const TasksYearsTabs = () => {
 					label: formatDate$1(new Date(y.year, 0, 1), DateFormat.Year),
 					badge: !y.completed && y.unresolvedTasks ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaskStatusBadge, {
 						status: y.unresolvedTasks ? BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_CUSTOMER : BookkeepingPeriodStatus.CLOSED_COMPLETE,
-						tasksCount: y.unresolvedTasks
+						tasksCount: y.unresolvedTasks,
+						isMobile
 					}) : null
 				};
 			});
-		}, [formatDate$1, yearStatuses]),
+		}, [
+			formatDate$1,
+			yearStatuses,
+			isMobile
+		]),
 		selected: activeYear.toString(),
 		onChange: (year) => setCurrentYear(year.target.value)
 	});
@@ -33175,6 +33177,7 @@ function Tasks({ mobile = false, tasksHeader, onClickReconnectAccounts, stringOv
 	const { t } = (0, react_i18next.useTranslation)();
 	const { data, isLoading } = useBookkeepingPeriods();
 	const { data: callBookings, isLoading: isLoadingCallBookings } = useCallBookings();
+	const { isMobile } = useSizeClass();
 	const tasksState = (0, react.useMemo)(() => {
 		var _data$length, _callBookings$some;
 		if (isLoading || isLoadingCallBookings) return "loading";
@@ -33211,8 +33214,8 @@ function Tasks({ mobile = false, tasksHeader, onClickReconnectAccounts, stringOv
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(P, { children: t("bookkeeping:label.please_contact_support", "If you believe this is an error, please contact support.") })]
 						}) }),
 						children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksYearsTabs, {}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksMonthSelector, {}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksYearsTabs, { isMobile }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksMonthSelector, { isMobile }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksPending, {}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksList, { mobile })
 						] })

package/dist/esm/index.mjs

@@ -194,7 +194,7 @@ const getIntlLocale = (locale) => {
 	return isSupportedLocale(locale) ? locale : DEFAULT_LOCALE;
 };
 const name = "@layerfi/components";
-const version = "0.1.129-alpha";
+const version = "0.1.129-alpha.1";
 const description = "Layer React Components";
 const main = "dist/cjs/index.cjs";
 const module = "dist/esm/index.mjs";
@@ -20474,7 +20474,7 @@ const LinkedAccountOptions = ({ children, config, showLedgerBalance }) => {
 		}), children]
 	});
 };
-var getBadgeConfig = (quickbooksUiState, hasSynced) => {
+var getBadgeConfig$1 = (quickbooksUiState, hasSynced) => {
 	if (!hasSynced) return _objectSpread2({
 		variant: BadgeVariant.INFO,
 		icon: /* @__PURE__ */ jsx(RefreshCcw_default, { size: 12 })
@@ -20515,7 +20515,7 @@ const IntegrationsQuickbooksItemThumb = () => {
 	}, [t]);
 	if (!quickbooksConnectionStatus) return null;
 	const quickbooksUiState = getQuickbooksConnectionSyncUiState(quickbooksConnectionStatus);
-	const badgeConfig = getBadgeConfig(quickbooksUiState, hasSynced);
+	const badgeConfig = getBadgeConfig$1(quickbooksUiState, hasSynced);
 	return /* @__PURE__ */ jsxs(LinkedAccountOptions, {
 		config: menuConfig,
 		children: [/* @__PURE__ */ jsxs(Card, {
@@ -30997,34 +30997,28 @@ const TasksList = ({ pageSize = 8, mobile }) => {
 		})] }) : /* @__PURE__ */ jsx(TasksEmptyState, {})
 	});
 };
-var useBadgeConfig = (status, tasksCount) => {
-	const { t } = useTranslation();
-	const { formatNumber: formatNumber$1 } = useIntlFormatter();
+var buildLongLabel = (t, formatNumber$1, tasksCount) => tPlural(t, "bookkeeping:label.count_tasks", {
+	count: tasksCount,
+	displayCount: formatNumber$1(tasksCount),
+	one: "{{displayCount}} task",
+	other: "{{displayCount}} tasks"
+});
+var getBadgeConfig = (status, tasksCount, t, formatNumber$1) => {
 	switch (status) {
 		case BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_BOOKKEEPER:
 		case BookkeepingPeriodStatus.NOT_STARTED:
 		case BookkeepingPeriodStatus.CLOSING_IN_REVIEW: return {
 			color: "info",
 			icon: /* @__PURE__ */ jsx(Clock_default, { size: 12 }),
-			label: tasksCount ? tPlural(t, "bookkeeping:label.count_tasks", {
-				count: tasksCount,
-				displayCount: formatNumber$1(tasksCount),
-				one: "{{displayCount}} task",
-				other: "{{displayCount}} tasks"
-			}) : void 0,
+			label: tasksCount ? buildLongLabel(t, formatNumber$1, tasksCount) : void 0,
 			labelShort: tasksCount ? formatNumber$1(tasksCount) : void 0
 		};
 		case BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_CUSTOMER:
 		case BookkeepingPeriodStatus.CLOSED_OPEN_TASKS: return {
 			color: "warning",
-			label: tasksCount ? tPlural(t, "bookkeeping:label.count_tasks", {
-				count: tasksCount,
-				displayCount: formatNumber$1(tasksCount),
-				one: "{{displayCount}} task",
-				other: "{{displayCount}} tasks"
-			}) : void 0,
-			labelShort: tasksCount ? formatNumber$1(tasksCount) : void 0,
-			icon: /* @__PURE__ */ jsx(AlertCircle_default, { size: 12 })
+			icon: /* @__PURE__ */ jsx(AlertCircle_default, { size: 12 }),
+			label: tasksCount ? buildLongLabel(t, formatNumber$1, tasksCount) : void 0,
+			labelShort: tasksCount ? formatNumber$1(tasksCount) : void 0
 		};
 		case BookkeepingPeriodStatus.CLOSED_COMPLETE: return {
 			color: "success",
@@ -31038,37 +31032,38 @@ var useBadgeConfig = (status, tasksCount) => {
 		});
 	}
 };
-const TaskStatusBadge = ({ status, tasksCount }) => {
-	const badgeConfig = useBadgeConfig(status, tasksCount);
+var BadgeContent = ({ color, icon, display }) => {
+	return /* @__PURE__ */ jsxs(HStack, _objectSpread2(_objectSpread2({ className: "Layer__TasksBadge" }, toDataProperties({
+		status: color,
+		icononly: !display
+	})), {}, { children: [/* @__PURE__ */ jsx(HStack, {
+		align: "center",
+		justify: "center",
+		className: "Layer__TasksBadge__Icon",
+		"data-status": color,
+		children: icon
+	}), display ? /* @__PURE__ */ jsx(Text$2, {
+		className: "Layer__TasksBadge__Label",
+		size: TextSize.sm,
+		status: color,
+		invertColor: color === "warning",
+		weight: TextWeight.bold,
+		children: display
+	}) : null] }));
+};
+const TaskStatusBadge = ({ status, tasksCount, isMobile }) => {
+	const { t } = useTranslation();
+	const { formatNumber: formatNumber$1 } = useIntlFormatter();
+	const badgeConfig = getBadgeConfig(status, tasksCount, t, formatNumber$1);
 	if (!badgeConfig) return;
-	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: "Layer__tasks__badge" }, toDataProperties({
-		status: badgeConfig.color,
-		icononly: !badgeConfig.label
-	})), {}, { children: [
-		/* @__PURE__ */ jsx("span", {
-			className: "Layer__tasks__badge__icon-wrapper",
-			"data-status": badgeConfig.color,
-			children: badgeConfig.icon
-		}),
-		badgeConfig.label && /* @__PURE__ */ jsx(Text$2, {
-			className: "Layer__tasks__badge__label",
-			size: TextSize.sm,
-			status: badgeConfig.color,
-			invertColor: badgeConfig.color === "warning",
-			weight: TextWeight.bold,
-			children: badgeConfig.label
-		}),
-		badgeConfig.labelShort && /* @__PURE__ */ jsx(Text$2, {
-			className: "Layer__tasks__badge__label-short",
-			size: TextSize.sm,
-			status: badgeConfig.color,
-			invertColor: badgeConfig.color === "warning",
-			weight: TextWeight.bold,
-			children: badgeConfig.labelShort
-		})
-	] }));
+	const display = isMobile ? badgeConfig.labelShort : badgeConfig.label;
+	return /* @__PURE__ */ jsx(BadgeContent, {
+		color: badgeConfig.color,
+		icon: badgeConfig.icon,
+		display
+	});
 };
-const TaskMonthTile = ({ data, onClick, active, disabled }) => {
+const TaskMonthTile = ({ data, onClick, active, disabled, isMobile }) => {
 	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({
 		className: "Layer__tasks-month-selector__month",
 		onClick: () => !disabled && onClick(new Date(data.year, data.month - 1, 1))
@@ -31081,7 +31076,8 @@ const TaskMonthTile = ({ data, onClick, active, disabled }) => {
 		children: data.monthStr
 	}), data.status && /* @__PURE__ */ jsx(TaskStatusBadge, {
 		status: data.status,
-		tasksCount: data.total - data.completed
+		tasksCount: data.total - data.completed,
+		isMobile
 	})] }));
 };
 function useActiveYearBookkeepingPeriods() {
@@ -31092,7 +31088,7 @@ function useActiveYearBookkeepingPeriods() {
 		return data === null || data === void 0 ? void 0 : data.filter((period) => period.year === activeYear);
 	}, [data, activeYear]) };
 }
-function TasksMonthSelector() {
+function TasksMonthSelector({ isMobile }) {
 	const { date } = useGlobalDate();
 	const { formatDate: formatDate$1 } = useIntlFormatter();
 	const { setMonthByPeriod } = useGlobalDatePeriodAlignedActions();
@@ -31142,7 +31138,8 @@ function TasksMonthSelector() {
 				}),
 				data: monthData,
 				active: monthData.month === activeMonthNumber,
-				disabled: monthData.disabled
+				disabled: monthData.disabled,
+				isMobile
 			}, idx);
 		})
 	});
@@ -31510,7 +31507,7 @@ const Tabs = ({ name: name$1, options, selected, onChange }) => {
 		})
 	});
 };
-const TasksYearsTabs = () => {
+const TasksYearsTabs = ({ isMobile }) => {
 	const { date } = useGlobalDate();
 	const { setMonthByPeriod } = useGlobalDatePeriodAlignedActions();
 	const { formatDate: formatDate$1 } = useIntlFormatter();
@@ -31531,11 +31528,16 @@ const TasksYearsTabs = () => {
 					label: formatDate$1(new Date(y.year, 0, 1), DateFormat.Year),
 					badge: !y.completed && y.unresolvedTasks ? /* @__PURE__ */ jsx(TaskStatusBadge, {
 						status: y.unresolvedTasks ? BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_CUSTOMER : BookkeepingPeriodStatus.CLOSED_COMPLETE,
-						tasksCount: y.unresolvedTasks
+						tasksCount: y.unresolvedTasks,
+						isMobile
 					}) : null
 				};
 			});
-		}, [formatDate$1, yearStatuses]),
+		}, [
+			formatDate$1,
+			yearStatuses,
+			isMobile
+		]),
 		selected: activeYear.toString(),
 		onChange: (year) => setCurrentYear(year.target.value)
 	});
@@ -31553,6 +31555,7 @@ function Tasks({ mobile = false, tasksHeader, onClickReconnectAccounts, stringOv
 	const { t } = useTranslation();
 	const { data, isLoading } = useBookkeepingPeriods();
 	const { data: callBookings, isLoading: isLoadingCallBookings } = useCallBookings();
+	const { isMobile } = useSizeClass();
 	const tasksState = useMemo(() => {
 		var _data$length, _callBookings$some;
 		if (isLoading || isLoadingCallBookings) return "loading";
@@ -31589,8 +31592,8 @@ function Tasks({ mobile = false, tasksHeader, onClickReconnectAccounts, stringOv
 							}), /* @__PURE__ */ jsx(P, { children: t("bookkeeping:label.please_contact_support", "If you believe this is an error, please contact support.") })]
 						}) }),
 						children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-							/* @__PURE__ */ jsx(TasksYearsTabs, {}),
-							/* @__PURE__ */ jsx(TasksMonthSelector, {}),
+							/* @__PURE__ */ jsx(TasksYearsTabs, { isMobile }),
+							/* @__PURE__ */ jsx(TasksMonthSelector, { isMobile }),
 							/* @__PURE__ */ jsx(TasksPending, {}),
 							/* @__PURE__ */ jsx(TasksList, { mobile })
 						] })

package/dist/index.css

@@ -4123,15 +4123,6 @@
 
 .Layer__tabs--initialized .Layer__tabs__thumb {
   transition: left 150ms ease, width 150ms ease;
-}
-
-@container (width <= 400px) {
-  .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label {
-    display: none;
-  }
-  .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label-short {
-    display: flex;
-  }
 }body .calendly-overlay .calendly-popup {
   max-height: 1024px;
 }
@@ -7818,7 +7809,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__tasks-header__notification__button:hover {
   background: var(--color-base-1000);
 }
-.Layer__tasks__badge {
+.Layer__TasksBadge {
   display: flex;
   gap: var(--spacing-3xs);
   align-items: center;
@@ -7829,48 +7820,34 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-info-warning-bg);
   white-space: nowrap;
 }
-.Layer__tasks__badge .Layer__tasks__badge__label-short {
-  display: none;
-}
-@container (width <= 130px) {
-  .Layer__tasks__badge .Layer__tasks__badge__label {
-    display: none;
-  }
-  .Layer__tasks__badge .Layer__tasks__badge__label-short {
-    display: flex;
-  }
-}
-.Layer__tasks__badge[data-icononly] {
+.Layer__TasksBadge[data-icononly] {
   gap: 0;
   height: 16px;
   width: 16px;
   padding: 0;
   border-radius: 50%;
 }
-.Layer__tasks__badge .Layer__text {
+.Layer__TasksBadge .Layer__text {
   line-height: 10px;
 }
-.Layer__tasks__badge .Layer__tasks__badge__icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.Layer__TasksBadge .Layer__TasksBadge__Icon {
   height: 16px;
   width: 16px;
   border-radius: 50%;
 }
-.Layer__tasks__badge[data-status=info] {
+.Layer__TasksBadge[data-status=info] {
   background: var(--color-info-bg);
   color: var(--color-info-fg);
 }
-.Layer__tasks__badge[data-status=warning] {
+.Layer__TasksBadge[data-status=warning] {
   background: var(--color-info-warning);
   color: var(--color-info-warning-bg);
 }
-.Layer__tasks__badge[data-status=success] {
+.Layer__TasksBadge[data-status=success] {
   background: var(--color-info-success-bg);
   color: var(--color-info-success-fg);
 }
-.Layer__tasks__badge[data-status=error] {
+.Layer__TasksBadge[data-status=error] {
   background: var(--color-info-error-bg);
   color: var(--color-info-error);
 }
@@ -7887,16 +7864,6 @@ tbody .Layer__table__empty-row:first-child {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-@container (max-width: 400px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@container (max-width: 340px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
 .Layer__tasks-month-selector__month {
   display: flex;
   flex: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.129-alpha",
+  "version": "0.1.129-alpha.1",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -124,4 +124,4 @@
     "uuid": "^11.1.0",
     "zustand": "^5.0.4"
   }
-}
+}