@jobber/components 9.7.0 → 9.9.0

package/dist/Combobox/Combobox.messages.d.ts

@@ -0,0 +1,34 @@
+export declare const comboboxMessages: {
+    noResults: {
+        en: string;
+        es: string;
+    };
+    clearSelection: {
+        en: string;
+        es: string;
+    };
+    openOptions: {
+        en: string;
+        es: string;
+    };
+    loadingOptions: {
+        en: string;
+        es: string;
+    };
+    "Remove {label}": {
+        en: string;
+        es: string;
+    };
+    "{count} selected": {
+        en: string;
+        es: string;
+    };
+    selectAll: {
+        en: string;
+        es: string;
+    };
+    clear: {
+        en: string;
+        es: string;
+    };
+};

package/dist/Combobox/index.cjs

@@ -4,6 +4,8 @@ var Combobox = require('../Combobox-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');
@@ -23,7 +25,6 @@ require('../floating-ui.react-dom-cjs.js');
 require('../stringifyLocale-cjs.js');
 require('../useLabel-cjs.js');
 require('../Separator-cjs.js');
-require('../AtlantisContext-cjs.js');
 require('../Glimmer-cjs.js');
 require('../Content-cjs.js');
 require('../HelperText-cjs.js');

package/dist/Combobox/index.mjs

@@ -2,6 +2,8 @@ export { C as Combobox } from '../Combobox-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';
@@ -21,7 +23,6 @@ import '../floating-ui.react-dom-es.js';
 import '../stringifyLocale-es.js';
 import '../useLabel-es.js';
 import '../Separator-es.js';
-import '../AtlantisContext-es.js';
 import '../Glimmer-es.js';
 import '../Content-es.js';
 import '../HelperText-es.js';

package/dist/Combobox-cjs.js

@@ -3,13 +3,14 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
+var AtlantisContext = require('./AtlantisContext-cjs.js');
 var Button = require('./Button-cjs.js');
 var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var ComboboxPrimitive = require('./ComboboxPrimitive-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var mergeClassName = require('./mergeClassName-cjs.js');
-var AtlantisContext = require('./AtlantisContext-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 var HelperText = require('./HelperText-cjs.js');
 var FieldDescription = require('./FieldDescription-cjs.js');
@@ -167,6 +168,41 @@ const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
 var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
+const comboboxMessages = useAtlantisI18n.defineMessages({
+    noResults: {
+        en: "No results found",
+        es: "No se encontraron resultados",
+    },
+    clearSelection: {
+        en: "Clear selection",
+        es: "Borrar selección",
+    },
+    openOptions: {
+        en: "Open options",
+        es: "Abrir opciones",
+    },
+    loadingOptions: {
+        en: "Loading options",
+        es: "Cargando opciones",
+    },
+    "Remove {label}": {
+        en: "Remove {label}",
+        es: "Eliminar {label}",
+    },
+    "{count} selected": {
+        en: "{count} selected",
+        es: "{count} seleccionados",
+    },
+    selectAll: {
+        en: "Select all",
+        es: "Seleccionar todo",
+    },
+    clear: {
+        en: "Clear",
+        es: "Borrar",
+    },
+});
+
 function renderFooterActionButton(_a) {
     var { actionButtonRecipe, children, label } = _a, buttonProps = tslib_es6.__rest(_a, ["actionButtonRecipe", "children", "label"]);
     if (children) {
@@ -188,10 +224,10 @@ function renderFooterChildren(children, multiple) {
         return children;
     return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => children(getComboboxFooterState(selectedValue, multiple))));
 }
-function getSelectedCountContent(selectedCount, children) {
+function getSelectedCountContent(selectedCount, defaultMessage, children) {
     if (children)
         return children(selectedCount);
-    return `${selectedCount} selected`;
+    return defaultMessage;
 }
 function shouldShowSelectAll({ onSelectAll, selectAllState, }) {
     if (!selectAllState || !onSelectAll)
@@ -231,15 +267,17 @@ function ComboboxFooterBase({ children, className, style, }) {
 }
 const ComboboxFooter = assignComboboxContentSlot(ComboboxFooterBase, "footer");
 function ComboboxSelectedCount({ children, className, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const { multiple } = useComboboxContext();
     return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => {
         const state = getComboboxFooterState(selectedValue, multiple);
         if (!state.multiple || !state.hasSelection)
             return null;
-        return (React.createElement("span", { className: classnames(styles.selectedCount, className) }, getSelectedCountContent(state.selectedCount, children)));
+        return (React.createElement("span", { className: classnames(styles.selectedCount, className) }, getSelectedCountContent(state.selectedCount, t("{count} selected", { count: state.selectedCount }), children)));
     }));
 }
-const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelectionFooter({ className, style, showSelectedCount = true, selectAllLabel = "Select all", selectAllState, onSelectAll, }) {
+const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelectionFooter({ className, style, showSelectedCount = true, selectAllLabel, selectAllState, onSelectAll, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const { multiple } = useComboboxContext();
     if (!multiple)
         return null;
@@ -254,27 +292,27 @@ const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelec
         return (React.createElement(ComboboxFooter, { className: className, style: style },
             showSelectedCount && React.createElement(ComboboxSelectedCount, null),
             React.createElement(ComboboxClearSelection, null),
-            showSelectAll && (React.createElement(ComboboxSelectAll, { label: selectAllLabel, onClick: onSelectAll }))));
+            showSelectAll && (React.createElement(ComboboxSelectAll, { label: selectAllLabel !== null && selectAllLabel !== void 0 ? selectAllLabel : t("selectAll"), onClick: onSelectAll }))));
     }));
 }, "footer");
 function ComboboxClearSelection(_a) {
-    var { children, label = "Clear", tabIndex } = _a, clearProps = tslib_es6.__rest(_a, ["children", "label", "tabIndex"]);
+    var { children, label, tabIndex } = _a, clearProps = tslib_es6.__rest(_a, ["children", "label", "tabIndex"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const { multiple, responsive } = useComboboxContext();
     return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => {
         const state = getComboboxFooterState(selectedValue, multiple);
         if (!state.multiple || !state.hasSelection)
             return null;
-        return (React.createElement(ComboboxPrimitive.ComboboxClear, { render: renderFooterClearButton(Object.assign(Object.assign({}, clearProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children,
-                label })), tabIndex: tabIndex }));
+        return (React.createElement(ComboboxPrimitive.ComboboxClear, { render: renderFooterClearButton(Object.assign(Object.assign({}, clearProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children, label: label !== null && label !== void 0 ? label : t("clear") })), tabIndex: tabIndex }));
     }));
 }
 function ComboboxSelectAll(_a) {
-    var { children, label = "Select all" } = _a, buttonProps = tslib_es6.__rest(_a, ["children", "label"]);
+    var { children, label } = _a, buttonProps = tslib_es6.__rest(_a, ["children", "label"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const { multiple, responsive } = useComboboxContext();
     if (!multiple)
         return null;
-    return renderFooterActionButton(Object.assign(Object.assign({}, buttonProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children,
-        label }));
+    return renderFooterActionButton(Object.assign(Object.assign({}, buttonProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children, label: label !== null && label !== void 0 ? label : t("selectAll") }));
 }
 
 function getFallbackChildren(children) {
@@ -401,7 +439,6 @@ function ComboboxAction(_a) {
 
 const DEFAULT_LOADING_ROWS = 4;
 const DEFAULT_SIZE = "base";
-const DEFAULT_EMPTY_MESSAGE = "No results found";
 function getSizeClass(size) {
     switch (size) {
         case "small":
@@ -462,7 +499,7 @@ function parseComboboxContentChildren(children) {
     });
     return parsedChildren;
 }
-function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
+function getDefaultEmptyChildren({ empty, hasLoading }, defaultMessage, emptyContent) {
     if (empty.length > 0)
         return empty;
     if (hasLoading)
@@ -472,7 +509,7 @@ function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
             return null;
         return React.createElement(ComboboxEmpty, null, emptyContent);
     }
-    return React.createElement(ComboboxEmpty, null, DEFAULT_EMPTY_MESSAGE);
+    return React.createElement(ComboboxEmpty, null, defaultMessage);
 }
 function ComboboxRoot(_a) {
     var { children, className, description, disabled, error, invalid, label, modal, style, multiple, readOnly, size = DEFAULT_SIZE } = _a, rootProps = tslib_es6.__rest(_a, ["children", "className", "description", "disabled", "error", "invalid", "label", "modal", "style", "multiple", "readOnly", "size"]);
@@ -558,13 +595,14 @@ function DefaultClearIcon() {
     return React.createElement(Icon.Icon, { name: "cross", color: "icon", size: "small" });
 }
 function ComboboxTriggerInput(_a) {
-    var { className, clearLabel = "Clear selection", showOptionsLabel = "Open options" } = _a, inputProps = tslib_es6.__rest(_a, ["className", "clearLabel", "showOptionsLabel"]);
+    var { className, clearLabel, showOptionsLabel } = _a, inputProps = tslib_es6.__rest(_a, ["className", "clearLabel", "showOptionsLabel"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     return (React.createElement(ComboboxLabeledInputGroup, null,
         React.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
-        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel },
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
             React.createElement(DefaultClearIcon, null))),
-        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
             React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
@@ -594,11 +632,12 @@ function renderMultipleValueChips({ getItemLabel, renderChipContent, resolveRemo
 }
 function ComboboxTriggerMultipleWithInput(_a) {
     var _b;
-    var { className, getItemLabel = getDefaultItemLabel, getRemoveLabel, renderItem, showOptionsLabel = "Open options" } = _a, inputProps = tslib_es6.__rest(_a, ["className", "getItemLabel", "getRemoveLabel", "renderItem", "showOptionsLabel"]);
+    var { className, getItemLabel = getDefaultItemLabel, getRemoveLabel, renderItem, showOptionsLabel } = _a, inputProps = tslib_es6.__rest(_a, ["className", "getItemLabel", "getRemoveLabel", "renderItem", "showOptionsLabel"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const responsive = (_b = context === null || context === void 0 ? void 0 : context.responsive) !== null && _b !== void 0 ? _b : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
     const renderChipContent = renderItem !== null && renderItem !== void 0 ? renderItem : getItemLabel;
-    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => `Remove ${getItemLabel(value)}`);
+    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => t("Remove {label}", { label: getItemLabel(value) }));
     const showChipRemove = responsive.showChipRemove && !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly);
     return (React.createElement(ComboboxLabeledInputGroup, null,
         React.createElement(ComboboxChips, null,
@@ -610,16 +649,17 @@ function ComboboxTriggerMultipleWithInput(_a) {
                 showChipRemove,
             })),
             React.createElement(ComboboxPrimitive.ComboboxInput, Object.assign({}, inputProps, { className: mergeClassName.mergeClassName(styles.multipleInput, className) }))),
-        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
             React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerMultipleValue(_a) {
     var _b;
-    var { getItemLabel = getDefaultItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel = "Open options" } = _a, chipsProps = tslib_es6.__rest(_a, ["getItemLabel", "getRemoveLabel", "placeholder", "renderItem", "showOptionsLabel"]);
+    var { getItemLabel = getDefaultItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel } = _a, chipsProps = tslib_es6.__rest(_a, ["getItemLabel", "getRemoveLabel", "placeholder", "renderItem", "showOptionsLabel"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const responsive = (_b = context === null || context === void 0 ? void 0 : context.responsive) !== null && _b !== void 0 ? _b : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
     const renderChipContent = renderItem !== null && renderItem !== void 0 ? renderItem : getItemLabel;
-    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => `Remove ${getItemLabel(value)}`);
+    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => t("Remove {label}", { label: getItemLabel(value) }));
     const showChipRemove = responsive.showChipRemove && !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly);
     const setPositionerAnchor = context === null || context === void 0 ? void 0 : context.setPositionerAnchor;
     const inputGroupRef = React.useCallback((anchor) => setPositionerAnchor === null || setPositionerAnchor === void 0 ? void 0 : setPositionerAnchor(anchor), [setPositionerAnchor]);
@@ -634,15 +674,16 @@ function ComboboxTriggerMultipleValue(_a) {
                     showChipRemove,
                 })
                 : hasPlaceholder(placeholder) && (React.createElement("span", { className: styles.multiplePlaceholder }, placeholder)))),
-        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
             React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxContent({ ariaLabel, children, className, empty, style, }) {
     var _a;
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const responsive = (_a = context === null || context === void 0 ? void 0 : context.responsive) !== null && _a !== void 0 ? _a : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
     const contentChildren = parseComboboxContentChildren(children);
-    const emptyChildren = getDefaultEmptyChildren(contentChildren, empty);
+    const emptyChildren = getDefaultEmptyChildren(contentChildren, t("noResults"), empty);
     return (React.createElement(ComboboxPrimitive.ComboboxPortal, null,
         React.createElement(ComboboxPrimitive.ComboboxBackdrop, { className: styles.mobileBackdrop }),
         React.createElement(ComboboxPrimitive.ComboboxPositioner, Object.assign({}, responsive.positionerProps, { anchor: context === null || context === void 0 ? void 0 : context.positionerAnchor }),
@@ -667,12 +708,13 @@ function getLoadingRowCount(rows) {
     return Math.max(0, Math.floor(rows));
 }
 function ComboboxLoadingComponent(_a) {
-    var { children, className, rows = DEFAULT_LOADING_ROWS, role = "status", "aria-label": ariaLabel = "Loading options" } = _a, loadingProps = tslib_es6.__rest(_a, ["children", "className", "rows", "role", "aria-label"]);
+    var { children, className, rows = DEFAULT_LOADING_ROWS, role = "status", "aria-label": ariaLabel } = _a, loadingProps = tslib_es6.__rest(_a, ["children", "className", "rows", "role", "aria-label"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const rowCount = getLoadingRowCount(rows);
     const content = children !== null && children !== void 0 ? children : Array.from({ length: rowCount }, (_, index) => (React.createElement("div", { "aria-hidden": "true", className: styles.loadingRow, key: `loading-row-${index}` },
         React.createElement("div", { className: styles.loadingGlimmer },
             React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "auto" })))));
-    return (React.createElement("div", Object.assign({}, loadingProps, { "aria-label": ariaLabel, className: classnames(styles.loading, className), role: role }), content));
+    return (React.createElement("div", Object.assign({}, loadingProps, { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("loadingOptions"), className: classnames(styles.loading, className), role: role }), content));
 }
 const ComboboxLoading = assignComboboxContentSlot(ComboboxLoadingComponent, "loading");
 const Combobox = Object.assign(ComboboxRoot, {

package/dist/Combobox-es.js

@@ -1,13 +1,14 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
+import { u as useAtlantisContext } from './AtlantisContext-es.js';
 import { B as Button } from './Button-es.js';
 import { n as normalizeBaseUiButtonProps } from './buttonRenderAdapter-es.js';
 import { a as ComboboxValue, b as ComboboxClear$1, c as ComboboxList$1, d as ComboboxItem$1, e as ComboboxItemIndicator$1, f as ComboboxRow$1, g as ComboboxCollection$1, h as ComboboxGroup$1, i as ComboboxGroupLabel$1, j as ComboboxSeparator$1, k as ComboboxIcon, l as ComboboxChip, m as ComboboxChipRemove, n as ComboboxStatus, u as useFilter$1, o as useFilteredItems$1, p as ComboboxRoot$1, q as ComboboxInputGroup$1, r as ComboboxInput$1, s as ComboboxTrigger$1, t as ComboboxPortal, v as ComboboxBackdrop, w as ComboboxPositioner, x as ComboboxPopup, y as ComboboxChips$1, z as ComboboxEmpty$1 } from './ComboboxPrimitive-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
 import { I as Icon } from './Icon-es.js';
 import { m as mergeClassName } from './mergeClassName-es.js';
-import { u as useAtlantisContext } from './AtlantisContext-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { H as HelperText } from './HelperText-es.js';
 import { F as FieldRoot, a as FieldLabel, b as FieldDescription, c as FieldError } from './FieldDescription-es.js';
@@ -165,6 +166,41 @@ const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
 var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
+const comboboxMessages = defineMessages({
+    noResults: {
+        en: "No results found",
+        es: "No se encontraron resultados",
+    },
+    clearSelection: {
+        en: "Clear selection",
+        es: "Borrar selección",
+    },
+    openOptions: {
+        en: "Open options",
+        es: "Abrir opciones",
+    },
+    loadingOptions: {
+        en: "Loading options",
+        es: "Cargando opciones",
+    },
+    "Remove {label}": {
+        en: "Remove {label}",
+        es: "Eliminar {label}",
+    },
+    "{count} selected": {
+        en: "{count} selected",
+        es: "{count} seleccionados",
+    },
+    selectAll: {
+        en: "Select all",
+        es: "Seleccionar todo",
+    },
+    clear: {
+        en: "Clear",
+        es: "Borrar",
+    },
+});
+
 function renderFooterActionButton(_a) {
     var { actionButtonRecipe, children, label } = _a, buttonProps = __rest(_a, ["actionButtonRecipe", "children", "label"]);
     if (children) {
@@ -186,10 +222,10 @@ function renderFooterChildren(children, multiple) {
         return children;
     return (React__default.createElement(ComboboxValue, null, (selectedValue) => children(getComboboxFooterState(selectedValue, multiple))));
 }
-function getSelectedCountContent(selectedCount, children) {
+function getSelectedCountContent(selectedCount, defaultMessage, children) {
     if (children)
         return children(selectedCount);
-    return `${selectedCount} selected`;
+    return defaultMessage;
 }
 function shouldShowSelectAll({ onSelectAll, selectAllState, }) {
     if (!selectAllState || !onSelectAll)
@@ -229,15 +265,17 @@ function ComboboxFooterBase({ children, className, style, }) {
 }
 const ComboboxFooter = assignComboboxContentSlot(ComboboxFooterBase, "footer");
 function ComboboxSelectedCount({ children, className, }) {
+    const { t } = useAtlantisI18n(comboboxMessages);
     const { multiple } = useComboboxContext();
     return (React__default.createElement(ComboboxValue, null, (selectedValue) => {
         const state = getComboboxFooterState(selectedValue, multiple);
         if (!state.multiple || !state.hasSelection)
             return null;
-        return (React__default.createElement("span", { className: classnames(styles.selectedCount, className) }, getSelectedCountContent(state.selectedCount, children)));
+        return (React__default.createElement("span", { className: classnames(styles.selectedCount, className) }, getSelectedCountContent(state.selectedCount, t("{count} selected", { count: state.selectedCount }), children)));
     }));
 }
-const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelectionFooter({ className, style, showSelectedCount = true, selectAllLabel = "Select all", selectAllState, onSelectAll, }) {
+const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelectionFooter({ className, style, showSelectedCount = true, selectAllLabel, selectAllState, onSelectAll, }) {
+    const { t } = useAtlantisI18n(comboboxMessages);
     const { multiple } = useComboboxContext();
     if (!multiple)
         return null;
@@ -252,27 +290,27 @@ const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelec
         return (React__default.createElement(ComboboxFooter, { className: className, style: style },
             showSelectedCount && React__default.createElement(ComboboxSelectedCount, null),
             React__default.createElement(ComboboxClearSelection, null),
-            showSelectAll && (React__default.createElement(ComboboxSelectAll, { label: selectAllLabel, onClick: onSelectAll }))));
+            showSelectAll && (React__default.createElement(ComboboxSelectAll, { label: selectAllLabel !== null && selectAllLabel !== void 0 ? selectAllLabel : t("selectAll"), onClick: onSelectAll }))));
     }));
 }, "footer");
 function ComboboxClearSelection(_a) {
-    var { children, label = "Clear", tabIndex } = _a, clearProps = __rest(_a, ["children", "label", "tabIndex"]);
+    var { children, label, tabIndex } = _a, clearProps = __rest(_a, ["children", "label", "tabIndex"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const { multiple, responsive } = useComboboxContext();
     return (React__default.createElement(ComboboxValue, null, (selectedValue) => {
         const state = getComboboxFooterState(selectedValue, multiple);
         if (!state.multiple || !state.hasSelection)
             return null;
-        return (React__default.createElement(ComboboxClear$1, { render: renderFooterClearButton(Object.assign(Object.assign({}, clearProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children,
-                label })), tabIndex: tabIndex }));
+        return (React__default.createElement(ComboboxClear$1, { render: renderFooterClearButton(Object.assign(Object.assign({}, clearProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children, label: label !== null && label !== void 0 ? label : t("clear") })), tabIndex: tabIndex }));
     }));
 }
 function ComboboxSelectAll(_a) {
-    var { children, label = "Select all" } = _a, buttonProps = __rest(_a, ["children", "label"]);
+    var { children, label } = _a, buttonProps = __rest(_a, ["children", "label"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const { multiple, responsive } = useComboboxContext();
     if (!multiple)
         return null;
-    return renderFooterActionButton(Object.assign(Object.assign({}, buttonProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children,
-        label }));
+    return renderFooterActionButton(Object.assign(Object.assign({}, buttonProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children, label: label !== null && label !== void 0 ? label : t("selectAll") }));
 }
 
 function getFallbackChildren(children) {
@@ -399,7 +437,6 @@ function ComboboxAction(_a) {
 
 const DEFAULT_LOADING_ROWS = 4;
 const DEFAULT_SIZE = "base";
-const DEFAULT_EMPTY_MESSAGE = "No results found";
 function getSizeClass(size) {
     switch (size) {
         case "small":
@@ -460,7 +497,7 @@ function parseComboboxContentChildren(children) {
     });
     return parsedChildren;
 }
-function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
+function getDefaultEmptyChildren({ empty, hasLoading }, defaultMessage, emptyContent) {
     if (empty.length > 0)
         return empty;
     if (hasLoading)
@@ -470,7 +507,7 @@ function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
             return null;
         return React__default.createElement(ComboboxEmpty, null, emptyContent);
     }
-    return React__default.createElement(ComboboxEmpty, null, DEFAULT_EMPTY_MESSAGE);
+    return React__default.createElement(ComboboxEmpty, null, defaultMessage);
 }
 function ComboboxRoot(_a) {
     var { children, className, description, disabled, error, invalid, label, modal, style, multiple, readOnly, size = DEFAULT_SIZE } = _a, rootProps = __rest(_a, ["children", "className", "description", "disabled", "error", "invalid", "label", "modal", "style", "multiple", "readOnly", "size"]);
@@ -556,13 +593,14 @@ function DefaultClearIcon() {
     return React__default.createElement(Icon, { name: "cross", color: "icon", size: "small" });
 }
 function ComboboxTriggerInput(_a) {
-    var { className, clearLabel = "Clear selection", showOptionsLabel = "Open options" } = _a, inputProps = __rest(_a, ["className", "clearLabel", "showOptionsLabel"]);
+    var { className, clearLabel, showOptionsLabel } = _a, inputProps = __rest(_a, ["className", "clearLabel", "showOptionsLabel"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     return (React__default.createElement(ComboboxLabeledInputGroup, null,
         React__default.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
-        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel },
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
             React__default.createElement(DefaultClearIcon, null))),
-        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
             React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
@@ -592,11 +630,12 @@ function renderMultipleValueChips({ getItemLabel, renderChipContent, resolveRemo
 }
 function ComboboxTriggerMultipleWithInput(_a) {
     var _b;
-    var { className, getItemLabel = getDefaultItemLabel, getRemoveLabel, renderItem, showOptionsLabel = "Open options" } = _a, inputProps = __rest(_a, ["className", "getItemLabel", "getRemoveLabel", "renderItem", "showOptionsLabel"]);
+    var { className, getItemLabel = getDefaultItemLabel, getRemoveLabel, renderItem, showOptionsLabel } = _a, inputProps = __rest(_a, ["className", "getItemLabel", "getRemoveLabel", "renderItem", "showOptionsLabel"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const responsive = (_b = context === null || context === void 0 ? void 0 : context.responsive) !== null && _b !== void 0 ? _b : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
     const renderChipContent = renderItem !== null && renderItem !== void 0 ? renderItem : getItemLabel;
-    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => `Remove ${getItemLabel(value)}`);
+    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => t("Remove {label}", { label: getItemLabel(value) }));
     const showChipRemove = responsive.showChipRemove && !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly);
     return (React__default.createElement(ComboboxLabeledInputGroup, null,
         React__default.createElement(ComboboxChips, null,
@@ -608,16 +647,17 @@ function ComboboxTriggerMultipleWithInput(_a) {
                 showChipRemove,
             })),
             React__default.createElement(ComboboxInput$1, Object.assign({}, inputProps, { className: mergeClassName(styles.multipleInput, className) }))),
-        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
             React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerMultipleValue(_a) {
     var _b;
-    var { getItemLabel = getDefaultItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel = "Open options" } = _a, chipsProps = __rest(_a, ["getItemLabel", "getRemoveLabel", "placeholder", "renderItem", "showOptionsLabel"]);
+    var { getItemLabel = getDefaultItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel } = _a, chipsProps = __rest(_a, ["getItemLabel", "getRemoveLabel", "placeholder", "renderItem", "showOptionsLabel"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const responsive = (_b = context === null || context === void 0 ? void 0 : context.responsive) !== null && _b !== void 0 ? _b : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
     const renderChipContent = renderItem !== null && renderItem !== void 0 ? renderItem : getItemLabel;
-    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => `Remove ${getItemLabel(value)}`);
+    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => t("Remove {label}", { label: getItemLabel(value) }));
     const showChipRemove = responsive.showChipRemove && !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly);
     const setPositionerAnchor = context === null || context === void 0 ? void 0 : context.setPositionerAnchor;
     const inputGroupRef = React__default.useCallback((anchor) => setPositionerAnchor === null || setPositionerAnchor === void 0 ? void 0 : setPositionerAnchor(anchor), [setPositionerAnchor]);
@@ -632,15 +672,16 @@ function ComboboxTriggerMultipleValue(_a) {
                     showChipRemove,
                 })
                 : hasPlaceholder(placeholder) && (React__default.createElement("span", { className: styles.multiplePlaceholder }, placeholder)))),
-        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
             React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxContent({ ariaLabel, children, className, empty, style, }) {
     var _a;
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const responsive = (_a = context === null || context === void 0 ? void 0 : context.responsive) !== null && _a !== void 0 ? _a : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
     const contentChildren = parseComboboxContentChildren(children);
-    const emptyChildren = getDefaultEmptyChildren(contentChildren, empty);
+    const emptyChildren = getDefaultEmptyChildren(contentChildren, t("noResults"), empty);
     return (React__default.createElement(ComboboxPortal, null,
         React__default.createElement(ComboboxBackdrop, { className: styles.mobileBackdrop }),
         React__default.createElement(ComboboxPositioner, Object.assign({}, responsive.positionerProps, { anchor: context === null || context === void 0 ? void 0 : context.positionerAnchor }),
@@ -665,12 +706,13 @@ function getLoadingRowCount(rows) {
     return Math.max(0, Math.floor(rows));
 }
 function ComboboxLoadingComponent(_a) {
-    var { children, className, rows = DEFAULT_LOADING_ROWS, role = "status", "aria-label": ariaLabel = "Loading options" } = _a, loadingProps = __rest(_a, ["children", "className", "rows", "role", "aria-label"]);
+    var { children, className, rows = DEFAULT_LOADING_ROWS, role = "status", "aria-label": ariaLabel } = _a, loadingProps = __rest(_a, ["children", "className", "rows", "role", "aria-label"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const rowCount = getLoadingRowCount(rows);
     const content = children !== null && children !== void 0 ? children : Array.from({ length: rowCount }, (_, index) => (React__default.createElement("div", { "aria-hidden": "true", className: styles.loadingRow, key: `loading-row-${index}` },
         React__default.createElement("div", { className: styles.loadingGlimmer },
             React__default.createElement(Glimmer, { shape: "rectangle", size: "auto" })))));
-    return (React__default.createElement("div", Object.assign({}, loadingProps, { "aria-label": ariaLabel, className: classnames(styles.loading, className), role: role }), content));
+    return (React__default.createElement("div", Object.assign({}, loadingProps, { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("loadingOptions"), className: classnames(styles.loading, className), role: role }), content));
 }
 const ComboboxLoading = assignComboboxContentSlot(ComboboxLoadingComponent, "loading");
 const Combobox = Object.assign(ComboboxRoot, {

package/dist/DataTable/components/DataTableSortableHeader.d.ts

@@ -14,5 +14,11 @@ export interface DataTableSortableHeaderProps {
      * When undefined, the header renders as non-interactive.
      */
     readonly onSort?: () => void;
+    /**
+     * The horizontal alignment of the header content and sort icon.
+     *
+     * @default "start"
+     */
+    readonly align?: "start" | "center" | "end";
 }
 export declare function DataTableSortableHeader(props: DataTableSortableHeaderProps & React.HTMLAttributes<HTMLTableCellElement>): React.JSX.Element;

package/dist/DataTableTable-cjs.js

@@ -39,7 +39,7 @@ function SortIcon({ direction }) {
             React.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
-var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
+var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","alignCenter":"w4UHxTf-Z0Q-","alignEnd":"O7R9Tt281nY-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
 
 function DataTableActions(props) {
     return (React.createElement("div", Object.assign({}, props, { className: classnames(styles.actions, props.className) }), props.children));
@@ -94,13 +94,18 @@ function DataTableRowActions(props) {
 }
 
 function DataTableSortableHeader(props) {
-    const { children, direction, onSort } = props, rest = tslib_es6.__rest(props, ["children", "direction", "onSort"]);
+    const { children, direction, onSort, align = "start" } = props, rest = tslib_es6.__rest(props, ["children", "direction", "onSort", "align"]);
     const isSortable = direction !== undefined && onSort !== undefined;
+    const alignmentClass = {
+        start: undefined,
+        center: styles.alignCenter,
+        end: styles.alignEnd,
+    }[align];
     if (!isSortable) {
-        return React.createElement(DataTableHeaderCell, Object.assign({}, rest), children);
+        return (React.createElement(DataTableHeaderCell, Object.assign({}, rest, { className: classnames(rest.className, alignmentClass) }), children));
     }
     return (React.createElement(DataTableHeaderCell, Object.assign({}, rest),
-        React.createElement("button", { type: "button", onClick: onSort, className: styles.sortableButton },
+        React.createElement("button", { type: "button", onClick: onSort, className: classnames(styles.sortableButton, alignmentClass) },
             React.createElement("span", { className: styles.focusArea },
                 children,
                 React.createElement(SortIcon, { direction: direction })))));

package/dist/DataTableTable-es.js

@@ -37,7 +37,7 @@ function SortIcon({ direction }) {
             React__default.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
-var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
+var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","alignCenter":"w4UHxTf-Z0Q-","alignEnd":"O7R9Tt281nY-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
 
 function DataTableActions(props) {
     return (React__default.createElement("div", Object.assign({}, props, { className: classnames(styles.actions, props.className) }), props.children));
@@ -92,13 +92,18 @@ function DataTableRowActions(props) {
 }
 
 function DataTableSortableHeader(props) {
-    const { children, direction, onSort } = props, rest = __rest(props, ["children", "direction", "onSort"]);
+    const { children, direction, onSort, align = "start" } = props, rest = __rest(props, ["children", "direction", "onSort", "align"]);
     const isSortable = direction !== undefined && onSort !== undefined;
+    const alignmentClass = {
+        start: undefined,
+        center: styles.alignCenter,
+        end: styles.alignEnd,
+    }[align];
     if (!isSortable) {
-        return React__default.createElement(DataTableHeaderCell, Object.assign({}, rest), children);
+        return (React__default.createElement(DataTableHeaderCell, Object.assign({}, rest, { className: classnames(rest.className, alignmentClass) }), children));
     }
     return (React__default.createElement(DataTableHeaderCell, Object.assign({}, rest),
-        React__default.createElement("button", { type: "button", onClick: onSort, className: styles.sortableButton },
+        React__default.createElement("button", { type: "button", onClick: onSort, className: classnames(styles.sortableButton, alignmentClass) },
             React__default.createElement("span", { className: styles.focusArea },
                 children,
                 React__default.createElement(SortIcon, { direction: direction })))));

package/dist/InputNumber/InputNumber.messages.d.ts

@@ -0,0 +1,18 @@
+export declare const inputNumberMessages: {
+    "Increase {label}": {
+        en: string;
+        es: string;
+    };
+    "Decrease {label}": {
+        en: string;
+        es: string;
+    };
+    value: {
+        en: string;
+        es: string;
+    };
+    Action: {
+        en: string;
+        es: string;
+    };
+};

package/dist/InputNumber/index.cjs

@@ -4,10 +4,10 @@ var InputNumber = require('../InputNumber-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
-require('../ActivityIndicator-cjs.js');
-require('../common.messages-cjs.js');
 require('../useAtlantisI18n-cjs.js');
 require('../AtlantisContext-cjs.js');
+require('../ActivityIndicator-cjs.js');
+require('../common.messages-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');

package/dist/InputNumber/index.mjs

@@ -2,10 +2,10 @@ export { I as InputNumber } from '../InputNumber-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
-import '../ActivityIndicator-es.js';
-import '../common.messages-es.js';
 import '../useAtlantisI18n-es.js';
 import '../AtlantisContext-es.js';
+import '../ActivityIndicator-es.js';
+import '../common.messages-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';

package/dist/InputNumber-cjs.js

@@ -3,6 +3,8 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
+require('./AtlantisContext-cjs.js');
 var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -16,6 +18,25 @@ var NumberFieldInput = require('./NumberFieldInput-cjs.js');
 
 var styles = {"container":"-W4QiocGsR4-","inline":"_9-f2CjSVojs-","wrapper":"_4y342TRP-y8-","disabled":"d-YOq6z4ZxM-","small":"YTL0AyJdbC8-","large":"mUfanIovnVg-","center":"_8MM9keFOeD0-","right":"mTeuCQufdj4-","inputWrapper":"IgE0pfetwVM-","input":"MxShJMNKSB4-","stepper":"SE8DXlYN02U-","loadingIndicator":"VmKH2-NlbDI-","label":"f1OiicY3UzU-","hideLabel":"j9oUhNvNwsE-","affixLabel":"oR6I7xtSbL4-","prefix":"s-WnNh4k-kw-","suffix":"Ep7K8jug-Xc-","affixIcon":"E3w3BEJoBFE-","compoundAffix":"znvaejix3iE-","affixLabelText":"m1ZP5T4QOAQ-","stepperButton":"_22AXoGKVAjc-","belowField":"kkywg49kgrg-","description":"buIzMqBEpSQ-","spinning":"p8ebLlGf8JY-"};
 
+const inputNumberMessages = useAtlantisI18n.defineMessages({
+    "Increase {label}": {
+        en: "Increase {label}",
+        es: "Aumentar {label}",
+    },
+    "Decrease {label}": {
+        en: "Decrease {label}",
+        es: "Disminuir {label}",
+    },
+    value: {
+        en: "value",
+        es: "valor",
+    },
+    Action: {
+        en: "Action",
+        es: "Acción",
+    },
+});
+
 /**
  * Default formatting used only when the consumer does not pass `format`.
  * Thousands grouping is left at Intl's default (on) to match the
@@ -178,13 +199,15 @@ function InputNumberStepper({ children, incrementLabel, decrementLabel, classNam
 }
 function InputNumberIncrement({ children, ariaLabel, className, style, }) {
     useInputNumberContext("Increment");
+    const { t } = useAtlantisI18n.useAtlantisI18n(inputNumberMessages);
     const rootProps = useRenderElement.mergeProps({ className: styles.stepperButton }, { className, style });
-    return (React.createElement(NumberFieldInput.NumberFieldIncrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Increase value" }, rootProps), children !== null && children !== void 0 ? children : (React.createElement(Icon.Icon, { name: "arrowUp", size: "small", customColor: "currentColor" }))));
+    return (React.createElement(NumberFieldInput.NumberFieldIncrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Increase {label}", { label: t("value") }) }, rootProps), children !== null && children !== void 0 ? children : (React.createElement(Icon.Icon, { name: "arrowUp", size: "small", customColor: "currentColor" }))));
 }
 function InputNumberDecrement({ children, ariaLabel, className, style, }) {
     useInputNumberContext("Decrement");
+    const { t } = useAtlantisI18n.useAtlantisI18n(inputNumberMessages);
     const rootProps = useRenderElement.mergeProps({ className: styles.stepperButton }, { className, style });
-    return (React.createElement(NumberFieldInput.NumberFieldDecrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Decrease value" }, rootProps), children !== null && children !== void 0 ? children : (React.createElement(Icon.Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
+    return (React.createElement(NumberFieldInput.NumberFieldDecrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Decrease {label}", { label: t("value") }) }, rootProps), children !== null && children !== void 0 ? children : (React.createElement(Icon.Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function InputNumberAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }) {
     const ctx = useInputNumberContext("Affix");
@@ -219,9 +242,10 @@ function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
         React.createElement(AffixIconContent, { icon: icon, size: size, onClick: onClick, ariaLabel: ariaLabel })));
 }
 function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(inputNumberMessages);
     const iconSize = size === "small" ? "small" : "base";
     if (onClick) {
-        return (React.createElement(Button.Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Action", icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
+        return (React.createElement(Button.Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Action"), icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
     }
     return React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" });
 }
@@ -243,6 +267,7 @@ function resolveAutoComplete(autoComplete) {
 function InputNumber(_a) {
     var _b;
     var { ref } = _a, props = tslib_es6.__rest(_a, ["ref"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(inputNumberMessages);
     const { label, description, error, prefix, suffix } = props, config = tslib_es6.__rest(props, ["label", "description", "error", "prefix", "suffix"]);
     const size = (_b = config.size) !== null && _b !== void 0 ? _b : "default";
     return (React.createElement(InputNumberWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
@@ -250,7 +275,11 @@ function InputNumber(_a) {
             prefix && renderDefaultAffix("prefix", prefix, size),
             React.createElement(InputNumberInput, null,
                 React.createElement(InputNumberLabel, null, label),
-                config.loading ? (React.createElement(InputNumberLoading, null)) : (React.createElement(InputNumberStepper, { incrementLabel: `Increase ${label !== null && label !== void 0 ? label : "value"}`, decrementLabel: `Decrease ${label !== null && label !== void 0 ? label : "value"}` }))),
+                config.loading ? (React.createElement(InputNumberLoading, null)) : (React.createElement(InputNumberStepper, { incrementLabel: t("Increase {label}", {
+                        label: label !== null && label !== void 0 ? label : t("value"),
+                    }), decrementLabel: t("Decrease {label}", {
+                        label: label !== null && label !== void 0 ? label : t("value"),
+                    }) }))),
             suffix && renderDefaultAffix("suffix", suffix, size)),
         (description || error) && (React.createElement(InputNumberFooter, null,
             React.createElement(InputNumberDescription, null, description),

package/dist/InputNumber-es.js

@@ -1,6 +1,8 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { createContext, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
 import classnames from 'classnames';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
+import './AtlantisContext-es.js';
 import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -14,6 +16,25 @@ import { N as NumberFieldRoot, a as NumberFieldGroup, b as NumberFieldInput, c a
 
 var styles = {"container":"-W4QiocGsR4-","inline":"_9-f2CjSVojs-","wrapper":"_4y342TRP-y8-","disabled":"d-YOq6z4ZxM-","small":"YTL0AyJdbC8-","large":"mUfanIovnVg-","center":"_8MM9keFOeD0-","right":"mTeuCQufdj4-","inputWrapper":"IgE0pfetwVM-","input":"MxShJMNKSB4-","stepper":"SE8DXlYN02U-","loadingIndicator":"VmKH2-NlbDI-","label":"f1OiicY3UzU-","hideLabel":"j9oUhNvNwsE-","affixLabel":"oR6I7xtSbL4-","prefix":"s-WnNh4k-kw-","suffix":"Ep7K8jug-Xc-","affixIcon":"E3w3BEJoBFE-","compoundAffix":"znvaejix3iE-","affixLabelText":"m1ZP5T4QOAQ-","stepperButton":"_22AXoGKVAjc-","belowField":"kkywg49kgrg-","description":"buIzMqBEpSQ-","spinning":"p8ebLlGf8JY-"};
 
+const inputNumberMessages = defineMessages({
+    "Increase {label}": {
+        en: "Increase {label}",
+        es: "Aumentar {label}",
+    },
+    "Decrease {label}": {
+        en: "Decrease {label}",
+        es: "Disminuir {label}",
+    },
+    value: {
+        en: "value",
+        es: "valor",
+    },
+    Action: {
+        en: "Action",
+        es: "Acción",
+    },
+});
+
 /**
  * Default formatting used only when the consumer does not pass `format`.
  * Thousands grouping is left at Intl's default (on) to match the
@@ -176,13 +197,15 @@ function InputNumberStepper({ children, incrementLabel, decrementLabel, classNam
 }
 function InputNumberIncrement({ children, ariaLabel, className, style, }) {
     useInputNumberContext("Increment");
+    const { t } = useAtlantisI18n(inputNumberMessages);
     const rootProps = mergeProps({ className: styles.stepperButton }, { className, style });
-    return (React__default.createElement(NumberFieldIncrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Increase value" }, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(Icon, { name: "arrowUp", size: "small", customColor: "currentColor" }))));
+    return (React__default.createElement(NumberFieldIncrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Increase {label}", { label: t("value") }) }, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(Icon, { name: "arrowUp", size: "small", customColor: "currentColor" }))));
 }
 function InputNumberDecrement({ children, ariaLabel, className, style, }) {
     useInputNumberContext("Decrement");
+    const { t } = useAtlantisI18n(inputNumberMessages);
     const rootProps = mergeProps({ className: styles.stepperButton }, { className, style });
-    return (React__default.createElement(NumberFieldDecrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Decrease value" }, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
+    return (React__default.createElement(NumberFieldDecrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Decrease {label}", { label: t("value") }) }, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function InputNumberAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }) {
     const ctx = useInputNumberContext("Affix");
@@ -217,9 +240,10 @@ function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
         React__default.createElement(AffixIconContent, { icon: icon, size: size, onClick: onClick, ariaLabel: ariaLabel })));
 }
 function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
+    const { t } = useAtlantisI18n(inputNumberMessages);
     const iconSize = size === "small" ? "small" : "base";
     if (onClick) {
-        return (React__default.createElement(Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Action", icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
+        return (React__default.createElement(Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Action"), icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
     }
     return React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" });
 }
@@ -241,6 +265,7 @@ function resolveAutoComplete(autoComplete) {
 function InputNumber(_a) {
     var _b;
     var { ref } = _a, props = __rest(_a, ["ref"]);
+    const { t } = useAtlantisI18n(inputNumberMessages);
     const { label, description, error, prefix, suffix } = props, config = __rest(props, ["label", "description", "error", "prefix", "suffix"]);
     const size = (_b = config.size) !== null && _b !== void 0 ? _b : "default";
     return (React__default.createElement(InputNumberWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
@@ -248,7 +273,11 @@ function InputNumber(_a) {
             prefix && renderDefaultAffix("prefix", prefix, size),
             React__default.createElement(InputNumberInput, null,
                 React__default.createElement(InputNumberLabel, null, label),
-                config.loading ? (React__default.createElement(InputNumberLoading, null)) : (React__default.createElement(InputNumberStepper, { incrementLabel: `Increase ${label !== null && label !== void 0 ? label : "value"}`, decrementLabel: `Decrease ${label !== null && label !== void 0 ? label : "value"}` }))),
+                config.loading ? (React__default.createElement(InputNumberLoading, null)) : (React__default.createElement(InputNumberStepper, { incrementLabel: t("Increase {label}", {
+                        label: label !== null && label !== void 0 ? label : t("value"),
+                    }), decrementLabel: t("Decrease {label}", {
+                        label: label !== null && label !== void 0 ? label : t("value"),
+                    }) }))),
             suffix && renderDefaultAffix("suffix", suffix, size)),
         (description || error) && (React__default.createElement(InputNumberFooter, null,
             React__default.createElement(InputNumberDescription, null, description),

package/dist/docs/DataTable/DataTable.md

@@ -305,6 +305,20 @@ The `direction` prop accepts:
 When both `direction` and `onSort` are provided, the header becomes interactive
 with a sort icon. When either is missing, it renders as a regular header cell.
 
+Use the `align` prop to align the header content and sort icon. This is useful
+for numerical columns, where both the values and the header should be
+end-aligned:
+
+```tsx
+<DataTable.SortableHeader
+  align="end"
+  direction={currentSort}
+  onSort={() => handleColumnSort("totalPrice")}
+>
+  Total price
+</DataTable.SortableHeader>
+```
+
 The `direction` prop represents the current sort state of the column. Your
 `onSort` callback should handle the state transitions (ascending → descending →
 equilibrium) based on your application's logic.
@@ -526,6 +540,7 @@ const table = useReactTable({
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `align` | `"center" | "end" | "start"` | No | `"start"` | The horizontal alignment of the header content and sort icon. |
 | `children` | `ReactNode` | No | — | The header content to display (text, icons, etc.) |
 | `direction` | `SortDirection` | No | — | The current sort direction for this column. When undefined, the header renders as non-interactive. |
 | `onSort` | `() => void` | No | — | Callback function triggered when the sortable header is clicked. When undefined, the header renders as non-interactive. |

package/dist/styles.css

@@ -9565,6 +9565,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-shadow: var(--shadow-focus);
 }
 
+.WTQCrd2d8nw-.w4UHxTf-Z0Q- {
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+
+.WTQCrd2d8nw-.O7R9Tt281nY- {
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+
+.LTx0tCU3F2I-.w4UHxTf-Z0Q- {
+  text-align: center;
+}
+
+.LTx0tCU3F2I-.O7R9Tt281nY- {
+  text-align: right;
+}
+
 .sJQbtw-NEHU- {
   position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.7.0",
+  "version": "9.9.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e8f5220ce33eb2e86d450b55e123c793d9bd7c87"
+  "gitHead": "384a88d1d70cfd6069c4a54436f58fa9b5d40c66"
 }