@jobber/components 6.20.8 → 6.22.0

package/dist/InputPassword/index.mjs

@@ -6,11 +6,11 @@ import '@jobber/design';
 import 'classnames';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import '../tslib.es6-es.js';
 import 'react-hook-form';

package/dist/InputPassword-cjs.js

@@ -7,7 +7,7 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');
-require('react-router-dom');
+require('./Button-cjs.js');
 
 function InputPassword(props) {
     const { hasVisibility = false } = props;

package/dist/InputPassword-es.js

@@ -5,7 +5,7 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';
-import 'react-router-dom';
+import './Button-es.js';
 
 function InputPassword(props) {
     const { hasVisibility = false } = props;

package/dist/InputPhoneNumber-cjs.js

@@ -7,7 +7,7 @@ var FormField = require('./FormField-cjs.js');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');
-require('react-router-dom');
+require('./Button-cjs.js');
 
 var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
 

package/dist/InputPhoneNumber-es.js

@@ -5,7 +5,7 @@ import { k as FormField } from './FormField-es.js';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';
-import 'react-router-dom';
+import './Button-es.js';
 
 var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
 

package/dist/InputText/index.cjs

@@ -8,15 +8,15 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');
-require('react-router-dom');
-var omit = require('../omit-cjs.js');
 require('../Button-cjs.js');
+var omit = require('../omit-cjs.js');
 require('../Icon-cjs.js');
-require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
+require('react-router-dom');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');

package/dist/InputText/index.mjs

@@ -6,15 +6,15 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';
-import 'react-router-dom';
-import { o as omit } from '../omit-es.js';
 import '../Button-es.js';
+import { o as omit } from '../omit-es.js';
 import '../Icon-es.js';
-import '../Typography-es.js';
 import '../Text-es.js';
+import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
+import 'react-router-dom';
 import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
 import '../isTypedArray-es.js';

package/dist/InputTime-cjs.js

@@ -8,7 +8,7 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');
-require('react-router-dom');
+require('./Button-cjs.js');
 
 const DEBOUNCE_TIME = 300;
 function useTimePredict({ value, handleChange }) {

package/dist/InputTime-es.js

@@ -6,7 +6,7 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';
-import 'react-router-dom';
+import './Button-es.js';
 
 const DEBOUNCE_TIME = 300;
 function useTimePredict({ value, handleChange }) {

package/dist/LightBox/index.cjs

@@ -18,6 +18,7 @@ require('../isSymbol-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/LightBox/index.mjs

@@ -16,6 +16,7 @@ import '../isSymbol-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/Menu/index.cjs

@@ -13,6 +13,7 @@ require('react-dom');
 require('../useFocusTrap-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/Menu/index.mjs

@@ -11,6 +11,7 @@ import 'react-dom';
 import '../useFocusTrap-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/Modal/index.cjs

@@ -12,6 +12,7 @@ require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../ButtonDismiss-cjs.js');

package/dist/Modal/index.mjs

@@ -10,6 +10,7 @@ import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../ButtonDismiss-es.js';

package/dist/Option-cjs.js

@@ -7,7 +7,7 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('classnames');
-require('react-router-dom');
+require('./Button-cjs.js');
 
 function Select(props) {
     return React.createElement(FormField.FormField, Object.assign({ type: "select" }, props));

package/dist/Option-es.js

@@ -5,7 +5,7 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import 'classnames';
-import 'react-router-dom';
+import './Button-es.js';
 
 function Select(props) {
     return React.createElement(FormField, Object.assign({ type: "select" }, props));

package/dist/Page/index.cjs

@@ -19,6 +19,7 @@ require('../index-cjs.js');
 require('../_polyfill-node.process-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');

package/dist/Page/index.mjs

@@ -17,6 +17,7 @@ import '../index-es.js';
 import '../_polyfill-node.process-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';

package/dist/Popover/index.cjs

@@ -9,6 +9,7 @@ require('react-dom');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/Popover/index.mjs

@@ -7,6 +7,7 @@ import 'react-dom';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/RecurringSelect/index.cjs

@@ -12,11 +12,11 @@ require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../InputNumber-cjs.js');
 require('../InputGroup-cjs.js');

package/dist/RecurringSelect/index.mjs

@@ -10,11 +10,11 @@ import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import '../tslib.es6-es.js';
 import 'react-hook-form';
 import '../InputNumber-es.js';
 import '../InputGroup-es.js';

package/dist/Select/index.cjs

@@ -8,13 +8,13 @@ require('@jobber/design');
 require('classnames');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('../tslib.es6-cjs.js');
 require('react-hook-form');
 
 

package/dist/Select/index.mjs

@@ -6,11 +6,11 @@ import '@jobber/design';
 import 'classnames';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import '../tslib.es6-es.js';
 import 'react-hook-form';

package/dist/SideDrawer/index.cjs

@@ -15,6 +15,7 @@ require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('../Flex-cjs.js');
 

package/dist/SideDrawer/index.mjs

@@ -13,5 +13,6 @@ import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '../Flex-es.js';

package/dist/Text/Text.d.ts

@@ -1,9 +1,8 @@
 import { PropsWithChildren } from "react";
-interface TextProps {
+export interface TextProps {
     readonly maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
     readonly variation?: "default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled";
     readonly align?: "start" | "center" | "end";
     readonly size?: "small" | "base" | "large";
 }
 export declare function Text({ variation, size, align, children, maxLines, }: PropsWithChildren<TextProps>): JSX.Element;
-export {};

package/dist/Text/index.d.ts

@@ -1 +1,2 @@
 export { Text } from "./Text";
+export type { TextProps } from "./Text";

package/dist/Toast/index.cjs

@@ -7,8 +7,9 @@ require('framer-motion');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Button-cjs.js');
-require('classnames');
 require('react-router-dom');
+require('classnames');
+require('../tslib.es6-cjs.js');
 require('../Typography-cjs.js');
 
 

package/dist/Toast/index.mjs

@@ -5,6 +5,7 @@ import 'framer-motion';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Button-es.js';
-import 'classnames';
 import 'react-router-dom';
+import 'classnames';
+import '../tslib.es6-es.js';
 import '../Typography-es.js';

package/dist/Typography/Typography.d.ts

@@ -7,7 +7,7 @@ import emphasis from "./css/Emphasis.module.css";
 import alignment from "./css/TextAlignment.module.css";
 import fontFamilies from "./css/FontFamilies.module.css";
 import { UnderlineStyle, UnderlineStyleWithColor } from "./types";
-interface TypographyProps {
+export interface TypographyProps {
     readonly id?: string;
     /**
      * @default "p"
@@ -45,4 +45,3 @@ interface TypographyProps {
 }
 export type TypographyOptions = Omit<TypographyProps, "children">;
 export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }: TypographyProps): JSX.Element;
-export {};

package/dist/index.cjs

@@ -197,6 +197,8 @@ exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;
 exports.Button = Button.Button;
+exports.useButton = Button.useButton;
+exports.useButtonStyles = Button.useButtonStyles;
 exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
 exports.Card = Card.Card;
 exports.Checkbox = Checkbox_index.Checkbox;
@@ -257,7 +259,9 @@ exports.InputDate = InputDate_index.InputDate;
 exports.InputEmail = InputEmail.InputEmail;
 exports.validationMessage = InputEmail.validationMessage;
 exports.InputFile = InputFile.InputFile;
+exports.InputFileContentContext = InputFile.InputFileContentContext;
 exports.updateFiles = InputFile.updateFiles;
+exports.useInputFileContentContext = InputFile.useInputFileContentContext;
 exports.InputGroup = InputGroup.InputGroup;
 exports.InputNumber = InputNumber.InputNumber;
 exports.InputPassword = InputPassword.InputPassword;

package/dist/index.mjs

@@ -16,7 +16,7 @@ import 'react-dom';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
 export { B as Box } from './Box-es.js';
-export { B as Button } from './Button-es.js';
+export { B as Button, a as useButton, u as useButtonStyles } from './Button-es.js';
 export { B as ButtonDismiss } from './ButtonDismiss-es.js';
 export { C as Card } from './Card-es.js';
 export { Checkbox } from './Checkbox/index.mjs';
@@ -56,7 +56,7 @@ export { I as InlineLabel } from './InlineLabel-es.js';
 export { I as InputAvatar } from './InputAvatar-es.js';
 export { InputDate } from './InputDate/index.mjs';
 export { I as InputEmail, v as validationMessage } from './InputEmail-es.js';
-export { I as InputFile, u as updateFiles } from './InputFile-es.js';
+export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from './InputFile-es.js';
 export { I as InputGroup } from './InputGroup-es.js';
 export { I as InputNumber } from './InputNumber-es.js';
 export { I as InputPassword } from './InputPassword-es.js';

package/dist/showToast-cjs.js

@@ -5,6 +5,7 @@ var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
 var Icon = require('./Icon-cjs.js');
 var Button = require('./Button-cjs.js');
+require('classnames');
 var Typography = require('./Typography-cjs.js');
 
 var styles = {"wrapper":"_0Tvq24WjeX8-","container":"GznHKPkdb1s-","toast":"W8zgWZqmIlk-","slice":"ol3srk7PviM-","button":"ibhpdUt9YLo-","spinning":"_5Wy5Wra20Vk-"};

package/dist/showToast-es.js

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { I as Icon } from './Icon-es.js';
 import { B as Button } from './Button-es.js';
+import 'classnames';
 import { T as Typography } from './Typography-es.js';
 
 var styles = {"wrapper":"_0Tvq24WjeX8-","container":"GznHKPkdb1s-","toast":"W8zgWZqmIlk-","slice":"ol3srk7PviM-","button":"ibhpdUt9YLo-","spinning":"_5Wy5Wra20Vk-"};

package/dist/styles.css

@@ -1143,6 +1143,8 @@
       align-items: center;
   -ms-flex-pack: center;
       justify-content: center;
+  gap: 4px;
+  gap: var(--space-smaller);
 }
 
 ._7BLGtYNuJOU- * {
@@ -1345,34 +1347,25 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex-shrink: 0;
 }
 
-.tZGQ0DACs7g- {
+.H8uYM7Udc4o-:has(> svg:only-child) {
   width: var(--button--size);
   padding: 0;
 }
 
-._27LqTbyLaOM- {
-  width: auto;
-  gap: 4px;
-  gap: var(--space-smaller);
-}
+/** Icon on Right */
 
-._27LqTbyLaOM- > * {
-  text-align: left;
+.H8uYM7Udc4o- > span ~ svg {
+  margin-right: calc(4px * -1);
+  margin-right: calc(var(--space-smaller) * -1);
 }
 
-._27LqTbyLaOM- > *:first-child {
+/** Icon on Left */
+
+.H8uYM7Udc4o- > svg:has(+ span:nth-child(2)) {
   margin-left: calc(4px * -1);
   margin-left: calc(var(--space-smaller) * -1);
 }
 
-._3Mqs2Gu3Z2M- > *:first-child {
-  -ms-flex-order: 1;
-      order: 1;
-  margin-left: 0;
-  margin-right: calc(4px * -1);
-  margin-right: calc(var(--space-smaller) * -1);
-}
-
 .yBId-F-geAA- {
   width: 100%;
 }

package/dist/utils/meta/meta.json

@@ -14,6 +14,8 @@
     "Body",
     "Box",
     "Button",
+    "Button.Icon",
+    "Button.Label",
     "ButtonDismiss",
     "Card",
     "Cell",
@@ -85,6 +87,12 @@
     "InputDate",
     "InputEmail",
     "InputFile",
+    "InputFile.Button",
+    "InputFile.Description",
+    "InputFile.DropzoneWrapper",
+    "InputFile.HintText",
+    "InputFileContentContext.Consumer",
+    "InputFileContentContext.Provider",
     "InputGroup",
     "InputNumber",
     "InputPassword",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.20.8",
+  "version": "6.22.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "08d5668b5d461838c6a9474fb0b4b8fde7587cea"
+  "gitHead": "e9c763ee038899442b41548c22005d4ff2ab00db"
 }