@jobber/components 8.30.0 → 9.1.0

package/dist/FormField/index.cjs

@@ -13,6 +13,8 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 

package/dist/FormField/index.mjs

@@ -11,5 +11,7 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';

package/dist/FormFieldWrapper-cjs.js

@@ -8,6 +8,7 @@ var classnames = require('classnames');
 var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var Text = require('./Text-cjs.js');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var InputValidation = require('./InputValidation-cjs.js');
 
@@ -53,11 +54,19 @@ function FormFieldDescription({ id, description, visible = true, }) {
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
 
+const formFieldMessages = useAtlantisI18n.defineMessages({
+    clearInput: {
+        en: "Clear input",
+        es: "Borrar entrada",
+    },
+});
+
 function ClearAction({ onClick, visible, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(formFieldMessages);
     if (!visible)
         return null;
-    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
-        React.createElement(Icon.Icon, { name: "remove", size: "small" })));
+    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": t("clearInput"), "data-testid": "ATL-FormField-clearButton" },
+        React.createElement(Icon.Icon, { name: "cross", size: "small" })));
 }
 
 function useToolbar(props) {

package/dist/FormFieldWrapper-es.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
 import { T as Text } from './Text-es.js';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { u as useFormFieldFocus } from './useFormFieldFocus-es.js';
 import { I as InputValidation } from './InputValidation-es.js';
 
@@ -51,11 +52,19 @@ function FormFieldDescription({ id, description, visible = true, }) {
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
 
+const formFieldMessages = defineMessages({
+    clearInput: {
+        en: "Clear input",
+        es: "Borrar entrada",
+    },
+});
+
 function ClearAction({ onClick, visible, }) {
+    const { t } = useAtlantisI18n(formFieldMessages);
     if (!visible)
         return null;
-    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
-        React__default.createElement(Icon, { name: "remove", size: "small" })));
+    return (React__default.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": t("clearInput"), "data-testid": "ATL-FormField-clearButton" },
+        React__default.createElement(Icon, { name: "cross", size: "small" })));
 }
 
 function useToolbar(props) {

package/dist/Icon/Icon.d.ts

@@ -2,6 +2,7 @@ import type { CSSProperties } from "react";
 import React from "react";
 import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export type { IconColorNames, IconNames } from "@jobber/design";
+export { iconNames, isIconName } from "@jobber/design";
 export interface IconProps {
     /** The icon to show.  */
     readonly name: IconNames;

package/dist/Icon/index.cjs

@@ -1,9 +1,17 @@
 'use strict';
 
 var Icon = require('../Icon-cjs.js');
+var design = require('@jobber/design');
 require('react');
-require('@jobber/design');
 
 
 
 exports.Icon = Icon.Icon;
+Object.defineProperty(exports, "iconNames", {
+	enumerable: true,
+	get: function () { return design.iconNames; }
+});
+Object.defineProperty(exports, "isIconName", {
+	enumerable: true,
+	get: function () { return design.isIconName; }
+});

package/dist/Icon/index.mjs

@@ -1,3 +1,3 @@
 export { I as Icon } from '../Icon-es.js';
+export { iconNames, isIconName } from '@jobber/design';
 import 'react';
-import '@jobber/design';

package/dist/Icon-cjs.js

@@ -4,35 +4,21 @@ var React = require('react');
 var design = require('@jobber/design');
 
 function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
-    let icon;
     const { svgStyle, pathStyle, paths, viewBox } = design.getIcon({
         name,
-        color: getIconColor(name, color),
+        color,
+        customColor,
         size,
         platform: "web",
     });
-    if (name === "truck") {
-        icon = getTruck(pathStyle, customColor);
-    }
-    else {
-        // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
-        icon = (paths !== null && paths !== void 0 ? paths : []).map((path) => (React.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
-    }
+    // Paths with their own fill are static artwork; only unfilled paths take
+    // the themed color and customColor.
+    // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
+    const icon = (paths !== null && paths !== void 0 ? paths : []).map(path => {
+        var _a;
+        return (React.createElement("path", { key: path.d, style: Object.assign(Object.assign({}, (path.fill ? {} : pathStyle)), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path.d, fill: (_a = path.fill) !== null && _a !== void 0 ? _a : customColor, fillOpacity: path.fillOpacity, opacity: path.opacity }));
+    });
     return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
-function getIconColor(name, color) {
-    if (name === "truck") {
-        return color || "green";
-    }
-    return color;
-}
-function getTruck(pathStyle, customColor) {
-    return (React.createElement("g", { transform: "translate(233.000000, 0.000000)", style: Object.assign({}, pathStyle) },
-        React.createElement("path", { d: "M31.030303,124.121212 C31.030303,106.983796 44.9231903,93.0909091 62.0606061,93.0909091 L93.0909091,93.0909091 L93.0909091,279.272727 L62.0606061,279.272727 C44.9231903,279.272727 31.030303,265.37984 31.030303,248.242424 L31.030303,124.121212 Z M31.030303,744.727273 C31.030303,727.589236 44.9231903,713.69697 62.0606061,713.69697 L93.0909091,713.69697 L93.0909091,899.878788 L62.0606061,899.878788 C44.9231903,899.878788 31.030303,885.986521 31.030303,868.848485 L31.030303,744.727273 Z M62.0606061,961.939394 L496.484848,961.939394 L496.484848,992.969697 C496.484848,1010.10773 482.592582,1024 465.454545,1024 L93.0909091,1024 C75.9534933,1024 62.0606061,1010.10773 62.0606061,992.969697 L62.0606061,961.939394 Z M494.858861,713.715588 L463.834764,714.258618 L467.083636,900.412509 L498.107733,899.869479 C515.242667,899.571588 528.889794,885.437285 528.591903,868.302352 L526.425988,744.199758 C526.128097,727.064824 511.993794,713.417697 494.858861,713.715588 Z M496.484848,93.0909091 L465.454545,93.0909091 L465.454545,279.272727 L496.484848,279.272727 C513.622885,279.272727 527.515152,265.37984 527.515152,248.242424 L527.515152,124.121212 C527.515152,106.983796 513.622885,93.0909091 496.484848,93.0909091 Z", id: "Shape", fill: "#2B2B2B" }),
-        React.createElement("path", { d: "M124.121212,0 C89.8460703,0 62.0606061,27.7854642 62.0606061,62.0606061 L62.0606061,310.30303 L31.030303,310.30303 C13.8927321,310.30303 0,324.195297 0,341.333333 L62.0606061,341.333333 L62.0606061,992.969697 L496.484848,992.969697 L496.484848,341.333333 L558.545455,341.333333 C558.545455,324.195297 544.653188,310.30303 527.515152,310.30303 L496.484848,310.30303 L496.484848,62.0606061 C496.484848,27.7854642 468.700315,0 434.424242,0 L124.121212,0 Z", id: "Path", fill: customColor }),
-        React.createElement("path", { d: "M465.454545,589.575758 L93.0909091,589.575758 L93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,961.939394 L465.454545,961.939394 L465.454545,899.878788 L434.424242,899.878788 C417.286206,899.878788 403.393939,885.986521 403.393939,868.848485 L403.393939,744.727273 C403.393939,727.589236 417.286206,713.69697 434.424242,713.69697 L465.454545,713.69697 L465.454545,589.575758 Z", id: "Path", fillOpacity: "0.35", fill: "#000000" }),
-        React.createElement("path", { d: "M93.0909091,62.0606061 C93.0909091,44.9231903 106.983796,31.030303 124.121212,31.030303 L434.424242,31.030303 C451.562279,31.030303 465.454545,44.9231903 465.454545,62.0606061 L465.454545,589.575758 L93.0909091,589.575758 L93.0909091,62.0606061 Z M93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,713.69697 Z M434.424242,713.69697 C417.286206,713.69697 403.393939,727.589236 403.393939,744.727273 L403.393939,868.848485 C403.393939,885.986521 417.286206,899.878788 434.424242,899.878788 L465.454545,899.878788 L465.454545,713.69697 L434.424242,713.69697 Z", id: "Shape", fill: "#FFFFFF", opacity: "0.5" }),
-        React.createElement("path", { d: "M93.0909091,279.272727 C113.777881,268.929396 192.387879,248.242424 279.272727,248.242424 C366.157576,248.242424 444.766642,268.929396 465.454545,279.272727 L403.393939,372.363636 C393.051539,362.021236 341.333333,341.333333 279.272727,341.333333 C217.212121,341.333333 165.494846,362.021236 155.151515,372.363636 L93.0909091,279.272727 Z M155.151515,512 L155.151515,403.393939 L93.0909091,310.30303 L93.0909091,512 L155.151515,512 Z M403.393939,512 L403.393939,403.393939 L465.454545,310.30303 L465.454545,512 L403.393939,512 Z", id: "Shape", fill: "#2A2A2A" })));
-}
 
 exports.Icon = Icon;

package/dist/Icon-es.js

@@ -2,35 +2,21 @@ import React__default from 'react';
 import { getIcon } from '@jobber/design';
 
 function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
-    let icon;
     const { svgStyle, pathStyle, paths, viewBox } = getIcon({
         name,
-        color: getIconColor(name, color),
+        color,
+        customColor,
         size,
         platform: "web",
     });
-    if (name === "truck") {
-        icon = getTruck(pathStyle, customColor);
-    }
-    else {
-        // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
-        icon = (paths !== null && paths !== void 0 ? paths : []).map((path) => (React__default.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
-    }
+    // Paths with their own fill are static artwork; only unfilled paths take
+    // the themed color and customColor.
+    // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
+    const icon = (paths !== null && paths !== void 0 ? paths : []).map(path => {
+        var _a;
+        return (React__default.createElement("path", { key: path.d, style: Object.assign(Object.assign({}, (path.fill ? {} : pathStyle)), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path.d, fill: (_a = path.fill) !== null && _a !== void 0 ? _a : customColor, fillOpacity: path.fillOpacity, opacity: path.opacity }));
+    });
     return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
-function getIconColor(name, color) {
-    if (name === "truck") {
-        return color || "green";
-    }
-    return color;
-}
-function getTruck(pathStyle, customColor) {
-    return (React__default.createElement("g", { transform: "translate(233.000000, 0.000000)", style: Object.assign({}, pathStyle) },
-        React__default.createElement("path", { d: "M31.030303,124.121212 C31.030303,106.983796 44.9231903,93.0909091 62.0606061,93.0909091 L93.0909091,93.0909091 L93.0909091,279.272727 L62.0606061,279.272727 C44.9231903,279.272727 31.030303,265.37984 31.030303,248.242424 L31.030303,124.121212 Z M31.030303,744.727273 C31.030303,727.589236 44.9231903,713.69697 62.0606061,713.69697 L93.0909091,713.69697 L93.0909091,899.878788 L62.0606061,899.878788 C44.9231903,899.878788 31.030303,885.986521 31.030303,868.848485 L31.030303,744.727273 Z M62.0606061,961.939394 L496.484848,961.939394 L496.484848,992.969697 C496.484848,1010.10773 482.592582,1024 465.454545,1024 L93.0909091,1024 C75.9534933,1024 62.0606061,1010.10773 62.0606061,992.969697 L62.0606061,961.939394 Z M494.858861,713.715588 L463.834764,714.258618 L467.083636,900.412509 L498.107733,899.869479 C515.242667,899.571588 528.889794,885.437285 528.591903,868.302352 L526.425988,744.199758 C526.128097,727.064824 511.993794,713.417697 494.858861,713.715588 Z M496.484848,93.0909091 L465.454545,93.0909091 L465.454545,279.272727 L496.484848,279.272727 C513.622885,279.272727 527.515152,265.37984 527.515152,248.242424 L527.515152,124.121212 C527.515152,106.983796 513.622885,93.0909091 496.484848,93.0909091 Z", id: "Shape", fill: "#2B2B2B" }),
-        React__default.createElement("path", { d: "M124.121212,0 C89.8460703,0 62.0606061,27.7854642 62.0606061,62.0606061 L62.0606061,310.30303 L31.030303,310.30303 C13.8927321,310.30303 0,324.195297 0,341.333333 L62.0606061,341.333333 L62.0606061,992.969697 L496.484848,992.969697 L496.484848,341.333333 L558.545455,341.333333 C558.545455,324.195297 544.653188,310.30303 527.515152,310.30303 L496.484848,310.30303 L496.484848,62.0606061 C496.484848,27.7854642 468.700315,0 434.424242,0 L124.121212,0 Z", id: "Path", fill: customColor }),
-        React__default.createElement("path", { d: "M465.454545,589.575758 L93.0909091,589.575758 L93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,961.939394 L465.454545,961.939394 L465.454545,899.878788 L434.424242,899.878788 C417.286206,899.878788 403.393939,885.986521 403.393939,868.848485 L403.393939,744.727273 C403.393939,727.589236 417.286206,713.69697 434.424242,713.69697 L465.454545,713.69697 L465.454545,589.575758 Z", id: "Path", fillOpacity: "0.35", fill: "#000000" }),
-        React__default.createElement("path", { d: "M93.0909091,62.0606061 C93.0909091,44.9231903 106.983796,31.030303 124.121212,31.030303 L434.424242,31.030303 C451.562279,31.030303 465.454545,44.9231903 465.454545,62.0606061 L465.454545,589.575758 L93.0909091,589.575758 L93.0909091,62.0606061 Z M93.0909091,713.69697 L124.121212,713.69697 C141.258628,713.69697 155.151515,727.589236 155.151515,744.727273 L155.151515,868.848485 C155.151515,885.986521 141.258628,899.878788 124.121212,899.878788 L93.0909091,899.878788 L93.0909091,713.69697 Z M434.424242,713.69697 C417.286206,713.69697 403.393939,727.589236 403.393939,744.727273 L403.393939,868.848485 C403.393939,885.986521 417.286206,899.878788 434.424242,899.878788 L465.454545,899.878788 L465.454545,713.69697 L434.424242,713.69697 Z", id: "Shape", fill: "#FFFFFF", opacity: "0.5" }),
-        React__default.createElement("path", { d: "M93.0909091,279.272727 C113.777881,268.929396 192.387879,248.242424 279.272727,248.242424 C366.157576,248.242424 444.766642,268.929396 465.454545,279.272727 L403.393939,372.363636 C393.051539,362.021236 341.333333,341.333333 279.272727,341.333333 C217.212121,341.333333 165.494846,362.021236 155.151515,372.363636 L93.0909091,279.272727 Z M155.151515,512 L155.151515,403.393939 L93.0909091,310.30303 L93.0909091,512 L155.151515,512 Z M403.393939,512 L403.393939,403.393939 L465.454545,310.30303 L465.454545,512 L403.393939,512 Z", id: "Shape", fill: "#2A2A2A" })));
-}
 
 export { Icon as I };

package/dist/InputAvatar/InputAvatar.messages.d.ts

@@ -0,0 +1,10 @@
+export declare const inputAvatarMessages: {
+    changeImage: {
+        en: string;
+        es: string;
+    };
+    remove: {
+        en: string;
+        es: string;
+    };
+};

package/dist/InputAvatar/index.cjs

@@ -3,6 +3,8 @@
 var InputAvatar = require('../InputAvatar-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Avatar-cjs.js');
 require('classnames');
 require('color');

package/dist/InputAvatar/index.mjs

@@ -1,6 +1,8 @@
 export { I as InputAvatar } from '../InputAvatar-es.js';
 import '../tslib.es6-es.js';
 import 'react';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Avatar-es.js';
 import 'classnames';
 import 'color';

package/dist/InputAvatar-cjs.js

@@ -2,6 +2,7 @@
 
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Avatar = require('./Avatar-cjs.js');
 var InputFile = require('./InputFile-cjs.js');
 var ProgressBar = require('./ProgressBar-cjs.js');
@@ -10,17 +11,29 @@ require('classnames');
 
 var styles = {"inputAvatar":"CMahTsC0SPE-","preview":"VOVr4KEFeVk-","centered":"HzGL7-Sfok4-","overlay":"Cflv-yL6aVQ-","spinning":"aeMMyPDHQho-"};
 
+const inputAvatarMessages = useAtlantisI18n.defineMessages({
+    changeImage: {
+        en: "Change Image",
+        es: "Cambiar imagen",
+    },
+    remove: {
+        en: "Remove",
+        es: "Eliminar",
+    },
+});
+
 function InputAvatar(_a) {
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
     const [progress, setProgress] = React.useState(1);
+    const { t } = useAtlantisI18n.useAtlantisI18n(inputAvatarMessages);
     return (React.createElement("div", { className: styles.inputAvatar },
         React.createElement("div", { className: styles.preview },
             React.createElement(Avatar.Avatar, Object.assign({ size: "large" }, avatarProps)),
             progress < 1 && (React.createElement(Overlay, null,
                 React.createElement(Centered, null,
                     React.createElement(ProgressBar.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React.createElement(InputFile.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+        React.createElement(InputFile.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? t("changeImage") : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button.Button, { label: t("remove"), size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);

package/dist/InputAvatar-es.js

@@ -1,5 +1,6 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
 import React__default, { useState } from 'react';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { A as Avatar } from './Avatar-es.js';
 import { I as InputFile } from './InputFile-es.js';
 import { P as ProgressBar } from './ProgressBar-es.js';
@@ -8,17 +9,29 @@ import 'classnames';
 
 var styles = {"inputAvatar":"CMahTsC0SPE-","preview":"VOVr4KEFeVk-","centered":"HzGL7-Sfok4-","overlay":"Cflv-yL6aVQ-","spinning":"aeMMyPDHQho-"};
 
+const inputAvatarMessages = defineMessages({
+    changeImage: {
+        en: "Change Image",
+        es: "Cambiar imagen",
+    },
+    remove: {
+        en: "Remove",
+        es: "Eliminar",
+    },
+});
+
 function InputAvatar(_a) {
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = __rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
     const [progress, setProgress] = useState(1);
+    const { t } = useAtlantisI18n(inputAvatarMessages);
     return (React__default.createElement("div", { className: styles.inputAvatar },
         React__default.createElement("div", { className: styles.preview },
             React__default.createElement(Avatar, Object.assign({ size: "large" }, avatarProps)),
             progress < 1 && (React__default.createElement(Overlay, null,
                 React__default.createElement(Centered, null,
                     React__default.createElement(ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React__default.createElement(InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+        React__default.createElement(InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? t("changeImage") : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+        avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(Button, { label: t("remove"), size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);

package/dist/InputDate/index.cjs

@@ -35,6 +35,7 @@ require('../useAtlantisFormFieldName-cjs.js');
 require('../FormFieldWrapper-cjs.js');
 require('framer-motion');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../FormFieldPostFix-cjs.js');

package/dist/InputDate/index.mjs

@@ -33,6 +33,7 @@ import '../useAtlantisFormFieldName-es.js';
 import '../FormFieldWrapper-es.js';
 import 'framer-motion';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../FormFieldPostFix-es.js';

package/dist/InputEmail/index.cjs

@@ -14,6 +14,8 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../FormFieldPostFix-cjs.js');

package/dist/InputEmail/index.mjs

@@ -12,6 +12,8 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../FormFieldPostFix-es.js';

package/dist/InputPhoneNumber/index.cjs

@@ -14,6 +14,8 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../FormFieldPostFix-cjs.js');

package/dist/InputPhoneNumber/index.mjs

@@ -12,6 +12,8 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../FormFieldPostFix-es.js';

package/dist/InputText/index.cjs

@@ -14,6 +14,8 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../FormFieldPostFix-cjs.js');

package/dist/InputText/index.mjs

@@ -12,6 +12,8 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../FormFieldPostFix-es.js';

package/dist/InputTime/index.cjs

@@ -17,6 +17,8 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../mergeRefs-cjs.js');

package/dist/InputTime/index.mjs

@@ -15,6 +15,8 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../mergeRefs-es.js';

package/dist/InternalChipDismissible-cjs.js

@@ -10,6 +10,7 @@ var floatingUi_react = require('./floating-ui.react-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 
@@ -21,8 +22,12 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
+function DefaultAddActivator({ ariaLabel, onClick, }) {
+    return (React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: ariaLabel, onClick: onClick }));
+}
 function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
+    const { t } = useAtlantisI18n.useAtlantisI18n(Chip.chipsMessages);
+    const { activator, attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, showInput, generateDescendantId, handleBlur, handleFocus, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleShowInput, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
     const scrollableRef = useScrollToActive.useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
@@ -35,9 +40,8 @@ function InternalChipDismissibleInput(props) {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);
     if (!showInput) {
-        return React.cloneElement(activator, { onClick: handleShowInput });
+        return React.cloneElement(activator !== null && activator !== void 0 ? activator : React.createElement(DefaultAddActivator, { ariaLabel: t("add") }), { onClick: handleShowInput });
     }
-    const shouldShowMenu = menuOpen && (hasAvailableOptions || isLoadingMore);
     const menuContent = (React.createElement("div", { ref: node => {
             setFloatingRef(node);
             scrollableRef.current = node;
@@ -51,14 +55,14 @@ function InternalChipDismissibleInput(props) {
         isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
             React.createElement(Spinner.Spinner, { size: "small", inline: true })))));
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": shouldShowMenu, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
-        shouldShowMenu && React.createElement(floatingUi_react.FloatingPortal, null, menuContent)));
+        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": t("cycleOptions"), "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": menuOpen && (hasAvailableOptions || isLoadingMore), "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
+        menuOpen && (hasAvailableOptions || isLoadingMore) && (React.createElement(floatingUi_react.FloatingPortal, null, menuContent))));
 }
 
 function InternalChipDismissible(props) {
     const { availableChipOptions, ref: wrapperRef, wrapperElement, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(props);
     return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(Chip.InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(Chip.InternalChipButton, { icon: "cross", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
         React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperElement, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
 }
 

package/dist/InternalChipDismissible-es.js

@@ -8,7 +8,8 @@ import { F as FloatingPortal } from './floating-ui.react-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
-import { C as Chip, I as InternalChipButton } from './Chip-es.js';
+import { u as useAtlantisI18n } from './useAtlantisI18n-es.js';
+import { C as Chip, c as chipsMessages, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
@@ -19,8 +20,12 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
+function DefaultAddActivator({ ariaLabel, onClick, }) {
+    return (React__default.createElement(Button, { icon: "add", type: "secondary", ariaLabel: ariaLabel, onClick: onClick }));
+}
 function InternalChipDismissibleInput(props) {
-    const { activator = React__default.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
+    const { t } = useAtlantisI18n(chipsMessages);
+    const { activator, attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, showInput, generateDescendantId, handleBlur, handleFocus, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleShowInput, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
     const scrollableRef = useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useInView();
@@ -33,9 +38,8 @@ function InternalChipDismissibleInput(props) {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);
     if (!showInput) {
-        return React__default.cloneElement(activator, { onClick: handleShowInput });
+        return React__default.cloneElement(activator !== null && activator !== void 0 ? activator : React__default.createElement(DefaultAddActivator, { ariaLabel: t("add") }), { onClick: handleShowInput });
     }
-    const shouldShowMenu = menuOpen && (hasAvailableOptions || isLoadingMore);
     const menuContent = (React__default.createElement("div", { ref: node => {
             setFloatingRef(node);
             scrollableRef.current = node;
@@ -49,14 +53,14 @@ function InternalChipDismissibleInput(props) {
         isLoadingMore && (React__default.createElement("div", { className: styles.loadingIndicator },
             React__default.createElement(Spinner, { size: "small", inline: true })))));
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": shouldShowMenu, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
-        shouldShowMenu && React__default.createElement(FloatingPortal, null, menuContent)));
+        React__default.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": t("cycleOptions"), "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": menuOpen && (hasAvailableOptions || isLoadingMore), "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
+        menuOpen && (hasAvailableOptions || isLoadingMore) && (React__default.createElement(FloatingPortal, null, menuContent))));
 }
 
 function InternalChipDismissible(props) {
     const { availableChipOptions, ref: wrapperRef, wrapperElement, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
     return (React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React__default.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React__default.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
+        sortedVisibleChipOptions.map(chip => (React__default.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React__default.createElement(InternalChipButton, { icon: "cross", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
         React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperElement, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
 }
 

package/dist/LegacySelect/index.cjs

@@ -14,6 +14,8 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../FormFieldPostFix-cjs.js');

package/dist/LegacySelect/index.mjs

@@ -12,6 +12,8 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../FormFieldPostFix-es.js';

package/dist/Menu/Menu.messages.d.ts

@@ -0,0 +1,14 @@
+export declare const menuMessages: {
+    moreActions: {
+        en: string;
+        es: string;
+    };
+    back: {
+        en: string;
+        es: string;
+    };
+    "Back to {title}": {
+        en: string;
+        es: string;
+    };
+};

package/dist/Menu/index.cjs

@@ -11,6 +11,8 @@ require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Button-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react-router-dom');

package/dist/Menu/index.mjs

@@ -9,6 +9,8 @@ import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Button-es.js';
 import '../tslib.es6-es.js';
 import 'react-router-dom';