@jobber/components 8.30.0 → 9.1.0

package/dist/Menu-cjs.js

@@ -5,6 +5,7 @@ var jobberHooks = require('@jobber/hooks');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Button = require('./Button-cjs.js');
 var Typography = require('./Typography-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -37,6 +38,21 @@ const OVERLAY_ANIMATION_CONFIG = {
     type: "tween",
 };
 
+const menuMessages = useAtlantisI18n.defineMessages({
+    moreActions: {
+        en: "More Actions",
+        es: "Más acciones",
+    },
+    back: {
+        en: "Back",
+        es: "Atrás",
+    },
+    "Back to {title}": {
+        en: "Back to {title}",
+        es: "Volver a {title}",
+    },
+});
+
 function isMobileDevice() {
     if (typeof window === "undefined") {
         return false;
@@ -58,6 +74,7 @@ const animationVariation = {
 // eslint-disable-next-line max-statements
 function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
+    const { t } = useAtlantisI18n.useAtlantisI18n(menuMessages);
     const [visible, setVisible] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [activeIndex, setActiveIndex] = React.useState(null);
@@ -122,7 +139,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         }
         : {};
     if (!activator) {
-        activator = (React.createElement(Button.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
+        activator = (React.createElement(Button.Button, { fullWidth: true, label: t("moreActions"), icon: "more", type: "secondary" }));
     }
     let itemIndexCounter = 0;
     const renderedSections = items === null || items === void 0 ? void 0 : items.map((item, key) => (React.createElement("div", { key: key, className: styles$2.legacySection },
@@ -640,6 +657,7 @@ const BottomSheetSubmenuTrigger = React.forwardRef(function BottomSheetSubmenuTr
             React.createElement(Icon.Icon, { color: "icon", name: "arrowRight" }))) : null));
 });
 function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, UNSAFE_className, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(menuMessages);
     const { titleRef } = useBottomSheetSubmenuContext();
     const title = titleRef.current;
     const { focusModalityRef } = useBottomSheetContext();
@@ -655,7 +673,7 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         React.createElement(BottomSheet.BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React.createElement(DrawerTitle.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React.createElement("div", { className: styles$1.submenuHeader },
-                React.createElement(DrawerTitle.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
+                React.createElement(DrawerTitle.DrawerClose, { "aria-label": title ? t("Back to {title}", { title }) : t("back"), render: React.createElement(Button.Button, { ariaLabel: title ? t("Back to {title}", { title }) : t("back"), icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
                 title ? (React.createElement("div", { className: styles$1.submenuTitle },
                     React.createElement(Typography.Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: "text" }, title))) : null),
             React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.composableSection, resolvedBaseProps.className) }, children))));

package/dist/Menu-es.js

@@ -2,7 +2,8 @@ import React__default, { useState, useRef, useId, useMemo } from 'react';
 import { useWindowDimensions, useRefocusOnActivator } from '@jobber/hooks';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useFloating, c as useDismiss, g as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, c as useDismiss, j as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -35,6 +36,21 @@ const OVERLAY_ANIMATION_CONFIG = {
     type: "tween",
 };
 
+const menuMessages = defineMessages({
+    moreActions: {
+        en: "More Actions",
+        es: "Más acciones",
+    },
+    back: {
+        en: "Back",
+        es: "Atrás",
+    },
+    "Back to {title}": {
+        en: "Back to {title}",
+        es: "Volver a {title}",
+    },
+});
+
 function isMobileDevice() {
     if (typeof window === "undefined") {
         return false;
@@ -56,6 +72,7 @@ const animationVariation = {
 // eslint-disable-next-line max-statements
 function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
+    const { t } = useAtlantisI18n(menuMessages);
     const [visible, setVisible] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [activeIndex, setActiveIndex] = useState(null);
@@ -120,7 +137,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         }
         : {};
     if (!activator) {
-        activator = (React__default.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
+        activator = (React__default.createElement(Button, { fullWidth: true, label: t("moreActions"), icon: "more", type: "secondary" }));
     }
     let itemIndexCounter = 0;
     const renderedSections = items === null || items === void 0 ? void 0 : items.map((item, key) => (React__default.createElement("div", { key: key, className: styles$2.legacySection },
@@ -638,6 +655,7 @@ const BottomSheetSubmenuTrigger = React__default.forwardRef(function BottomSheet
             React__default.createElement(Icon, { color: "icon", name: "arrowRight" }))) : null));
 });
 function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, UNSAFE_className, }) {
+    const { t } = useAtlantisI18n(menuMessages);
     const { titleRef } = useBottomSheetSubmenuContext();
     const title = titleRef.current;
     const { focusModalityRef } = useBottomSheetContext();
@@ -653,7 +671,7 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         React__default.createElement(BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React__default.createElement(DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React__default.createElement("div", { className: styles$1.submenuHeader },
-                React__default.createElement(DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React__default.createElement(Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
+                React__default.createElement(DrawerClose, { "aria-label": title ? t("Back to {title}", { title }) : t("back"), render: React__default.createElement(Button, { ariaLabel: title ? t("Back to {title}", { title }) : t("back"), icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
                 title ? (React__default.createElement("div", { className: styles$1.submenuTitle },
                     React__default.createElement(Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: "text" }, title))) : null),
             React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.composableSection, resolvedBaseProps.className) }, children))));

package/dist/Modal/index.mjs

@@ -8,7 +8,7 @@ import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { b as useFloatingNodeId, u as useFloating, c as useDismiss, h as useRole, d as useInteractions, a as useFloatingParentNodeId, e as FloatingTree, f as FloatingNode, F as FloatingPortal, i as FloatingFocusManager, j as FloatingOverlay } from '../floating-ui.react-es.js';
+import { b as useFloatingNodeId, u as useFloating, c as useDismiss, g as useRole, d as useInteractions, a as useFloatingParentNodeId, e as FloatingTree, f as FloatingNode, F as FloatingPortal, h as FloatingFocusManager, i as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';

package/dist/Page/index.cjs

@@ -24,6 +24,8 @@ require('../floating-ui.utils.dom-cjs.js');
 require('../floating-ui.utils-cjs.js');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');

package/dist/Page/index.mjs

@@ -22,6 +22,8 @@ import '../floating-ui.utils.dom-es.js';
 import '../floating-ui.utils-es.js';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';

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/floating-ui.react-es.js

@@ -3809,4 +3809,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useListNavigation as g, useRole as h, FloatingFocusManager as i, FloatingOverlay as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };
+export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useListNavigation as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };

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');
@@ -107,11 +107,11 @@ require('react/jsx-runtime');
 require('react-dom');
 require('./floating-ui.react-dom-cjs.js');
 require('./maxHeight-cjs.js');
+require('./useAtlantisI18n-cjs.js');
 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');
@@ -360,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';
@@ -105,11 +105,11 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import './floating-ui.react-dom-es.js';
 import './maxHeight-es.js';
+import './useAtlantisI18n-es.js';
 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.30.0",
+  "version": "9.1.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": "899477f724a451b575e667d2565080cac5cc10e5"
+  "gitHead": "e887305a950c2e207016a1b039df2e8e992acc45"
 }