@jobber/components-native 0.101.5 → 0.101.6

package/dist/docs/ActionItem/ActionItem.md

@@ -0,0 +1,65 @@
+# Action Item
+
+ActionItem allows for consistent presentation of text content that can be
+actioned on. It can use icons to provide additional visual context about the
+text content.
+
+## Design & usage guidelines
+
+The ActionItem will provide a familiar pattern for enhancing text content with
+icons and providing actions.
+
+ActionItem is commonly used [in a Card](../Card/Card.md), where it can be
+grouped with other ActionItems or other elements as needed.
+
+If the action appears directly related to the title, or otherwise is not
+well-suited to be centered in the ActionItem, you can
+[align the action](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitem--action-alignment)
+as needed.
+
+## Content guidelines
+
+ActionItem provides a pre-styled `title`, which can be used to consistently
+title the element. You can use the
+[title](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitem--title-only)
+and not pass any children. This is useful when you have empty states that
+require the user's attention.
+
+When an `onPress` is provided, the entire ActionItem is tappable for easy
+interactivity. If a child of the ActionItem has an `onPress`, tapping directly
+on that child will trigger the child item's `onPress`.
+
+Child content can be whatever you need but typically consists of
+[Text](../Text/Text.md).
+
+## Related components
+
+To group multiple ActionItems together with dividers between them, use
+[ActionItemGroup](../ActionItemGroup/ActionItemGroup.md).
+
+ActionItem is commonly consumed by [Card](../Card/Card.md). In most cases, it
+will also render at least one [Icon](../Icon/Icon.md).
+
+## Accessibility
+
+The Icons in ActionItem should not be announced to assistive technology. The
+entire contents of the ActionItem should be read as one element.
+
+## Mockup
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `actionIcon` | `ActionIconNames` | No | `edit` | Action icon to display |
+| `actionIconAlignment` | `"flex-start" | "flex-end" | "center"` | No | `center` | Alignment of action icon |
+| `actionIconColour` | `ActionIconColour` | No | `interactive` | Colour of the action icon |
+| `children` | `ReactNode` | No | — | Content to display. |
+| `icon` | `IconNames` | No | — | Name of the icon to display before content |
+| `iconColor` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Colour of the icon displayed before content |
+| `onPress` | `() => void` | No | — | Press handler |
+| `testID` | `string` | No | `actionItem` |  |
+| `title` | `string` | No | — | Title of the Action Item |

package/dist/docs/ActionItemGroup/ActionItemGroup.md

@@ -0,0 +1,33 @@
+# Action Item Group
+
+ActionItemGroup is a layout wrapper allowing for quick and easy grouping of
+[ActionItems](../ActionItem/ActionItem.md). It can also house other content alongside
+an ActionItem if needed.
+
+## Design & usage guidelines
+
+The ActionItemGroup makes it easy to consistently display several ActionItems
+alongside each other with dividers to segment each item.
+
+## Content guidelines
+
+You'll mostly be passing ActionItems into ActionItemGroup, but as shown it can
+handle other content types if needed.
+
+In forms in particular, you may find the need to add other elements into the
+group. You may need to use [Content](../Content/Content.md) or write some styling
+to get things aligned. In the Mixed Components
+[example](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitemgroup--mixed-components)
+you can see Content being used to layout [Text](../Text/Text.md) and
+[Typography](../Typography/Typography.md) alongside some
+[ActionItems](../ActionItem/ActionItem.md).
+
+## Related components
+
+If you only need one [ActionItem](../ActionItem/ActionItem.md), you can use that on
+its own without this wrapper.
+
+## Accessibility
+
+ActionItemGroup is just a layout wrapper and does not communicate anything to
+screen-readers - that's the job of its children.

package/dist/docs/ActionLabel/ActionLabel.md

@@ -0,0 +1,43 @@
+# Action Label
+
+The ActionLabel is a base component that is widely used in areas that have an
+`onPress` action, like a button.
+
+The aim is to reduce the number of inconsistencies when a designer or an
+engineer decides to build a pressable component that has text on it. This makes
+it easier to maintain consistency in how we visually present tappable actions.
+
+## Design & usage guidelines
+
+ActionLabel supports similar semantic variations as Button:
+
+* default (equivalent to "work")
+* learning
+* destructive
+* subtle
+
+with an additional variation of `onPrimary` which should be used when the
+ActionLabel is consumed by a primary Button or other dark surface.
+
+#### Disable pattern
+
+\*\*As a best practice, do not design with disabled button states. \*\*
+
+This has negative impacts on accessibility as well as an increase in complexity
+for users to understand why the interface is disabled and how to resolve it.
+
+With that said, if you can't design a flow without a disabled state, you can add
+a `disabled` prop to the ActionLabel component.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `align` | `TextAlign` | No | `center` | Alignment of action label |
+| `children` | `ReactNode` | No | — | Text to display. Supports nesting text elements. |
+| `disabled` | `boolean` | No | `false` | Set the display text to disabled color |
+| `type` | `ActionLabelType` | No | `default` | Changes the appearance to match the style of where it's getting used |
+| `variation` | `ActionLabelVariation` | No | `interactive` | The text color |

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -0,0 +1,116 @@
+# Activity Indicator
+
+ActivityIndicator is used to indicate the loading of content where the actual
+amount of loading time or progress is unknown.
+
+## Related components
+
+To indicate loading content in web applications, refer to
+[Spinner](/components/Spinner).
+
+ActivityIndicator uses the core component
+[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) from
+`react-native`.
+
+## Mockup
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"none" | "polite" | "assertive"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `animating` | `boolean` | No | — | Whether to show the indicator (true, the default) or hide it (false). |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `boolean | "mixed"` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"polite" | "assertive" | "off"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
+| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
+| `color` | `ColorValue` | No | — | The foreground color of the spinner (default is gray). |
+| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
+| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
+| `hidesWhenStopped` | `boolean` | No | — | Whether the indicator should hide when not animating (true by default). |
+| `hitSlop` | `number | Insets` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "yes" | "no" | "no-hide-descendants"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
+| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
+| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
+| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
+| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
+| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
+| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
+| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
+| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
+| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
+| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `pointerEvents` | `"box-none" | "none" | "box-only" | "auto"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
+| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
+| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
+| `size` | `number | "small" | "large"` | No | — | Size of the indicator. Small has a height of 20, large has a height of 36.  enum('small', 'large') |
+| `style` | `StyleProp<ViewStyle>` | No | — |  |
+| `tabIndex` | `0 | -1` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |

package/dist/docs/Animation/Animation.md

@@ -0,0 +1,71 @@
+# Animation
+
+## Patterns
+
+Animations in Jobber fall under categories based on their purpose:
+
+### Reveal
+
+Reveals are used to show and hide information on the screen. For example,
+toasts, modals, sidebars appearing and disappearing on the screen.
+
+### State change
+
+State changes are used to inform the user that a context change is taking place.
+This is used when the object has changed state due to user interaction (e.g.
+hover and focus states).
+
+### Emphasis
+
+Emphasis is used to bring attention to something on already on the screen. For
+example, when you want to guide users to a particular part of the interface for
+onboarding or learning purposes.
+
+### Delighter
+
+Delighters can be used occasionally to create surprise and delight, and can give
+personality to our brand. These can be used to reinforce success in an important
+milestones in a user's journey.
+
+## Timing
+
+Use judgement when determining the appropriate timing durations for animations.
+This will depend on the size of the element and the distance it covers.
+Animations for larger elements or longer distances should be longer than smaller
+elements or shorter distances.
+
+| Name               | Examples of use                                         | Value  |
+| :----------------- | :------------------------------------------------------ | ------ |
+| `--timing-quick`   | smaller elements exiting, small elements, state changes | 100ms  |
+| `--timing-base`    | larger elements exiting, small elements, state changes  | 200ms  |
+| `--timing-slow`    | modals, side panels                                     | 300ms  |
+| `--timing-slower`  | large elements traversing across large area             | 400ms  |
+| `--timing-slowest` | page transitions                                        | 500ms  |
+| `--timing-loading` | candy-stripe loading                                    | 1000ms |
+
+## Easing
+
+Animations are linear by default, but this lends an uncanny robotic feeling to
+the motion of an element. Easing creates a more natural, pleasing transition
+between animation states to mimic the acceleration and deceleration of objects
+in the real world.
+
+### Ease in
+
+Starts slow and speeds up. Use for exiting elements that don’t fade out.
+
+### Ease out
+
+Starts fast and slows down. Use for entering elements. For example, opening a
+toast, modal, or menu.
+
+### Ease both
+
+Combines features of ease in and out curves. Use for moving from point to point,
+or for when the element disappears from the screen, but the user can return to
+the previous place at any time. For example, opening and closing a side drawer,
+side nav, or accordion.
+
+### Linear
+
+Use for color and opacity changes (things that don’t move).

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -0,0 +1,256 @@
+# AtlantisThemeContext
+
+Provides a way to control the theme of Atlantis components and the design
+tokens.
+
+## Design & usage guidelines
+
+Both the web and mobile components have the exact same API, except for one minor
+difference in how you update the theme.
+
+Each platform provides a `useAtlantisTheme` hook that you may use to access the
+`theme` and `tokens` in your components.
+
+On mobile, this hook also returns a `setTheme` function which you'll use to
+update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
+Typically there will only be a single provider at the root, controlling the
+theme for the entire app.
+
+On web, you'll need to import the `updateTheme` function and call it with the
+new theme. This is a separate function because it synchronizes the theme update
+across all providers under various React trees. Synchronizing across providers
+is necessary for cases where an island-based architecture is used.
+
+### Usage for web
+
+```tsx
+import {
+  AtlantisThemeContextProvider,
+  updateTheme,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+
+function App() {
+  return (
+    <AtlantisThemeContextProvider>
+      <ThemedComponent />
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function ThemedComponent() {
+  const { theme, tokens } = useAtlantisTheme();
+  return (
+    <Content>
+      <div
+        style={{
+          background: tokens["surface-background"],
+          padding: tokens["space-base"],
+        }}
+      >
+        <Content>
+          <Text>The current theme is: {theme}.</Text>
+          <Text>
+            The javascript tokens can be accessed via the tokens object.
+          </Text>
+          <Text>The theme can be changed using `updateTheme`</Text>
+          <Button
+            onClick={() => updateTheme("light")}
+            label="The theme can be changed to light"
+          />
+          <Button
+            onClick={() => updateTheme("dark")}
+            label="The theme can be changed to dark"
+          />
+        </Content>
+      </div>
+    </Content>
+  );
+}
+```
+
+### Usage for mobile
+
+```tsx
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+
+function App() {
+  return (
+    <AtlantisThemeContextProvider>
+      <ThemedComponent />
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function ThemedComponent() {
+  const { theme, tokens, setTheme } = useAtlantisTheme();
+  return (
+    <Content>
+      <View
+        style={{
+          background: tokens["surface-background"],
+          padding: tokens["space-base"],
+        }}
+      >
+        <Content>
+          <Text>The current theme is: {theme}.</Text>
+          <Text>
+            The javascript tokens can be accessed via the tokens object.
+          </Text>
+          <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("light")}
+            label="The theme can be changed to light"
+          />
+          <Button
+            onPress={() => setTheme("dark")}
+            label="The theme can be changed to dark"
+          />
+        </Content>
+      </View>
+    </Content>
+  );
+}
+```
+
+### Forcing a theme for an AtlantisThemeContextProvider
+
+In some scenarios you may want to force a theme for specific components
+regardless of the main application theme. This can be done by setting the
+`dangerouslyOverrideTheme` prop to `<themeToSet>` on the
+`AtlantisThemeContextProvider`.
+
+Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
+within a *child component* of the `AtlantisThemeContextProvider`, not in the
+same component that renders the provider. Same goes for `useAtlantisTheme`.
+
+```tsx
+import {
+  AtlantisThemeContextProvider,
+  updateTheme,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+
+function App() {
+  return (
+    <AtlantisThemeContextProvider>
+      <ThemedComponent />
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <Text>These components will always be dark themed</Text>
+        <ThemedComponent />
+      </AtlantisThemeContextProvider>
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function ThemedComponent() {
+  const { theme, tokens } = useAtlantisTheme();
+  return (
+    <Content>
+      <div
+        style={{
+          background: tokens["surface-background"],
+          padding: tokens["space-base"],
+        }}
+      >
+        <Content>
+          <Text>The current theme is: {theme}. </Text>
+          <Text>
+            The javascript tokens can be accessed via the tokens object.
+          </Text>
+          <Text>The theme can be changed using `updateTheme`</Text>
+          <Button
+            onClick={() => updateTheme("light")}
+            label="The theme can be changed to light"
+          />
+          <Button
+            onClick={() => updateTheme("dark")}
+            label="The theme can be changed to dark"
+          />
+        </Content>
+      </div>
+    </Content>
+  );
+}
+```
+
+### Overriding theme tokens (Web Only)
+
+If you need to override theme tokens, you can do so by supplying the
+`dangerouslyOverrideTokens` prop to the `AtlantisThemeContextProvider`. You can
+also supply custom tokens which are exposed as CSS variables to any elements
+under this `AtlantisThemeContextProvider`. All overridden tokens are also
+accessible via the `overrideTokens` object from the `useAtlantisTheme` hook.
+
+This capability allows you to create custom theme providers.
+
+```tsx
+import {
+  AtlantisThemeContextProvider,
+  updateTheme,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+
+function App() {
+  return (
+    <AtlantisThemeContextProvider
+      dangerouslyOverrideTokens={{
+        "color-text": "fuchsia",
+      }}
+    >
+      <Text>This text will be fuchsia!</Text>
+    </AtlantisThemeContextProvider>
+  );
+}
+```
+
+### Creating themed styles with buildThemedStyles (Mobile Only)
+
+The `buildThemedStyles` utility is available to help create themed StyleSheets
+that automatically update when the theme changes.
+
+```tsx
+// In the .style.ts file
+import { buildThemedStyles } from "@jobber/components-native";
+
+const useStyles = buildThemedStyles(tokens => ({
+  container: {
+    backgroundColor: tokens["color-surface"],
+    padding: tokens["space-base"],
+    borderRadius: tokens["radius-base"],
+  },
+  text: {
+    color: tokens["color-text"],
+    fontSize: tokens["font-size-base"],
+  },
+}));
+
+// In the component file
+function ThemedComponent() {
+  const styles = useStyles();
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Themed content</Text>
+    </View>
+  );
+}
+```
+
+Key features:
+
+* Automatically updates styles when the theme changes
+* Works with React Native's StyleSheet system
+* Memoized so that the StyleSheet is only re-created when the theme changes
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The children to render. |
+| `dangerouslyOverrideTheme` | `Theme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |

package/dist/docs/AutoLink/AutoLink.md

@@ -0,0 +1,47 @@
+# Auto Link
+
+The AutoLink component is a base component that utilizes the
+[autolinker](https://github.com/gregjacobs/Autolinker.js/) package to find urls,
+phone numbers and emails within a chunk of text. When these linkable items are
+found, they are converted to links that can be interacted with.
+
+This component makes use of the Text component to display both the plain text
+and the links discovered.
+
+In the event a phone number is pressed, after completing the call the user will
+be returned to the app. The same applies when using the detected email.
+
+## Design & usage guidelines
+
+The AutoLink will detect linkable items within text and allow the user to
+interact with them. You can use flags to determine if you want to ignore certain
+types of links, such as ignoring phone numbers.
+
+This is intended for scenarios where you do not know if the text to display will
+contain links within it. A common use case for this would be when dealing with
+user input.
+
+
+## Developer notes
+
+There is an [Autolink](https://github.com/joshswan/react-native-autolink)
+package written by a third party that was investigated to accomplish what this
+component does. Though we were able to provide our own rendering function to
+display our own text instead of RN Text, this still required re-writing a good
+chunk of functionality and still importing the base library to get the proper
+types. Also contained extra things we didn't need. This package was used as
+inspiration into dealing with this problem and building our own.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `bottomTabsVisible` | `boolean` | No | `true` | Determines the placement of the toast that gets shown onLongPress |
+| `children` | `string` | No | `` | Text to display. |
+| `email` | `boolean` | No | — | Flag for linking emails in text |
+| `phone` | `boolean` | No | — | Flag for linking phone numbers in text |
+| `selectable` | `boolean` | No | `true` | Lets the user select text, to use the native copy and paste functionality. |
+| `urls` | `boolean` | No | — | Flag for linking urls in text |