@jobber/components 8.3.0 → 8.4.0

package/ActivityIndicator.d.ts

@@ -0,0 +1 @@
+export * from "./dist/ActivityIndicator";

package/ActivityIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var ActivityIndicator = require("./dist/ActivityIndicator");
+
+Object.keys(ActivityIndicator).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return ActivityIndicator[key];
+    },
+  });
+});

package/dist/ActivityIndicator/ActivityIndicator.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import type { CSSProperties } from "react";
+export interface ActivityIndicatorProps {
+    /**
+     * Visual size. `base` renders at 32px, `small` renders at 16px.
+     *
+     * @default "base"
+     */
+    readonly size?: "small" | "base";
+    /**
+     * Accessible label exposed via `aria-label` on the root element. Override
+     * to localize or to describe the specific activity (e.g. "Uploading file").
+     *
+     * @default "Loading"
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Custom class name merged onto the root element alongside the component's
+     * own classes.
+     */
+    readonly className?: string;
+    /**
+     * Custom inline styles applied to the root element.
+     */
+    readonly style?: CSSProperties;
+}
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+export declare function ActivityIndicator({ size, ariaLabel, className, style, }: ActivityIndicatorProps): React.JSX.Element;

package/dist/ActivityIndicator/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ActivityIndicator = require('../ActivityIndicator-cjs.js');
+require('react');
+require('classnames');
+
+
+
+exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;

package/dist/ActivityIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityIndicator } from "./ActivityIndicator";
+export type { ActivityIndicatorProps } from "./ActivityIndicator";

package/dist/ActivityIndicator/index.mjs

@@ -0,0 +1,3 @@
+export { A as ActivityIndicator } from '../ActivityIndicator-es.js';
+import 'react';
+import 'classnames';

package/dist/ActivityIndicator-cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","small":"_888S5Y2IeZ8-","svg":"Av9z-aLocss-","indicatorLinearRotate":"WvHFS--Nm80-","track":"VDTWabJptKI-","arc":"_9XO0290QNCY-","indicatorRotateArc":"SHHICknKvqA-","indicatorExpandArc":"_0m0Nzc5awnA-","indicatorReducedPulse":"_4dXQsbprq3s-","spinning":"IZCteJUCKio-"};
+
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+function ActivityIndicator({ size = "base", ariaLabel = "Loading", className, style, }) {
+    return (React.createElement("div", { role: "status", "aria-label": ariaLabel, className: classnames(styles.indicator, size === "small" && styles.small, className), style: style },
+        React.createElement("span", { className: styles.screenReaderOnly }, ariaLabel),
+        React.createElement("svg", { className: styles.svg, viewBox: "0 0 48 48", focusable: "false", "aria-hidden": "true" },
+            React.createElement("circle", { className: styles.track, cx: "24", cy: "24", r: "20" }),
+            React.createElement("circle", { className: styles.arc, cx: "24", cy: "24", r: "20" }))));
+}
+
+exports.ActivityIndicator = ActivityIndicator;

package/dist/ActivityIndicator-es.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","small":"_888S5Y2IeZ8-","svg":"Av9z-aLocss-","indicatorLinearRotate":"WvHFS--Nm80-","track":"VDTWabJptKI-","arc":"_9XO0290QNCY-","indicatorRotateArc":"SHHICknKvqA-","indicatorExpandArc":"_0m0Nzc5awnA-","indicatorReducedPulse":"_4dXQsbprq3s-","spinning":"IZCteJUCKio-"};
+
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+function ActivityIndicator({ size = "base", ariaLabel = "Loading", className, style, }) {
+    return (React__default.createElement("div", { role: "status", "aria-label": ariaLabel, className: classnames(styles.indicator, size === "small" && styles.small, className), style: style },
+        React__default.createElement("span", { className: styles.screenReaderOnly }, ariaLabel),
+        React__default.createElement("svg", { className: styles.svg, viewBox: "0 0 48 48", focusable: "false", "aria-hidden": "true" },
+            React__default.createElement("circle", { className: styles.track, cx: "24", cy: "24", r: "20" }),
+            React__default.createElement("circle", { className: styles.arc, cx: "24", cy: "24", r: "20" }))));
+}
+
+export { ActivityIndicator as A };

package/dist/Spinner/Spinner.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 interface SpinnerProps {
     /**
      * Specifies the size of the spinner
@@ -12,5 +15,8 @@ interface SpinnerProps {
      */
     readonly inline?: boolean;
 }
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 export declare function Spinner({ size, inline }: SpinnerProps): React.JSX.Element;
 export {};

package/dist/Spinner-cjs.js

@@ -5,6 +5,9 @@ var classnames = require('classnames');
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 function Spinner({ size = "base", inline }) {
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",

package/dist/Spinner-es.js

@@ -3,6 +3,9 @@ import classnames from 'classnames';
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 function Spinner({ size = "base", inline }) {
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -0,0 +1,67 @@
+# Activity Indicator
+
+`ActivityIndicator` is used to communicate an **indeterminate** activity the
+user cannot directly control or measure — loading, fetching, or waiting on an
+external system.
+
+Use `ActivityIndicator` when the loading time or fraction of progress is
+unknown. If you know the fraction of progress (for example, "3 of 4 files
+uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
+will subsume `ProgressBar` under the new naming is forthcoming.
+
+## Design & usage guidelines
+
+The default `ActivityIndicator` size is `base` (32px) and can be used in most
+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.
+
+## 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"`).
+
+The indicator does not participate in the keyboard tab order.
+
+### Reduced motion
+
+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.
+
+## Relationship to Spinner
+
+The legacy [Spinner](../Spinner/Spinner.md) component remains available and
+unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
+expected to deprecate `Spinner` in favour of `ActivityIndicator`.
+
+## Mobile
+
+On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
+[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
+component from React Native.
+
+## Mockup
+
+
+## Props
+
+### Web
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | `Loading` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
+| `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
+| `size` | `"base" | "small"` | No | `base` | Visual size. `base` renders at 32px, `small` renders at 16px. |
+| `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |

package/dist/docs/Spinner/Spinner.md

@@ -1,5 +1,13 @@
 # Spinner
 
+> **Deprecated.** Use
+> [ActivityIndicator](../ActivityIndicator/ActivityIndicator.md) for new work.
+> `ActivityIndicator` is the supported indeterminate loading indicator going
+> forward — it offers the same semantic with a cleaner prop surface, a polite
+> `role="status"`, theme-adaptive tokens, Material-style three-layer
+> animation, and a `prefers-reduced-motion` fallback. `Spinner` continues to
+> work unchanged for existing call sites.
+
 Spinner is used to indicate the loading of content where the actual amount of
 loading time or progress is unknown.
 
@@ -32,7 +40,7 @@ If the amount of progress or loading time is known, use
 process.
 
 To indicate loading content in mobile applications, refer to
-[ActivityIndicator](/components/ActivityIndicator).
+[ActivityIndicator](../ActivityIndicator/ActivityIndicator.md).
 
 
 ## Props

package/dist/docs/index.md

@@ -1,3 +1,4 @@
+[ActivityIndicator](./ActivityIndicator/ActivityIndicator.md)
 [AnimatedPresence](./AnimatedPresence/AnimatedPresence.md)
 [AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
 [Animation](./Animation/Animation.md)

package/dist/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var AnimatedPresence = require('./AnimatedPresence-cjs.js');
 var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
@@ -93,6 +94,7 @@ var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
+require('classnames');
 require('framer-motion');
 require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
@@ -110,7 +112,6 @@ require('./index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('./floating-ui.react-dom-cjs.js');
-require('classnames');
 require('./maxHeight-cjs.js');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
@@ -205,6 +206,7 @@ function isNormalClick(evt) {
         !evt.altKey);
 }
 
+exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;
 exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;
 exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
 exports.AtlantisContext = AtlantisContext.AtlantisContext;

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+export * from "./ActivityIndicator";
 export * from "./AnimatedPresence";
 export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ActivityIndicator";
 export * from "./AnimatedPresence";
 export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";

package/dist/index.mjs

@@ -1,3 +1,4 @@
+export { A as ActivityIndicator } from './ActivityIndicator-es.js';
 export { A as AnimatedPresence } from './AnimatedPresence-es.js';
 export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
@@ -91,6 +92,7 @@ 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';
+import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
 import './_commonjsHelpers-es.js';
@@ -108,7 +110,6 @@ import './index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import './floating-ui.react-dom-es.js';
-import 'classnames';
 import './maxHeight-es.js';
 import './tslib.es6-es.js';
 import 'react-hook-form';

package/dist/styles.css

@@ -1,3 +1,282 @@
+/*
+ * ActivityIndicator
+ *
+ * Indeterminate three-layer ring, following Material Web's canonical
+ * SVG-based pattern:
+ *   1. The <svg> rotates continuously at a constant linear speed (Layer 1).
+ *   2. The active <circle> rotates through 8 discrete phases per cycle
+ *      (Layer 2).
+ *   3. The active <circle>'s stroke-dasharray expands and contracts so the
+ *      visible arc length grows and shrinks (Layer 3); stroke-dashoffset
+ *      slides the arc around the ring across the cycle.
+ */
+
+.YST686vLR3c- {
+  position: relative;
+  width: 32px;
+  width: var(--space-larger);
+  height: 32px;
+  height: var(--space-larger);
+}
+
+/*
+ * Visually hide an element from sighted users while keeping it in the
+ * accessibility tree and the live-region text content. Used for the
+ * mount-time "Loading" announcement on role=\"status\". Mirrors the
+ * .screenReaderOnly pattern already used elsewhere in @jobber/components.
+ */
+
+.MmNHh-oCyxc- {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+._888S5Y2IeZ8- {
+  width: 16px;
+  width: var(--space-base);
+  height: 16px;
+  height: var(--space-base);
+}
+
+/*
+ * Layer 1 — continuous linear rotation on the SVG.
+ *
+ * The three indicator durations (1568ms outer rotation, 5332ms inner
+ * 8-phase cycle, 1333ms arc expand/contract) are taken from Material
+ * Web's published progress-motion spec. They are tuned against each
+ * other to produce the canonical Material rhythm and are intentionally
+ * inlined as literals because no other component currently consumes
+ * them; promote them to design tokens once a second consumer (e.g. a
+ * future `ProgressIndicator`) needs the same values.
+ */
+
+.Av9z-aLocss- {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -webkit-animation: WvHFS--Nm80- 1568ms linear infinite;
+          animation: WvHFS--Nm80- 1568ms linear infinite;
+  will-change: transform;
+}
+
+/* Static background ring drawn beneath the moving arc. */
+
+.VDTWabJptKI- {
+  fill: none;
+  stroke: hsl(0, 0%, 93%);
+  stroke: var(--color-disabled--secondary);
+  stroke-width: 4;
+}
+
+._888S5Y2IeZ8- .VDTWabJptKI- {
+  stroke-width: 6;
+}
+
+/*
+ * Layer 2 + 3 — the active arc.
+ *
+ * The circle has circumference 2π·20 ≈ 125.66 (SVG units). The dasharray
+ * (visible, gap) interpolates so the visible portion grows from ~1 unit to
+ * ~95 units, while the dashoffset slides the arc around the ring. The
+ * combined cycle is the canonical Material rhythm.
+ *
+ * stroke-linecap: round produces the soft pill-shaped tips on the arc.
+ */
+
+._9XO0290QNCY- {
+  fill: none;
+  stroke: hsl(198, 35%, 21%);
+  stroke: var(--color-interactive--subtle);
+  stroke-width: 4;
+  stroke-linecap: round;
+  -webkit-transform-origin: center;
+          transform-origin: center;
+  -webkit-animation:
+    SHHICknKvqA- 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
+    _0m0Nzc5awnA- 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+          animation:
+    SHHICknKvqA- 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
+    _0m0Nzc5awnA- 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+._888S5Y2IeZ8- ._9XO0290QNCY- {
+  stroke-width: 6;
+}
+
+@-webkit-keyframes WvHFS--Nm80- {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes WvHFS--Nm80- {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+/* Layer 2 — 8-phase 1080° rotation on the active arc. */
+
+@-webkit-keyframes SHHICknKvqA- {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  }
+  25% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  37.5% {
+    -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+  }
+  50% {
+    -webkit-transform: rotate(540deg);
+            transform: rotate(540deg);
+  }
+  62.5% {
+    -webkit-transform: rotate(675deg);
+            transform: rotate(675deg);
+  }
+  75% {
+    -webkit-transform: rotate(810deg);
+            transform: rotate(810deg);
+  }
+  87.5% {
+    -webkit-transform: rotate(945deg);
+            transform: rotate(945deg);
+  }
+  100% {
+    -webkit-transform: rotate(1080deg);
+            transform: rotate(1080deg);
+  }
+}
+
+@keyframes SHHICknKvqA- {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  }
+  25% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  37.5% {
+    -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+  }
+  50% {
+    -webkit-transform: rotate(540deg);
+            transform: rotate(540deg);
+  }
+  62.5% {
+    -webkit-transform: rotate(675deg);
+            transform: rotate(675deg);
+  }
+  75% {
+    -webkit-transform: rotate(810deg);
+            transform: rotate(810deg);
+  }
+  87.5% {
+    -webkit-transform: rotate(945deg);
+            transform: rotate(945deg);
+  }
+  100% {
+    -webkit-transform: rotate(1080deg);
+            transform: rotate(1080deg);
+  }
+}
+
+/*
+ * Layer 3 — expand/contract the visible arc length via stroke-dasharray
+ * while shifting it around the ring via stroke-dashoffset. The "200" gap
+ * value exceeds the circle's circumference, ensuring only one stroke
+ * segment is visible at a time.
+ */
+
+@-webkit-keyframes _0m0Nzc5awnA- {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -125;
+  }
+}
+
+@keyframes _0m0Nzc5awnA- {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -125;
+  }
+}
+
+@-webkit-keyframes _4dXQsbprq3s- {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.35;
+  }
+}
+
+@keyframes _4dXQsbprq3s- {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.35;
+  }
+}
+
+/*
+ * Reduced motion fallback. Hide the active arc entirely; repaint the static
+ * track in the icon foreground colour and pulse its opacity so the
+ * indicator still reads as "busy" without rotational motion.
+ *
+ * A naive `animation: none` would freeze a partial arc mid-cycle and lose
+ * the busy affordance.
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  .Av9z-aLocss-,
+  ._9XO0290QNCY- {
+    -webkit-animation: none;
+            animation: none;
+  }
+
+  ._9XO0290QNCY- {
+    display: none;
+  }
+
+  .VDTWabJptKI- {
+    stroke: hsl(198, 35%, 21%);
+    stroke: var(--color-interactive--subtle);
+    -webkit-animation: _4dXQsbprq3s- 2s ease-in-out infinite alternate;
+            animation: _4dXQsbprq3s- 2s ease-in-out infinite alternate;
+  }
+}
+
 .P6HrDSaI0Ac- {
   display: contents;
 }

package/dist/utils/meta/meta.json

@@ -1,5 +1,6 @@
 {
   "exportedComponents": [
+    "ActivityIndicator",
     "AffixIcon",
     "AffixLabel",
     "AnimatedPresence",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -25,6 +25,11 @@
       "import": "./dist/unstyledPrimitives/index.mjs",
       "require": "./dist/unstyledPrimitives/index.cjs"
     },
+    "./ActivityIndicator": {
+      "types": "./dist/ActivityIndicator/index.d.ts",
+      "import": "./dist/ActivityIndicator/index.mjs",
+      "require": "./dist/ActivityIndicator/index.cjs"
+    },
     "./AnimatedPresence": {
       "types": "./dist/AnimatedPresence/index.d.ts",
       "import": "./dist/AnimatedPresence/index.mjs",
@@ -508,7 +513,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.101.0",
+    "@jobber/design": "0.101.1",
     "@jobber/hooks": "2.20.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -563,5 +568,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2829a8684a94528cf087b63fa471c531c95d01c8"
+  "gitHead": "7b859533f0b0482ad30654fb0fde5d41c2d918ba"
 }