cetec-design-system 4.1.1-0 → 4.2.0-0

package/dist/index.js

@@ -15388,6 +15388,76 @@ const Text = (props) => {
   );
   return definition ? /* @__PURE__ */ jsx(Tooltip, { text: definition, children: content }) : content;
 };
+const defaultLocaleLabels = {
+  cancel: "Cancel",
+  submit: "Submit",
+  apply: "Apply",
+  dismiss: "Dismiss",
+  closeDialog: "Close dialog",
+  removeItem: (item) => `Remove ${item}`,
+  switchToTheme: (nextTheme) => `Switch to ${nextTheme} theme`,
+  selectPlaceholder: "Select...",
+  noResults: "No results found",
+  suggestions: "Suggestions",
+  loadingOptions: "Loading options…",
+  noOptions: "No options",
+  addOption: (value) => `Add “${value}”`,
+  optionSelected: (label2) => `${label2} selected.`,
+  optionCreated: (value) => `${value} created and selected.`,
+  optionRemoved: (label2) => `${label2} removed.`,
+  moreSelected: (count2) => `${count2} more selected`,
+  chooseDate: "Choose date",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  previousYears: "Previous years",
+  nextYears: "Next years",
+  chooseMonthIn: (year) => `Choose a month in ${year}`,
+  chooseYear: "Choose a year",
+  today: "today",
+  selected: "selected",
+  rangeStart: "range start",
+  rangeEnd: "range end",
+  date: "Date",
+  time: "Time",
+  startDate: "Start date",
+  endDate: "End date",
+  startTime: "Start time",
+  endTime: "End time",
+  month: "Month",
+  day: "Day",
+  year: "Year",
+  hour: "Hour",
+  minute: "Minute",
+  meridiem: "AM or PM",
+  fieldHour: (field) => `${field} hour`,
+  fieldMinute: (field) => `${field} minute`,
+  fieldMeridiem: (field) => `${field} AM or PM`,
+  monthPlaceholder: "MM",
+  dayPlaceholder: "DD",
+  yearPlaceholder: "YYYY",
+  hourPlaceholder: "HH",
+  minutePlaceholder: "MM",
+  hourColumn: "HR",
+  minuteColumn: "MIN",
+  meridiemColumn: "AM/PM",
+  clearDate: "Clear date",
+  clearDateRange: "Clear date range",
+  clearTime: "Clear time",
+  clearTimeRange: "Clear time range",
+  clearDateTime: "Clear date and time",
+  clearStartDateTime: "Clear start date and time",
+  clearEndDateTime: "Clear end date and time"
+};
+const DEFAULT_LOCALE = "en-US";
+const LocaleContext = createContext({
+  locale: DEFAULT_LOCALE,
+  labels: defaultLocaleLabels
+});
+function useLocale() {
+  return useContext(LocaleContext);
+}
 const toneIconNames$3 = {
   info: "info",
   success: "success",
@@ -15403,6 +15473,7 @@ const toneIconColors$2 = {
   neutral: "icon.subtle"
 };
 const Alert = (props) => {
+  const { labels } = useLocale();
   const {
     tone = "info",
     title,
@@ -15411,7 +15482,7 @@ const Alert = (props) => {
     secondaryAction,
     dismissible = false,
     onDismiss,
-    dismissLabel = "Dismiss",
+    dismissLabel = labels.dismiss,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
@@ -16190,44 +16261,64 @@ function getMinuteValues(minuteStep) {
   }
   return values;
 }
-const MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-const MONTH_ABBR = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-const WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const WEEKDAY_FULL = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday"
-];
+const WEEK_START_UTC = Date.UTC(2017, 0, 1);
+const DAY_MS = 24 * 60 * 60 * 1e3;
+function utcDate(year, month, day) {
+  const date = /* @__PURE__ */ new Date(0);
+  date.setUTCFullYear(year, month - 1, day);
+  return date;
+}
+function resolveLocale(locale) {
+  try {
+    return Intl.DateTimeFormat.supportedLocalesOf(locale).length > 0 ? locale : DEFAULT_LOCALE;
+  } catch {
+    return DEFAULT_LOCALE;
+  }
+}
+function getFirstDayOfWeek(locale) {
+  var _a;
+  try {
+    const intlLocale = new Intl.Locale(locale);
+    const weekInfo = ((_a = intlLocale.getWeekInfo) == null ? void 0 : _a.call(intlLocale)) ?? intlLocale.weekInfo;
+    return weekInfo ? weekInfo.firstDay % 7 : 0;
+  } catch {
+    return 0;
+  }
+}
+function getCalendarNames(locale) {
+  const resolved = resolveLocale(locale);
+  const format = (options) => new Intl.DateTimeFormat(resolved, {
+    ...options,
+    calendar: "gregory",
+    timeZone: "UTC"
+  });
+  const monthLong = format({ month: "long" });
+  const monthShort = format({ month: "short" });
+  const weekdayLong = format({ weekday: "long" });
+  const weekdayShort = format({ weekday: "short" });
+  const monthYear = format({ month: "long", year: "numeric" });
+  const fullDate = format({ month: "long", day: "numeric", year: "numeric" });
+  const monthDates = Array.from(
+    { length: 12 },
+    (_, index2) => utcDate(2e3, index2 + 1, 1)
+  );
+  const firstDayOfWeek = getFirstDayOfWeek(resolved);
+  const weekDates = Array.from(
+    { length: 7 },
+    (_, index2) => new Date(WEEK_START_UTC + (firstDayOfWeek + index2) % 7 * DAY_MS)
+  );
+  return {
+    firstDayOfWeek,
+    months: monthDates.map((date) => monthLong.format(date)),
+    monthsShort: monthDates.map((date) => monthShort.format(date)),
+    weekdays: weekDates.map((date) => weekdayLong.format(date)),
+    weekdaysShort: weekDates.map(
+      (date) => weekdayShort.format(date).replace(/\.$/, "")
+    ),
+    formatMonthYear: (year, month) => monthYear.format(utcDate(year, month, 1)),
+    formatDate: ({ year, month, day }) => fullDate.format(utcDate(year, month, day))
+  };
+}
 const YEAR_WINDOW_SIZE = 12;
 function monthInRange(year, month, min2, max2) {
   if (min2 && (year < min2.year || year === min2.year && month < min2.month))
@@ -16250,13 +16341,13 @@ function getCellVariant(state) {
   }
   return state.isInRange ? "selected" : "ghost";
 }
-function getDayAriaLabel(date, monthName, state) {
-  const labels = [`${monthName} ${date.day}, ${date.year}`];
-  if (state.isToday) labels.push("today");
-  if (state.isSelected) labels.push("selected");
-  if (state.isRangeStart) labels.push("range start");
-  if (state.isRangeEnd) labels.push("range end");
-  return labels.join(", ");
+function getDayAriaLabel(date, state, labels, names) {
+  const parts = [names.formatDate(date)];
+  if (state.isToday) parts.push(labels.today);
+  if (state.isSelected) parts.push(labels.selected);
+  if (state.isRangeStart) parts.push(labels.rangeStart);
+  if (state.isRangeEnd) parts.push(labels.rangeEnd);
+  return parts.join(", ");
 }
 const CalendarCell = ({
   ariaLabel,
@@ -16294,20 +16385,21 @@ const DayGridContent = ({
   disabled,
   getDayState,
   handleDaySelect,
-  monthName,
+  labels,
+  names,
   viewDate
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  WEEKDAY_LABELS.map((weekday, index2) => /* @__PURE__ */ jsx(
+  names.weekdaysShort.map((weekday, index2) => /* @__PURE__ */ jsx(
     Text,
     {
       textStyle: "mono.xs",
       allCaps: true,
       className: classes.weekdayLabel,
       role: "columnheader",
-      "aria-label": WEEKDAY_FULL[index2] ?? weekday,
+      "aria-label": names.weekdays[index2] ?? weekday,
       children: weekday
     },
-    weekday
+    index2
   )),
   Array.from({ length: dayCells.length / 7 }, (_, rowIndex) => /* @__PURE__ */ jsx(Box, { role: "row", display: "contents", children: dayCells.slice(rowIndex * 7, rowIndex * 7 + 7).map((day, columnIndex) => {
     if (day === null) {
@@ -16332,7 +16424,7 @@ const DayGridContent = ({
         classes,
         disabled,
         label: day,
-        ariaLabel: getDayAriaLabel(date, monthName, state),
+        ariaLabel: getDayAriaLabel(date, state, labels, names),
         state,
         onClick: () => handleDaySelect(date),
         onKeyDown: (event) => {
@@ -16351,21 +16443,21 @@ const MonthGridContent = ({
   disabled,
   getMonthState,
   handleMonthSelect,
+  names,
   year
-}) => /* @__PURE__ */ jsx(Fragment, { children: MONTH_ABBR.map((label2, index2) => {
+}) => /* @__PURE__ */ jsx(Fragment, { children: names.monthsShort.map((label2, index2) => {
   const month = index2 + 1;
-  const fullMonthName = MONTH_NAMES[index2] ?? label2;
   return /* @__PURE__ */ jsx(
     CalendarCell,
     {
       classes,
       disabled,
       label: label2,
-      ariaLabel: `${fullMonthName} ${year}`,
+      ariaLabel: names.formatMonthYear(year, month),
       state: getMonthState(month),
       onClick: () => handleMonthSelect(month)
     },
-    label2
+    month
   );
 }) });
 const YearGridContent = ({
@@ -16387,6 +16479,8 @@ const YearGridContent = ({
   year
 )) });
 const Calendar = (props) => {
+  const { labels, locale } = useLocale();
+  const names = useMemo(() => getCalendarNames(locale), [locale]);
   const {
     value = null,
     onChange,
@@ -16398,7 +16492,7 @@ const Calendar = (props) => {
     defaultViewDate,
     onViewDateChange,
     disabled = false,
-    label: label2 = "Choose date",
+    label: label2 = labels.chooseDate,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
@@ -16419,18 +16513,17 @@ const Calendar = (props) => {
     () => getYearWindowStart(viewDate.year)
   );
   const classes = calendar({ type: viewLevel });
-  const monthName = MONTH_NAMES[viewDate.month - 1] ?? "";
-  const monthLabel = `${monthName} ${viewDate.year}`;
+  const monthLabel = names.formatMonthYear(viewDate.year, viewDate.month);
   const yearWindowEnd = yearWindowStart + YEAR_WINDOW_SIZE - 1;
   const dayCells = useMemo(() => {
-    const firstDay = firstWeekdayOfMonth(viewDate.year, viewDate.month);
+    const leadingDays = (firstWeekdayOfMonth(viewDate.year, viewDate.month) - names.firstDayOfWeek + 7) % 7;
     const totalDays = daysInMonth$1(viewDate.year, viewDate.month);
     const cells = [];
-    for (let i = 0; i < firstDay; i += 1) cells.push(null);
+    for (let i = 0; i < leadingDays; i += 1) cells.push(null);
     for (let day = 1; day <= totalDays; day += 1) cells.push(day);
     while (cells.length % 7 !== 0) cells.push(null);
     return cells;
-  }, [viewDate.month, viewDate.year]);
+  }, [names.firstDayOfWeek, viewDate.month, viewDate.year]);
   const windowYears = useMemo(
     () => Array.from({ length: YEAR_WINDOW_SIZE }, (_, i) => yearWindowStart + i),
     [yearWindowStart]
@@ -16486,8 +16579,8 @@ const Calendar = (props) => {
     switch (viewLevel) {
       case "days":
         return {
-          previousLabel: "Previous month",
-          nextLabel: "Next month",
+          previousLabel: labels.previousMonth,
+          nextLabel: labels.nextMonth,
           title: monthLabel,
           onTitleClick: () => setViewLevel("months"),
           previousDisabled: disabled || !monthInRange(
@@ -16502,8 +16595,8 @@ const Calendar = (props) => {
         };
       case "months":
         return {
-          previousLabel: "Previous year",
-          nextLabel: "Next year",
+          previousLabel: labels.previousYear,
+          nextLabel: labels.nextYear,
           title: String(viewDate.year),
           onTitleClick: () => {
             setYearWindowStart(getYearWindowStart(viewDate.year));
@@ -16516,8 +16609,8 @@ const Calendar = (props) => {
         };
       case "years":
         return {
-          previousLabel: "Previous years",
-          nextLabel: "Next years",
+          previousLabel: labels.previousYears,
+          nextLabel: labels.nextYears,
           title: `${yearWindowStart}-${yearWindowEnd}`,
           titleDisabled: true,
           previousDisabled: disabled || !yearInRange(yearWindowStart - 1, minDate, maxDate),
@@ -16528,7 +16621,7 @@ const Calendar = (props) => {
     }
   };
   const headerConfig = getHeaderConfig();
-  const gridAriaLabel = viewLevel === "days" ? monthLabel : viewLevel === "months" ? `Choose a month in ${viewDate.year}` : "Choose a year";
+  const gridAriaLabel = viewLevel === "days" ? monthLabel : viewLevel === "months" ? labels.chooseMonthIn(viewDate.year) : labels.chooseYear;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -16584,7 +16677,8 @@ const Calendar = (props) => {
                 disabled,
                 getDayState,
                 handleDaySelect,
-                monthName,
+                labels,
+                names,
                 viewDate
               }
             ) : viewLevel === "months" ? /* @__PURE__ */ jsx(
@@ -16594,6 +16688,7 @@ const Calendar = (props) => {
                 disabled,
                 getMonthState,
                 handleMonthSelect,
+                names,
                 year: viewDate.year
               }
             ) : /* @__PURE__ */ jsx(
@@ -16803,6 +16898,7 @@ const MAX_VISIBLE_ITEMS = 2;
 const Chip = (props) => {
   const groupContext = useChipGroup();
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const slotContext = useSlotContext();
   const {
     size: sizeProp,
@@ -16923,7 +17019,7 @@ const Chip = (props) => {
   };
   const isOverflowing = items !== void 0 && items.length > MAX_VISIBLE_ITEMS;
   const label2 = items ? isOverflowing ? `${items.slice(0, MAX_VISIBLE_ITEMS).join(", ")} +${items.length - MAX_VISIBLE_ITEMS}` : items.join(", ") : children;
-  const resolvedDismissLabel = dismissLabel || `Remove ${items ? items.join(", ") : children}`;
+  const resolvedDismissLabel = dismissLabel || labels.removeItem(items ? items.join(", ") : String(children));
   const handleDismissClick = (e) => {
     e.stopPropagation();
     onDismiss == null ? void 0 : onDismiss();
@@ -17637,13 +17733,14 @@ const getSeparatorContent = (format, separator) => {
   return format === "YYYY-MM-DD" ? "-" : "/";
 };
 const SegmentedDate = (props) => {
+  const { labels } = useLocale();
   const {
     value,
     defaultValue = null,
     onChange,
     format = "YYYY-MM-DD",
     separators,
-    label: label2 = "Date",
+    label: label2 = labels.date,
     disabled,
     onFocusWithin,
     onBlurWithin,
@@ -17667,8 +17764,8 @@ const SegmentedDate = (props) => {
       type: "segment",
       kind: "numeric",
       id: "month",
-      label: "Month",
-      placeholder: "MM",
+      label: labels.month,
+      placeholder: labels.monthPlaceholder,
       value: values.month,
       digits: 2,
       min: 1,
@@ -17678,8 +17775,8 @@ const SegmentedDate = (props) => {
       type: "segment",
       kind: "numeric",
       id: "day",
-      label: "Day",
-      placeholder: "DD",
+      label: labels.day,
+      placeholder: labels.dayPlaceholder,
       value: values.day,
       digits: 2,
       min: 1,
@@ -17696,8 +17793,8 @@ const SegmentedDate = (props) => {
       type: "segment",
       kind: "numeric",
       id: "year",
-      label: "Year",
-      placeholder: "YYYY",
+      label: labels.year,
+      placeholder: labels.yearPlaceholder,
       value: values.year,
       digits: 4,
       min: 1900,
@@ -17725,7 +17822,7 @@ const SegmentedDate = (props) => {
       separator("day-year"),
       yearSegment
     ];
-  }, [format, resolvedValue, separatorGap, separators]);
+  }, [format, labels, resolvedValue, separatorGap, separators]);
   return /* @__PURE__ */ jsx(
     SegmentedInput,
     {
@@ -17759,6 +17856,7 @@ const to24Hour = (hour12, meridiem) => {
   return hour12 === 12 ? 12 : hour12 + 12;
 };
 const SegmentedTime = (props) => {
+  const { labels } = useLocale();
   const {
     value,
     defaultValue = null,
@@ -17766,7 +17864,7 @@ const SegmentedTime = (props) => {
     timeFormat,
     minuteStep = 1,
     separators,
-    label: label2 = "Time",
+    label: label2 = labels.time,
     disabled,
     onFocusWithin,
     onBlurWithin,
@@ -17791,8 +17889,8 @@ const SegmentedTime = (props) => {
         type: "segment",
         kind: "numeric",
         id: "hour",
-        label: "Hour",
-        placeholder: "HH",
+        label: labels.hour,
+        placeholder: labels.hourPlaceholder,
         value: displayHour,
         digits: 2,
         min: resolvedTimeFormat === "12" ? 1 : 0,
@@ -17808,8 +17906,8 @@ const SegmentedTime = (props) => {
         type: "segment",
         kind: "numeric",
         id: "minute",
-        label: "Minute",
-        placeholder: "MM",
+        label: labels.minute,
+        placeholder: labels.minutePlaceholder,
         value: (resolvedValue == null ? void 0 : resolvedValue.minute) ?? null,
         digits: 2,
         min: 0,
@@ -17829,7 +17927,7 @@ const SegmentedTime = (props) => {
           type: "segment",
           kind: "choice",
           id: "meridiem",
-          label: "AM or PM",
+          label: labels.meridiem,
           placeholder: "AM",
           value: meridiem,
           choices: ["AM", "PM"],
@@ -17841,7 +17939,13 @@ const SegmentedTime = (props) => {
       );
     }
     return nextItems;
-  }, [resolvedMinuteStep, resolvedTimeFormat, resolvedValue, separators]);
+  }, [
+    labels,
+    resolvedMinuteStep,
+    resolvedTimeFormat,
+    resolvedValue,
+    separators
+  ]);
   return /* @__PURE__ */ jsx(
     SegmentedInput,
     {
@@ -17923,6 +18027,7 @@ const InputSlot = ({
 };
 const DateInput = (props) => {
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const {
     id,
     value,
@@ -17935,7 +18040,7 @@ const DateInput = (props) => {
     iconBefore,
     iconAfter,
     clearable = true,
-    clearLabel = "Clear date",
+    clearLabel = labels.clearDate,
     error: errorProp,
     disabled: disabledProp,
     invalid: invalidProp,
@@ -18031,20 +18136,21 @@ const DateInput = (props) => {
 const EMPTY_RANGE$6 = { start: null, end: null };
 const DateRangeInput = (props) => {
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const {
     id,
     value,
     defaultValue,
     onChange,
     dateFormat,
-    startLabel = "Start date",
-    endLabel = "End date",
+    startLabel = labels.startDate,
+    endLabel = labels.endDate,
     before,
     after,
     iconBefore,
     iconAfter,
     clearable = true,
-    clearLabel = "Clear date range",
+    clearLabel = labels.clearDateRange,
     error: errorProp,
     disabled: disabledProp,
     invalid: invalidProp,
@@ -18183,6 +18289,7 @@ const DateRangeInput = (props) => {
 };
 const TimeInput = (props) => {
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const {
     id,
     value,
@@ -18196,7 +18303,7 @@ const TimeInput = (props) => {
     iconBefore,
     iconAfter,
     clearable = true,
-    clearLabel = "Clear time",
+    clearLabel = labels.clearTime,
     error: errorProp,
     disabled: disabledProp,
     invalid: invalidProp,
@@ -18295,6 +18402,7 @@ const TimeInput = (props) => {
 const EMPTY_RANGE$5 = { start: null, end: null };
 const TimeRangeInput = (props) => {
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const {
     id,
     value,
@@ -18302,14 +18410,14 @@ const TimeRangeInput = (props) => {
     onChange,
     timeFormat,
     minuteStep,
-    startLabel = "Start time",
-    endLabel = "End time",
+    startLabel = labels.startTime,
+    endLabel = labels.endTime,
     before,
     after,
     iconBefore,
     iconAfter,
     clearable = true,
-    clearLabel = "Clear time range",
+    clearLabel = labels.clearTimeRange,
     error: errorProp,
     disabled: disabledProp,
     invalid: invalidProp,
@@ -18450,6 +18558,7 @@ const TimeRangeInput = (props) => {
 };
 const DateTimeInput = (props) => {
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const {
     id,
     value,
@@ -18458,14 +18567,14 @@ const DateTimeInput = (props) => {
     dateFormat,
     timeFormat,
     minuteStep,
-    dateLabel = "Date",
-    timeLabel = "Time",
+    dateLabel = labels.date,
+    timeLabel = labels.time,
     before,
     after,
     iconBefore,
     iconAfter,
     clearable = true,
-    clearLabel = "Clear date and time",
+    clearLabel = labels.clearDateTime,
     error: errorProp,
     disabled: disabledProp,
     invalid: invalidProp,
@@ -18902,6 +19011,7 @@ const withLevelScopedKeys = (nodes, levelKey) => {
 };
 const Menu = (props) => {
   var _a;
+  const { labels } = useLocale();
   const nodeId = useFloatingNodeId();
   const floatingLayer = useFloatingLayer();
   const {
@@ -19318,7 +19428,7 @@ const Menu = (props) => {
       ...otherProps,
       style: floatingStyle,
       children: [
-        !hasVisibleResults && /* @__PURE__ */ jsx(Box, { className: classes.noResults, children: renderNoResults ?? /* @__PURE__ */ jsx(Text, { textStyle: "body.sm", children: "No results found" }) }),
+        !hasVisibleResults && /* @__PURE__ */ jsx(Box, { className: classes.noResults, children: renderNoResults ?? /* @__PURE__ */ jsx(Text, { textStyle: "body.sm", children: labels.noResults }) }),
         hasVisibleResults && /* @__PURE__ */ jsxs(
           Box,
           {
@@ -20442,6 +20552,7 @@ const DateMenu = (props) => {
 const EMPTY_RANGE$4 = { start: null, end: null };
 const sameMonth = (a, b) => a.year === b.year && a.month === b.month;
 const DateRangeMenu = (props) => {
+  const { labels } = useLocale();
   const {
     trigger,
     open: controlledOpen,
@@ -20453,8 +20564,8 @@ const DateRangeMenu = (props) => {
     minDate,
     maxDate,
     disabled = false,
-    startLabel = "Start date",
-    endLabel = "End date",
+    startLabel = labels.startDate,
+    endLabel = labels.endDate,
     ...rest
   } = props;
   const isInline = rest.inline === true;
@@ -20555,14 +20666,14 @@ const DateRangeMenu = (props) => {
           )
         ] }),
         /* @__PURE__ */ jsxs(Box, { className: classes.footer, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "standard", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { variant: "standard", onClick: handleCancel, children: labels.cancel }),
           /* @__PURE__ */ jsx(
             Button,
             {
               variant: "primary",
               disabled: !draft.start || !draft.end,
               onClick: handleApply,
-              children: "Apply"
+              children: labels.apply
             }
           )
         ] })
@@ -20750,6 +20861,7 @@ const scrollSelectedIntoView$2 = (colRef) => {
   col.scrollTop = Math.min(Math.max(targetScrollTop, 0), maxScrollTop);
 };
 const TimeMenu = (props) => {
+  const { labels } = useLocale();
   const {
     trigger,
     open: controlledOpen,
@@ -20823,9 +20935,9 @@ const TimeMenu = (props) => {
             ref: hourColRef,
             className: classes.column,
             role: "listbox",
-            "aria-label": "Hour",
+            "aria-label": labels.hour,
             children: [
-              /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: "HR" }),
+              /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: labels.hourColumn }),
               /* @__PURE__ */ jsx(List, { children: hourValues.map((hour) => /* @__PURE__ */ jsx(
                 ListItem,
                 {
@@ -20845,9 +20957,9 @@ const TimeMenu = (props) => {
             ref: minuteColRef,
             className: classes.column,
             role: "listbox",
-            "aria-label": "Minute",
+            "aria-label": labels.minute,
             children: [
-              /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: "MIN" }),
+              /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: labels.minuteColumn }),
               /* @__PURE__ */ jsx(List, { children: minuteValues.map((minute) => /* @__PURE__ */ jsx(
                 ListItem,
                 {
@@ -20867,9 +20979,9 @@ const TimeMenu = (props) => {
             ref: meridiemColRef,
             className: classes.column,
             role: "listbox",
-            "aria-label": "AM or PM",
+            "aria-label": labels.meridiem,
             children: [
-              /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: "AM/PM" }),
+              /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: labels.meridiemColumn }),
               /* @__PURE__ */ jsx(List, { children: ["AM", "PM"].map((meridiem) => /* @__PURE__ */ jsx(
                 ListItem,
                 {
@@ -20914,6 +21026,7 @@ const TimeColumns = ({
   value,
   onChange
 }) => {
+  const { labels } = useLocale();
   const displayHour = value && timeFormat === "12" ? to12Hour$1(value.hour).hour12 : (value == null ? void 0 : value.hour) ?? null;
   const displayMeridiem = value && timeFormat === "12" ? to12Hour$1(value.hour).meridiem : null;
   const displayMinute = (value == null ? void 0 : value.minute) ?? null;
@@ -20947,9 +21060,9 @@ const TimeColumns = ({
         ref: hourColRef,
         className: classes.column,
         role: "listbox",
-        "aria-label": `${label2} hour`,
+        "aria-label": labels.fieldHour(label2),
         children: [
-          /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: "HR" }),
+          /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: labels.hourColumn }),
           /* @__PURE__ */ jsx(List, { children: hourValues.map((hour) => /* @__PURE__ */ jsx(
             ListItem,
             {
@@ -20969,9 +21082,9 @@ const TimeColumns = ({
         ref: minuteColRef,
         className: classes.column,
         role: "listbox",
-        "aria-label": `${label2} minute`,
+        "aria-label": labels.fieldMinute(label2),
         children: [
-          /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: "MIN" }),
+          /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: labels.minuteColumn }),
           /* @__PURE__ */ jsx(List, { children: minuteValues.map((minute) => /* @__PURE__ */ jsx(
             ListItem,
             {
@@ -20991,9 +21104,9 @@ const TimeColumns = ({
         ref: meridiemColRef,
         className: classes.column,
         role: "listbox",
-        "aria-label": `${label2} AM or PM`,
+        "aria-label": labels.fieldMeridiem(label2),
         children: [
-          /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: "AM/PM" }),
+          /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: classes.columnHeader, children: labels.meridiemColumn }),
           /* @__PURE__ */ jsx(List, { children: ["AM", "PM"].map((meridiem) => /* @__PURE__ */ jsx(
             ListItem,
             {
@@ -21010,6 +21123,7 @@ const TimeColumns = ({
   ] });
 };
 const TimeRangeMenu = (props) => {
+  const { labels } = useLocale();
   const {
     trigger,
     open: controlledOpen,
@@ -21021,8 +21135,8 @@ const TimeRangeMenu = (props) => {
     timeFormat = "12",
     minuteStep = 1,
     disabled = false,
-    startLabel = "Start time",
-    endLabel = "End time",
+    startLabel = labels.startTime,
+    endLabel = labels.endTime,
     ...rest
   } = props;
   const isInline = rest.inline === true;
@@ -21094,14 +21208,14 @@ const TimeRangeMenu = (props) => {
           )
         ] }),
         /* @__PURE__ */ jsxs(Box, { className: classes.footer, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "standard", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { variant: "standard", onClick: handleCancel, children: labels.cancel }),
           /* @__PURE__ */ jsx(
             Button,
             {
               variant: "primary",
               disabled: !draft.start || !draft.end,
               onClick: handleApply,
-              children: "Apply"
+              children: labels.apply
             }
           )
         ] })
@@ -21127,6 +21241,7 @@ const scrollSelectedIntoView = (colRef) => {
   col.scrollTop = Math.min(Math.max(targetScrollTop, 0), maxScrollTop);
 };
 const DateTimeMenu = (props) => {
+  const { labels } = useLocale();
   const {
     trigger,
     open: controlledOpen,
@@ -21275,9 +21390,9 @@ const DateTimeMenu = (props) => {
                     ref: hourColRef,
                     className: columnClasses.column,
                     role: "listbox",
-                    "aria-label": "Hour",
+                    "aria-label": labels.hour,
                     children: [
-                      /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: columnClasses.columnHeader, children: "HR" }),
+                      /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: columnClasses.columnHeader, children: labels.hourColumn }),
                       /* @__PURE__ */ jsx(List, { children: hourValues.map((hour) => /* @__PURE__ */ jsx(
                         ListItem,
                         {
@@ -21297,9 +21412,9 @@ const DateTimeMenu = (props) => {
                     ref: minuteColRef,
                     className: columnClasses.column,
                     role: "listbox",
-                    "aria-label": "Minute",
+                    "aria-label": labels.minute,
                     children: [
-                      /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: columnClasses.columnHeader, children: "MIN" }),
+                      /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: columnClasses.columnHeader, children: labels.minuteColumn }),
                       /* @__PURE__ */ jsx(List, { children: minuteValues.map((minute) => /* @__PURE__ */ jsx(
                         ListItem,
                         {
@@ -21319,9 +21434,9 @@ const DateTimeMenu = (props) => {
                     ref: meridiemColRef,
                     className: columnClasses.column,
                     role: "listbox",
-                    "aria-label": "AM or PM",
+                    "aria-label": labels.meridiem,
                     children: [
-                      /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: columnClasses.columnHeader, children: "AM/PM" }),
+                      /* @__PURE__ */ jsx(Box, { "data-column-header": true, className: columnClasses.columnHeader, children: labels.meridiemColumn }),
                       /* @__PURE__ */ jsx(List, { children: ["AM", "PM"].map((meridiem) => /* @__PURE__ */ jsx(
                         ListItem,
                         {
@@ -21340,14 +21455,14 @@ const DateTimeMenu = (props) => {
           )
         ] }),
         /* @__PURE__ */ jsxs(Box, { className: classes.footer, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "standard", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { variant: "standard", onClick: handleCancel, children: labels.cancel }),
           /* @__PURE__ */ jsx(
             Button,
             {
               variant: "primary",
               disabled: !draftDate || !draftTime,
               onClick: handleApply,
-              children: "Apply"
+              children: labels.apply
             }
           )
         ] })
@@ -21811,6 +21926,7 @@ const DateTimePicker = (props) => {
 const WRAP_BREAKPOINT = 458;
 const EMPTY_RANGE = { start: null, end: null };
 const DateTimeRangePicker = (props) => {
+  const { labels } = useLocale();
   const {
     before,
     after,
@@ -21829,12 +21945,12 @@ const DateTimeRangePicker = (props) => {
     minuteStep,
     minDate,
     maxDate,
-    startDateLabel = "Start date",
-    startTimeLabel = "Start time",
-    endDateLabel = "End date",
-    endTimeLabel = "End time",
-    startClearLabel = "Clear start date and time",
-    endClearLabel = "Clear end date and time",
+    startDateLabel = labels.startDate,
+    startTimeLabel = labels.startTime,
+    endDateLabel = labels.endDate,
+    endTimeLabel = labels.endTime,
+    startClearLabel = labels.clearStartDateTime,
+    endClearLabel = labels.clearEndDateTime,
     placement
   } = props;
   const [currentValue, setCurrentValue] = useControllableState({
@@ -22459,6 +22575,7 @@ const ModalFooter = (props) => {
   return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
 };
 const ModalHeader = (props) => {
+  const { labels } = useLocale();
   const { title, titleId, showCloseButton = true, children, ...rest } = props;
   const [className, otherProps] = splitProps(rest);
   const classes = modal();
@@ -22481,8 +22598,8 @@ const ModalHeader = (props) => {
         variant: "ghost",
         size: isSm ? "md" : "lg",
         onClick: onClose,
-        altText: "Close dialog",
-        "aria-label": "Close dialog",
+        altText: labels.closeDialog,
+        "aria-label": labels.closeDialog,
         className: classes.closeButton,
         iconName: "x"
       }
@@ -22490,6 +22607,7 @@ const ModalHeader = (props) => {
   ] }) });
 };
 const Modal = (props) => {
+  const { labels } = useLocale();
   const {
     open,
     onOpenChange,
@@ -22497,8 +22615,8 @@ const Modal = (props) => {
     defaultValues,
     onSubmit,
     children,
-    submitLabel = "Submit",
-    cancelLabel = "Cancel",
+    submitLabel = labels.submit,
+    cancelLabel = labels.cancel,
     submitDisabled = false,
     footer,
     size: size2,
@@ -22581,13 +22699,14 @@ const typeDefaults = {
   }
 };
 const ConfirmationModal = (props) => {
+  const { labels } = useLocale();
   const {
     open,
     onOpenChange,
     title,
     description,
     confirmLabel,
-    cancelLabel = "Cancel",
+    cancelLabel = labels.cancel,
     type = "default",
     onConfirm,
     confirmLoading = false,
@@ -22881,6 +23000,7 @@ const RadioInput = (props) => {
   );
 };
 const AutocompleteListbox = (props) => {
+  const { labels } = useLocale();
   const {
     activeIndex,
     baseId,
@@ -22915,7 +23035,7 @@ const AutocompleteListbox = (props) => {
       ref: floatingRef,
       id: listboxId,
       role: "listbox",
-      "aria-label": "Suggestions",
+      "aria-label": labels.suggestions,
       "aria-multiselectable": multiple || void 0,
       "aria-busy": loading || loadingMore || void 0,
       density,
@@ -23240,7 +23360,6 @@ const resolveSelectedAutocompleteOption = (selectedValue, childOptionByValue, op
 };
 const getFirstEnabledOptionIndex = (options) => options.findIndex((option) => !option.disabled);
 const LOAD_MORE_THRESHOLD_PX = 32;
-const defaultGetCreateOptionLabel = (inputValue) => `Add “${inputValue}”`;
 const chipSizeByAutocompleteSize = {
   sm: "sm",
   md: "sm",
@@ -23264,6 +23383,7 @@ const useAutocompleteController = (props) => {
   var _a;
   const floatingLayer = useFloatingLayer();
   const fieldContext = useFieldContext();
+  const { labels } = useLocale();
   const {
     value: controlledValue,
     defaultValue,
@@ -23279,9 +23399,9 @@ const useAutocompleteController = (props) => {
     multiple = false,
     allowCustomValue = false,
     isCustomValue,
-    getCreateOptionLabel = defaultGetCreateOptionLabel,
+    getCreateOptionLabel = labels.addOption,
     limitTags,
-    placeholder = "Select...",
+    placeholder = labels.selectPlaceholder,
     placement = "bottom-start",
     offset: offset2 = 4,
     children,
@@ -23298,8 +23418,8 @@ const useAutocompleteController = (props) => {
     loadingMore = false,
     hasMore = false,
     onLoadMore,
-    loadingText = "Loading options…",
-    noOptionsText = "No options",
+    loadingText = labels.loadingOptions,
+    noOptionsText = labels.noOptions,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -23456,17 +23576,17 @@ const useAutocompleteController = (props) => {
       if (option.created) {
         const createdOption = { ...option, label: option.value };
         state.selectOption(createdOption, "create-option");
-        setAnnouncement(`${option.value} created and selected.`);
+        setAnnouncement(labels.optionCreated(option.value));
       } else {
         state.selectOption(option);
-        setAnnouncement(`${option.label} selected.`);
+        setAnnouncement(labels.optionSelected(option.label));
       }
       setActiveIndex(null);
       if (restoreFocus) {
         requestAnimationFrame(focusInput);
       }
     },
-    [focusInput, state]
+    [focusInput, labels, state]
   );
   const tryCommitCreateOption = useCallback(() => {
     if (!createOption || disabled || readOnly || suppressCreateCommitRef.current) {
@@ -23548,9 +23668,9 @@ const useAutocompleteController = (props) => {
   const removeSelectedValue = useCallback(
     (selectedValue, label2) => {
       state.removeOption(selectedValue);
-      setAnnouncement(`${label2} removed.`);
+      setAnnouncement(labels.optionRemoved(label2));
     },
-    [state]
+    [labels, state]
   );
   const handleTokenDismiss = useCallback(
     (selectedValue, label2) => {
@@ -23775,6 +23895,7 @@ const useAutocompleteController = (props) => {
   };
 };
 const Autocomplete = (props) => {
+  const { labels } = useLocale();
   const controller = useAutocompleteController(props);
   const {
     activeIndex,
@@ -23892,7 +24013,7 @@ const Autocomplete = (props) => {
                   {
                     as: "span",
                     className: classes.overflowIndicator,
-                    "aria-label": `${hiddenTagCount} more selected`,
+                    "aria-label": labels.moreSelected(hiddenTagCount),
                     children: `+${hiddenTagCount}`
                   }
                 ),
@@ -24045,13 +24166,14 @@ const getSelectedOptions = (options, value, multiple) => {
 };
 const Select = (props) => {
   var _a;
+  const { labels } = useLocale();
   const floatingLayer = useFloatingLayer();
   const {
     value: controlledValue,
     defaultValue = null,
     onChange,
     multiple = false,
-    placeholder = "Select...",
+    placeholder = labels.selectPlaceholder,
     open: controlledOpen,
     defaultOpen = false,
     onOpenChange,
@@ -24588,8 +24710,30 @@ function useTheme() {
   }
   return context2;
 }
+function mergeLabels(parent, overrides) {
+  const defined = Object.fromEntries(
+    Object.entries(overrides).filter(([, value]) => value !== void 0)
+  );
+  return { ...parent, ...defined };
+}
+function LocaleProvider({
+  locale,
+  labels,
+  children
+}) {
+  const parent = useContext(LocaleContext);
+  const contextValue = useMemo(
+    () => ({
+      locale: locale ?? parent.locale,
+      labels: labels ? mergeLabels(parent.labels, labels) : parent.labels
+    }),
+    [locale, labels, parent]
+  );
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value: contextValue, children });
+}
 const ThemeSwitcher = () => {
   const { theme, setTheme } = useTheme();
+  const { labels } = useLocale();
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
@@ -24598,7 +24742,7 @@ const ThemeSwitcher = () => {
     {
       ...dsComponent("ThemeSwitcher"),
       variant: "ghost",
-      altText: `Switch to ${theme === "light" ? "dark" : "light"} theme`,
+      altText: labels.switchToTheme(theme === "light" ? "dark" : "light"),
       onClick: toggleTheme,
       iconName: theme === "light" ? "moon" : "sun"
     }
@@ -24619,6 +24763,7 @@ const toneIconColors = {
   neutral: "icon.subtle"
 };
 const Toast = (props) => {
+  const { labels } = useLocale();
   const {
     tone = "neutral",
     children,
@@ -24627,7 +24772,7 @@ const Toast = (props) => {
     dismissible = true,
     onDismiss,
     duration = null,
-    dismissLabel = "Dismiss",
+    dismissLabel = labels.dismiss,
     state = "open",
     onMouseEnter,
     onMouseLeave,
@@ -25018,6 +25163,7 @@ export {
   List,
   ListItem,
   ListItemGroup,
+  LocaleProvider,
   Menu,
   MenuGroup,
   MenuItem,
@@ -25057,6 +25203,7 @@ export {
   Toggle,
   ToggleInput,
   Tooltip,
+  defaultLocaleLabels,
   deriveItemTextValue,
   getComponentType,
   getHighlightedTextParts,
@@ -25070,6 +25217,7 @@ export {
   useForm2 as useForm,
   useIconConfig,
   useListContext,
+  useLocale,
   useMediaQuery,
   useMenuFilterContext,
   useMenuListContext,