@mackin.com/styleguide 10.1.0 → 10.1.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

@@ -982,11 +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]);
+    }, [language, displayOptions, p.options]);
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -1409,7 +1409,7 @@ const Calendar = (p) => {
         const monthTitle = getText(format(monthStart, 'LLLL'));
         const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => getText(d));
         return { monthTitle, weekdays };
-    }, [language]);
+    }, [language, monthStart]);
     const days = getDaysInMonth(monthStart);
     const startDayOfWeek = getDay(monthStart);
     const dayEndIndex = startDayOfWeek + days - 1;
@@ -1766,7 +1766,7 @@ const ConfirmModal = (props) => {
         const confirmText = props.confirmText || getText('OK');
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
-    }, [language]);
+    }, [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),
@@ -1783,7 +1783,7 @@ const CopyButton = React.forwardRef((props, ref) => {
         const copiedText = getText('Copied!');
         const titleText = props.title || getText('Copy to clipboard');
         return { copiedText, titleText };
-    }, [language]);
+    }, [language, props.title]);
     return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? copiedText : titleText, variant: "icon", onBlur: e => {
             var _a;
             setCopied(false);
@@ -1989,7 +1989,7 @@ const FileUploader = (p) => {
             }
         }
         return "";
-    }, [language]);
+    }, [language, files, p.instructionMessage, totalFileSize, message]);
     const setAllFiles = (inputFiles) => {
         if (input.current && inputFiles === undefined) {
             input.current.value = '';
@@ -2424,7 +2424,7 @@ const DateInput = React.forwardRef((props, ref) => {
     }, [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]);
+    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) => {
@@ -3230,7 +3230,7 @@ const Pager = (props) => {
             pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : getText('Page')} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
         }
         return { itemText, pageText };
-    }, [language]);
+    }, [language, props.totalItems, props.pageIndex, props.totalPages]);
     const theme = useThemeSafely();
     const pagerStyles = css `
 		display: grid;
@@ -3282,7 +3282,7 @@ const BoundMemoryPager = (p) => {
         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]);
+    }, [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 => {
@@ -3299,7 +3299,7 @@ const BoundStaticPager = (p) => {
         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]);
+    }, [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: limitText, orientation: "horizontal" },
@@ -3917,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(() => {
@@ -4942,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,15 +749,15 @@ const tryClampDecimals = (value, step = 0) => {
     return parseFloat(value.toFixed(decimals));
 };
 
-var StyleGuideLanguage;
+exports.StyleGuideLanguage = void 0;
 (function (StyleGuideLanguage) {
     StyleGuideLanguage[StyleGuideLanguage["English"] = 0] = "English";
     StyleGuideLanguage[StyleGuideLanguage["Spanish"] = 1] = "Spanish";
     StyleGuideLanguage[StyleGuideLanguage["French"] = 2] = "French";
-})(StyleGuideLanguage || (StyleGuideLanguage = {}));
+})(exports.StyleGuideLanguage || (exports.StyleGuideLanguage = {}));
 
 const LocalizationContext = React.createContext({
-    language: StyleGuideLanguage.English,
+    language: exports.StyleGuideLanguage.English,
     getText: text => text
 });
 
@@ -765,7 +765,7 @@ const useLocalization = () => {
     const localization = React.useContext(LocalizationContext);
     if (!localization) {
         return {
-            language: StyleGuideLanguage.English,
+            language: exports.StyleGuideLanguage.English,
             getText: (text) => text
         };
     }
@@ -1000,11 +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]);
+    }, [language, displayOptions, p.options]);
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -1427,7 +1427,7 @@ const Calendar = (p) => {
         const monthTitle = getText(dateFns.format(monthStart, 'LLLL'));
         const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => getText(d));
         return { monthTitle, weekdays };
-    }, [language]);
+    }, [language, monthStart]);
     const days = dateFns.getDaysInMonth(monthStart);
     const startDayOfWeek = dateFns.getDay(monthStart);
     const dayEndIndex = startDayOfWeek + days - 1;
@@ -1784,7 +1784,7 @@ const ConfirmModal = (props) => {
         const confirmText = props.confirmText || getText('OK');
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
-    }, [language]);
+    }, [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),
@@ -1801,7 +1801,7 @@ const CopyButton = React__namespace.forwardRef((props, ref) => {
         const copiedText = getText('Copied!');
         const titleText = props.title || getText('Copy to clipboard');
         return { copiedText, titleText };
-    }, [language]);
+    }, [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);
@@ -2007,7 +2007,7 @@ const FileUploader = (p) => {
             }
         }
         return "";
-    }, [language]);
+    }, [language, files, p.instructionMessage, totalFileSize, message]);
     const setAllFiles = (inputFiles) => {
         if (input.current && inputFiles === undefined) {
             input.current.value = '';
@@ -2442,7 +2442,7 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
     }, [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]);
+    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) => {
@@ -3248,7 +3248,7 @@ const Pager = (props) => {
             pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : getText('Page')} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
         }
         return { itemText, pageText };
-    }, [language]);
+    }, [language, props.totalItems, props.pageIndex, props.totalPages]);
     const theme = useThemeSafely();
     const pagerStyles = css.css `
 		display: grid;
@@ -3300,7 +3300,7 @@ const BoundMemoryPager = (p) => {
         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]);
+    }, [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 => {
@@ -3317,7 +3317,7 @@ const BoundStaticPager = (p) => {
         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]);
+    }, [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: limitText, orientation: "horizontal" },
@@ -3935,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(() => {
@@ -4960,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;
@@ -4993,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.1.0",
+    "version": "10.1.5",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",