@jobber/components 6.120.3 → 6.121.0

package/dist/Gallery/index.cjs

@@ -18,6 +18,10 @@ require('@jobber/design');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Heading-cjs.js');
+require('../Tooltip-cjs.js');
+require('../floating-ui.react-cjs.js');
+require('../floating-ui.react-dom-cjs.js');
+require('react/jsx-runtime');
 require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
@@ -35,9 +39,6 @@ require('../Content-cjs.js');
 require('../ProgressBar-cjs.js');
 require('../ConfirmationModal-cjs.js');
 require('../Modal/index.cjs');
-require('../floating-ui.react-cjs.js');
-require('../floating-ui.react-dom-cjs.js');
-require('react/jsx-runtime');
 require('../AtlantisPortalContent-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');

package/dist/Gallery/index.mjs

@@ -16,6 +16,10 @@ import '@jobber/design';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../Heading-es.js';
+import '../Tooltip-es.js';
+import '../floating-ui.react-es.js';
+import '../floating-ui.react-dom-es.js';
+import 'react/jsx-runtime';
 import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
@@ -33,9 +37,6 @@ import '../Content-es.js';
 import '../ProgressBar-es.js';
 import '../ConfirmationModal-es.js';
 import '../Modal/index.mjs';
-import '../floating-ui.react-es.js';
-import '../floating-ui.react-dom-es.js';
-import 'react/jsx-runtime';
 import '../AtlantisPortalContent-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';

package/dist/LightBox/LightBox.d.ts

@@ -17,10 +17,21 @@ declare function LightBoxOverlay({ className }: {
     readonly className?: string;
 }): React.JSX.Element;
 /**
- * Top bar showing the current image counter (`1/3`) and a close button.
- * Styled for dark backgrounds.
+ * Top bar showing an open-in-new-tab action, the current image counter (`1/3`),
+ * and a close button. Styled for dark backgrounds.
  */
 declare function LightBoxToolbar(): React.JSX.Element;
+/**
+ * Opens the current image in a new browser tab. Included in the default
+ * `LightBox.Toolbar`. Returns `null` if the current image has no `url`.
+ */
+declare function LightBoxOpenInNewTabAction({ ariaLabel, }: {
+    /**
+     * Accessible label for the action, also used as the tooltip message.
+     * @default "Open image in new tab"
+     */
+    readonly ariaLabel?: string;
+}): React.JSX.Element | null;
 /**
  * The animated hero image with swipe-to-navigate and slide animation.
  *
@@ -112,6 +123,7 @@ declare namespace LightBox {
     var Background: typeof LightBoxBackground;
     var Overlay: typeof LightBoxOverlay;
     var Toolbar: typeof LightBoxToolbar;
+    var OpenInNewTabAction: typeof LightBoxOpenInNewTabAction;
     var Slides: typeof LightBoxSlides;
     var Navigation: typeof LightBoxNavigation;
     var Caption: typeof LightBoxCaption;

package/dist/LightBox/index.cjs

@@ -17,6 +17,10 @@ require('@jobber/design');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Heading-cjs.js');
+require('../Tooltip-cjs.js');
+require('../floating-ui.react-cjs.js');
+require('../floating-ui.react-dom-cjs.js');
+require('react/jsx-runtime');
 require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');

package/dist/LightBox/index.mjs

@@ -15,6 +15,10 @@ import '@jobber/design';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../Heading-es.js';
+import '../Tooltip-es.js';
+import '../floating-ui.react-es.js';
+import '../floating-ui.react-dom-es.js';
+import 'react/jsx-runtime';
 import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';

package/dist/LightBox-cjs.js

@@ -10,9 +10,10 @@ var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
 var Heading = require('./Heading-cjs.js');
+var Tooltip = require('./Tooltip-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftAction":"_3DY1o57MHxg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
@@ -212,18 +213,32 @@ function LightBoxOverlay({ className }) {
     return (React.createElement("div", { className: classnames(styles.blurOverlay, className), onClick: handleRequestClose }));
 }
 /**
- * Top bar showing the current image counter (`1/3`) and a close button.
- * Styled for dark backgrounds.
+ * Top bar showing an open-in-new-tab action, the current image counter (`1/3`),
+ * and a close button. Styled for dark backgrounds.
  */
 function LightBoxToolbar() {
     const { images, currentImageIndex, handleRequestClose } = useLightBoxContext();
     return (React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
         React.createElement("div", { className: styles.toolbar },
+            React.createElement(LightBoxOpenInNewTabAction, null),
             React.createElement("div", { className: styles.slideNumber },
                 React.createElement(Text.Text, null, `${currentImageIndex + 1}/${images.length}`)),
             React.createElement("div", { className: styles.closeButton },
                 React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))));
 }
+/**
+ * Opens the current image in a new browser tab. Included in the default
+ * `LightBox.Toolbar`. Returns `null` if the current image has no `url`.
+ */
+function LightBoxOpenInNewTabAction({ ariaLabel = "Open image in new tab", }) {
+    const { images, currentImageIndex } = useLightBoxContext();
+    const currentImage = images[currentImageIndex];
+    if (!(currentImage === null || currentImage === void 0 ? void 0 : currentImage.url))
+        return null;
+    return (React.createElement("div", { className: styles.leftAction },
+        React.createElement(Tooltip.Tooltip, { message: ariaLabel },
+            React.createElement(Button.Button, { size: "small", variation: "subtle", type: "secondary", icon: "export", ariaLabel: ariaLabel, url: currentImage.url, external: true }))));
+}
 /**
  * The animated hero image with swipe-to-navigate and slide animation.
  *
@@ -347,6 +362,7 @@ LightBox.Content = LightBoxContent;
 LightBox.Background = LightBoxBackground;
 LightBox.Overlay = LightBoxOverlay;
 LightBox.Toolbar = LightBoxToolbar;
+LightBox.OpenInNewTabAction = LightBoxOpenInNewTabAction;
 LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;

package/dist/LightBox-es.js

@@ -8,9 +8,10 @@ import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { H as Heading } from './Heading-es.js';
+import { T as Tooltip } from './Tooltip-es.js';
 import { A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftAction":"_3DY1o57MHxg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
@@ -210,18 +211,32 @@ function LightBoxOverlay({ className }) {
     return (React__default.createElement("div", { className: classnames(styles.blurOverlay, className), onClick: handleRequestClose }));
 }
 /**
- * Top bar showing the current image counter (`1/3`) and a close button.
- * Styled for dark backgrounds.
+ * Top bar showing an open-in-new-tab action, the current image counter (`1/3`),
+ * and a close button. Styled for dark backgrounds.
  */
 function LightBoxToolbar() {
     const { images, currentImageIndex, handleRequestClose } = useLightBoxContext();
     return (React__default.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
         React__default.createElement("div", { className: styles.toolbar },
+            React__default.createElement(LightBoxOpenInNewTabAction, null),
             React__default.createElement("div", { className: styles.slideNumber },
                 React__default.createElement(Text, null, `${currentImageIndex + 1}/${images.length}`)),
             React__default.createElement("div", { className: styles.closeButton },
                 React__default.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))));
 }
+/**
+ * Opens the current image in a new browser tab. Included in the default
+ * `LightBox.Toolbar`. Returns `null` if the current image has no `url`.
+ */
+function LightBoxOpenInNewTabAction({ ariaLabel = "Open image in new tab", }) {
+    const { images, currentImageIndex } = useLightBoxContext();
+    const currentImage = images[currentImageIndex];
+    if (!(currentImage === null || currentImage === void 0 ? void 0 : currentImage.url))
+        return null;
+    return (React__default.createElement("div", { className: styles.leftAction },
+        React__default.createElement(Tooltip, { message: ariaLabel },
+            React__default.createElement(Button, { size: "small", variation: "subtle", type: "secondary", icon: "export", ariaLabel: ariaLabel, url: currentImage.url, external: true }))));
+}
 /**
  * The animated hero image with swipe-to-navigate and slide animation.
  *
@@ -345,6 +360,7 @@ LightBox.Content = LightBoxContent;
 LightBox.Background = LightBoxBackground;
 LightBox.Overlay = LightBoxOverlay;
 LightBox.Toolbar = LightBoxToolbar;
+LightBox.OpenInNewTabAction = LightBoxOpenInNewTabAction;
 LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;

package/dist/styles.css

@@ -8971,6 +8971,10 @@ html.atlantisLightBoxActive {
   grid-column: 2;
   justify-self: center;
 }
+._3DY1o57MHxg- {
+  grid-column: 1;
+  justify-self: start;
+}
 .yYFVVScosfQ- {
   position: absolute;
   width: 100%;

package/dist/utils/meta/meta.json

@@ -139,6 +139,7 @@
     "LightBox.Caption",
     "LightBox.Content",
     "LightBox.Navigation",
+    "LightBox.OpenInNewTabAction",
     "LightBox.Overlay",
     "LightBox.Provider",
     "LightBox.Slides",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.120.3",
+  "version": "6.121.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -385,6 +385,16 @@
       "import": "./dist/Select/index.mjs",
       "require": "./dist/Select/index.cjs"
     },
+    "./SideDrawer": {
+      "types": "./dist/SideDrawer/index.d.ts",
+      "import": "./dist/SideDrawer/index.mjs",
+      "require": "./dist/SideDrawer/index.cjs"
+    },
+    "./SegmentedControl": {
+      "types": "./dist/SegmentedControl/index.d.ts",
+      "import": "./dist/SegmentedControl/index.mjs",
+      "require": "./dist/SegmentedControl/index.cjs"
+    },
     "./SideKick": {
       "types": "./dist/SideKick/index.d.ts",
       "import": "./dist/SideKick/index.mjs",
@@ -552,5 +562,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4b2d7ea4c8a4478d533c4213b14193d3ab106fc0"
+  "gitHead": "9305629cc1a6d8f32d9e4ef9e0d08df12fb92e89"
 }

package/rollup.config.mjs

@@ -53,7 +53,7 @@ export default {
   plugins: [
     nodePolyfills(),
     nodeResolve(),
-    multiInput.default(),
+    multiInput.default({ glob: { ignore: ["src/**/docs/index.ts"] } }),
     typescript({
       tsconfig: "./tsconfig.rollup.json",
       declarationDir: "dist",