@mackin.com/styleguide 10.0.4 → 10.0.5

package/index.d.ts

@@ -1155,4 +1155,16 @@ interface Entity<T extends string | number> {
     name: string;
 }
 
-export { Accordian, type AccordianProps, type Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, type AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, ConfirmModal, type ConfirmModalProps, CopyButton, DateInput, type DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, type FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, type ImageProps, InfoPanel, InfoTip, type InfoTipProps, ItemPager, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, type MackinTheme, Modal, type ModalProps, Nav, NormalizeCss, NumberInput, type NumberInputProps, OmniLink, type OmniLinkProps, PagedResult, type PagedResultDto, Pager, type PagerProps, Picker, type PickerOption, type PickerProps, type PickerValue, Popover, ProgressBar, type ProgressBarProps, SearchBox, type SearchBoxProps, Slider, type SliderProps, type SliderValue, TabContainer, type TabContainerProps, TabHeader, type TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+declare enum StyleGuideLanguage {
+    English = 0,
+    Spanish = 1,
+    French = 2
+}
+
+declare const LocalizationProvider: (p: {
+    children: React__default.ReactNode;
+    language: StyleGuideLanguage;
+    __debug?: boolean;
+}) => React__default.JSX.Element;
+
+export { Accordian, type AccordianProps, type Alignment, Autocomplete, AutocompleteController, AutocompleteEntityController, type AutocompleteProps, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, ConfirmModal, type ConfirmModalProps, CopyButton, DateInput, type DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, type FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, type ImageProps, InfoPanel, InfoTip, type InfoTipProps, ItemPager, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, LocalizationProvider, type MackinTheme, Modal, type ModalProps, Nav, NormalizeCss, NumberInput, type NumberInputProps, OmniLink, type OmniLinkProps, PagedResult, type PagedResultDto, Pager, type PagerProps, Picker, type PickerOption, type PickerProps, type PickerValue, Popover, ProgressBar, type ProgressBarProps, SearchBox, type SearchBoxProps, Slider, type SliderProps, type SliderValue, StyleGuideLanguage, TabContainer, type TabContainerProps, TabHeader, type TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.esm.js

@@ -6,7 +6,7 @@ import { faPlus, faTrashAlt, faSave, faCrow, faTimes, faSync, faCheckSquare } fr
 import { faWifi, faWifiSlash, faBars, faSearch, faQuestionCircle, faNarwhal, faChevronRight, faChevronLeft, faCloudDownload, faCloudUpload, faChevronDoubleLeft, faChevronDoubleRight, faCalendarAlt, faCopy, faPaste, faEyeSlash, faEye } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { uniqueId, sumBy, orderBy, get } from 'lodash';
-import { getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, format, endOfYear, addYears, endOfMonth, addMonths, startOfMonth, startOfYear, isExists } from 'date-fns';
+import { format, getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, endOfYear, addYears, endOfMonth, addMonths, startOfMonth, startOfYear, isExists } from 'date-fns';
 import { createPortal } from 'react-dom';
 import { Popover as Popover$1, ArrowContainer } from 'react-tiny-popover';
 import { Link as Link$1 } from 'react-router-dom';
@@ -731,25 +731,49 @@ const tryClampDecimals = (value, step = 0) => {
     return parseFloat(value.toFixed(decimals));
 };
 
+var StyleGuideLanguage;
+(function (StyleGuideLanguage) {
+    StyleGuideLanguage[StyleGuideLanguage["English"] = 0] = "English";
+    StyleGuideLanguage[StyleGuideLanguage["Spanish"] = 1] = "Spanish";
+    StyleGuideLanguage[StyleGuideLanguage["French"] = 2] = "French";
+})(StyleGuideLanguage || (StyleGuideLanguage = {}));
+
+const LocalizationContext = createContext({
+    language: StyleGuideLanguage.English,
+    getText: text => text
+});
+
+const useLocalization = () => {
+    const localization = useContext(LocalizationContext);
+    if (!localization) {
+        return {
+            language: StyleGuideLanguage.English,
+            getText: (text) => text
+        };
+    }
+    return localization;
+};
+
 /** Common state handling for displaying validation messages with inputs. */
 const useInputValidationMessage = (ref, props) => {
     const [validationError, setValidationError] = React__default.useState('');
+    const { getText, language } = useLocalization();
     const updateErrorMessage = (customErrorOverride) => {
         var _a;
         const customError = customErrorOverride || props.customError || '';
         // set it OR clear it.  either way, update it.
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
-        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+        setValidationError(customError || getValidationMessage(ref.current, getText, props.patternErrorMessage));
     };
     useEffect(() => {
         updateErrorMessage();
-    }, [props.customError]);
+    }, [props.customError, language]);
     React__default.useEffect(() => {
         updateErrorMessage();
-    }, []);
+    }, [language]);
     return [validationError, updateErrorMessage];
 };
-const getValidationMessage = (element, patternErrorMessage) => {
+const getValidationMessage = (element, getText, patternErrorMessage) => {
     var _a;
     if (!element) {
         return '';
@@ -764,25 +788,25 @@ const getValidationMessage = (element, patternErrorMessage) => {
     if (validity.typeMismatch) {
         switch (element.type) {
             case 'url':
-                return `Invalid URL.`;
+                return getText(`Invalid URL.`);
             case 'email':
-                return `Invalid email.`;
+                return getText(`Invalid email.`);
             default:
                 return element.validationMessage;
         }
     }
     if (element instanceof HTMLInputElement) {
         if (validity.rangeOverflow) {
-            return `Must be less than or equal to ${element.max}.`;
+            return `${getText('Must be less than or equal to')} ${element.max}.`;
         }
         if (validity.rangeUnderflow) {
-            return `Must be greater than or equal to ${element.min}.`;
+            return `${getText('Must be greater than or equal to')} ${element.min}.`;
         }
         if (validity.stepMismatch) {
             const decimalPlaces = getStepDecimalPlaces(element.step);
             if (decimalPlaces > 0) {
-                const place = decimalPlaces === 1 ? 'place' : 'places';
-                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
+                const place = decimalPlaces === 1 ? getText('place') : getText('places');
+                return `${getText('Limited to')} ${getStepDecimalPlaces(element.step)} ${getText('decimal')} ${place}.`;
             }
             else {
                 /*
@@ -794,15 +818,15 @@ const getValidationMessage = (element, patternErrorMessage) => {
                     to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
                     you the number 5 is now invalid and should be 4 or 9.
                 */
-                return `Must be an integer.`;
+                return getText(`Must be an integer.`);
             }
         }
     }
     if (validity.tooShort) {
-        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
+        return `${getText('Must be at least')} ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} ${getText('characters in length.')} `;
     }
     if (validity.valueMissing) {
-        return 'Required.';
+        return getText('Required.');
     }
     if (validity.patternMismatch && patternErrorMessage) {
         return patternErrorMessage;
@@ -958,7 +982,11 @@ const Autocomplete = (p) => {
             return p.options.slice(0, maxShowValues);
         }
         return p.options.slice();
-    }, [p.options]);
+    }, [p.options, p.allowScroll, maxShowValues]);
+    const { getText, language } = useLocalization();
+    const resultsText = React.useMemo(() => {
+        return `${getText("Showing")} ${displayOptions.length.toLocaleString()} ${getText("of")} ${p.options.length.toLocaleString()} ${getText("results")}.`;
+    }, [language, displayOptions, p.options]);
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -1091,12 +1119,7 @@ const Autocomplete = (p) => {
                             React.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, v))));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React.createElement(ListItem, { className: p.listItemClassName },
-                    React.createElement(Text, { tag: "div", italics: true, align: "center" },
-                        "Showing ",
-                        displayOptions.length.toLocaleString(),
-                        " of ",
-                        p.options.length.toLocaleString(),
-                        " results."))))))));
+                    React.createElement(Text, { tag: "div", italics: true, align: "center" }, resultsText))))))));
 };
 
 /** Returns a UID.  Use this instead of a direct call to a library. */
@@ -1335,6 +1358,7 @@ const Backdrop = (p) => {
 const Calendar = (p) => {
     var _a, _b, _c, _d;
     const theme = useThemeSafely();
+    const { getText, language } = useLocalization();
     const cellSize = (_a = p.cellSize) !== null && _a !== void 0 ? _a : '3rem';
     const showTitle = (_b = p.title) !== null && _b !== void 0 ? _b : true;
     const calendarStyles = css({
@@ -1381,6 +1405,11 @@ const Calendar = (p) => {
         }
     });
     const monthStart = new Date(p.year, p.month - 1, 1);
+    const { monthTitle, weekdays } = React.useMemo(() => {
+        const monthTitle = getText(format(monthStart, 'LLLL'));
+        const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => getText(d));
+        return { monthTitle, weekdays };
+    }, [language, monthStart]);
     const days = getDaysInMonth(monthStart);
     const startDayOfWeek = getDay(monthStart);
     const dayEndIndex = startDayOfWeek + days - 1;
@@ -1415,10 +1444,10 @@ const Calendar = (p) => {
     }
     return (React.createElement("div", { id: p.id, className: "calendar" },
         showTitle && ((_d = p.customTitle) !== null && _d !== void 0 ? _d : React.createElement(Text, { larger: true, align: "center" },
-            format(monthStart, 'LLLL'),
+            monthTitle,
             p.yearInTitle && ` ${p.year}`)),
         React.createElement("div", { className: calendarStyles },
-            ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => {
+            weekdays.map(day => {
                 return (React.createElement(Text, { style: { paddingBottom: '0.25rem' }, key: day, smaller: p.smallHeader, noPad: true, align: "center" }, day));
             }),
             cells)));
@@ -1732,18 +1761,30 @@ const ConfirmModal = (props) => {
 			}
 		`}
 	`;
+    const { getText, language } = useLocalization();
+    const { confirmText, cancelText } = React.useMemo(() => {
+        const confirmText = props.confirmText || getText('OK');
+        const cancelText = props.cancelText || getText('Cancel');
+        return { confirmText, cancelText };
+    }, [language, props.confirmText, props.cancelText]);
     return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, props.text),
             React.createElement("div", { className: css({ textAlign: 'center' }) },
-                React.createElement(Button, { className: css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, props.confirmText || 'OK'),
-                React.createElement(Button, { className: css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
+                React.createElement(Button, { className: css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, confirmText),
+                React.createElement(Button, { className: css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, cancelText)))));
 };
 
 const CopyButton = React.forwardRef((props, ref) => {
     const { selector } = props, buttonProps = __rest(props, ["selector"]);
     const [copied, setCopied] = React.useState(false);
-    return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: e => {
+    const { getText, language } = useLocalization();
+    const { copiedText, titleText } = React.useMemo(() => {
+        const copiedText = getText('Copied!');
+        const titleText = props.title || getText('Copy to clipboard');
+        return { copiedText, titleText };
+    }, [language, props.title]);
+    return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? copiedText : titleText, variant: "icon", onBlur: e => {
             var _a;
             setCopied(false);
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -1779,6 +1820,8 @@ const Divider = (p) => {
 const ErrorModal = (props) => {
     const { message } = props;
     const theme = useThemeSafely();
+    const { getText, language } = useLocalization();
+    const heading = React.useMemo(() => getText("Error"), [language]);
     const modalStyles = css `
 		.modalHeader {
 			background-color: ${theme.colors.omg};
@@ -1788,7 +1831,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
+    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('errorModal', modalStyles), heading: heading, closeButton: true, show: props.show, onClick: props.close },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, message))));
 };
@@ -1924,7 +1967,7 @@ const hoverClass = css({
     backgroundColor: 'rgba(0,0,0,0.25) !important'
 });
 const FileUploader = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     const [message, setMessage] = useState(undefined);
     const [canUpload, setCanUpload] = useState(false);
     const [uploading, setUploading] = useState(false);
@@ -1934,15 +1977,19 @@ const FileUploader = (p) => {
     const input = useRef(null);
     const totalFileSize = (_a = files === null || files === void 0 ? void 0 : files.totalBytes) !== null && _a !== void 0 ? _a : 0;
     const theme = useThemeSafely();
-    let filesDisplay = '';
-    if (!message) {
-        if (!(files === null || files === void 0 ? void 0 : files.length)) {
-            filesDisplay = (_b = p.instructionMessage) !== null && _b !== void 0 ? _b : `Click or drag and drop files.`;
-        }
-        else {
-            filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+    const { getText, language } = useLocalization();
+    const filesDisplay = React__default.useMemo(() => {
+        var _a;
+        if (!message) {
+            if (!(files === null || files === void 0 ? void 0 : files.length)) {
+                return (_a = p.instructionMessage) !== null && _a !== void 0 ? _a : getText(`Click or drag and drop files.`);
+            }
+            else {
+                return `${files.length.toLocaleString()} ${getText("file")}${files.length > 1 ? 's' : ''} ${getText("selected")} (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+            }
         }
-    }
+        return "";
+    }, [language, files, p.instructionMessage, totalFileSize, message]);
     const setAllFiles = (inputFiles) => {
         if (input.current && inputFiles === undefined) {
             input.current.value = '';
@@ -1962,7 +2009,7 @@ const FileUploader = (p) => {
             maxBytes: p.maxBytes
         });
     };
-    const showInfoOnPick = (_c = p.showInfoOnPick) !== null && _c !== void 0 ? _c : true;
+    const showInfoOnPick = (_b = p.showInfoOnPick) !== null && _b !== void 0 ? _b : true;
     let infoMessage;
     if (p.infoMessage && (!files || showInfoOnPick)) {
         if (typeof p.infoMessage === 'string') {
@@ -1972,6 +2019,7 @@ const FileUploader = (p) => {
             infoMessage = p.infoMessage;
         }
     }
+    const clearText = getText("Clear");
     return (React__default.createElement(Form, { ref: form, className: css({
             border: theme.controls.border,
             borderStyle: 'dashed',
@@ -2015,7 +2063,7 @@ const FileUploader = (p) => {
             }).catch(err => {
                 var _a;
                 setMessage('failure');
-                setFullFailureMessage(`${(_a = p.failureMessage) !== null && _a !== void 0 ? _a : DEFAULT_FAILURE_MESSAGE}  Error: ${err instanceof Error ? err.message : err}`);
+                setFullFailureMessage(`${(_a = p.failureMessage) !== null && _a !== void 0 ? _a : getText(DEFAULT_FAILURE_MESSAGE)} ${getText("Error")}: ${err instanceof Error ? err.message : err}`);
             }).finally(() => {
                 setUploading(false);
                 setCanUpload(false);
@@ -2061,22 +2109,24 @@ const FileUploader = (p) => {
                 !!(files === null || files === void 0 ? void 0 : files.length) && (React__default.createElement(Button, { onClick: e => {
                         e.stopPropagation();
                         onFilesChange(undefined);
-                    }, className: css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React__default.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
+                    }, className: css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React__default.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, clearText))),
             infoMessage,
             !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default.createElement(InfoPanel, { variant: "error", className: css({ width: '100%' }) },
-                "Invalid files: ",
+                getText("Invalid files"),
+                ": ",
                 files.invalidFiles.map(f => f.name).join(', '),
                 ".")),
             (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default.createElement(InfoPanel, { variant: "error", className: css({ width: '100%' }) },
-                "Max file size exceeded (",
-                getFileSizeDisplay((_d = p.maxBytes) !== null && _d !== void 0 ? _d : 0),
+                getText("Max file size exceeded"),
+                " (",
+                getFileSizeDisplay((_c = p.maxBytes) !== null && _c !== void 0 ? _c : 0),
                 ").")))),
         canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React__default.createElement(Button, { className: css({
-                width: (_e = p.buttonWidth) !== null && _e !== void 0 ? _e : '10rem',
+                width: (_d = p.buttonWidth) !== null && _d !== void 0 ? _d : '10rem',
                 zIndex: 1,
-            }), waiting: uploading, type: "submit", variant: (_f = p.buttonVariant) !== null && _f !== void 0 ? _f : 'primary' }, (_g = p.buttonText) !== null && _g !== void 0 ? _g : 'Upload')),
-        message === 'success' && (React__default.createElement(UploadInfoPanel, { variant: "positive", message: (_h = p.successMessage) !== null && _h !== void 0 ? _h : 'Upload successful.', onClear: () => setMessage(undefined) })),
-        message === 'failure' && (React__default.createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
+            }), waiting: uploading, type: "submit", variant: (_e = p.buttonVariant) !== null && _e !== void 0 ? _e : 'primary' }, (_f = p.buttonText) !== null && _f !== void 0 ? _f : getText('Upload'))),
+        message === 'success' && (React__default.createElement(UploadInfoPanel, { variant: "positive", clearText: clearText, message: (_g = p.successMessage) !== null && _g !== void 0 ? _g : getText('Upload successful.'), onClear: () => setMessage(undefined) })),
+        message === 'failure' && (React__default.createElement(UploadInfoPanel, { variant: "error", clearText: clearText, message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {
     return (React__default.createElement(InfoPanel, { variant: p.variant, className: css({ zIndex: 1 }) },
@@ -2088,7 +2138,7 @@ const UploadInfoPanel = (p) => {
             }), onClick: e => {
                 e.stopPropagation();
                 p.onClear();
-            }, rightIcon: React__default.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
+            }, rightIcon: React__default.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, p.clearText)));
 };
 // OMG this is dumb.  We're sticking with decimals for ease of use.
 // https://stackoverflow.com/questions/40949135/gigabyte-or-gibibyte-1000-or-1024
@@ -2348,7 +2398,8 @@ const DateInput = React.forwardRef((props, ref) => {
         setTextValue(newTextValue);
     }, []);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
-    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, { customError: props.customError, patternErrorMessage: invalidDateMessage });
+    const { getText, language } = useLocalization();
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
     const updateDateErrorMessages = React.useCallback(() => {
         let dateError = '';
         if (dateValue === undefined) {
@@ -2360,19 +2411,20 @@ const DateInput = React.forwardRef((props, ref) => {
         else if (isOutOfRange(dateValue, props.min, props.max)) {
             // out of range
             if (props.min !== undefined && props.max !== undefined) {
-                dateError = `Must be be between ${parseDateString(props.min)} and ${parseDateString(props.max)}.`;
+                dateError = `${getText("Must be be between")} ${parseDateString(props.min)} ${getText("and")} ${parseDateString(props.max)}.`;
             }
             else if (props.min !== undefined) {
-                dateError = `Must be greater than or equal to ${parseDateString(props.min)}.`;
+                dateError = `${getText("Must be greater than or equal to")} ${parseDateString(props.min)}.`;
             }
             else {
-                dateError = `Must be less than or equal to ${parseDateString(props.max)}.`;
+                dateError = `${getText("Must be less than or equal to")} ${parseDateString(props.max)}.`;
             }
         }
         updateErrorMessage(dateError);
-    }, [dateValue, textValue]);
+    }, [dateValue, textValue, language]);
     const [showCalendar, setShowCalendar] = React.useState(false);
     const [calendarDate, setCalendarDate] = React.useState(getCalendarDate(props.value, props.min, props.max));
+    const monthTitle = React.useMemo(() => getText(format(calendarDate, 'LLLL')), [language, calendarDate]);
     // controls the one-time focus set on show
     const needsFocus = React.useRef(false);
     const toggleCalendar = React.useCallback((show) => {
@@ -2473,7 +2525,7 @@ const DateInput = React.forwardRef((props, ref) => {
                     React.createElement(Button, { disabled: !!props.min && isBefore(endOfMonth(addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(addMonths(calendarDate, -1)) },
                         React.createElement(Icon, { id: "pagerLeft" })),
                     React.createElement(Text, { align: "center" },
-                        format(calendarDate, 'LLLL'),
+                        monthTitle,
                         " ",
                         calendarDate.getFullYear()),
                     React.createElement(Button, { disabled: !!props.max && isAfter(startOfMonth(addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(addMonths(calendarDate, 1)) },
@@ -3160,21 +3212,25 @@ const Picker = (props) => {
 };
 
 const Pager = (props) => {
-    var _a;
     const canGoNext = props.canGoNext && props.totalItems > 0;
     const canGoPrevious = props.canGoPrevious && props.totalItems > 0;
-    const dividerText = props.itemDividerText || 'of';
-    let itemText = '';
-    if (props.totalItems > 0) {
-        itemText = `${props.minItem.toLocaleString()}-${props.maxItem.toLocaleString()} ${dividerText} ${props.totalItems.toLocaleString()}`;
-    }
-    else {
-        itemText = props.noResultsText || 'No Results';
-    }
-    let pageText;
-    if (props.pageIndex !== undefined && props.totalPages) {
-        pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : 'Page'} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
-    }
+    const { getText, language } = useLocalization();
+    const { itemText, pageText } = React.useMemo(() => {
+        var _a;
+        const dividerText = props.itemDividerText || getText('of');
+        let itemText = '';
+        if (props.totalItems > 0) {
+            itemText = `${props.minItem.toLocaleString()}-${props.maxItem.toLocaleString()} ${dividerText} ${props.totalItems.toLocaleString()}`;
+        }
+        else {
+            itemText = props.noResultsText || getText('No Results');
+        }
+        let pageText;
+        if (props.pageIndex !== undefined && props.totalPages) {
+            pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : getText('Page')} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
+        }
+        return { itemText, pageText };
+    }, [language, props.totalItems, props.pageIndex, props.totalPages]);
     const theme = useThemeSafely();
     const pagerStyles = css `
 		display: grid;
@@ -3218,23 +3274,37 @@ const Pager = (props) => {
 };
 
 const BoundMemoryPager = (p) => {
-    var _a, _b, _c;
+    var _a;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
-    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
-            React.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+    const { getText, language } = useLocalization();
+    const { limitText, sortText } = React.useMemo(() => {
+        var _a, _b;
+        const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
+        const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
+        return { limitText, sortText };
+    }, [language, p.limitText, p.sortText]);
+    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React.createElement(Label, { text: limitText, orientation: "horizontal" },
+            React.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React.createElement(Label, { text: sortText, orientation: "horizontalReverse" },
+            React.createElement(Picker, { value: (_a = pager.sort) !== null && _a !== void 0 ? _a : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
         } })));
 };
 
 const BoundStaticPager = (p) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const { result, showPageText } = p, rest = __rest(p, ["result", "showPageText"]);
+    const { getText, language } = useLocalization();
+    const { limitText, sortText } = React.useMemo(() => {
+        var _a, _b;
+        const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
+        const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
+        return { limitText, sortText };
+    }, [language, p.limitText, p.sortText]);
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
-    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? result.page : undefined, totalPages: showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
-            React.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onValueChange: v => {
+    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? result.page : undefined, totalPages: showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React.createElement(Label, { text: limitText, orientation: "horizontal" },
+            React.createElement(Picker, { value: (_a = result.limit) !== null && _a !== void 0 ? _a : 1, options: (_b = p.limitOptions) !== null && _b !== void 0 ? _b : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React.createElement(Label, { text: sortText, orientation: "horizontalReverse" },
+            React.createElement(Picker, { value: (_c = p.sort) !== null && _c !== void 0 ? _c : '', options: (_d = p.sortOptions) !== null && _d !== void 0 ? _d : [], onValueChange: v => {
                     var _a;
                     (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
                 } }))) : undefined, page: d => {
@@ -3847,7 +3917,7 @@ const HandleText = (p) => {
     const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
     const renderValueLeft = useMemo(() => {
         return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
-    }, [p.renderValueWidth]);
+    }, [p.renderValueWidth, p.sliderHandleSize]);
     const [flipText, setFlipText] = useState(false);
     const offset = '2px';
     useEffect(() => {
@@ -4872,5 +4942,38 @@ class AutocompleteEntityController {
     }
 }
 
-export { Accordian, Autocomplete, AutocompleteController, AutocompleteEntityController, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, ItemPager, Label, Link, List, ListItem, Modal, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, Popover, ProgressBar, SearchBox, Slider, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+var decimal=["decimal","décimale"];var place=["lugar","lieu"];var places=["lugares","lieux"];var file=["archivo","fichier"];var selected=["seleccionado","choisi"];var Upload=["Subir","Télécharger"];var Clear=["Cerrar","Fermer"];var Showing=["Mostrando","Affichage de"];var of=["de","sur"];var results=["resultados","résultats"];var Page=["Página","Page"];var Limit=["Límite","Limite"];var Sort=["Ordenar","Trier"];var January=["Enero","Janvier"];var February=["Febrero","Février"];var March=["Marzo","Mars"];var April=["Abril","Avril"];var May=["Mayo","Mai"];var June=["Junio","Juin"];var July=["Julio","Juillet"];var August=["Agosto","Août"];var September=["Septiembre","Septembre"];var October=["Octubre","Octobre"];var November=["Noviembre","Novembre"];var December=["Diciembre","Décembre"];var Sun=["Dom","Dim"];var Mon=["Lun","Lun"];var Tue=["Mar","Mar"];var Wed=["Mié","Mer"];var Thu=["Jue","Jeu"];var Fri=["Vie","Ven"];var Sat=["Sáb","Sam"];var OK=["Aceptar","Accepter"];var Cancel=["Cancelar","Annuler"];var strings = {"Required.":["Requerido.","Requis."],"Must be at least":["Debe ser al menos","Doit être au moins"],"characters in length.":["caracteres de longitud.","caractères de longueur."],"Must be an integer.":["Debe ser un número entero.","Doit être un entier."],"Limited to":["Limitado a","Limité à"],decimal:decimal,place:place,places:places,"Must be greater than or equal to":["Debe ser mayor o igual a","Doit être supérieur ou égal à"],"Must be less than or equal to":["Debe ser menor o igual a","Doit être inférieur ou égal à"],"Invalid email.":["Correo electrónico no válido.","Email invalide."],"Invalid URL.":["URL no válida.","URL non valide."],"Click or drag and drop files.":["Haga clic o arrastre y suelte archivos.","Cliquez ou faites glisser et déposez les fichiers."],file:file,selected:selected,"Upload failed.":["Error en la carga.","Le téléchargement a échoué."],Upload:Upload,"Upload successful.":["Carga exitosa","Téléchargement réussi."],"Invalid files":["Archivos no válidos","Fichiers invalides"],"Max file size exceeded":["Se ha excedido el tamaño máximo de archivo","La taille maximale du fichier a été dépassée"],"Error":["Error","Erreur"],Clear:Clear,Showing:Showing,of:of,results:results,"No Results":["No Hay Resultados","Aucun Résultat"],Page:Page,Limit:Limit,Sort:Sort,January:January,February:February,March:March,April:April,May:May,June:June,July:July,August:August,September:September,October:October,November:November,December:December,Sun:Sun,Mon:Mon,Tue:Tue,Wed:Wed,Thu:Thu,Fri:Fri,Sat:Sat,OK:OK,Cancel:Cancel,"Copied!":["¡Copiado!","Copié!"],"Copy to clipboard":["Copiar al portapapeles","Copier dans le presse-papier"]};
+
+const LocalizationProvider = (p) => {
+    var _a;
+    const log = useLogger('LocalizationProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    const stringsDb = strings;
+    return (React__default.createElement(LocalizationContext.Provider, { value: {
+            language: p.language,
+            getText: (text) => {
+                if (!text) {
+                    return '';
+                }
+                if (!isNaN(parseInt(text))) {
+                    return text;
+                }
+                const wordArray = stringsDb[text];
+                if (!wordArray) {
+                    log(`No localization data exists for "${text}".`);
+                }
+                if (p.language === StyleGuideLanguage.English) {
+                    return text;
+                }
+                const languageIndex = p.language - 1;
+                const translation = wordArray === null || wordArray === void 0 ? void 0 : wordArray[languageIndex];
+                if (translation) {
+                    return translation;
+                }
+                log(`No ${StyleGuideLanguage[p.language]} translations exist for "${text}".`);
+                return text;
+            }
+        } }, p.children));
+};
+
+export { Accordian, Autocomplete, AutocompleteController, AutocompleteEntityController, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, ItemPager, Label, Link, List, ListItem, LocalizationProvider, Modal, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, Popover, ProgressBar, SearchBox, Slider, StyleGuideLanguage, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
 //# sourceMappingURL=index.esm.js.map

package/index.js

@@ -749,25 +749,49 @@ const tryClampDecimals = (value, step = 0) => {
     return parseFloat(value.toFixed(decimals));
 };
 
+exports.StyleGuideLanguage = void 0;
+(function (StyleGuideLanguage) {
+    StyleGuideLanguage[StyleGuideLanguage["English"] = 0] = "English";
+    StyleGuideLanguage[StyleGuideLanguage["Spanish"] = 1] = "Spanish";
+    StyleGuideLanguage[StyleGuideLanguage["French"] = 2] = "French";
+})(exports.StyleGuideLanguage || (exports.StyleGuideLanguage = {}));
+
+const LocalizationContext = React.createContext({
+    language: exports.StyleGuideLanguage.English,
+    getText: text => text
+});
+
+const useLocalization = () => {
+    const localization = React.useContext(LocalizationContext);
+    if (!localization) {
+        return {
+            language: exports.StyleGuideLanguage.English,
+            getText: (text) => text
+        };
+    }
+    return localization;
+};
+
 /** Common state handling for displaying validation messages with inputs. */
 const useInputValidationMessage = (ref, props) => {
     const [validationError, setValidationError] = React.useState('');
+    const { getText, language } = useLocalization();
     const updateErrorMessage = (customErrorOverride) => {
         var _a;
         const customError = customErrorOverride || props.customError || '';
         // set it OR clear it.  either way, update it.
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
-        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+        setValidationError(customError || getValidationMessage(ref.current, getText, props.patternErrorMessage));
     };
     React.useEffect(() => {
         updateErrorMessage();
-    }, [props.customError]);
+    }, [props.customError, language]);
     React.useEffect(() => {
         updateErrorMessage();
-    }, []);
+    }, [language]);
     return [validationError, updateErrorMessage];
 };
-const getValidationMessage = (element, patternErrorMessage) => {
+const getValidationMessage = (element, getText, patternErrorMessage) => {
     var _a;
     if (!element) {
         return '';
@@ -782,25 +806,25 @@ const getValidationMessage = (element, patternErrorMessage) => {
     if (validity.typeMismatch) {
         switch (element.type) {
             case 'url':
-                return `Invalid URL.`;
+                return getText(`Invalid URL.`);
             case 'email':
-                return `Invalid email.`;
+                return getText(`Invalid email.`);
             default:
                 return element.validationMessage;
         }
     }
     if (element instanceof HTMLInputElement) {
         if (validity.rangeOverflow) {
-            return `Must be less than or equal to ${element.max}.`;
+            return `${getText('Must be less than or equal to')} ${element.max}.`;
         }
         if (validity.rangeUnderflow) {
-            return `Must be greater than or equal to ${element.min}.`;
+            return `${getText('Must be greater than or equal to')} ${element.min}.`;
         }
         if (validity.stepMismatch) {
             const decimalPlaces = getStepDecimalPlaces(element.step);
             if (decimalPlaces > 0) {
-                const place = decimalPlaces === 1 ? 'place' : 'places';
-                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
+                const place = decimalPlaces === 1 ? getText('place') : getText('places');
+                return `${getText('Limited to')} ${getStepDecimalPlaces(element.step)} ${getText('decimal')} ${place}.`;
             }
             else {
                 /*
@@ -812,15 +836,15 @@ const getValidationMessage = (element, patternErrorMessage) => {
                     to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
                     you the number 5 is now invalid and should be 4 or 9.
                 */
-                return `Must be an integer.`;
+                return getText(`Must be an integer.`);
             }
         }
     }
     if (validity.tooShort) {
-        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
+        return `${getText('Must be at least')} ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} ${getText('characters in length.')} `;
     }
     if (validity.valueMissing) {
-        return 'Required.';
+        return getText('Required.');
     }
     if (validity.patternMismatch && patternErrorMessage) {
         return patternErrorMessage;
@@ -976,7 +1000,11 @@ const Autocomplete = (p) => {
             return p.options.slice(0, maxShowValues);
         }
         return p.options.slice();
-    }, [p.options]);
+    }, [p.options, p.allowScroll, maxShowValues]);
+    const { getText, language } = useLocalization();
+    const resultsText = React__namespace.useMemo(() => {
+        return `${getText("Showing")} ${displayOptions.length.toLocaleString()} ${getText("of")} ${p.options.length.toLocaleString()} ${getText("results")}.`;
+    }, [language, displayOptions, p.options]);
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -1109,12 +1137,7 @@ const Autocomplete = (p) => {
                             React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, v))));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React__namespace.createElement(ListItem, { className: p.listItemClassName },
-                    React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" },
-                        "Showing ",
-                        displayOptions.length.toLocaleString(),
-                        " of ",
-                        p.options.length.toLocaleString(),
-                        " results."))))))));
+                    React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" }, resultsText))))))));
 };
 
 /** Returns a UID.  Use this instead of a direct call to a library. */
@@ -1353,6 +1376,7 @@ const Backdrop = (p) => {
 const Calendar = (p) => {
     var _a, _b, _c, _d;
     const theme = useThemeSafely();
+    const { getText, language } = useLocalization();
     const cellSize = (_a = p.cellSize) !== null && _a !== void 0 ? _a : '3rem';
     const showTitle = (_b = p.title) !== null && _b !== void 0 ? _b : true;
     const calendarStyles = css.css({
@@ -1399,6 +1423,11 @@ const Calendar = (p) => {
         }
     });
     const monthStart = new Date(p.year, p.month - 1, 1);
+    const { monthTitle, weekdays } = React__namespace.useMemo(() => {
+        const monthTitle = getText(dateFns.format(monthStart, 'LLLL'));
+        const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => getText(d));
+        return { monthTitle, weekdays };
+    }, [language, monthStart]);
     const days = dateFns.getDaysInMonth(monthStart);
     const startDayOfWeek = dateFns.getDay(monthStart);
     const dayEndIndex = startDayOfWeek + days - 1;
@@ -1433,10 +1462,10 @@ const Calendar = (p) => {
     }
     return (React__namespace.createElement("div", { id: p.id, className: "calendar" },
         showTitle && ((_d = p.customTitle) !== null && _d !== void 0 ? _d : React__namespace.createElement(Text, { larger: true, align: "center" },
-            dateFns.format(monthStart, 'LLLL'),
+            monthTitle,
             p.yearInTitle && ` ${p.year}`)),
         React__namespace.createElement("div", { className: calendarStyles },
-            ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => {
+            weekdays.map(day => {
                 return (React__namespace.createElement(Text, { style: { paddingBottom: '0.25rem' }, key: day, smaller: p.smallHeader, noPad: true, align: "center" }, day));
             }),
             cells)));
@@ -1750,18 +1779,30 @@ const ConfirmModal = (props) => {
 			}
 		`}
 	`;
+    const { getText, language } = useLocalization();
+    const { confirmText, cancelText } = React__namespace.useMemo(() => {
+        const confirmText = props.confirmText || getText('OK');
+        const cancelText = props.cancelText || getText('Cancel');
+        return { confirmText, cancelText };
+    }, [language, props.confirmText, props.cancelText]);
     return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, props.text),
             React__namespace.createElement("div", { className: css.css({ textAlign: 'center' }) },
-                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, props.confirmText || 'OK'),
-                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
+                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, confirmText),
+                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, cancelText)))));
 };
 
 const CopyButton = React__namespace.forwardRef((props, ref) => {
     const { selector } = props, buttonProps = __rest(props, ["selector"]);
     const [copied, setCopied] = React__namespace.useState(false);
-    return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: e => {
+    const { getText, language } = useLocalization();
+    const { copiedText, titleText } = React__namespace.useMemo(() => {
+        const copiedText = getText('Copied!');
+        const titleText = props.title || getText('Copy to clipboard');
+        return { copiedText, titleText };
+    }, [language, props.title]);
+    return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? copiedText : titleText, variant: "icon", onBlur: e => {
             var _a;
             setCopied(false);
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -1797,6 +1838,8 @@ const Divider = (p) => {
 const ErrorModal = (props) => {
     const { message } = props;
     const theme = useThemeSafely();
+    const { getText, language } = useLocalization();
+    const heading = React__namespace.useMemo(() => getText("Error"), [language]);
     const modalStyles = css.css `
 		.modalHeader {
 			background-color: ${theme.colors.omg};
@@ -1806,7 +1849,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: heading, closeButton: true, show: props.show, onClick: props.close },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, message))));
 };
@@ -1942,7 +1985,7 @@ const hoverClass = css.css({
     backgroundColor: 'rgba(0,0,0,0.25) !important'
 });
 const FileUploader = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     const [message, setMessage] = React.useState(undefined);
     const [canUpload, setCanUpload] = React.useState(false);
     const [uploading, setUploading] = React.useState(false);
@@ -1952,15 +1995,19 @@ const FileUploader = (p) => {
     const input = React.useRef(null);
     const totalFileSize = (_a = files === null || files === void 0 ? void 0 : files.totalBytes) !== null && _a !== void 0 ? _a : 0;
     const theme = useThemeSafely();
-    let filesDisplay = '';
-    if (!message) {
-        if (!(files === null || files === void 0 ? void 0 : files.length)) {
-            filesDisplay = (_b = p.instructionMessage) !== null && _b !== void 0 ? _b : `Click or drag and drop files.`;
-        }
-        else {
-            filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+    const { getText, language } = useLocalization();
+    const filesDisplay = React.useMemo(() => {
+        var _a;
+        if (!message) {
+            if (!(files === null || files === void 0 ? void 0 : files.length)) {
+                return (_a = p.instructionMessage) !== null && _a !== void 0 ? _a : getText(`Click or drag and drop files.`);
+            }
+            else {
+                return `${files.length.toLocaleString()} ${getText("file")}${files.length > 1 ? 's' : ''} ${getText("selected")} (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+            }
         }
-    }
+        return "";
+    }, [language, files, p.instructionMessage, totalFileSize, message]);
     const setAllFiles = (inputFiles) => {
         if (input.current && inputFiles === undefined) {
             input.current.value = '';
@@ -1980,7 +2027,7 @@ const FileUploader = (p) => {
             maxBytes: p.maxBytes
         });
     };
-    const showInfoOnPick = (_c = p.showInfoOnPick) !== null && _c !== void 0 ? _c : true;
+    const showInfoOnPick = (_b = p.showInfoOnPick) !== null && _b !== void 0 ? _b : true;
     let infoMessage;
     if (p.infoMessage && (!files || showInfoOnPick)) {
         if (typeof p.infoMessage === 'string') {
@@ -1990,6 +2037,7 @@ const FileUploader = (p) => {
             infoMessage = p.infoMessage;
         }
     }
+    const clearText = getText("Clear");
     return (React.createElement(Form, { ref: form, className: css.css({
             border: theme.controls.border,
             borderStyle: 'dashed',
@@ -2033,7 +2081,7 @@ const FileUploader = (p) => {
             }).catch(err => {
                 var _a;
                 setMessage('failure');
-                setFullFailureMessage(`${(_a = p.failureMessage) !== null && _a !== void 0 ? _a : DEFAULT_FAILURE_MESSAGE}  Error: ${err instanceof Error ? err.message : err}`);
+                setFullFailureMessage(`${(_a = p.failureMessage) !== null && _a !== void 0 ? _a : getText(DEFAULT_FAILURE_MESSAGE)} ${getText("Error")}: ${err instanceof Error ? err.message : err}`);
             }).finally(() => {
                 setUploading(false);
                 setCanUpload(false);
@@ -2079,22 +2127,24 @@ const FileUploader = (p) => {
                 !!(files === null || files === void 0 ? void 0 : files.length) && (React.createElement(Button, { onClick: e => {
                         e.stopPropagation();
                         onFilesChange(undefined);
-                    }, className: css.css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
+                    }, className: css.css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, clearText))),
             infoMessage,
             !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React.createElement(InfoPanel, { variant: "error", className: css.css({ width: '100%' }) },
-                "Invalid files: ",
+                getText("Invalid files"),
+                ": ",
                 files.invalidFiles.map(f => f.name).join(', '),
                 ".")),
             (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React.createElement(InfoPanel, { variant: "error", className: css.css({ width: '100%' }) },
-                "Max file size exceeded (",
-                getFileSizeDisplay((_d = p.maxBytes) !== null && _d !== void 0 ? _d : 0),
+                getText("Max file size exceeded"),
+                " (",
+                getFileSizeDisplay((_c = p.maxBytes) !== null && _c !== void 0 ? _c : 0),
                 ").")))),
         canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React.createElement(Button, { className: css.css({
-                width: (_e = p.buttonWidth) !== null && _e !== void 0 ? _e : '10rem',
+                width: (_d = p.buttonWidth) !== null && _d !== void 0 ? _d : '10rem',
                 zIndex: 1,
-            }), waiting: uploading, type: "submit", variant: (_f = p.buttonVariant) !== null && _f !== void 0 ? _f : 'primary' }, (_g = p.buttonText) !== null && _g !== void 0 ? _g : 'Upload')),
-        message === 'success' && (React.createElement(UploadInfoPanel, { variant: "positive", message: (_h = p.successMessage) !== null && _h !== void 0 ? _h : 'Upload successful.', onClear: () => setMessage(undefined) })),
-        message === 'failure' && (React.createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
+            }), waiting: uploading, type: "submit", variant: (_e = p.buttonVariant) !== null && _e !== void 0 ? _e : 'primary' }, (_f = p.buttonText) !== null && _f !== void 0 ? _f : getText('Upload'))),
+        message === 'success' && (React.createElement(UploadInfoPanel, { variant: "positive", clearText: clearText, message: (_g = p.successMessage) !== null && _g !== void 0 ? _g : getText('Upload successful.'), onClear: () => setMessage(undefined) })),
+        message === 'failure' && (React.createElement(UploadInfoPanel, { variant: "error", clearText: clearText, message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {
     return (React.createElement(InfoPanel, { variant: p.variant, className: css.css({ zIndex: 1 }) },
@@ -2106,7 +2156,7 @@ const UploadInfoPanel = (p) => {
             }), onClick: e => {
                 e.stopPropagation();
                 p.onClear();
-            }, rightIcon: React.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
+            }, rightIcon: React.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, p.clearText)));
 };
 // OMG this is dumb.  We're sticking with decimals for ease of use.
 // https://stackoverflow.com/questions/40949135/gigabyte-or-gibibyte-1000-or-1024
@@ -2366,7 +2416,8 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
         setTextValue(newTextValue);
     }, []);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, { customError: props.customError, patternErrorMessage: invalidDateMessage });
+    const { getText, language } = useLocalization();
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
     const updateDateErrorMessages = React__namespace.useCallback(() => {
         let dateError = '';
         if (dateValue === undefined) {
@@ -2378,19 +2429,20 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
         else if (isOutOfRange(dateValue, props.min, props.max)) {
             // out of range
             if (props.min !== undefined && props.max !== undefined) {
-                dateError = `Must be be between ${parseDateString(props.min)} and ${parseDateString(props.max)}.`;
+                dateError = `${getText("Must be be between")} ${parseDateString(props.min)} ${getText("and")} ${parseDateString(props.max)}.`;
             }
             else if (props.min !== undefined) {
-                dateError = `Must be greater than or equal to ${parseDateString(props.min)}.`;
+                dateError = `${getText("Must be greater than or equal to")} ${parseDateString(props.min)}.`;
             }
             else {
-                dateError = `Must be less than or equal to ${parseDateString(props.max)}.`;
+                dateError = `${getText("Must be less than or equal to")} ${parseDateString(props.max)}.`;
             }
         }
         updateErrorMessage(dateError);
-    }, [dateValue, textValue]);
+    }, [dateValue, textValue, language]);
     const [showCalendar, setShowCalendar] = React__namespace.useState(false);
     const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(props.value, props.min, props.max));
+    const monthTitle = React__namespace.useMemo(() => getText(dateFns.format(calendarDate, 'LLLL')), [language, calendarDate]);
     // controls the one-time focus set on show
     const needsFocus = React__namespace.useRef(false);
     const toggleCalendar = React__namespace.useCallback((show) => {
@@ -2491,7 +2543,7 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
                     React__namespace.createElement(Button, { disabled: !!props.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
                         React__namespace.createElement(Icon, { id: "pagerLeft" })),
                     React__namespace.createElement(Text, { align: "center" },
-                        dateFns.format(calendarDate, 'LLLL'),
+                        monthTitle,
                         " ",
                         calendarDate.getFullYear()),
                     React__namespace.createElement(Button, { disabled: !!props.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
@@ -3178,21 +3230,25 @@ const Picker = (props) => {
 };
 
 const Pager = (props) => {
-    var _a;
     const canGoNext = props.canGoNext && props.totalItems > 0;
     const canGoPrevious = props.canGoPrevious && props.totalItems > 0;
-    const dividerText = props.itemDividerText || 'of';
-    let itemText = '';
-    if (props.totalItems > 0) {
-        itemText = `${props.minItem.toLocaleString()}-${props.maxItem.toLocaleString()} ${dividerText} ${props.totalItems.toLocaleString()}`;
-    }
-    else {
-        itemText = props.noResultsText || 'No Results';
-    }
-    let pageText;
-    if (props.pageIndex !== undefined && props.totalPages) {
-        pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : 'Page'} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
-    }
+    const { getText, language } = useLocalization();
+    const { itemText, pageText } = React__namespace.useMemo(() => {
+        var _a;
+        const dividerText = props.itemDividerText || getText('of');
+        let itemText = '';
+        if (props.totalItems > 0) {
+            itemText = `${props.minItem.toLocaleString()}-${props.maxItem.toLocaleString()} ${dividerText} ${props.totalItems.toLocaleString()}`;
+        }
+        else {
+            itemText = props.noResultsText || getText('No Results');
+        }
+        let pageText;
+        if (props.pageIndex !== undefined && props.totalPages) {
+            pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : getText('Page')} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
+        }
+        return { itemText, pageText };
+    }, [language, props.totalItems, props.pageIndex, props.totalPages]);
     const theme = useThemeSafely();
     const pagerStyles = css.css `
 		display: grid;
@@ -3236,23 +3292,37 @@ const Pager = (props) => {
 };
 
 const BoundMemoryPager = (p) => {
-    var _a, _b, _c;
+    var _a;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
-    return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+    const { getText, language } = useLocalization();
+    const { limitText, sortText } = React__namespace.useMemo(() => {
+        var _a, _b;
+        const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
+        const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
+        return { limitText, sortText };
+    }, [language, p.limitText, p.sortText]);
+    return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: limitText, orientation: "horizontal" },
+            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: sortText, orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_a = pager.sort) !== null && _a !== void 0 ? _a : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
         } })));
 };
 
 const BoundStaticPager = (p) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const { result, showPageText } = p, rest = __rest(p, ["result", "showPageText"]);
+    const { getText, language } = useLocalization();
+    const { limitText, sortText } = React__namespace.useMemo(() => {
+        var _a, _b;
+        const limitText = (_a = p.limitText) !== null && _a !== void 0 ? _a : getText("Limit");
+        const sortText = (_b = p.sortText) !== null && _b !== void 0 ? _b : getText("Sort");
+        return { limitText, sortText };
+    }, [language, p.limitText, p.sortText]);
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
-    return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? result.page : undefined, totalPages: showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onValueChange: v => {
+    return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? result.page : undefined, totalPages: showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: limitText, orientation: "horizontal" },
+            React__namespace.createElement(Picker, { value: (_a = result.limit) !== null && _a !== void 0 ? _a : 1, options: (_b = p.limitOptions) !== null && _b !== void 0 ? _b : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: sortText, orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_c = p.sort) !== null && _c !== void 0 ? _c : '', options: (_d = p.sortOptions) !== null && _d !== void 0 ? _d : [], onValueChange: v => {
                     var _a;
                     (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
                 } }))) : undefined, page: d => {
@@ -3865,7 +3935,7 @@ const HandleText = (p) => {
     const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
     const renderValueLeft = React.useMemo(() => {
         return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
-    }, [p.renderValueWidth]);
+    }, [p.renderValueWidth, p.sliderHandleSize]);
     const [flipText, setFlipText] = React.useState(false);
     const offset = '2px';
     React.useEffect(() => {
@@ -4890,6 +4960,39 @@ class AutocompleteEntityController {
     }
 }
 
+var decimal=["decimal","décimale"];var place=["lugar","lieu"];var places=["lugares","lieux"];var file=["archivo","fichier"];var selected=["seleccionado","choisi"];var Upload=["Subir","Télécharger"];var Clear=["Cerrar","Fermer"];var Showing=["Mostrando","Affichage de"];var of=["de","sur"];var results=["resultados","résultats"];var Page=["Página","Page"];var Limit=["Límite","Limite"];var Sort=["Ordenar","Trier"];var January=["Enero","Janvier"];var February=["Febrero","Février"];var March=["Marzo","Mars"];var April=["Abril","Avril"];var May=["Mayo","Mai"];var June=["Junio","Juin"];var July=["Julio","Juillet"];var August=["Agosto","Août"];var September=["Septiembre","Septembre"];var October=["Octubre","Octobre"];var November=["Noviembre","Novembre"];var December=["Diciembre","Décembre"];var Sun=["Dom","Dim"];var Mon=["Lun","Lun"];var Tue=["Mar","Mar"];var Wed=["Mié","Mer"];var Thu=["Jue","Jeu"];var Fri=["Vie","Ven"];var Sat=["Sáb","Sam"];var OK=["Aceptar","Accepter"];var Cancel=["Cancelar","Annuler"];var strings = {"Required.":["Requerido.","Requis."],"Must be at least":["Debe ser al menos","Doit être au moins"],"characters in length.":["caracteres de longitud.","caractères de longueur."],"Must be an integer.":["Debe ser un número entero.","Doit être un entier."],"Limited to":["Limitado a","Limité à"],decimal:decimal,place:place,places:places,"Must be greater than or equal to":["Debe ser mayor o igual a","Doit être supérieur ou égal à"],"Must be less than or equal to":["Debe ser menor o igual a","Doit être inférieur ou égal à"],"Invalid email.":["Correo electrónico no válido.","Email invalide."],"Invalid URL.":["URL no válida.","URL non valide."],"Click or drag and drop files.":["Haga clic o arrastre y suelte archivos.","Cliquez ou faites glisser et déposez les fichiers."],file:file,selected:selected,"Upload failed.":["Error en la carga.","Le téléchargement a échoué."],Upload:Upload,"Upload successful.":["Carga exitosa","Téléchargement réussi."],"Invalid files":["Archivos no válidos","Fichiers invalides"],"Max file size exceeded":["Se ha excedido el tamaño máximo de archivo","La taille maximale du fichier a été dépassée"],"Error":["Error","Erreur"],Clear:Clear,Showing:Showing,of:of,results:results,"No Results":["No Hay Resultados","Aucun Résultat"],Page:Page,Limit:Limit,Sort:Sort,January:January,February:February,March:March,April:April,May:May,June:June,July:July,August:August,September:September,October:October,November:November,December:December,Sun:Sun,Mon:Mon,Tue:Tue,Wed:Wed,Thu:Thu,Fri:Fri,Sat:Sat,OK:OK,Cancel:Cancel,"Copied!":["¡Copiado!","Copié!"],"Copy to clipboard":["Copiar al portapapeles","Copier dans le presse-papier"]};
+
+const LocalizationProvider = (p) => {
+    var _a;
+    const log = useLogger('LocalizationProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    const stringsDb = strings;
+    return (React.createElement(LocalizationContext.Provider, { value: {
+            language: p.language,
+            getText: (text) => {
+                if (!text) {
+                    return '';
+                }
+                if (!isNaN(parseInt(text))) {
+                    return text;
+                }
+                const wordArray = stringsDb[text];
+                if (!wordArray) {
+                    log(`No localization data exists for "${text}".`);
+                }
+                if (p.language === exports.StyleGuideLanguage.English) {
+                    return text;
+                }
+                const languageIndex = p.language - 1;
+                const translation = wordArray === null || wordArray === void 0 ? void 0 : wordArray[languageIndex];
+                if (translation) {
+                    return translation;
+                }
+                log(`No ${exports.StyleGuideLanguage[p.language]} translations exist for "${text}".`);
+                return text;
+            }
+        } }, p.children));
+};
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.AutocompleteController = AutocompleteController;
@@ -4923,6 +5026,7 @@ exports.Label = Label;
 exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
+exports.LocalizationProvider = LocalizationProvider;
 exports.Modal = Modal;
 exports.Nav = Nav;
 exports.NormalizeCss = NormalizeCss;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "10.0.4",
+    "version": "10.0.5",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",