@jobber/components 4.85.3 → 4.85.4-CJS-to-ESM.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/dist/index.cjs +6721 -0
  2. package/dist/index.d.ts +73 -0
  3. package/dist/index.esm.js +6603 -0
  4. package/package.json +371 -4
  5. package/rollup.config.js +21 -77
  6. package/.eslintrc.js +0 -10
  7. package/dist/AnimatedPresence/index.js +0 -12
  8. package/dist/AnimatedPresence-20a02aaa.js +0 -104
  9. package/dist/AnimatedSwitcher/index.js +0 -13
  10. package/dist/AnimatedSwitcher-3d45ec5d.js +0 -96
  11. package/dist/Autocomplete/index.js +0 -209
  12. package/dist/Avatar/index.js +0 -15
  13. package/dist/Avatar-76a799fa.js +0 -78
  14. package/dist/Banner/index.js +0 -110
  15. package/dist/Button/index.js +0 -16
  16. package/dist/Button-b73a5e01.js +0 -57
  17. package/dist/ButtonDismiss/index.js +0 -17
  18. package/dist/ButtonDismiss-350af163.js +0 -14
  19. package/dist/Card/colors.css.d.ts +0 -89
  20. package/dist/Card/index.js +0 -24
  21. package/dist/Card-e3144022.js +0 -93
  22. package/dist/Checkbox/index.js +0 -18
  23. package/dist/Checkbox-787e2e47.js +0 -63
  24. package/dist/Chip/index.js +0 -41
  25. package/dist/Chip-3d1bfddc.js +0 -89
  26. package/dist/Chips/index.js +0 -524
  27. package/dist/Combobox/index.js +0 -40
  28. package/dist/Combobox-a24c8241.js +0 -479
  29. package/dist/ConfirmationModal/index.js +0 -31
  30. package/dist/ConfirmationModal-52e16873.js +0 -100
  31. package/dist/Content/Spacing.css.d.ts +0 -13
  32. package/dist/Content/index.js +0 -12
  33. package/dist/Content-e3f7b6fc.js +0 -24
  34. package/dist/Countdown/index.js +0 -72
  35. package/dist/DataDump/index.js +0 -37
  36. package/dist/DataList/index.js +0 -1335
  37. package/dist/DataTable/index.js +0 -301
  38. package/dist/DatePicker/index.js +0 -20
  39. package/dist/DatePicker-64c5ab1a.js +0 -134
  40. package/dist/DescriptionList/index.js +0 -24
  41. package/dist/Disclosure/index.js +0 -46
  42. package/dist/Divider/index.js +0 -29
  43. package/dist/Drawer/index.js +0 -49
  44. package/dist/Emphasis/index.js +0 -13
  45. package/dist/Emphasis-bda56d3b.js +0 -19
  46. package/dist/FeatureSwitch/index.js +0 -70
  47. package/dist/Flex/index.js +0 -12
  48. package/dist/Flex-d490c4db.js +0 -38
  49. package/dist/Form/index.js +0 -56
  50. package/dist/FormField/index.js +0 -24
  51. package/dist/FormField-6ff183f8.js +0 -253
  52. package/dist/FormatDate/index.js +0 -11
  53. package/dist/FormatDate-70ea5b43.js +0 -34
  54. package/dist/FormatEmail/index.js +0 -23
  55. package/dist/FormatFile/index.js +0 -36
  56. package/dist/FormatFile-f036902d.js +0 -162
  57. package/dist/FormatRelativeDateTime/index.js +0 -72
  58. package/dist/FormatTime/index.js +0 -36
  59. package/dist/Gallery/Gallery.css.d.ts +0 -9
  60. package/dist/Gallery/index.js +0 -99
  61. package/dist/Glimmer/index.js +0 -15
  62. package/dist/Glimmer/style/Shape.css.d.ts +0 -9
  63. package/dist/Glimmer/style/Sizes.css.d.ts +0 -10
  64. package/dist/Glimmer/style/Timing.css.d.ts +0 -6
  65. package/dist/Glimmer-84dee1ed.js +0 -77
  66. package/dist/Grid/GridAlign.css.d.ts +0 -8
  67. package/dist/Grid/index.js +0 -76
  68. package/dist/Heading/index.js +0 -14
  69. package/dist/Heading-1e8e4bd3.js +0 -55
  70. package/dist/Icon/index.js +0 -11
  71. package/dist/Icon-405a216c.js +0 -40
  72. package/dist/InlineLabel/index.js +0 -13
  73. package/dist/InlineLabel-a6557829.js +0 -28
  74. package/dist/InputAvatar/index.js +0 -70
  75. package/dist/InputDate/index.js +0 -57
  76. package/dist/InputEmail/index.js +0 -43
  77. package/dist/InputFile/index.js +0 -25
  78. package/dist/InputFile-bb945071.js +0 -190
  79. package/dist/InputGroup/index.js +0 -12
  80. package/dist/InputGroup-8d4fd4eb.js +0 -33
  81. package/dist/InputNumber/index.js +0 -25
  82. package/dist/InputNumber-d451b52e.js +0 -62
  83. package/dist/InputPassword/index.js +0 -41
  84. package/dist/InputPhoneNumber/index.js +0 -116
  85. package/dist/InputText/index.js +0 -26
  86. package/dist/InputText-55b6cb65.js +0 -102
  87. package/dist/InputTime/index.js +0 -209
  88. package/dist/InputValidation/index.js +0 -17
  89. package/dist/InputValidation-05e839fa.js +0 -29
  90. package/dist/LightBox/index.js +0 -24
  91. package/dist/LightBox-a89d8863.js +0 -117
  92. package/dist/Link/index.js +0 -15
  93. package/dist/List/index.js +0 -93
  94. package/dist/Markdown/index.js +0 -19
  95. package/dist/Markdown-f7c55304.js +0 -62
  96. package/dist/Menu/index.js +0 -21
  97. package/dist/Menu-083fc4c4.js +0 -139
  98. package/dist/Modal/Sizes.css.d.ts +0 -6
  99. package/dist/Modal/index.js +0 -25
  100. package/dist/Modal-c336cac6.js +0 -71
  101. package/dist/MultiSelect/index.js +0 -182
  102. package/dist/Option-3c4d377e.js +0 -19
  103. package/dist/Page/index.js +0 -78
  104. package/dist/Popover/index.js +0 -61
  105. package/dist/ProgressBar/Sizes.css.d.ts +0 -7
  106. package/dist/ProgressBar/index.js +0 -12
  107. package/dist/ProgressBar-b68edc8f.js +0 -43
  108. package/dist/RadioGroup/index.js +0 -15
  109. package/dist/RadioGroup-17b67ade.js +0 -46
  110. package/dist/RecurringSelect/index.js +0 -227
  111. package/dist/Select/index.js +0 -26
  112. package/dist/Spinner/index.js +0 -12
  113. package/dist/Spinner-9d8fc7ff.js +0 -24
  114. package/dist/StatusIndicator/index.js +0 -11
  115. package/dist/StatusIndicator-b179d06e.js +0 -18
  116. package/dist/StatusLabel/index.js +0 -29
  117. package/dist/Switch/index.js +0 -13
  118. package/dist/Switch-7d4aa7c3.js +0 -56
  119. package/dist/Table/index.js +0 -66
  120. package/dist/Tabs/index.js +0 -80
  121. package/dist/Text/index.js +0 -13
  122. package/dist/Text-259af966.js +0 -31
  123. package/dist/Toast/index.js +0 -111
  124. package/dist/Tooltip/index.js +0 -16
  125. package/dist/Tooltip-ef3d6ef4.js +0 -112
  126. package/dist/Typography/css/Emphasis.css.d.ts +0 -6
  127. package/dist/Typography/css/FontFamilies.css.d.ts +0 -6
  128. package/dist/Typography/css/FontSizes.css.d.ts +0 -12
  129. package/dist/Typography/css/FontWeights.css.d.ts +0 -10
  130. package/dist/Typography/css/TextAlignment.css.d.ts +0 -7
  131. package/dist/Typography/css/TextCases.css.d.ts +0 -7
  132. package/dist/Typography/css/TextColors.css.d.ts +0 -22
  133. package/dist/Typography/css/Truncate.css.d.ts +0 -5
  134. package/dist/Typography/css/Typography.css.d.ts +0 -5
  135. package/dist/Typography/index.js +0 -12
  136. package/dist/Typography-c45bf216.js +0 -62
  137. package/dist/getAtlantisConfig-0f3e8af2.js +0 -13
  138. package/dist/style-inject.es-9d2f5f4e.js +0 -30
  139. package/dist/tslib.es6-754e2961.js +0 -46
@@ -1,71 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var ReactDOM = require('react-dom');
5
- var classnames = require('classnames');
6
- var framerMotion = require('framer-motion');
7
- var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
8
- var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
9
- var useFocusTrap = require('@jobber/hooks/useFocusTrap');
10
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
11
- var Heading = require('./Heading-1e8e4bd3.js');
12
- var Button = require('./Button-b73a5e01.js');
13
- var ButtonDismiss = require('./ButtonDismiss-350af163.js');
14
-
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
- var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
19
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
20
-
21
- var css_248z$1 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding-horizontal: var(--space-base);\n --modal--padding-vertical: var(--space-base);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n:root .jobber-retheme {\n --modal--shadow: var(--shadow-base);\n}\n\n@media (min-width: 768px) {\n\n:root .jobber-retheme {\n --modal--padding-horizontal: var(--space-large);\n --modal--padding-vertical: var(--space-large);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n:root .jobber-retheme {\n --modal--padding-horizontal: var(--space-large);\n --modal--padding-vertical: var(--space-large);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n }\n\n.QGRLFHPoV5E- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: 1001;\n z-index: var(--elevation-modal);\n padding: calc(16px / 2);\n padding: var(--space-small);\n overflow: auto;\n}\n\n.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n._4WzGOMUGj5I- {\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n position: relative;\n width: 100%;\n max-width: calc(16px * 37.5);\n max-width: var(--modal--width);\n box-shadow: var(--modal--shadow);\n margin: auto;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n --public-content--padding: var(--modal--padding);\n --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding: calc(16px * 1)\n calc(16px * 1);\n padding: var(--modal--padding);\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .wjrPpIUNNrk- {\n background-color: transparent;\n}\n\n.jobber-retheme .wjrPpIUNNrk- h3 {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n font-size: calc((16px * 1) * 1.5);\n font-size: calc(calc(16px * 1) * 1.5);\n font-size: var(--typography--fontSize-largest);\n}\n\n/**\n * Ensure there's no extra padding top on the next element. This mostly negates\n * the <Content /> padding\n */\n\n.jobber-retheme .wjrPpIUNNrk- + * {\n padding-top: 0;\n}\n\n.rKvigUnOyYE- {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n._62c8HLZFwvs- {\n display: -ms-flexbox;\n display: flex;\n padding: calc(16px * 1)\n calc(16px * 1);\n padding: var(--modal--padding);\n padding-top: 0;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Xl1Ptn-P9Ew- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n/* This is in a correct position and order */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.p2s7GtpoZz0- > * {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- > *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- > *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
22
- var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
23
- styleInject_es.styleInject(css_248z$1);
24
-
25
- var css_248z = "._65IpUjOZiBg- {\n --modal--padding: var(--space-base);\n --public-tab--inset: var(--space-base);\n max-width: calc(16px * 25);\n max-width: calc(var(--base-unit) * 25);\n}\n\n.Cpwnmw65caA- {\n max-width: calc(16px * 58.75);\n max-width: calc(var(--base-unit) * 58.75);\n}\n";
26
- var sizes = {"small":"_65IpUjOZiBg-","large":"Cpwnmw65caA-"};
27
- styleInject_es.styleInject(css_248z);
28
-
29
- function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
30
- const modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
31
- useRefocusOnActivator.useRefocusOnActivator(open);
32
- const modalRef = useFocusTrap.useFocusTrap(open);
33
- useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
34
- const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, role: "dialog", className: styles.container, tabIndex: 0 },
35
- React__default["default"].createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
36
- React__default["default"].createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
37
- duration: 0.2,
38
- ease: "easeInOut",
39
- } },
40
- title != undefined && (React__default["default"].createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
41
- children,
42
- React__default["default"].createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
43
- return ReactDOM__default["default"].createPortal(template, document.body);
44
- function handleRequestClose() {
45
- if (open && onRequestClose) {
46
- onRequestClose();
47
- }
48
- }
49
- }
50
- function Header({ title, dismissible, onRequestClose }) {
51
- return (React__default["default"].createElement("div", { className: styles.header, "data-testid": "modal-header" },
52
- React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
53
- dismissible && (React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" }))));
54
- }
55
- function Actions({ primary, secondary, tertiary }) {
56
- const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
57
- if (secondary != undefined) {
58
- secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
59
- }
60
- if (tertiary != undefined) {
61
- tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
62
- }
63
- return (React__default["default"].createElement(React__default["default"].Fragment, null, shouldShow && (React__default["default"].createElement("div", { className: styles.actionBar },
64
- React__default["default"].createElement("div", { className: styles.rightAction },
65
- primary && React__default["default"].createElement(Button.Button, Object.assign({}, primary)),
66
- secondary && React__default["default"].createElement(Button.Button, Object.assign({}, secondary))),
67
- tertiary && (React__default["default"].createElement("div", { className: styles.leftAction },
68
- React__default["default"].createElement(Button.Button, Object.assign({}, tertiary))))))));
69
- }
70
-
71
- exports.Modal = Modal;
@@ -1,182 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var classnames = require('classnames');
7
- var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
8
- var Checkbox = require('../Checkbox-787e2e47.js');
9
- var Text = require('../Text-259af966.js');
10
- var Icon = require('../Icon-405a216c.js');
11
- require('../tslib.es6-754e2961.js');
12
- require('react-hook-form');
13
- require('../Typography-c45bf216.js');
14
- require('@jobber/design');
15
-
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
-
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
20
-
21
- var css_248z$1 = ".D-J03az6XL4- {\n position: relative;\n width: 100%;\n}\n\n.D-J03az6XL4- * {\n box-sizing: border-box;\n}\n\n.EzNdHgwsT40- {\n --field--height: var(--space-largest);\n\n --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n --field--padding-left: var(--space-base);\n --field--padding-right: var(--space-base);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n height: calc(16px * 3);\n height: var(--field--height);\n padding-top: calc((16px * 1) - (16px / 8));\n padding-top: calc(calc(16px * 1) - calc(16px / 8));\n padding-top: var(--field--padding-top);\n padding-bottom: calc((16px * 1) - (16px / 8));\n padding-bottom: calc(calc(16px * 1) - calc(16px / 8));\n padding-bottom: var(--field--padding-bottom);\n padding-left: calc(16px * 1);\n padding-left: var(--field--padding-left);\n padding-right: calc(16px * 1);\n padding-right: var(--field--padding-right);\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n}\n\n.EzNdHgwsT40- p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.D-J03az6XL4-:hover,\n.D-J03az6XL4-.EzNdHgwsT40- {\n cursor: pointer;\n caret-color: transparent;\n}\n\n.EzNdHgwsT40-:focus,\n.EzNdHgwsT40-.bu7HWKRu6HI- {\n box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.eQ6yfQg6zLc- {\n --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.pM-ts4-QMZY- {\n --field--padding-left: var(--space-large);\n --field--padding-right: var(--space-large);\n --field--height: calc(var(--space-extravagant));\n}\n";
22
- var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-"};
23
- styleInject_es.styleInject(css_248z$1);
24
-
25
- var css_248z = "._0SStdD4KRHs- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: 6;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: calc((16px * 4) * 5);\n max-height: calc(calc(16px * 4) * 5);\n max-height: calc(var(--space-extravagant) * 5);\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n margin: 0;\n padding: 0;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 4);\n border-radius: var(--radius-large);\n overflow: auto;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n scroll-behavior: smooth;\n}\n\n._0SStdD4KRHs- li {\n list-style: none;\n}\n\n.mFSgwOQZJm0- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: calc(16px / 2) calc(16px * 1);\n padding: var(--space-small) var(--space-base);\n cursor: pointer;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.mFSgwOQZJm0-:focus,\n.mFSgwOQZJm0-.SepF4gvOxq8- {\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n}\n";
26
- var styles = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-"};
27
- styleInject_es.styleInject(css_248z);
28
-
29
- function DropDownMenu({ options, setOptions }) {
30
- const [highlightedIndex, setHighlightedIndex] = React.useState(0);
31
- const menuDiv = React.useRef();
32
- const handleOptionClick = React.useCallback((clickedOption) => {
33
- setOptions(current => current.map(option => {
34
- if (option.label == clickedOption.label) {
35
- return Object.assign(Object.assign({}, option), { checked: !clickedOption.checked });
36
- }
37
- return option;
38
- }));
39
- }, []);
40
- function handleOptionHover(event, index) {
41
- event.preventDefault();
42
- setHighlightedIndex(index);
43
- }
44
- function handleOptionFocus(index) {
45
- setHighlightedIndex(index);
46
- if (menuDiv.current) {
47
- const option = menuDiv.current.children[index].querySelector("input");
48
- option === null || option === void 0 ? void 0 : option.focus();
49
- }
50
- }
51
- function scrollMenuIfItemNotInView(menuDivElement, direction) {
52
- const itemDiv = menuDivElement.querySelector(`:nth-child(${highlightedIndex + 1})`);
53
- if (!itemDiv)
54
- return;
55
- const menuTop = menuDivElement.getBoundingClientRect().top;
56
- const { top: itemTop, height: itemHeight, bottom: itemBottom, } = itemDiv.getBoundingClientRect();
57
- const itemTrueBottom = itemBottom + itemHeight;
58
- const menuBottom = menuDivElement.getBoundingClientRect().bottom;
59
- if (direction == "up" && itemTop - itemHeight < menuTop) {
60
- menuDivElement.scrollTop -= itemHeight;
61
- }
62
- else if (direction == "down" && itemTrueBottom > menuBottom) {
63
- menuDivElement.scrollTop += itemHeight;
64
- }
65
- }
66
- function handleKeyDown(event) {
67
- const { key, metaKey, ctrlKey } = event;
68
- if (metaKey || ctrlKey)
69
- return;
70
- switch (key) {
71
- case "Enter": {
72
- if (highlightedIndex >= 0) {
73
- handleOptionClick(options[highlightedIndex]);
74
- }
75
- break;
76
- }
77
- case "ArrowDown": {
78
- handlePressDown(event);
79
- break;
80
- }
81
- case "ArrowUp": {
82
- handlePressUp(event);
83
- break;
84
- }
85
- }
86
- }
87
- React.useEffect(() => {
88
- // focus first option
89
- handleOptionFocus(0);
90
- }, [menuDiv]);
91
- return (React__default["default"].createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv, onKeyDown: handleKeyDown }, options.map((option, index) => {
92
- const optionClass = classnames__default["default"](styles.option, {
93
- [styles.active]: index === highlightedIndex,
94
- });
95
- return (React__default["default"].createElement("li", { key: `${index}-${option.label}`, className: optionClass, onClick: event => {
96
- event.stopPropagation();
97
- event.preventDefault();
98
- handleOptionClick(option);
99
- }, onMouseOver: e => handleOptionHover(e, index) },
100
- React__default["default"].createElement(Checkbox.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
101
- })));
102
- function handlePressUp(event) {
103
- event.preventDefault();
104
- const newIndex = Math.max(0, highlightedIndex - 1);
105
- handleOptionFocus(newIndex);
106
- scrollMenuIfItemNotInView(menuDiv.current, "up");
107
- }
108
- function handlePressDown(event) {
109
- event.preventDefault();
110
- const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
111
- handleOptionFocus(newIndex);
112
- scrollMenuIfItemNotInView(menuDiv.current, "down");
113
- }
114
- }
115
-
116
- // eslint-disable-next-line max-statements
117
- function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, size, }) {
118
- const [label, setLabel] = React.useState(defaultLabel);
119
- const [menuVisible, setMenuVisible] = React.useState(false);
120
- const [focused, setFocused] = React.useState(false);
121
- const multiSelectContainer = React.useRef();
122
- const multiSelectRef = React.useRef();
123
- const multiSelectClass = classnames__default["default"](styles$1.multiSelect, {
124
- [styles$1.active]: menuVisible,
125
- [styles$1.large]: size === "large",
126
- [styles$1.small]: size === "small",
127
- });
128
- function handleMenuVisibility() {
129
- multiSelectRef.current.focus();
130
- setMenuVisible(!menuVisible);
131
- }
132
- const handleClickOutside = (e) => {
133
- var _a;
134
- if (!((_a = multiSelectContainer === null || multiSelectContainer === void 0 ? void 0 : multiSelectContainer.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
135
- setMenuVisible(false);
136
- }
137
- };
138
- function handleKeydown(event) {
139
- const { key, metaKey, ctrlKey } = event;
140
- if (metaKey || ctrlKey)
141
- return;
142
- switch (key) {
143
- case "Enter":
144
- case " ": {
145
- if (focused) {
146
- setMenuVisible(!menuVisible);
147
- }
148
- break;
149
- }
150
- case "Escape": {
151
- multiSelectRef.current.focus();
152
- setMenuVisible(false);
153
- break;
154
- }
155
- }
156
- }
157
- React.useEffect(() => {
158
- document.addEventListener("mousedown", handleClickOutside);
159
- return () => document.removeEventListener("mousedown", handleClickOutside);
160
- });
161
- React.useEffect(() => {
162
- const selected = options.filter(option => option.checked);
163
- if (selected.length === 0) {
164
- setLabel(defaultLabel);
165
- }
166
- else if (selected.length == options.length) {
167
- setLabel(allSelectedLabel);
168
- }
169
- else {
170
- const selectedLabels = [];
171
- selected.forEach(option => selectedLabels.push(option.label));
172
- setLabel(selectedLabels.join(", "));
173
- }
174
- }, [options]);
175
- return (React__default["default"].createElement("div", { ref: multiSelectContainer, className: styles$1.multiSelectContainer, onKeyDown: handleKeydown },
176
- React__default["default"].createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": `${defaultLabel}: ${label}`, "aria-multiselectable": true, "aria-haspopup": true },
177
- React__default["default"].createElement(Text.Text, null, label),
178
- React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })),
179
- menuVisible && (React__default["default"].createElement(DropDownMenu, { options: options, setOptions: onOptionsChange }))));
180
- }
181
-
182
- exports.MultiSelect = MultiSelect;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var FormField = require('./FormField-6ff183f8.js');
5
-
6
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
-
8
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
9
-
10
- function Select(props) {
11
- return React__default["default"].createElement(FormField.FormField, Object.assign({ type: "select" }, props));
12
- }
13
-
14
- function SelectOption({ children, disabled, value }) {
15
- return (React__default["default"].createElement("option", { disabled: disabled, value: value }, children));
16
- }
17
-
18
- exports.Select = Select;
19
- exports.SelectOption = SelectOption;
@@ -1,78 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var classnames = require('classnames');
7
- var jobberHooks = require('@jobber/hooks/useResizeObserver');
8
- var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
9
- var Heading = require('../Heading-1e8e4bd3.js');
10
- var Text = require('../Text-259af966.js');
11
- var Content = require('../Content-e3f7b6fc.js');
12
- var Markdown = require('../Markdown-f7c55304.js');
13
- var Button = require('../Button-b73a5e01.js');
14
- var Menu = require('../Menu-083fc4c4.js');
15
- var Emphasis = require('../Emphasis-bda56d3b.js');
16
- require('../Typography-c45bf216.js');
17
- require('../getAtlantisConfig-0f3e8af2.js');
18
- require('react-markdown');
19
- require('react-router-dom');
20
- require('../Icon-405a216c.js');
21
- require('@jobber/design');
22
- require('framer-motion');
23
- require('@jobber/hooks/useOnKeyDown');
24
- require('@jobber/hooks/useRefocusOnActivator');
25
- require('@jobber/hooks/useSafeLayoutEffect');
26
-
27
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
28
-
29
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
31
-
32
- var css_248z = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: calc(16px * 1);\n padding: var(--space-base);\n}\n\n@media (min-width: 768px) {\n\n.pVEdXlwstrc- {\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.pVEdXlwstrc- {\n padding: calc(16px * 1.5);\n padding: var(--space-large);\n}\n }\n\n._9r84iz--C5M- {\n max-width: none;\n}\n\n._0LO26JFXU9g- {\n max-width: calc(16px * 80);\n max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n max-width: calc(16px * 64);\n max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n -ms-flex: 0 0 100%;\n flex: 0 0 100%;\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n margin-top: calc(16px / 2);\n margin-top: var(--space-small);\n -ms-flex: 1;\n flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin: 0;\n -ms-flex: 0 auto;\n flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n margin-bottom: calc(16px * 1);\n margin-bottom: var(--space-base);\n}\n";
33
- var styles = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-"};
34
- styleInject_es.styleInject(css_248z);
35
-
36
- // eslint-disable-next-line max-statements
37
- function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
38
- const pageStyles = classnames__default["default"](styles.page, styles[width]);
39
- const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
40
- const titleBarClasses = classnames__default["default"](styles.titleBar, {
41
- [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
42
- [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
43
- [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
44
- });
45
- const showMenu = moreActionsMenu.length > 0;
46
- const showActionGroup = showMenu || primaryAction;
47
- if (primaryAction != undefined) {
48
- primaryAction = Object.assign({ fullWidth: true }, primaryAction);
49
- }
50
- if (secondaryAction != undefined) {
51
- secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
52
- }
53
- if (secondaryAction != undefined) {
54
- secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
55
- }
56
- return (React__default["default"].createElement("div", { className: pageStyles },
57
- React__default["default"].createElement(Content.Content, null,
58
- React__default["default"].createElement(Content.Content, null,
59
- React__default["default"].createElement("div", { className: titleBarClasses, ref: titleBarRef },
60
- React__default["default"].createElement("div", null,
61
- React__default["default"].createElement(Heading.Heading, { level: 1 }, title),
62
- subtitle && (React__default["default"].createElement("div", { className: styles.subtitle },
63
- React__default["default"].createElement(Text.Text, { size: "large", variation: "subdued" },
64
- React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" },
65
- React__default["default"].createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
66
- showActionGroup && (React__default["default"].createElement("div", { className: styles.actionGroup },
67
- primaryAction && (React__default["default"].createElement("div", { className: styles.primaryAction },
68
- React__default["default"].createElement(Button.Button, Object.assign({}, primaryAction)))),
69
- secondaryAction && (React__default["default"].createElement("div", { className: styles.actionButton },
70
- React__default["default"].createElement(Button.Button, Object.assign({}, secondaryAction)))),
71
- showMenu && (React__default["default"].createElement("div", { className: styles.actionButton },
72
- React__default["default"].createElement(Menu.Menu, { items: moreActionsMenu })))))),
73
- intro && (React__default["default"].createElement(Text.Text, { size: "large" },
74
- React__default["default"].createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
75
- React__default["default"].createElement(Content.Content, null, children))));
76
- }
77
-
78
- exports.Page = Page;
@@ -1,61 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var reactPopper = require('react-popper');
7
- var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
8
- var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
9
- var ButtonDismiss = require('../ButtonDismiss-350af163.js');
10
- require('../Button-b73a5e01.js');
11
- require('classnames');
12
- require('react-router-dom');
13
- require('../Icon-405a216c.js');
14
- require('@jobber/design');
15
- require('../Typography-c45bf216.js');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
-
21
- var css_248z = ":root {\n --card--base-padding: var(--space-base);\n --popover--padding: var(--space-base);\n --popover--width: calc(var(--base-unit) * 21.875);\n --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.oSlK4rLUvzE- {\n display: -ms-flexbox;\n display: flex;\n position: \"relative\";\n padding: calc(16px * 1);\n padding: var(--popover--padding);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.XVPpPb-7e30- {\n float: right;\n padding: calc(16px / 4);\n padding: var(--dismiss--button-padding);\n text-align: right;\n}\n\n.TDuYbqXaLW0- {\n z-index: 1002;\n z-index: var(--elevation-tooltip);\n width: -webkit-max-content;\n width: max-content;\n max-width: calc(16px * 21.875);\n max-width: var(--popover--width);\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n line-height: normal;\n background: rgba(255, 255, 255, 1);\n background: var(--color-surface);\n}\n\n.TDuYbqXaLW0- > * {\n --public-content--padding: var(--card--base-padding);\n}\n\n.LJCpn0zf1e8- {\n visibility: hidden;\n}\n\n.LJCpn0zf1e8-,\n.LJCpn0zf1e8-::before {\n position: absolute;\n width: 16px;\n width: var(--base-unit);\n height: 16px;\n height: var(--base-unit);\n background: inherit;\n}\n\n.LJCpn0zf1e8-::before {\n content: \"\";\n visibility: visible;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--color-border);\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8- {\n bottom: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"bottom\"] > .LJCpn0zf1e8- {\n top: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8- {\n right: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8- {\n left: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n";
22
- var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
23
- styleInject_es.styleInject(css_248z);
24
-
25
- function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
26
- const [popperElement, setPopperElement] = React.useState();
27
- const [arrowElement, setArrowElement] = React.useState();
28
- const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
29
- modifiers: buildModifiers(arrowElement),
30
- placement: preferredPlacement,
31
- });
32
- useRefocusOnActivator.useRefocusOnActivator(open);
33
- return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
34
- React__default["default"].createElement("div", { className: classes.dismissButton },
35
- React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
36
- children,
37
- React__default["default"].createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
38
- }
39
- function buildModifiers(arrowElement) {
40
- const modifiers = [
41
- {
42
- name: "arrow",
43
- options: { element: arrowElement, padding: 10 },
44
- },
45
- {
46
- name: "offset",
47
- options: {
48
- offset: [0, 10],
49
- },
50
- },
51
- {
52
- name: "flip",
53
- options: {
54
- fallbackPlacements: ["auto"],
55
- },
56
- },
57
- ];
58
- return modifiers;
59
- }
60
-
61
- exports.Popover = Popover;
@@ -1,7 +0,0 @@
1
- declare const styles: {
2
- readonly "smaller": string;
3
- readonly "small": string;
4
- readonly "base": string;
5
- };
6
- export = styles;
7
-
@@ -1,12 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var ProgressBar = require('../ProgressBar-b68edc8f.js');
6
- require('react');
7
- require('classnames');
8
- require('../style-inject.es-9d2f5f4e.js');
9
-
10
-
11
-
12
- exports.ProgressBar = ProgressBar.ProgressBar;
@@ -1,43 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var classnames = require('classnames');
5
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
11
-
12
- var css_248z$1 = ":root {\n --progress-bar--height: var(--space-base);\n}\n\nprogress.S1cioqW7loo-[value] {\n width: 100%;\n height: calc(16px * 1);\n height: var(--progress-bar--height);\n border: none;\n vertical-align: baseline;\n -webkit-appearance: none;\n appearance: none;\n}\n\nprogress.S1cioqW7loo-[value],\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);\n border-radius: calc((16px * 1) / 2);\n border-radius: calc(calc(16px * 1) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-value {\n border-radius: calc((16px * 1) / 2);\n border-radius: calc(calc(16px * 1) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n -webkit-transition: all 300ms ease-out;\n transition: all 300ms ease-out;\n -webkit-transition: all var(--timing-slow) ease-out;\n transition: all var(--timing-slow) ease-out;\n}\n\nprogress.S1cioqW7loo-[value]::-moz-progress-bar {\n border-radius: calc((16px * 1) / 2);\n border-radius: calc(calc(16px * 1) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n -moz-transition: all 300ms ease-out;\n transition: all 300ms ease-out;\n -moz-transition: all var(--timing-slow) ease-out;\n transition: all var(--timing-slow) ease-out;\n}\n\nprogress.nv5fejwjHzo-[value]::-webkit-progress-value {\n -webkit-transition: all 100ms ease-out;\n transition: all 100ms ease-out;\n -webkit-transition: all var(--timing-quick) ease-out;\n transition: all var(--timing-quick) ease-out;\n}\n\n.dyBDsjWCui4- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n width: 100%;\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n";
13
- var styles = {"ProgressBar":"S1cioqW7loo-","SteppedProgressBar":"nv5fejwjHzo-","wrapper":"dyBDsjWCui4-"};
14
- styleInject_es.styleInject(css_248z$1);
15
-
16
- var css_248z = ".CzIxUWYkrdo- {\n --progress-bar--height: var(--space-smaller);\n}\n\n.JNSDqHqKVlE- {\n --progress-bar--height: var(--space-small);\n}\n\n.nzFMJ2k4zJ0- {\n --progress-bar--height: var(--space-base);\n}\n";
17
- var sizes = {"smaller":"CzIxUWYkrdo-","small":"JNSDqHqKVlE-","base":"nzFMJ2k4zJ0-"};
18
- styleInject_es.styleInject(css_248z);
19
-
20
- function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
21
- const steppedProgressBarClassName = classnames__default["default"](styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
22
- const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
23
- return (React__default["default"].createElement("div", { role: "progressbar", className: styles.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
24
- const step = index + 1;
25
- const value = step <= currentStep ? 100 : 0;
26
- return (React__default["default"].createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
27
- value,
28
- "%"));
29
- })));
30
- }
31
-
32
- function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", }) {
33
- const percentage = (currentStep / totalSteps) * 100;
34
- const progressBarClassName = classnames__default["default"](styles.ProgressBar, sizes[size]);
35
- if (variation === "stepped") {
36
- return (React__default["default"].createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
37
- }
38
- return (React__default["default"].createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
39
- percentage,
40
- "%"));
41
- }
42
-
43
- exports.ProgressBar = ProgressBar;
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var RadioGroup = require('../RadioGroup-17b67ade.js');
6
- require('react');
7
- require('../style-inject.es-9d2f5f4e.js');
8
- require('../Text-259af966.js');
9
- require('../Typography-c45bf216.js');
10
- require('classnames');
11
-
12
-
13
-
14
- exports.RadioGroup = RadioGroup.RadioGroup;
15
- exports.RadioOption = RadioGroup.RadioOption;
@@ -1,46 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
5
- var Text = require('./Text-259af966.js');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
-
11
- var css_248z = "._5P8wEHDUdKY- {\n --radio--checked-thickness: var(--border-thicker);\n --radio-diameter: var(--space-base);\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)\n var(--color-interactive--hover);\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.jobber-retheme ._5P8wEHDUdKY- {\n --radio--checked-thickness: calc(\n var(--border-thicker) + var(--space-smallest)\n );\n --radio-diameter: calc(var(--space-base) + var(--space-smaller));\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule) transparent;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: var(--radio-diameter);\n height: var(--radio-diameter);\n box-sizing: border-box;\n margin: calc(16px / 8) calc(16px / 2) 0 0;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: calc(16px / 8) solid rgb(125, 176, 14);\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n transition: all 100ms ease-out;\n transition: all var(--timing-quick) ease-out;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n.jobber-retheme ._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n margin-top: 0;\n border-color: rgb(217, 223, 225);\n border-color: var(--color-border);\n}\n\n._08ZPdlE98Ko-:hover + .-PUoLXltVlQ-::before {\n border-color: rgb(125, 176, 14);\n border-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: var(--radio--checked-shadow);\n border-color: rgb(81, 114, 9);\n border-color: var(--color-interactive--hover);\n border-width: var(--radio--checked-thickness);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-:focus-visible:checked + .-PUoLXltVlQ-:before {\n box-shadow: var(--radio--checked-shadow), 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n 0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n box-shadow: var(--radio--checked-shadow), var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n\n.jobber-retheme ._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n border-color: rgb(125, 176, 14);\n border-color: var(--color-interactive);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)\n var(--color-disabled);\n border-color: rgb(181, 181, 181);\n border-color: var(--color-disabled);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n padding-left: calc(var(--radio-diameter) + (16px / 2));\n padding-left: calc(var(--radio-diameter) + calc(16px / 2));\n padding-left: calc(var(--radio-diameter) + var(--space-small));\n}\n\n.jobber-retheme ._8r6qT-6S9EI-,\n.jobber-retheme .C5SzbO1epLk- {\n margin-top: calc((16px / 4) * -1);\n margin-top: calc(calc(16px / 4) * -1);\n margin-top: calc(var(--space-smaller) * -1);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
12
- var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
13
- styleInject_es.styleInject(css_248z);
14
-
15
- /**
16
- * For rendering props only. To make updates to
17
- * the real RadioOption, look at InternalRadioOption
18
- */
19
- function RadioOption({ children }) {
20
- return React__default["default"].createElement(React__default["default"].Fragment, null, children);
21
- }
22
- function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
23
- const inputId = `${value.toString()}_${React.useId()}`;
24
- const shouldRenderIndependentChildren = label && children;
25
- return (React__default["default"].createElement("div", null,
26
- React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
27
- React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
28
- description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
29
- React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description))),
30
- shouldRenderIndependentChildren && (React__default["default"].createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
31
- function handleChange() {
32
- onChange(value);
33
- }
34
- }
35
-
36
- function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId(), }) {
37
- return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
38
- function handleChange(newValue) {
39
- if (newValue !== value) {
40
- onChange(newValue);
41
- }
42
- }
43
- }
44
-
45
- exports.RadioGroup = RadioGroup;
46
- exports.RadioOption = RadioOption;