@jobber/components 8.29.1 → 9.0.0

package/dist/Autocomplete-cjs.js

@@ -1253,7 +1253,7 @@ function SelectionChip({ value, active, disabled, getOptionLabel, customRenderVa
         }, unsafeClassName), style: unsafeStyle, "data-testid": "ATL-Autocomplete-chip", onPointerDown: preventDefaultPointerDown },
         customRenderValue ? (customRenderValue({ value, getOptionLabel })) : (React.createElement(Typography.Typography, { size: "small" }, getOptionLabel(value))),
         canDismiss && (React.createElement("button", { type: "button", disabled: disabled, className: styles.chipDismiss, onClick: onDismiss, onPointerDown: preventDefaultPointerDown, "aria-label": `Remove ${getOptionLabel(value)}`, tabIndex: -1 },
-            React.createElement(Icon.Icon, { size: "small", name: "remove" })))));
+            React.createElement(Icon.Icon, { size: "small", name: "cross" })))));
 }
 function SelectionChipsList({ selectedValues, isFocused, limitVisibleSelections = 6, limitSelectionText = (count) => `+${count}`, activeChipIndex, disabled, getOptionLabel, customRenderValue, canDismiss, removeSelection, unsafeClassName, unsafeStyle, }) {
     const shouldLimit = !isFocused &&

package/dist/Autocomplete-es.js

@@ -1251,7 +1251,7 @@ function SelectionChip({ value, active, disabled, getOptionLabel, customRenderVa
         }, unsafeClassName), style: unsafeStyle, "data-testid": "ATL-Autocomplete-chip", onPointerDown: preventDefaultPointerDown },
         customRenderValue ? (customRenderValue({ value, getOptionLabel })) : (React__default.createElement(Typography, { size: "small" }, getOptionLabel(value))),
         canDismiss && (React__default.createElement("button", { type: "button", disabled: disabled, className: styles.chipDismiss, onClick: onDismiss, onPointerDown: preventDefaultPointerDown, "aria-label": `Remove ${getOptionLabel(value)}`, tabIndex: -1 },
-            React__default.createElement(Icon, { size: "small", name: "remove" })))));
+            React__default.createElement(Icon, { size: "small", name: "cross" })))));
 }
 function SelectionChipsList({ selectedValues, isFocused, limitVisibleSelections = 6, limitSelectionText = (count) => `+${count}`, activeChipIndex, disabled, getOptionLabel, customRenderValue, canDismiss, removeSelection, unsafeClassName, unsafeStyle, }) {
     const shouldLimit = !isFocused &&

package/dist/Banner/Banner.messages.d.ts

@@ -0,0 +1,6 @@
+export declare const bannerMessages: {
+    dismissLabel: {
+        en: string;
+        es: string;
+    };
+};

package/dist/Banner/index.cjs

@@ -5,6 +5,8 @@ require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('@jobber/hooks');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../ButtonDismiss-cjs.js');

package/dist/Banner/index.mjs

@@ -3,6 +3,8 @@ import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '@jobber/hooks';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../ButtonDismiss-es.js';

package/dist/Banner-cjs.js

@@ -4,6 +4,7 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Button = require('./Button-cjs.js');
@@ -23,6 +24,13 @@ function useBanner() {
     return React.useContext(BannerContext);
 }
 
+const bannerMessages = useAtlantisI18n.defineMessages({
+    dismissLabel: {
+        en: "Dismiss notification",
+        es: "Descartar notificación",
+    },
+});
+
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, controlledVisiblity, }) {
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
@@ -97,7 +105,8 @@ Banner.Content = function BannerContent(props) {
 Banner.DismissButton = function DismissButton(props) {
     var _a, _b, _c, _d;
     const { setIsVisible } = useBanner();
-    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "Dismiss notification";
+    const { t } = useAtlantisI18n.useAtlantisI18n(bannerMessages);
+    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : t("dismissLabel");
     const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : (() => {
         setIsVisible(false);
     });

package/dist/Banner-es.js

@@ -2,6 +2,7 @@ import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { createContext, useContext, useState } from 'react';
 import classnames from 'classnames';
 import { useResizeObserver } from '@jobber/hooks';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { I as Icon } from './Icon-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 import { B as Button } from './Button-es.js';
@@ -21,6 +22,13 @@ function useBanner() {
     return useContext(BannerContext);
 }
 
+const bannerMessages = defineMessages({
+    dismissLabel: {
+        en: "Dismiss notification",
+        es: "Descartar notificación",
+    },
+});
+
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, controlledVisiblity, }) {
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
@@ -95,7 +103,8 @@ Banner.Content = function BannerContent(props) {
 Banner.DismissButton = function DismissButton(props) {
     var _a, _b, _c, _d;
     const { setIsVisible } = useBanner();
-    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "Dismiss notification";
+    const { t } = useAtlantisI18n(bannerMessages);
+    const ariaLabel = (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : t("dismissLabel");
     const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : (() => {
         setIsVisible(false);
     });

package/dist/ButtonDismiss-cjs.js

@@ -5,7 +5,7 @@ var Button = require('./Button-cjs.js');
 require('classnames');
 
 function ButtonDismiss({ onClick, ariaLabel }) {
-    return (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
+    return (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: "cross", onClick: onClick, type: "tertiary", variation: "subtle" }));
 }
 
 exports.ButtonDismiss = ButtonDismiss;

package/dist/ButtonDismiss-es.js

@@ -3,7 +3,7 @@ import { B as Button } from './Button-es.js';
 import 'classnames';
 
 function ButtonDismiss({ onClick, ariaLabel }) {
-    return (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
+    return (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: "cross", onClick: onClick, type: "tertiary", variation: "subtle" }));
 }
 
 export { ButtonDismiss as B };

package/dist/Chips/index.cjs

@@ -45,7 +45,7 @@ require('framer-motion');
  * @deprecated Use Autocomplete with the "multiple" prop instead of ChipDismissible.
  */
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
-    return (React.createElement(InternalChipDismissible.InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React.createElement(Chip$1.InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
+    return (React.createElement(InternalChipDismissible.InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React.createElement(Chip$1.InternalChipButton, { icon: "cross", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
 // Only need the component to pass in the data as a react children

package/dist/Chips/index.mjs

@@ -43,7 +43,7 @@ import 'framer-motion';
  * @deprecated Use Autocomplete with the "multiple" prop instead of ChipDismissible.
  */
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
-    return (React__default.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default.createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
+    return (React__default.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default.createElement(InternalChipButton, { icon: "cross", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
 // Only need the component to pass in the data as a react children

package/dist/DataListSearch-cjs.js

@@ -62,7 +62,7 @@ function InternalDataListSearch() {
                     : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
             React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
-                React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
+                React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React.createElement(Button.Button, { variation: "subtle", icon: "cross", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSearch-es.js

@@ -60,7 +60,7 @@ function InternalDataListSearch() {
                     : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
             React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
-                React__default.createElement(motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
+                React__default.createElement(motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React__default.createElement(Button, { variation: "subtle", icon: "cross", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch })))))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/Dialog/dialogComposableShared.d.ts

@@ -15,7 +15,7 @@ export declare function resolveComposableTriggerRender({ children, render, }: {
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
- * Falls back to the subtle "remove" `ButtonDismiss` when neither `render` nor
+ * Falls back to the subtle "cross" `ButtonDismiss` when neither `render` nor
  * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
  * `render` or `children` is adapted; any other valid element is used as-is.
  */

package/dist/Drawer/Drawer.messages.d.ts

@@ -0,0 +1,6 @@
+export declare const drawerMessages: {
+    "Close {title}": {
+        en: string;
+        es: string;
+    };
+};

package/dist/Drawer/index.cjs

@@ -3,6 +3,8 @@
 var DrawerGrid = require('../DrawerGrid-cjs.js');
 require('react');
 require('classnames');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../ButtonDismiss-cjs.js');

package/dist/Drawer/index.mjs

@@ -1,6 +1,8 @@
 export { D as Drawer, a as DrawerGrid } from '../DrawerGrid-es.js';
 import 'react';
 import 'classnames';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../ButtonDismiss-es.js';

package/dist/DrawerGrid-cjs.js

@@ -2,11 +2,19 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var styles$1 = {"container":"LNIwHwCs8gQ-","drawer":"iDSQR4mxUvM-","open":"y9lAhWPltyg-","header":"s830oNhRdZE-","heading":"MZuJ7od4r-o-","contentScroll":"I4XEGwkvw74-","content":"jZzp04L7Gao-","spinning":"dzsdJUdmmt8-"};
 
+const drawerMessages = useAtlantisI18n.defineMessages({
+    "Close {title}": {
+        en: "Close {title}",
+        es: "Cerrar {title}",
+    },
+});
+
 function Drawer({ title, children, open = true, onRequestClose, id, }) {
     const drawerClassNames = classnames(styles$1.container, open && styles$1.open);
     return (React.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
@@ -16,10 +24,11 @@ function Drawer({ title, children, open = true, onRequestClose, id, }) {
                 React.createElement("div", { className: styles$1.content }, children)))));
 }
 function Header({ title, onRequestClose }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(drawerMessages);
     return (React.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
         React.createElement("div", { className: styles$1.heading },
             React.createElement(Heading.Heading, { level: 2 }, title)),
-        React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
+        React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("Close {title}", { title }) })));
 }
 
 var styles = {"drawerGrid":"_50Jq09W07gg-","spinning":"GqOdr2k9PX8-"};

package/dist/DrawerGrid-es.js

@@ -1,10 +1,18 @@
 import React__default from 'react';
 import classnames from 'classnames';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { H as Heading } from './Heading-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var styles$1 = {"container":"LNIwHwCs8gQ-","drawer":"iDSQR4mxUvM-","open":"y9lAhWPltyg-","header":"s830oNhRdZE-","heading":"MZuJ7od4r-o-","contentScroll":"I4XEGwkvw74-","content":"jZzp04L7Gao-","spinning":"dzsdJUdmmt8-"};
 
+const drawerMessages = defineMessages({
+    "Close {title}": {
+        en: "Close {title}",
+        es: "Cerrar {title}",
+    },
+});
+
 function Drawer({ title, children, open = true, onRequestClose, id, }) {
     const drawerClassNames = classnames(styles$1.container, open && styles$1.open);
     return (React__default.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
@@ -14,10 +22,11 @@ function Drawer({ title, children, open = true, onRequestClose, id, }) {
                 React__default.createElement("div", { className: styles$1.content }, children)))));
 }
 function Header({ title, onRequestClose }) {
+    const { t } = useAtlantisI18n(drawerMessages);
     return (React__default.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
         React__default.createElement("div", { className: styles$1.heading },
             React__default.createElement(Heading, { level: 2 }, title)),
-        React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
+        React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("Close {title}", { title }) })));
 }
 
 var styles = {"drawerGrid":"_50Jq09W07gg-","spinning":"GqOdr2k9PX8-"};

package/dist/FilterPickerContentSearch-cjs.js

@@ -18,7 +18,7 @@ function FilterPickerContentSearch(props) {
     return (React.createElement("div", { className: styles.search },
         React.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
         props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
-            React.createElement(Icon.Icon, { name: "remove", size: "small" })))));
+            React.createElement(Icon.Icon, { name: "cross", size: "small" })))));
     function clearSearch() {
         var _a;
         props.setSearchValue("");

package/dist/FilterPickerContentSearch-es.js

@@ -16,7 +16,7 @@ function FilterPickerContentSearch(props) {
     return (React__default.createElement("div", { className: styles.search },
         React__default.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
         props.searchValue && (React__default.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
-            React__default.createElement(Icon, { name: "remove", size: "small" })))));
+            React__default.createElement(Icon, { name: "cross", size: "small" })))));
     function clearSearch() {
         var _a;
         props.setSearchValue("");

package/dist/FormFieldWrapper-cjs.js

@@ -57,7 +57,7 @@ function ClearAction({ onClick, visible, }) {
     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" })));
+        React.createElement(Icon.Icon, { name: "cross", size: "small" })));
 }
 
 function useToolbar(props) {

package/dist/FormFieldWrapper-es.js

@@ -55,7 +55,7 @@ function ClearAction({ onClick, visible, }) {
     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" })));
+        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/InternalChipDismissible-cjs.js

@@ -58,7 +58,7 @@ function InternalChipDismissibleInput(props) {
 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

@@ -56,7 +56,7 @@ function InternalChipDismissibleInput(props) {
 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/SideDrawer/SideDrawer.messages.d.ts

@@ -0,0 +1,10 @@
+export declare const sideDrawerMessages: {
+    Close: {
+        en: string;
+        es: string;
+    };
+    Back: {
+        en: string;
+        es: string;
+    };
+};

package/dist/SideDrawer/index.cjs

@@ -9,6 +9,8 @@ require('classnames');
 require('@jobber/design');
 require('../Heading-cjs.js');
 require('../Typography-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/SideDrawer/index.mjs

@@ -7,6 +7,8 @@ import 'classnames';
 import '@jobber/design';
 import '../Heading-es.js';
 import '../Typography-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Button-es.js';
 import '../tslib.es6-es.js';
 import 'react-router-dom';

package/dist/SideDrawer-cjs.js

@@ -7,6 +7,7 @@ var jobberHooks = require('@jobber/hooks');
 var classnames = require('classnames');
 var design = require('@jobber/design');
 var Heading = require('./Heading-cjs.js');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Button = require('./Button-cjs.js');
 var Flex = require('./Flex-cjs.js');
 
@@ -48,8 +49,20 @@ function SideDrawerToolbar({ children }) {
 
 var styles = {"drawer":"cCwRgRAz4qk-","inline":"ONUfsWMLKdo-","container":"XipkpXgyzyg-","header":"LuqC0RF-R1U-","content":"vArEcEUxGxQ-","footer":"_4HzuRZKD9u8-","subtle":"v5Db-FCF2kU-","heading":"Eti1JL3rghE-","hasShadow":"PtbV1GtWwzY-","headerActions":"YCdqkhcLHfI-","hideWhenEmpty":"ZH2Mp84HhX8-","overlay":"Ro-pE7hx0wY-","reverseScroll":"gSN5nWDwGm4-","headerShadowListener":"tMeBAjf4vEA-","footerShadowListener":"-lPSZVGIIAs-","backButton":"XOqA4Hw6S6g-","backButtonVisible":"b4VHPS-RG34-","spinning":"McL3-VWXVbs-"};
 
+const sideDrawerMessages = useAtlantisI18n.defineMessages({
+    Close: {
+        en: "Close",
+        es: "Cerrar",
+    },
+    Back: {
+        en: "Back",
+        es: "Atrás",
+    },
+});
+
 function SideDrawerBackButton({ onClick, }) {
     const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
+    const { t } = useAtlantisI18n.useAtlantisI18n(sideDrawerMessages);
     React.useEffect(() => {
         registerComponent("backButton");
         return () => {
@@ -58,7 +71,7 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: t("Back"), icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
@@ -104,6 +117,7 @@ const useSideDrawerState = (open) => {
 function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
+    const { t } = useAtlantisI18n.useAtlantisI18n(sideDrawerMessages);
     jobberHooks.useRefocusOnActivator(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
     const isMounted = jobberHooks.useIsMounted();
@@ -119,7 +133,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
             registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
             unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
-        open && !inline && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        open && !inline && (React.createElement("button", { className: styles.overlay, "aria-label": t("Close"), onClick: onRequestClose, type: "button" })),
         React.createElement(framerMotion.AnimatePresence, { initial: false }, open && (React.createElement(framerMotion.motion.div, { className: classnames(styles.drawer, {
                 [styles.reverseScroll]: scrollDirection === "reverse",
                 [styles.inline]: inline,
@@ -140,7 +154,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                             React.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React.createElement("div", { className: styles.headerActions },
                             React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React.createElement(Button.Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                            React.createElement(Button.Button, { ariaLabel: t("Close"), icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React.createElement("div", { className: styles.content },
                     React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),

package/dist/SideDrawer-es.js

@@ -5,6 +5,7 @@ import { useRefocusOnActivator, useIsMounted, useFocusTrap, useInView } from '@j
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { H as Heading } from './Heading-es.js';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { B as Button } from './Button-es.js';
 import { F as Flex } from './Flex-es.js';
 
@@ -46,8 +47,20 @@ function SideDrawerToolbar({ children }) {
 
 var styles = {"drawer":"cCwRgRAz4qk-","inline":"ONUfsWMLKdo-","container":"XipkpXgyzyg-","header":"LuqC0RF-R1U-","content":"vArEcEUxGxQ-","footer":"_4HzuRZKD9u8-","subtle":"v5Db-FCF2kU-","heading":"Eti1JL3rghE-","hasShadow":"PtbV1GtWwzY-","headerActions":"YCdqkhcLHfI-","hideWhenEmpty":"ZH2Mp84HhX8-","overlay":"Ro-pE7hx0wY-","reverseScroll":"gSN5nWDwGm4-","headerShadowListener":"tMeBAjf4vEA-","footerShadowListener":"-lPSZVGIIAs-","backButton":"XOqA4Hw6S6g-","backButtonVisible":"b4VHPS-RG34-","spinning":"McL3-VWXVbs-"};
 
+const sideDrawerMessages = defineMessages({
+    Close: {
+        en: "Close",
+        es: "Cerrar",
+    },
+    Back: {
+        en: "Back",
+        es: "Atrás",
+    },
+});
+
 function SideDrawerBackButton({ onClick, }) {
     const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
+    const { t } = useAtlantisI18n(sideDrawerMessages);
     useEffect(() => {
         registerComponent("backButton");
         return () => {
@@ -56,7 +69,7 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return createPortal(React__default.createElement(Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return createPortal(React__default.createElement(Button, { ariaLabel: t("Back"), icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
@@ -102,6 +115,7 @@ const useSideDrawerState = (open) => {
 function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
+    const { t } = useAtlantisI18n(sideDrawerMessages);
     useRefocusOnActivator(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
     const isMounted = useIsMounted();
@@ -117,7 +131,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
             registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
             unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
-        open && !inline && (React__default.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        open && !inline && (React__default.createElement("button", { className: styles.overlay, "aria-label": t("Close"), onClick: onRequestClose, type: "button" })),
         React__default.createElement(AnimatePresence, { initial: false }, open && (React__default.createElement(motion.div, { className: classnames(styles.drawer, {
                 [styles.reverseScroll]: scrollDirection === "reverse",
                 [styles.inline]: inline,
@@ -138,7 +152,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                             React__default.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React__default.createElement("div", { className: styles.headerActions },
                             React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React__default.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                            React__default.createElement(Button, { ariaLabel: t("Close"), icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React__default.createElement("div", { className: styles.content },
                     React__default.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),

package/dist/dialogReturnFocus-cjs.js

@@ -55,7 +55,7 @@ function resolveComposableTriggerRender({ children, render, }) {
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
- * Falls back to the subtle "remove" `ButtonDismiss` when neither `render` nor
+ * Falls back to the subtle "cross" `ButtonDismiss` when neither `render` nor
  * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
  * `render` or `children` is adapted; any other valid element is used as-is.
  */
@@ -80,7 +80,7 @@ function resolveComposableCloseRender({ children, render, }) {
         return children;
     }
     return buttonRenderAdapter.renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
-        React.createElement(Button.Button.Icon, { name: "remove" })));
+        React.createElement(Button.Button.Icon, { name: "cross" })));
 }
 /**
  * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A

package/dist/dialogReturnFocus-es.js

@@ -53,7 +53,7 @@ function resolveComposableTriggerRender({ children, render, }) {
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
- * Falls back to the subtle "remove" `ButtonDismiss` when neither `render` nor
+ * Falls back to the subtle "cross" `ButtonDismiss` when neither `render` nor
  * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
  * `render` or `children` is adapted; any other valid element is used as-is.
  */
@@ -78,7 +78,7 @@ function resolveComposableCloseRender({ children, render, }) {
         return children;
     }
     return renderAtlantisButtonTarget(React__default.createElement(Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
-        React__default.createElement(Button.Icon, { name: "remove" })));
+        React__default.createElement(Button.Icon, { name: "cross" })));
 }
 /**
  * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -65,19 +65,19 @@ cases. The `small` size (16px) should be used on individual elements of an
 interface (e.g. inside a `Button` or `Card`) or when sitting next to short
 inline text.
 
-Layout is the consumer's responsibility — `ActivityIndicator` does not expose
-an `inline` prop. Place it inside your own flex / inline-block container, or
-pass a `className` / `style`, to control surrounding layout.
+Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
+`inline` prop. Place it inside your own flex / inline-block container, or pass a
+`className` / `style`, to control surrounding layout.
 
 ## Accessibility
 
 `ActivityIndicator` announces itself politely to assistive technology:
 
-* `role="status"` marks the element as a polite live region, appropriate for
-  a non-urgent loading state.
-* `aria-label` defaults to the literal English string `"Loading"`. Pass a
-  custom `ariaLabel` to localize or to describe the specific activity
-  (e.g. `ariaLabel="Uploading file"`).
+* `role="status"` marks the element as a polite live region, appropriate for a
+  non-urgent loading state.
+* `aria-label` defaults to the literal English string `"Loading"`. Pass a custom
+  `ariaLabel` to localize or to describe the specific activity (e.g.
+  `ariaLabel="Uploading file"`).
 
 The indicator does not participate in the keyboard tab order.
 
@@ -85,9 +85,9 @@ The indicator does not participate in the keyboard tab order.
 
 When the user's operating system reports
 [`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
-the indicator hides its rocking and rotating layers, repaints a single
-static ring in the icon foreground colour, and gently pulses its opacity so
-the indicator still reads as "busy" without rotational motion.
+the indicator hides its rocking and rotating layers, repaints a single static
+ring in the icon foreground colour, and gently pulses its opacity so the
+indicator still reads as "busy" without rotational motion.
 
 ## Relationship to Spinner
 

package/dist/docs/Dialog/Dialog.md

@@ -106,14 +106,14 @@ instead.
 These build on the general [Voice & tone](../voice-and-tone/voice-and-tone.md) and
 [Formatting](../formatting/formatting.md) guidelines.
 
-A dialog interrupts the user, so every word should earn its place:
-name the task, state the outcome, and give a clear way out.
+A dialog interrupts the user, so every word should earn its place: name the
+task, state the outcome, and give a clear way out.
 
 #### Title
 
-The title names the task as opposed to the component. Use verbs when the
-dialog is asking the user to actually do something. Be specific. Use a noun
-when you're presenting information. Don't phrase confirmation requests as questions.
+The title names the task as opposed to the component. Use verbs when the dialog
+is asking the user to actually do something. Be specific. Use a noun when you're
+presenting information. Don't phrase confirmation requests as questions.
 
 | Do                 | Don't                                        |
 | ------------------ | -------------------------------------------- |
@@ -125,9 +125,10 @@ when you're presenting information. Don't phrase confirmation requests as questi
 
 #### Body
 
-Body copy needs to expand on the title by providing what the title can't. It shouldn't
-repeat the title and should provide useful information such as explaining the impact of
-any action the user might be taking. For a routine task, one short sentence is often enough.
+Body copy needs to expand on the title by providing what the title can't. It
+shouldn't repeat the title and should provide useful information such as
+explaining the impact of any action the user might be taking. For a routine
+task, one short sentence is often enough.
 
 | Do                                             | Don't                                                          |
 | ---------------------------------------------- | -------------------------------------------------------------- |
@@ -135,9 +136,9 @@ any action the user might be taking. For a routine task, one short sentence is o
 
 #### Actions
 
-Primary action lables will need to lead with a verb and match the action taking place.
-They shouldn't be generic such as "Confirm" or "Yes". The action needs to be clearly
-intentional. Also, remember that buttons are title case.
+Primary action lables will need to lead with a verb and match the action taking
+place. They shouldn't be generic such as "Confirm" or "Yes". The action needs to
+be clearly intentional. Also, remember that buttons are title case.
 
 | Do                  | Don't   |
 | ------------------- | ------- |
@@ -147,9 +148,10 @@ intentional. Also, remember that buttons are title case.
 
 #### Alert dialogs
 
-As `alertdialog` can't be dismissed by clicking outside, the way out needs to be clear. We should not be reliant on
-users pressing ESC. When relevant, cancel actions need to be considered alonsgside confirmation actions and
-should be just as easy to find. Ideally via secondary CTAs.
+As `alertdialog` can't be dismissed by clicking outside, the way out needs to be
+clear. We should not be reliant on users pressing ESC. When relevant, cancel
+actions need to be considered alonsgside confirmation actions and should be just
+as easy to find. Ideally via secondary CTAs.
 
 ## Do's and Don'ts
 

package/dist/docs/Icon/Icon.md

@@ -427,7 +427,6 @@ export function IconSizesExample() {
 |      | `import`         |
 |      | `merge`          |
 |      | `redo`           |
-|      | `remove`         |
 |      | `search`         |
 |      | `sort`           |
 |      | `sync`           |
@@ -512,6 +511,25 @@ export function IconSizesExample() {
 |      | `plus2`  |
 
 
+## Validating icon names at runtime
+
+When icon names arrive as runtime data (API responses, configuration, user
+input), validate them before rendering with the exports from
+`@jobber/components` (also available from `@jobber/design`):
+
+* `iconNames`: a readonly array of every valid icon name
+* `isIconName(value)`: a type guard that narrows a value to `IconNames`
+
+```tsx
+import { Icon, isIconName } from "@jobber/components";
+
+function StatusIcon({ iconName }: { readonly iconName: string }) {
+  if (!isIconName(iconName)) return null;
+
+  return <Icon name={iconName} />;
+}
+```
+
 ## Component customization
 
 ### UNSAFE\_ props (advanced usage)

package/dist/docs/InputNumberExperimental/InputNumberExperimental.md

@@ -112,7 +112,7 @@ export function InputNumberExperimentalAffixesExample() {
       <InputNumberExperimental
         label="Repetitions"
         suffix={{
-          icon: "remove",
+          icon: "cross",
           ariaLabel: "Clear value",
           onClick: () => setReps(null),
         }}

package/dist/docs/empty-states/empty-states.md

@@ -21,7 +21,8 @@ for the “emptiness” may include, but are not limited to…
 * Search results with no match
 * An error has resulted in the user not being able to access content they
   otherwise could
-* A specific field doesn't have a value (for example, a custom field that the user hasn't populated)
+* A specific field doesn't have a value (for example, a custom field that the
+  user hasn't populated)
 
 ## Solution
 
@@ -70,22 +71,29 @@ When a field doesn't have a value, use a dash to indicate the lack of a value.
 This provides:
 
 * confirmation that nothing was entered
-* confirmation that something *can* be entered there should the information require an update
+* confirmation that something *can* be entered there should the information
+  require an update
 
 ```tsx
 <Card>
     <Content>
       <Heading level={4}>Additional details</Heading>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Preferred service date</Text>
+        <Text size="small" variation="subdued">
+          Preferred service date
+        </Text>
         <Text>June 25, 2026</Text>
       </Stack>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Gate code</Text>
+        <Text size="small" variation="subdued">
+          Gate code
+        </Text>
         <Text>—</Text>
       </Stack>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Additional requests</Text>
+        <Text size="small" variation="subdued">
+          Additional requests
+        </Text>
         <Text>—</Text>
       </Stack>
     </Content>

package/dist/index.cjs

@@ -89,8 +89,8 @@ var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
+var design = require('@jobber/design');
 require('classnames');
-require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
 require('./identity-cjs.js');
 require('./isTypedArray-cjs.js');
@@ -111,6 +111,7 @@ require('./mergeRefs-cjs.js');
 require('./filterDataAttributes-cjs.js');
 require('color');
 require('./tslib.es6-cjs.js');
+require('./useAtlantisI18n-cjs.js');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
 require('./useChildComponent-cjs.js');
@@ -359,4 +360,12 @@ exports.Toast = showToast.Toast;
 exports.showToast = showToast.showToast;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Typography = Typography.Typography;
+Object.defineProperty(exports, "iconNames", {
+    enumerable: true,
+    get: function () { return design.iconNames; }
+});
+Object.defineProperty(exports, "isIconName", {
+    enumerable: true,
+    get: function () { return design.isIconName; }
+});
 exports.isNormalClick = isNormalClick;

package/dist/index.mjs

@@ -87,8 +87,8 @@ export { T as Tiles } from './Tiles-es.js';
 export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
+export { iconNames, isIconName } from '@jobber/design';
 import 'classnames';
-import '@jobber/design';
 import './_commonjsHelpers-es.js';
 import './identity-es.js';
 import './isTypedArray-es.js';
@@ -109,6 +109,7 @@ import './mergeRefs-es.js';
 import './filterDataAttributes-es.js';
 import 'color';
 import './tslib.es6-es.js';
+import './useAtlantisI18n-es.js';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
 import './useChildComponent-es.js';

package/dist/sharedHelpers/i18n/index.cjs

@@ -1,37 +1,10 @@
 'use strict';
 
-var React = require('react');
-var AtlantisContext = require('../../AtlantisContext-cjs.js');
+var useAtlantisI18n = require('../../useAtlantisI18n-cjs.js');
+require('react');
+require('../../AtlantisContext-cjs.js');
 
-function defineMessages(messages) {
-    return messages;
-}
-function useAtlantisI18n(messages) {
-    const { locale } = AtlantisContext.useAtlantisContext();
-    const normalizedLocale = normalizeLocale(locale);
-    const t = React.useCallback((messageKey, values) => {
-        return interpolateMessage(resolveMessage(messages[messageKey], normalizedLocale), values);
-    }, [normalizedLocale, messages]);
-    return { locale: normalizedLocale, t };
-}
-function resolveMessage(message, normalizedLocale) {
-    var _a, _b;
-    const baseLocale = normalizedLocale.split("-")[0];
-    return (_b = (_a = message[normalizedLocale]) !== null && _a !== void 0 ? _a : message[baseLocale]) !== null && _b !== void 0 ? _b : message.en;
-}
-function normalizeLocale(locale) {
-    return locale.trim().replace(/_/g, "-").toLowerCase();
-}
-function interpolateMessage(message, values) {
-    if (!values)
-        return message;
-    return message.replace(/\{(\w+)\}/g, (placeholder, key) => {
-        const value = values[key];
-        return value === undefined ? placeholder : String(value);
-    });
-}
-
-const commonMessages = defineMessages({
+const commonMessages = useAtlantisI18n.defineMessages({
     Loading: {
         en: "Loading",
         es: "Cargando",
@@ -46,6 +19,6 @@ const commonMessages = defineMessages({
     },
 });
 
+exports.defineMessages = useAtlantisI18n.defineMessages;
+exports.useAtlantisI18n = useAtlantisI18n.useAtlantisI18n;
 exports.commonMessages = commonMessages;
-exports.defineMessages = defineMessages;
-exports.useAtlantisI18n = useAtlantisI18n;

package/dist/sharedHelpers/i18n/index.mjs

@@ -1,33 +1,7 @@
-import { useCallback } from 'react';
-import { u as useAtlantisContext } from '../../AtlantisContext-es.js';
-
-function defineMessages(messages) {
-    return messages;
-}
-function useAtlantisI18n(messages) {
-    const { locale } = useAtlantisContext();
-    const normalizedLocale = normalizeLocale(locale);
-    const t = useCallback((messageKey, values) => {
-        return interpolateMessage(resolveMessage(messages[messageKey], normalizedLocale), values);
-    }, [normalizedLocale, messages]);
-    return { locale: normalizedLocale, t };
-}
-function resolveMessage(message, normalizedLocale) {
-    var _a, _b;
-    const baseLocale = normalizedLocale.split("-")[0];
-    return (_b = (_a = message[normalizedLocale]) !== null && _a !== void 0 ? _a : message[baseLocale]) !== null && _b !== void 0 ? _b : message.en;
-}
-function normalizeLocale(locale) {
-    return locale.trim().replace(/_/g, "-").toLowerCase();
-}
-function interpolateMessage(message, values) {
-    if (!values)
-        return message;
-    return message.replace(/\{(\w+)\}/g, (placeholder, key) => {
-        const value = values[key];
-        return value === undefined ? placeholder : String(value);
-    });
-}
+import { d as defineMessages } from '../../useAtlantisI18n-es.js';
+export { u as useAtlantisI18n } from '../../useAtlantisI18n-es.js';
+import 'react';
+import '../../AtlantisContext-es.js';
 
 const commonMessages = defineMessages({
     Loading: {
@@ -44,4 +18,4 @@ const commonMessages = defineMessages({
     },
 });
 
-export { commonMessages, defineMessages, useAtlantisI18n };
+export { commonMessages, defineMessages };

package/dist/showToast-cjs.js

@@ -26,7 +26,7 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
             React.createElement(Typography.Typography, { element: "span", size: "large" }, message),
             action && (React.createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
             React.createElement("div", { className: styles.button },
-                React.createElement(Button.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+                React.createElement(Button.Button, { icon: "cross", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }

package/dist/showToast-es.js

@@ -24,7 +24,7 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
             React__default.createElement(Typography, { element: "span", size: "large" }, message),
             action && (React__default.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
             React__default.createElement("div", { className: styles.button },
-                React__default.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+                React__default.createElement(Button, { icon: "cross", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }

package/dist/styles.css

@@ -10759,8 +10759,7 @@ h2.react-datepicker__current-month {
 }
 .ZZ3XuxGv6ow- > *,
 .ZZ3XuxGv6ow- > .BrXAnQBttWE- > *,
-.ZZ3XuxGv6ow- > .nslrozOH-v4- > *
- {
+.ZZ3XuxGv6ow- > .nslrozOH-v4- > * {
   -ms-flex: 1 1 0px;
       flex: 1 1 0;
 }

package/dist/useAtlantisI18n-cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var AtlantisContext = require('./AtlantisContext-cjs.js');
+
+function defineMessages(messages) {
+    return messages;
+}
+function useAtlantisI18n(messages) {
+    const { locale } = AtlantisContext.useAtlantisContext();
+    const normalizedLocale = normalizeLocale(locale);
+    const t = React.useCallback((messageKey, values) => {
+        return interpolateMessage(resolveMessage(messages[messageKey], normalizedLocale), values);
+    }, [normalizedLocale, messages]);
+    return { locale: normalizedLocale, t };
+}
+function resolveMessage(message, normalizedLocale) {
+    var _a, _b;
+    const baseLocale = normalizedLocale.split("-")[0];
+    return (_b = (_a = message[normalizedLocale]) !== null && _a !== void 0 ? _a : message[baseLocale]) !== null && _b !== void 0 ? _b : message.en;
+}
+function normalizeLocale(locale) {
+    return locale.trim().replace(/_/g, "-").toLowerCase();
+}
+function interpolateMessage(message, values) {
+    if (!values)
+        return message;
+    return message.replace(/\{(\w+)\}/g, (placeholder, key) => {
+        const value = values[key];
+        return value === undefined ? placeholder : String(value);
+    });
+}
+
+exports.defineMessages = defineMessages;
+exports.useAtlantisI18n = useAtlantisI18n;

package/dist/useAtlantisI18n-es.js

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { u as useAtlantisContext } from './AtlantisContext-es.js';
+
+function defineMessages(messages) {
+    return messages;
+}
+function useAtlantisI18n(messages) {
+    const { locale } = useAtlantisContext();
+    const normalizedLocale = normalizeLocale(locale);
+    const t = useCallback((messageKey, values) => {
+        return interpolateMessage(resolveMessage(messages[messageKey], normalizedLocale), values);
+    }, [normalizedLocale, messages]);
+    return { locale: normalizedLocale, t };
+}
+function resolveMessage(message, normalizedLocale) {
+    var _a, _b;
+    const baseLocale = normalizedLocale.split("-")[0];
+    return (_b = (_a = message[normalizedLocale]) !== null && _a !== void 0 ? _a : message[baseLocale]) !== null && _b !== void 0 ? _b : message.en;
+}
+function normalizeLocale(locale) {
+    return locale.trim().replace(/_/g, "-").toLowerCase();
+}
+function interpolateMessage(message, values) {
+    if (!values)
+        return message;
+    return message.replace(/\{(\w+)\}/g, (placeholder, key) => {
+        const value = values[key];
+        return value === undefined ? placeholder : String(value);
+    });
+}
+
+export { defineMessages as d, useAtlantisI18n as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.29.1",
+  "version": "9.0.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -491,7 +491,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.110.0",
+    "@jobber/design": "0.111.0",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -545,5 +545,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a9b32a282f2f70d07b99600c8ce8dfdd2d6e3db9"
+  "gitHead": "71ed27026cd539889c5ce6c627bd74a8d283112e"
 }