@carbon/react 1.97.0-rc.0 → 1.98.0

package/es/components/ButtonSet/ButtonSet.d.ts

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * fluid: button set resize to the size of the container up to a maximum dependant on the
+     * number of buttons. Overrides `stacked` property.
+     */
+    fluid?: boolean;
     /**
      * Specify the button arrangement of the set (vertically stacked or
      * horizontal)

package/es/components/ButtonSet/ButtonSet.js

@@ -6,26 +6,85 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
+const buttonOrder = kind => ({
+  ghost: 1,
+  'danger--ghost': 2,
+  tertiary: 3,
+  danger: 5,
+  primary: 6
+})[kind] ?? 4;
+const getButtonKind = element => {
+  if (/*#__PURE__*/React.isValidElement(element) && element.props && typeof element.props === 'object') {
+    const props = element.props;
+    return props.kind ?? 'primary';
+  }
+  return 'primary';
+};
 const ButtonSet = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     className,
+    fluid,
     stacked,
     ...rest
   } = props;
   const prefix = usePrefix();
+  const fluidInnerRef = useRef(null);
+  const [isStacked, setIsStacked] = useState(false);
+  const [sortedChildren, setSortedChildren] = useState(React.Children.toArray(children));
+
+  /**
+   * Used to determine if the buttons are currently stacked
+   */
+  useIsomorphicEffect(() => {
+    const checkStacking = () => {
+      let newIsStacked = stacked || false;
+      if (fluidInnerRef && fluidInnerRef.current) {
+        const computedStyle = window.getComputedStyle(fluidInnerRef.current);
+        newIsStacked = computedStyle?.getPropertyValue?.('--flex-direction') === 'column';
+      }
+      return newIsStacked;
+    };
+
+    /* initial value not dependant on observer */
+    setIsStacked(checkStacking());
+    if (!fluidInnerRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      setIsStacked(checkStacking());
+    });
+    resizeObserver.observe(fluidInnerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [isStacked, stacked]);
+  useEffect(() => {
+    const newSortedChildren = React.Children.toArray(children);
+    newSortedChildren.sort((a, b) => {
+      return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
+    });
+    setSortedChildren(newSortedChildren);
+
+    // adding sortedChildren to deps causes an infinite loop
+  }, [children, isStacked]);
   const buttonSetClasses = cx(className, `${prefix}--btn-set`, {
-    [`${prefix}--btn-set--stacked`]: stacked
+    [`${prefix}--btn-set--stacked`]: isStacked,
+    [`${prefix}--btn-set--fluid`]: fluid
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: buttonSetClasses,
     ref: ref
-  }), children);
+  }), fluid ? /*#__PURE__*/React.createElement("div", {
+    ref: fluidInnerRef,
+    className: cx(`${prefix}--btn-set__fluid-inner`, {
+      [`${prefix}--btn-set__fluid-inner--auto-stack`]: true
+    })
+  }, sortedChildren) : children);
 });
 ButtonSet.displayName = 'ButtonSet';
 ButtonSet.propTypes = {
@@ -37,9 +96,14 @@ ButtonSet.propTypes = {
    * Specify an optional className to be added to your ButtonSet
    */
   className: PropTypes.string,
+  /**
+   * fluid: button set resize to the size of the container up to a maximum dependant on the
+   * number of buttons.
+   */
+  fluid: PropTypes.bool,
   /**
    * Specify the button arrangement of the set (vertically stacked or
-   * horizontal)
+   * horizontal) - ignored when fluid is true
    */
   stacked: PropTypes.bool
 };

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/es/components/ComposedModal/ComposedModal.js

@@ -206,7 +206,7 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !isPassive && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -230,7 +230,8 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
         endTrapNode: endSentinelNode,
         currentActiveNode,
         oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
+        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
+        prefix
       });
     }
 

package/es/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/DataTable/DataTable.d.ts

@@ -282,11 +282,12 @@ export declare const DataTable: {
     };
     TableCell: React.ForwardRefExoticComponent<import("./TableCell").TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
     TableContainer: {
-        ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
+        ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             aiEnabled: PropTypes.Requireable<boolean>;
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;
+            decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             stickyHeader: PropTypes.Requireable<boolean>;
             title: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/es/components/DataTable/TableContainer.d.ts

@@ -5,12 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type HTMLAttributes } from 'react';
+import React, { ReactNode, type HTMLAttributes } from 'react';
 export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * Specify if the entire table has AI generated contents
      */
     aiEnabled?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+     */
+    decorator?: ReactNode;
     /**
      * Optional description text for the Table
      */
@@ -29,7 +33,7 @@ export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>
     title?: React.ReactNode;
 }
 declare const TableContainer: {
-    ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+    ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify if the entire table has AI generated contents
@@ -37,6 +41,10 @@ declare const TableContainer: {
         aiEnabled: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Optional description text for the Table
          */

package/es/components/DataTable/TableContainer.js

@@ -18,6 +18,7 @@ const TableContainer = ({
   aiEnabled,
   className,
   children,
+  decorator,
   title,
   description,
   stickyHeader,
@@ -43,15 +44,22 @@ const TableContainer = ({
     value: value
   }, /*#__PURE__*/React.createElement(Section, _extends({}, rest, {
     className: tableContainerClasses
-  }), (title || description) && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-header`
+  }), (title || description || decorator) && /*#__PURE__*/React.createElement("div", {
+    className: cx(`${prefix}--data-table-header`, {
+      [`${prefix}--data-table-header__with-decorator`]: decorator,
+      [`${prefix}--data-table-header__with-decorator--standalone`]: decorator && !title && !description
+    })
+  }, (title || description) && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--data-table-header__content`
   }, title && /*#__PURE__*/React.createElement(Heading, {
     className: `${prefix}--data-table-header__title`,
     id: titleId
   }, title), description && /*#__PURE__*/React.createElement("p", {
     className: `${prefix}--data-table-header__description`,
     id: descriptionId
-  }, description)), children));
+  }, description)), decorator && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--data-table-header__decorator`
+  }, decorator)), children));
 };
 TableContainer.propTypes = {
   /**
@@ -60,6 +68,10 @@ TableContainer.propTypes = {
   aiEnabled: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optional description text for the Table
    */

package/es/components/DataTable/state/sorting.d.ts

@@ -43,8 +43,7 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -55,6 +54,5 @@ props: Props, state: State<ColTypes>, { key }: {
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -62,7 +62,7 @@ const DataTableSkeleton = ({
   }, rest), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React.createElement("th", {
     key: i
   }, headers ? /*#__PURE__*/React.createElement("div", {
-    className: "cds--table-header-label"
+    className: `${prefix}--table-header-label`
   }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {

package/es/components/DatePicker/DatePicker.d.ts

@@ -7,6 +7,7 @@
 import React, { ReactNode } from 'react';
 import flatpickr from 'flatpickr';
 import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
+import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {
     /**
@@ -69,7 +70,7 @@ export interface DatePickerProps {
     /**
      *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
      */
-    locale?: string | any | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'ga' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'km' | 'ko' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'uz' | 'uz_latn' | 'vn' | 'zh_tw' | 'zh' | undefined;
+    locale?: string | any | SupportedLocale | undefined;
     /**
      * The maximum date that a user can pick to.
      */
@@ -99,7 +100,7 @@ export interface DatePickerProps {
      * if boolean applies to all inputs
      * if array applies to each input in order
      */
-    readOnly?: boolean | [] | any | undefined;
+    readOnly?: boolean | undefined;
     /**
      * `true` to use the short version.
      */

package/es/components/DatePicker/DatePicker.js

@@ -24,6 +24,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { datePartsOrder } from '@carbon/utilities';
+import { SUPPORTED_LOCALES } from './DatePickerLocales.js';
 
 // Weekdays shorthand for English locale
 // Ensure localization exists before trying to access it
@@ -362,7 +363,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     const {
       current: end
     } = endInputField;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
@@ -511,12 +511,11 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
 
       // prevent a duplicate date selection when a default value is set
       if (value) {
-        if (startInputField?.current) {
-          startInputField.current.value = '';
+        if (start) {
+          start.value = '';
         }
-        if (endInputField?.current) {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          endInputField.current.value = '';
+        if (end) {
+          end.value = '';
         }
       }
       if (start) {
@@ -596,8 +595,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         endInputField.current.value = '';
       }
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [value]);
+  }, [value, startInputField]);
   useEffect(() => {
     const handleMouseDown = event => {
       if (calendarRef.current && calendarRef.current.isOpen && !calendarRef.current.calendarContainer.contains(event.target) && !startInputField.current.contains(event.target) && !endInputField.current?.contains(event.target)) {
@@ -605,8 +603,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         closeCalendar();
       }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-    const closeCalendar = event => {
+    const closeCalendar = () => {
       calendarRef.current?.close();
       // Remove focus from endDate calendar input
       onCalendarClose(calendarRef.current?.selectedDates, '', calendarRef.current, {
@@ -621,15 +618,22 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   useEffect(() => {
     if (calendarRef.current?.set) {
       if (value !== undefined) {
-        calendarRef.current.setDate(value);
+        // To make up for calendarRef.current.setDate not making provision for an empty string or array
+        if (value === '' || value === null || Array.isArray(value) && (value.length === 0 || value.every(element => !element))) {
+          // only clear if there are selected dates to avoid unnecessary operations
+          if (calendarRef.current.selectedDates.length > 0) {
+            calendarRef.current.clear();
+          }
+        } else {
+          calendarRef.current.setDate(value);
+        }
       }
       updateClassNames(calendarRef.current, prefix);
       //for simple date picker w/o calendar; initial mount may not have value
     } else if (!calendarRef.current && value) {
       startInputField.current.value = value;
     }
-  }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [value, prefix, startInputField]);
   let fluidError;
   if (isFluid) {
     if (invalid) {
@@ -718,128 +722,7 @@ DatePicker.propTypes = {
   /**
    *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
    */
-  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(['ar',
-  // Arabic
-  'at',
-  // Austria
-  'az',
-  // Azerbaijan
-  'be',
-  // Belarusian
-  'bg',
-  // Bulgarian
-  'bn',
-  // Bangla
-  'bs',
-  // Bosnia
-  'cat',
-  // Catalan
-  'cs',
-  // Czech
-  'cy',
-  // Welsh
-  'da',
-  // Danish
-  'de',
-  // German
-  'en',
-  // English
-  'eo',
-  // Esperanto
-  'es',
-  // Spanish
-  'et',
-  // Estonian
-  'fa',
-  // Persian
-  'fi',
-  // Finnish
-  'fo',
-  // Faroese
-  'fr',
-  // French
-  'ga',
-  // Gaelic
-  'gr',
-  // Greek
-  'he',
-  // Hebrew
-  'hi',
-  // Hindi
-  'hr',
-  // Croatian
-  'hu',
-  // Hungarian
-  'id',
-  // Indonesian
-  'is',
-  // Icelandic
-  'it',
-  // Italian
-  'ja',
-  // Japanese
-  'ka',
-  // Georgian
-  'km',
-  // Khmer
-  'ko',
-  // Korean
-  'kz',
-  // Kazakh
-  'lt',
-  // Lithuanian
-  'lv',
-  // Latvian
-  'mk',
-  // Macedonian
-  'mn',
-  // Mongolian
-  'ms',
-  // Malaysian
-  'my',
-  // Burmese
-  'nl',
-  // Dutch
-  'no',
-  // Norwegian
-  'pa',
-  // Punjabi
-  'pl',
-  // Polish
-  'pt',
-  // Portuguese
-  'ro',
-  // Romanian
-  'ru',
-  // Russian
-  'si',
-  // Sinhala
-  'sk',
-  // Slovak
-  'sl',
-  // Slovenian
-  'sq',
-  // Albanian
-  'sr',
-  // Serbian
-  'sv',
-  // Swedish
-  'th',
-  // Thai
-  'tr',
-  // Turkish
-  'uk',
-  // Ukrainian
-  'uz',
-  // Uzbek
-  'uz_latn',
-  // Uzbek Latin
-  'vn',
-  // Vietnamese
-  'zh_tw',
-  // Mandarin Traditional
-  'zh' // Mandarin
-  ])]),
+  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(SUPPORTED_LOCALES)]),
   /**
    * The maximum date that a user can pick to.
    */

package/es/components/DatePicker/DatePickerLocales.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * The full list of supported locales can be found here:
+ * https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+ */
+export declare const SUPPORTED_LOCALES: readonly ["ar", "at", "az", "be", "bg", "bn", "bs", "cat", "cs", "cy", "da", "de", "en", "eo", "es", "et", "fa", "fi", "fo", "fr", "ga", "gr", "he", "hi", "hr", "hu", "id", "is", "it", "ja", "ka", "km", "ko", "kz", "lt", "lv", "mk", "mn", "ms", "my", "nl", "no", "pa", "pl", "pt", "ro", "ru", "si", "sk", "sl", "sq", "sr", "sv", "th", "tr", "uk", "uz", "uz_latn", "vn", "zh_tw", "zh"];
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];