@jobber/components 8.17.0 → 8.18.1

package/dist/docs/Banner/Banner.md

@@ -441,8 +441,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 270 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |

package/dist/docs/Box/Box.md

@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
-| `background` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 270 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 270 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
 | `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Button/Button.md

@@ -956,6 +956,6 @@ export const styles = StyleSheet.create({
 | `numberOfLines` | `number` | No | — |  |
 | `size` | `"base" | "extravagant" | "jumbo" | "large" | "larger" | "largest" | "small" | "smaller"` | No | — |  |
 | `textCase` | `"capitalize" | "lowercase" | "none" | "uppercase"` | No | — |  |
-| `underline` | `UnderlineStyle | "solid color-indigo" | "solid color-indigo--light" | "solid color-indigo--lighter" | "solid color-indigo--lightest" | "solid color-indigo--dark" | ... 646 more ... | "dashed color-client--onSurface"` | No | — | The style (and optionally a color) of underline the text is decorated with. All semantic color tokens (other than the... |
+| `underline` | `UnderlineStyle | "solid color-indigo" | "solid color-indigo--light" | "solid color-indigo--lighter" | "solid color-indigo--lightest" | "solid color-indigo--dark" | ... 650 more ... | "dashed color-client--onSurface"` | No | — | The style (and optionally a color) of underline the text is decorated with. All semantic color tokens (other than the... |
 | `UNSAFE_className` | `{ textStyle?: string; }` | No | — | **Use at your own risk:** Custom classNames for specific elements. This should only be used as a **last resort**. Usi... |
 | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/Countdown/Countdown.md

@@ -29,11 +29,6 @@ Consider the context of the countdown and whether the user will have enough
 context to interpret appropriately without labeled units when making the
 decision on whether to show or hide the units.
 
-## Related components
-
-* To display a unit of time that has already passed, use
-  [FormatRelativeDateTime](../FormatRelativeDateTime/FormatRelativeDateTime.md)
-
 
 ## Props
 

package/dist/docs/Datepicker/Datepicker.md

@@ -54,5 +54,3 @@ If using a custom activator, ensure that the activator is keyboard-operable.
 * If you are looking to use the `DatePicker` in a `Form`, consider the
   [InputDate](../InputDate/InputDate.md) component.
 * For a time input, use [InputTime](../InputTime/InputTime.md)
-* To represent past or future dates and times, use
-  [FormatRelativeDateTime](../FormatRelativeDateTime/FormatRelativeDateTime.md)

package/dist/docs/Icon/Icon.md

@@ -583,7 +583,7 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/Menu/Menu.md

@@ -502,7 +502,7 @@ and should not be used for new implementations.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/index.md

@@ -40,7 +40,6 @@
 [FilterPicker](./FilterPicker/FilterPicker.md)
 [Flex](./Flex/Flex.md)
 [FormatFile](./FormatFile/FormatFile.md)
-[FormatRelativeDateTime](./FormatRelativeDateTime/FormatRelativeDateTime.md)
 [formatting](./formatting/formatting.md)
 [Frame](./Frame/Frame.md)
 [Gallery](./Gallery/Gallery.md)

package/dist/index.cjs

@@ -43,7 +43,6 @@ var Flex = require('./Flex-cjs.js');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
 var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
-var FormatRelativeDateTime = require('./FormatRelativeDateTime-cjs.js');
 var Frame = require('./Frame-cjs.js');
 var Gallery = require('./Gallery-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
@@ -261,7 +260,6 @@ exports.useFormFieldWrapperStyles = FormFieldWrapper.useFormFieldWrapperStyles;
 exports.FormatFile = FormatFile.FormatFile;
 exports.useFormatFile = FormatFile.useFormatFile;
 exports.useFormatFileStyles = FormatFile.useFormatFileStyles;
-exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;
 exports.Frame = Frame.Frame;
 exports.Gallery = Gallery.Gallery;
 exports.GLIMMER_TEST_ID = Glimmer.GLIMMER_TEST_ID;

package/dist/index.d.mts

@@ -32,7 +32,6 @@ export * from "./FeatureSwitch";
 export * from "./Flex";
 export * from "./FormField";
 export * from "./FormatFile";
-export * from "./FormatRelativeDateTime";
 export * from "./Frame";
 export * from "./Gallery";
 export * from "./Glimmer";

package/dist/index.d.ts

@@ -32,7 +32,6 @@ export * from "./FeatureSwitch";
 export * from "./Flex";
 export * from "./FormField";
 export * from "./FormatFile";
-export * from "./FormatRelativeDateTime";
 export * from "./Frame";
 export * from "./Gallery";
 export * from "./Glimmer";

package/dist/index.mjs

@@ -41,7 +41,6 @@ export { F as Flex } from './Flex-es.js';
 export { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
 export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from './FormFieldWrapper-es.js';
 export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
-export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-es.js';
 export { F as Frame } from './Frame-es.js';
 export { G as Gallery } from './Gallery-es.js';
 export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-es.js';

package/dist/utils/meta/meta.json

@@ -97,7 +97,6 @@
     "FormatFile.ProgressContainer",
     "FormatFile.ThumbnailContainer",
     "FormatFile.Wrapper",
-    "FormatRelativeDateTime",
     "Frame",
     "Gallery",
     "Glimmer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.17.0",
+  "version": "8.18.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -195,11 +195,6 @@
       "import": "./dist/FormatFile/index.mjs",
       "require": "./dist/FormatFile/index.cjs"
     },
-    "./FormatRelativeDateTime": {
-      "types": "./dist/FormatRelativeDateTime/index.d.ts",
-      "import": "./dist/FormatRelativeDateTime/index.mjs",
-      "require": "./dist/FormatRelativeDateTime/index.cjs"
-    },
     "./Frame": {
       "types": "./dist/Frame/index.d.ts",
       "import": "./dist/Frame/index.mjs",
@@ -492,7 +487,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.104.0",
+    "@jobber/design": "0.105.0",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -546,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "202afd57218f0140cd2cf489742f99afd22e6b2c"
+  "gitHead": "b13d0074cac7624ef3b8efa7e79e26697d9e15a6"
 }

package/FormatRelativeDateTime.d.ts

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

package/FormatRelativeDateTime.js

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

package/dist/FormatRelativeDateTime/FormatRelativeDateTime.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-interface FormatRelativeDateTimeProps {
-    /**
-     * Date to be displayed.
-     *
-     * A `string` should be an ISO 8601 format date string.
-     */
-    readonly date: Date | string;
-}
-export declare function FormatRelativeDateTime({ date: inputDate, }: FormatRelativeDateTimeProps): React.JSX.Element;
-export {};

package/dist/FormatRelativeDateTime/index.cjs

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

package/dist/FormatRelativeDateTime/index.d.ts

@@ -1 +0,0 @@
-export { FormatRelativeDateTime } from "./FormatRelativeDateTime";

package/dist/FormatRelativeDateTime/index.mjs

@@ -1,2 +0,0 @@
-export { F as FormatRelativeDateTime } from '../FormatRelativeDateTime-es.js';
-import 'react';

package/dist/FormatRelativeDateTime-cjs.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function FormatRelativeDateTime({ date: inputDate, }) {
-    let dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else {
-        dateObject = new Date(inputDate);
-    }
-    const now = Date.now() / 1000; //seconds
-    const date = dateObject;
-    const delta = now - date.getTime() / 1000; //seconds;
-    switch (relativeTimeRange(delta)) {
-        case "less than an hour":
-            return React.createElement(React.Fragment, null, showMinutes(Math.round(delta / 60)));
-        case "less then a day":
-            return (React.createElement(React.Fragment, null, date.toLocaleTimeString(undefined, {
-                hour: "numeric",
-                minute: "numeric",
-            })));
-        case "less than a week":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { weekday: "short" }));
-        case "less than a year":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
-        default:
-            return (React.createElement(React.Fragment, null, strFormatDate(date, {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            })));
-    }
-}
-function relativeTimeRange(delta) {
-    delta = delta / 60;
-    if (delta < 60)
-        return "less than an hour";
-    delta = delta / 60;
-    if (delta < 24)
-        return "less then a day";
-    delta = delta / 24;
-    if (delta < 7)
-        return "less than a week";
-    delta = delta / 365;
-    if (delta < 1)
-        return "less than a year";
-    return "a year or more";
-}
-function strFormatDate(date, options) {
-    return date.toLocaleDateString(undefined, options);
-}
-function showMinutes(minutes) {
-    if (minutes <= 1) {
-        return "1 minute ago";
-    }
-    else {
-        return minutes + " minutes ago";
-    }
-}
-
-exports.FormatRelativeDateTime = FormatRelativeDateTime;

package/dist/FormatRelativeDateTime-es.js

@@ -1,61 +0,0 @@
-import React__default from 'react';
-
-function FormatRelativeDateTime({ date: inputDate, }) {
-    let dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else {
-        dateObject = new Date(inputDate);
-    }
-    const now = Date.now() / 1000; //seconds
-    const date = dateObject;
-    const delta = now - date.getTime() / 1000; //seconds;
-    switch (relativeTimeRange(delta)) {
-        case "less than an hour":
-            return React__default.createElement(React__default.Fragment, null, showMinutes(Math.round(delta / 60)));
-        case "less then a day":
-            return (React__default.createElement(React__default.Fragment, null, date.toLocaleTimeString(undefined, {
-                hour: "numeric",
-                minute: "numeric",
-            })));
-        case "less than a week":
-            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { weekday: "short" }));
-        case "less than a year":
-            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
-        default:
-            return (React__default.createElement(React__default.Fragment, null, strFormatDate(date, {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            })));
-    }
-}
-function relativeTimeRange(delta) {
-    delta = delta / 60;
-    if (delta < 60)
-        return "less than an hour";
-    delta = delta / 60;
-    if (delta < 24)
-        return "less then a day";
-    delta = delta / 24;
-    if (delta < 7)
-        return "less than a week";
-    delta = delta / 365;
-    if (delta < 1)
-        return "less than a year";
-    return "a year or more";
-}
-function strFormatDate(date, options) {
-    return date.toLocaleDateString(undefined, options);
-}
-function showMinutes(minutes) {
-    if (minutes <= 1) {
-        return "1 minute ago";
-    }
-    else {
-        return minutes + " minutes ago";
-    }
-}
-
-export { FormatRelativeDateTime as F };

package/dist/docs/FormatRelativeDateTime/FormatRelativeDateTime.md

@@ -1,30 +0,0 @@
-# FormatRelativeDateTime
-
-A FormatRelateDateTime displays the date and time using relative wording or
-approximate values. This component only represents current date and dates in the
-past. No future dating.
-
-## Rules
-
-If the message was received less than an hour ago the format is x minutes ago.
-
-If the message was received today, but more than an hour ago, the format becomes
-the hours and minutes it was received at.
-
-If the message was received within the last six days, the format is Sun, Mon,
-Tue, Wed, Thu, Fri, Sat.
-
-If the message was received between six days ago and yesterday’s date one year
-previous, the format is Month Date.
-
-If the message was received exactly one year ago or more than one year ago, the
-format is Month Day, Year.
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `date` | `Date | string` | Yes | — | Date to be displayed.  A `string` should be an ISO 8601 format date string. |