@jobber/components 4.67.2-JOB-84261.6 → 4.67.2-pre.25

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 (154) hide show
  1. package/dist/AnimatedSwitcher/index.js +2 -2
  2. package/dist/{AnimatedSwitcher-d1e1ddcf.js → AnimatedSwitcher-879d0d6f.js} +1 -1
  3. package/dist/Autocomplete/index.js +13 -15
  4. package/dist/Avatar/index.js +2 -3
  5. package/dist/{Avatar-76a799fa.js → Avatar-765d6e45.js} +1 -4
  6. package/dist/Banner/index.js +4 -9
  7. package/dist/Button/index.js +3 -4
  8. package/dist/Button-8bde6560.js +54 -0
  9. package/dist/ButtonDismiss/index.js +4 -5
  10. package/dist/{ButtonDismiss-2b98d075.js → ButtonDismiss-af17d76d.js} +1 -1
  11. package/dist/Card/index.js +7 -8
  12. package/dist/Card-9dfc98d3.js +88 -0
  13. package/dist/Checkbox/index.js +5 -7
  14. package/dist/{Checkbox-ad7ec2e7.js → Checkbox-2d7c43d9.js} +5 -8
  15. package/dist/Chip/index.js +8 -7
  16. package/dist/Chip-dca6c22b.js +86 -0
  17. package/dist/Chips/index.js +12 -16
  18. package/dist/ClientOnly-4f3e136d.js +23 -0
  19. package/dist/Combobox/index.js +11 -10
  20. package/dist/{Combobox-eb1e5817.js → Combobox-35a3ea22.js} +43 -24
  21. package/dist/ConfirmationModal/index.js +14 -13
  22. package/dist/{ConfirmationModal-0f85d96c.js → ConfirmationModal-f6c0afc7.js} +3 -3
  23. package/dist/Content/index.js +1 -2
  24. package/dist/{Content-2ca1ffe1.js → Content-80486307.js} +0 -5
  25. package/dist/DataDump/index.js +9 -10
  26. package/dist/DataList/components/DataListHeader/DataListHeaderCheckbox.d.ts +1 -2
  27. package/dist/DataList/components/DataListHeaderTile/DataListSortingArrows.d.ts +1 -1
  28. package/dist/DataList/hooks/useMediaQuery.d.ts +3 -1
  29. package/dist/DataList/index.js +31 -56
  30. package/dist/DataTable/DataTable.d.ts +1 -1
  31. package/dist/DataTable/index.js +18 -22
  32. package/dist/DatePicker/index.js +4 -5
  33. package/dist/DatePicker-9399cc69.js +131 -0
  34. package/dist/DescriptionList/index.js +1 -4
  35. package/dist/Disclosure/index.js +2 -5
  36. package/dist/Divider/index.js +0 -3
  37. package/dist/Drawer/index.js +5 -10
  38. package/dist/Emphasis/index.js +2 -3
  39. package/dist/{Emphasis-b2d1b3aa.js → Emphasis-7a2893bb.js} +1 -1
  40. package/dist/FeatureSwitch/index.js +11 -13
  41. package/dist/Flex/index.js +6 -4
  42. package/dist/Form/index.js +1 -1
  43. package/dist/FormField/FormFieldTypes.d.ts +8 -0
  44. package/dist/FormField/FormFieldWrapper.d.ts +3 -1
  45. package/dist/FormField/components/ClearAction.d.ts +9 -0
  46. package/dist/FormField/index.js +9 -10
  47. package/dist/FormField-18eda132.js +252 -0
  48. package/dist/FormatDate/index.js +1 -1
  49. package/dist/FormatEmail/index.js +0 -3
  50. package/dist/FormatFile/index.js +17 -17
  51. package/dist/FormatFile-317b158a.js +116 -0
  52. package/dist/FormatTime/FormatTime.d.ts +1 -2
  53. package/dist/FormatTime/index.js +11 -6
  54. package/dist/Gallery/index.js +18 -20
  55. package/dist/Glimmer/index.js +3 -4
  56. package/dist/Glimmer-f5c31401.js +68 -0
  57. package/dist/Grid/index.js +0 -7
  58. package/dist/Heading/index.js +2 -3
  59. package/dist/{Heading-0f4ecb0c.js → Heading-f066883a.js} +1 -1
  60. package/dist/Icon/index.js +1 -1
  61. package/dist/InlineLabel/index.js +2 -3
  62. package/dist/InlineLabel-4c2fec47.js +25 -0
  63. package/dist/InputAvatar/index.js +8 -12
  64. package/dist/InputDate/InputDate.d.ts +1 -1
  65. package/dist/InputDate/index.js +10 -11
  66. package/dist/InputEmail/index.js +9 -10
  67. package/dist/InputFile/InputFile.d.ts +5 -1
  68. package/dist/InputFile/index.js +6 -8
  69. package/dist/{InputFile-540c1657.js → InputFile-5c44f0b4.js} +8 -11
  70. package/dist/InputGroup/index.js +1 -2
  71. package/dist/InputGroup-88bec8c9.js +30 -0
  72. package/dist/InputNumber/index.js +10 -11
  73. package/dist/{InputNumber-d9ebabaa.js → InputNumber-ed655bae.js} +1 -1
  74. package/dist/InputPassword/index.js +9 -10
  75. package/dist/InputPhoneNumber/index.js +9 -12
  76. package/dist/InputText/InputText.d.ts +2 -0
  77. package/dist/InputText/index.js +11 -11
  78. package/dist/InputText/useSafeLayoutEffect.d.ts +2 -0
  79. package/dist/{InputText-f7c45ee5.js → InputText-c68964ff.js} +3 -2
  80. package/dist/InputTime/InputTime.d.ts +3 -1
  81. package/dist/InputTime/InputTime.disabledTest.d.ts +1 -0
  82. package/dist/InputTime/InputTimeProps.d.ts +1 -1
  83. package/dist/InputTime/InternalInputTime.d.ts +3 -0
  84. package/dist/InputTime/SupportsTimePolyfill.d.ts +2 -0
  85. package/dist/InputTime/TimeInputPolyfill.client.d.ts +2 -0
  86. package/dist/InputTime/index.js +58 -724
  87. package/dist/InputValidation/index.js +4 -5
  88. package/dist/{InputValidation-179f0926.js → InputValidation-fdc891af.js} +2 -5
  89. package/dist/LightBox/ClientOnly.d.ts +6 -0
  90. package/dist/LightBox/LightBox.d.ts +2 -2
  91. package/dist/LightBox/index.js +6 -6
  92. package/dist/{LightBox-3f4dbc33.js → LightBox-d5aea313.js} +5 -6
  93. package/dist/List/index.js +9 -15
  94. package/dist/Markdown/Markdown.d.ts +1 -1
  95. package/dist/Markdown/index.js +8 -8
  96. package/dist/Markdown-10fc9d3e.js +90 -0
  97. package/dist/Menu/Menu.d.ts +4 -4
  98. package/dist/Menu/index.js +5 -6
  99. package/dist/{Menu-d7ea093c.js → Menu-7b7aa325.js} +7 -10
  100. package/dist/Modal/Modal.d.ts +2 -2
  101. package/dist/Modal/index.js +7 -7
  102. package/dist/{Modal-70daa0e2.js → Modal-357fd1df.js} +6 -9
  103. package/dist/MultiSelect/index.js +5 -11
  104. package/dist/{Option-469029b5.js → Option-c84f28a6.js} +1 -1
  105. package/dist/Page/index.js +12 -14
  106. package/dist/Popover/Popover.d.ts +2 -2
  107. package/dist/Popover/index.js +8 -8
  108. package/dist/ProgressBar/index.js +1 -2
  109. package/dist/ProgressBar-5c577dc0.js +38 -0
  110. package/dist/RadioGroup/index.js +3 -5
  111. package/dist/RadioGroup-9dded55d.js +44 -0
  112. package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts +2 -2
  113. package/dist/RecurringSelect/components/WeeklySelect.d.ts +2 -2
  114. package/dist/RecurringSelect/index.js +16 -29
  115. package/dist/Select/index.js +10 -11
  116. package/dist/Spinner/index.js +1 -2
  117. package/dist/Spinner-cac356ee.js +21 -0
  118. package/dist/StatusLabel/index.js +2 -5
  119. package/dist/SupportsTimePolyfill-466a30f9.js +21 -0
  120. package/dist/Switch/index.js +2 -3
  121. package/dist/Switch-588c5e70.js +53 -0
  122. package/dist/Table/index.js +0 -5
  123. package/dist/Tabs/index.js +1 -4
  124. package/dist/Text/index.js +2 -3
  125. package/dist/{Text-4a2bc89f.js → Text-9f261dde.js} +1 -1
  126. package/dist/TimeInputPolyfill.client-1dfc8ab1.js +687 -0
  127. package/dist/Toast/index.js +3 -6
  128. package/dist/Tooltip/index.js +3 -2
  129. package/dist/{Tooltip-6b12f1c2.js → Tooltip-99440954.js} +14 -12
  130. package/dist/Typography/index.js +1 -2
  131. package/dist/Typography-75f58b60.js +43 -0
  132. package/dist/styles.css +8107 -0
  133. package/dist/useSafeLayoutEffect-b63708b1.js +16 -0
  134. package/package.json +4 -4
  135. package/rollup.config.js +3 -1
  136. package/dist/Button-163a0641.js +0 -57
  137. package/dist/Card-3178033c.js +0 -93
  138. package/dist/Chip-168acf3e.js +0 -89
  139. package/dist/DatePicker-c18f1739.js +0 -134
  140. package/dist/FormField-dfc061ca.js +0 -227
  141. package/dist/FormatFile-3b650d02.js +0 -121
  142. package/dist/Glimmer-cfa92a88.js +0 -77
  143. package/dist/InlineLabel-9a517c19.js +0 -28
  144. package/dist/InputGroup-8d4fd4eb.js +0 -33
  145. package/dist/Markdown-96070121.js +0 -62
  146. package/dist/ProgressBar-b68edc8f.js +0 -43
  147. package/dist/RadioGroup-ebaa4f87.js +0 -47
  148. package/dist/Spinner-9d8fc7ff.js +0 -24
  149. package/dist/Switch-b85272bf.js +0 -56
  150. package/dist/Typography-973b122e.js +0 -62
  151. package/dist/style-inject.es-9d2f5f4e.js +0 -30
  152. /package/dist/{FormatDate-70ea5b43.js → FormatDate-6fc94218.js} +0 -0
  153. /package/dist/{Icon-405a216c.js → Icon-361343e0.js} +0 -0
  154. /package/dist/{tslib.es6-5b8768b7.js → tslib.es6-a575af05.js} +0 -0
@@ -1,227 +0,0 @@
1
- 'use strict';
2
-
3
- var tslib_es6 = require('./tslib.es6-5b8768b7.js');
4
- var React = require('react');
5
- var uuid = require('uuid');
6
- var reactHookForm = require('react-hook-form');
7
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
8
- var classnames = require('classnames');
9
- var Button = require('./Button-163a0641.js');
10
- var Icon = require('./Icon-405a216c.js');
11
- var Text = require('./Text-4a2bc89f.js');
12
- var InputValidation = require('./InputValidation-179f0926.js');
13
- var Spinner = require('./Spinner-9d8fc7ff.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 classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
19
-
20
- var css_248z = ":root {\n /**\n * These `--public-field` properties are used in other components such\n * as InputGroup, therefore they must stay on :root\n **/\n --public-field--top-left-radius: var(--radius-base);\n --public-field--top-right-radius: var(--radius-base);\n --public-field--bottom-left-radius: var(--radius-base);\n --public-field--bottom-right-radius: var(--radius-base);\n}\n\n.geR7qBhrMfk- {\n width: 100%;\n}\n\n/**\n * Wrapper\n **/\n\n.nPGhTEEzsoU- {\n --field--placeholder-color: var(--color-greyBlue--light);\n --field--placeholder-offset: 50%;\n --field--placeholder-transform: -50%;\n\n --field--textAlign: left;\n\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 --field--value-color: var(--color-heading);\n --field--value-lineHeight: calc(var(--base-unit) * 1.25);\n\n --field--border-color: var(--color-border);\n --field--background-color: var(--color-surface);\n\n --field--base-elevation: var(--elevation-base);\n --field--label-elevation: calc(var(--field--base-elevation) + 1);\n --field--postfix-elevation: calc(var(--field--base-elevation) - 1);\n --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);\n\n display: -ms-flexbox;\n\n display: flex;\n width: 100%;\n height: calc(16px * 3);\n height: var(--field--height);\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--field--border-color);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n border-top-right-radius: calc(16px / 8);\n border-top-right-radius: var(--public-field--top-right-radius);\n border-bottom-right-radius: calc(16px / 8);\n border-bottom-right-radius: var(--public-field--bottom-right-radius);\n border-bottom-left-radius: calc(16px / 8);\n border-bottom-left-radius: var(--public-field--bottom-left-radius);\n border-top-left-radius: calc(16px / 8);\n border-top-left-radius: var(--public-field--top-left-radius);\n color: rgb(1, 41, 57);\n color: var(--field--value-color);\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 background-color: rgba(255, 255, 255, 1);\n background-color: var(--field--background-color);\n}\n\n.nPGhTEEzsoU- * {\n box-sizing: border-box;\n}\n\n.nPGhTEEzsoU-:focus-within {\n position: relative;\n z-index: var(--field--base-elevation);\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}\n\n.YhserUiOeFE-:not(:focus-within) input {\n color: var(--field--background-color);\n -webkit-text-fill-color: var(--field--background-color);\n}\n\n.YhserUiOeFE-:focus-within,\n.UIZq8hTmJVU- {\n --field--placeholder-color: var(--color-text--secondary);\n --field--placeholder-offset: var(--space-smallest);\n --field--placeholder-transform: 0;\n --field--padding-top: calc(var(--space-base) + var(--space-smaller));\n --field--padding-bottom: var(--space-small);\n}\n\n.YhserUiOeFE-.Ku8sWS0mLew-:focus-within,\n.UIZq8hTmJVU-.Ku8sWS0mLew- {\n --field--padding-top: calc(var(--space-large) + var(--space-smaller));\n}\n\n.nPGhTEEzsoU-.mgPacJ6Z71Y- {\n --field--placeholder-offset: 0;\n --field--placeholder-transform: 0;\n height: auto;\n min-height: auto;\n}\n\n.gJ-15M615eY-,\n.gJ-15M615eY-:focus-within {\n --field--border-color: var(--color-critical);\n position: relative;\n}\n\n._1rsTLm5GwcM- {\n --field--placeholder-color: var(--color-disabled);\n --field--value-color: var(--color-disabled);\n --field--background-color: var(--color-surface--background);\n --field--border-color: var(--color-disabled--secondary);\n}\n\n/* override iOS default styling for disabled input */\n\n._1rsTLm5GwcM- :disabled {\n -webkit-text-fill-color: var(--field--value-color);\n opacity: 1;\n}\n\n.o8D-H-lKfDk- {\n --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n --field--padding-top: var(--space-small);\n --field--padding-bottom: var(--space-small);\n --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.Ku8sWS0mLew- {\n --field--padding-left: var(--space-large);\n --field--padding-right: var(--space-large);\n --field--height: calc(var(--space-extravagant));\n}\n\n._5Hu2F3cBvng- {\n display: inline-block;\n width: auto;\n}\n\n.s1WLQs6ffD8- {\n --field--textAlign: center;\n}\n\n.a2r4QheWYIA- {\n --field--textAlign: right;\n}\n\n/**\n * The custom property --formField-maxLength is getting defined inside the\n * component.\n */\n\n.KdAnXK1gClo- {\n width: calc(\n (16px * var(--formField-maxLength)) + var(--field--padding-left) +\n var(--field--padding-right)\n );\n width: calc(\n (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +\n var(--field--padding-right)\n );\n}\n\n/**\n * Input Wrapper\n **/\n\n.iQFhpFYnz-8- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 1;\n flex: 1;\n position: relative;\n /* Ensure input stays with the rest of the element stack */\n z-index: 0;\n z-index: var(--elevation-default);\n}\n\n.Yo2Wi9dpa-Y- {\n position: relative;\n -ms-flex: 1;\n flex: 1;\n}\n\n/**\n * Input\n **/\n\n.LSHPV7PwOTg- {\n position: relative;\n z-index: var(--field--base-elevation);\n width: 100%;\n height: 100%;\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n border: none;\n border-radius: 0;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: var(--field--value-lineHeight);\n text-align: var(--field--textAlign);\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.LSHPV7PwOTg-:focus {\n outline: none;\n}\n\n.mgPacJ6Z71Y- .LSHPV7PwOTg- {\n resize: vertical;\n}\n\n.i31GQXcMz54- .LSHPV7PwOTg- {\n z-index: var(--field--label-elevation);\n}\n\n.LSHPV7PwOTg-:-webkit-autofill,\n.LSHPV7PwOTg-:-webkit-autofill:hover,\n.LSHPV7PwOTg-:-webkit-autofill:focus,\n.LSHPV7PwOTg-:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 1) inset !important;\n -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;\n}\n\n/**\n * Label\n **/\n\n._3xREbTN5pPg- {\n position: absolute;\n top: var(--field--placeholder-offset);\n z-index: var(--field--label-elevation);\n width: 100%;\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n overflow: hidden;\n color: var(--field--placeholder-color);\n line-height: var(--field--value-lineHeight);\n text-align: var(--field--textAlign);\n text-overflow: ellipsis;\n white-space: nowrap;\n pointer-events: none;\n -webkit-transform: translateY(var(--field--placeholder-transform));\n transform: translateY(var(--field--placeholder-transform));\n transition: all 100ms;\n transition: all var(--timing-quick);\n}\n\n.mgPacJ6Z71Y- ._3xREbTN5pPg- {\n /* Changes the width so that the scrollbar on the textarea doesn't get cut off */\n width: calc(100% - var(--field--padding-right));\n padding-top: var(--field--padding-top);\n /* Remove padding on right to make use of the entire width */\n padding-right: 0;\n -webkit-transform: translateY(--field--placeholder-transform);\n transform: translateY(--field--placeholder-transform);\n}\n\n.UIZq8hTmJVU- ._3xREbTN5pPg-,\n.YhserUiOeFE-:focus-within ._3xREbTN5pPg- {\n font-size: calc((16px * 1) * 0.75);\n font-size: calc(calc(16px * 1) * 0.75);\n font-size: var(--typography--fontSize-small);\n}\n\n.mgPacJ6Z71Y-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n padding-top: calc(16px / 8);\n padding-top: var(--space-smallest);\n background-color: var(--field--background-color);\n}\n\n.o8D-H-lKfDk-.UIZq8hTmJVU- ._3xREbTN5pPg-,\n.YhserUiOeFE-.o8D-H-lKfDk-.UIZq8hTmJVU-:focus-within ._3xREbTN5pPg- {\n display: none;\n}\n\n/**This is valid cascading order **/\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.Ku8sWS0mLew-.UIZq8hTmJVU- ._3xREbTN5pPg-,\n.YhserUiOeFE-.Ku8sWS0mLew-.UIZq8hTmJVU-:focus-within ._3xREbTN5pPg- {\n padding-top: calc(16px / 2);\n padding-top: var(--space-small);\n}\n\n/**\n * Postfix\n **/\n\n.VtnAk1HYMMk- {\n position: absolute;\n top: 50%;\n right: calc(16px * 1);\n right: var(--space-base);\n z-index: var(--field--postfix-elevation);\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n\n/**\n * Affix\n **/\n\n.uPLklxvtfJw- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 0 calc(var(--field--padding-left) * -1) 0 0;\n padding: 0 var(--field--padding-right) 0 var(--field--padding-left);\n}\n\n@supports (aspect-ratio: 1/1) {\n .uPLklxvtfJw- {\n /*\n * disabling property-no-unknown here as this is a real property\n * that stylelint just doesn't know about. We may be able to remove\n * this when we update our stylelint to not care about IE11.\n */\n /* stylelint-disable-next-line property-no-unknown */\n aspect-ratio: 1/1;\n padding: 0;\n }\n}\n\n.uPLklxvtfJw-.pYqqDvv57JE- {\n margin: 0 0 0 calc(var(--field--padding-right) * -1);\n}\n\n.uPLklxvtfJw-.eI44oQpuVlk- {\n position: relative;\n z-index: var(--field--postfix-action-elevation);\n}\n\n.jO8P2iSHilM- {\n display: -ms-flexbox;\n display: flex;\n margin: 0 calc((var(--field--padding-left) - calc(16px / 8)) * -1) 0 0;\n margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n padding: 0 0 0 var(--field--padding-left);\n line-height: var(--field--value-lineHeight);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n}\n\n.jO8P2iSHilM-.pYqqDvv57JE- {\n margin: 0 0 0 calc((var(--field--padding-left) - calc(16px / 8)) * -1);\n margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);\n padding: 0 var(--field--padding-left) 0 0;\n}\n\n.UIZq8hTmJVU-:not(.o8D-H-lKfDk-) .jO8P2iSHilM- {\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n}\n\n._2GfgzNnLOSI- {\n margin-top: calc(16px / 4);\n margin-top: var(--space-smaller);\n}\n";
21
- var styles = {"container":"geR7qBhrMfk-","wrapper":"nPGhTEEzsoU-","timeInputLabel":"YhserUiOeFE-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","textarea":"mgPacJ6Z71Y-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-"};
22
- styleInject_es.styleInject(css_248z);
23
-
24
- function AffixLabel({ label, variation = "prefix", labelRef, }) {
25
- const affixLabelClass = classnames__default["default"](styles.affixLabel, {
26
- [styles.suffix]: variation === "suffix",
27
- });
28
- return (React__default["default"].createElement("div", { ref: labelRef, className: affixLabelClass }, label));
29
- }
30
- function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
31
- const affixIconClass = classnames__default["default"](styles.affixIcon, {
32
- [styles.suffix]: variation === "suffix",
33
- [styles.hasAction]: onClick,
34
- });
35
- const iconSize = size === "small" ? "small" : "base";
36
- if (!icon)
37
- return React__default["default"].createElement(React__default["default"].Fragment, null);
38
- return (React__default["default"].createElement("div", { className: affixIconClass }, onClick ? (React__default["default"].createElement(Button.Button
39
- /**
40
- * We can cast the ariaLabel here as a `Suffix`
41
- * requires an ariaLabel if there is an action
42
- */
43
- , {
44
- /**
45
- * We can cast the ariaLabel here as a `Suffix`
46
- * requires an ariaLabel if there is an action
47
- */
48
- ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React__default["default"].createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
49
- }
50
-
51
- function FormFieldDescription({ id, description, }) {
52
- return (React__default["default"].createElement("div", { id: id, className: styles.description },
53
- React__default["default"].createElement(Text.Text, { size: "small", variation: "subdued" }, description)));
54
- }
55
-
56
- function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, }) {
57
- const wrapperClasses = classnames__default["default"](styles.wrapper, size && styles[size], align && styles[align], {
58
- [styles.miniLabel]: (placeholder && value !== "") ||
59
- (placeholder && type === "select") ||
60
- // Naively assume that if the the type is tel, it is the InputPhoneNumber
61
- (placeholder && type === "tel"),
62
- [styles.textarea]: type === "textarea",
63
- [styles.select]: type === "select",
64
- [styles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
65
- [styles.disabled]: disabled,
66
- [styles.maxLength]: maxLength,
67
- [styles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
68
- });
69
- const containerClasses = classnames__default["default"](styles.container, {
70
- [styles.inline]: inline,
71
- });
72
- const wrapperInlineStyle = {
73
- ["--formField-maxLength"]: maxLength || max,
74
- };
75
- const prefixRef = React.useRef();
76
- const suffixRef = React.useRef();
77
- const [labelStyle, setLabelStyle] = React.useState({
78
- paddingLeft: undefined,
79
- paddingRight: undefined,
80
- });
81
- React.useEffect(() => {
82
- setLabelStyle(getAffixPaddding);
83
- }, [value]);
84
- return (React__default["default"].createElement("div", { className: containerClasses },
85
- React__default["default"].createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper" },
86
- (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React__default["default"].createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
87
- React__default["default"].createElement("div", { className: styles.inputWrapper },
88
- placeholder && (React__default["default"].createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
89
- ? labelStyle
90
- : undefined }, placeholder)),
91
- (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React__default["default"].createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
92
- React__default["default"].createElement("div", { className: styles.childrenWrapper }, children),
93
- (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default["default"].createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
94
- (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React__default["default"].createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size })))),
95
- description && !inline && (React__default["default"].createElement(FormFieldDescription, { id: descriptionIdentifier, description: description })),
96
- error && !inline && React__default["default"].createElement(InputValidation.InputValidation, { message: error })));
97
- function getAffixPaddding() {
98
- const hasValue = value !== "";
99
- const newPadding = {
100
- paddingLeft: undefined,
101
- paddingRight: undefined,
102
- };
103
- // Naively assume that if the the type is tel, it is the InputPhoneNumber
104
- if (type === "tel")
105
- return newPadding;
106
- if ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
107
- const { offsetWidth } = prefixRef.current;
108
- newPadding.paddingLeft = offset(offsetWidth);
109
- }
110
- if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
111
- const { offsetWidth } = suffixRef.current;
112
- newPadding.paddingRight = offset(offsetWidth);
113
- }
114
- function offset(width) {
115
- return `calc(${width}px + var(--space-smallest)`;
116
- }
117
- return newPadding;
118
- }
119
- }
120
-
121
- function FormFieldPostFix({ variation }) {
122
- return (React__default["default"].createElement("span", { className: styles.postfix }, variation === "select" ? (React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })) : (React__default["default"].createElement(Spinner.Spinner, { size: "small" }))));
123
- }
124
-
125
- // Added 13th statement to accommodate getErrorMessage function
126
- /*eslint max-statements: ["error", 13]*/
127
- function FormField(props) {
128
- var _a, _b;
129
- const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, } = props;
130
- const { control, formState: { errors }, setValue, watch, } = reactHookForm.useFormContext() != undefined
131
- ? reactHookForm.useFormContext()
132
- : // If there isn't a Form Context being provided, get a form for this field.
133
- reactHookForm.useForm({ mode: "onTouched" });
134
- const [identifier] = React.useState(uuid.v1());
135
- const [descriptionIdentifier] = React.useState(`descriptionUUID--${uuid.v1()}`);
136
- /**
137
- * Generate a name if one is not supplied, this is the name
138
- * that will be used for react-hook-form and not neccessarily
139
- * attached to the DOM
140
- */
141
- const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
142
- React.useEffect(() => {
143
- if (value != undefined) {
144
- setValue(controlledName, value);
145
- }
146
- }, [value, watch(controlledName)]);
147
- React.useImperativeHandle(actionsRef, () => ({
148
- setValue: newValue => {
149
- setValue(controlledName, newValue, { shouldValidate: true });
150
- },
151
- }));
152
- const message = (_a = errors[controlledName]) === null || _a === void 0 ? void 0 : _a.message;
153
- const error = getErrorMessage();
154
- React.useEffect(() => handleValidation(), [error]);
155
- return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
156
- var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "onBlur", "name"]);
157
- const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), (description &&
158
- !inline && { "aria-describedby": descriptionIdentifier }));
159
- const textFieldProps = Object.assign(Object.assign({}, fieldProps), { onKeyDown: handleKeyDown });
160
- return (React__default["default"].createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier }), renderField()));
161
- function renderField() {
162
- switch (type) {
163
- case "select":
164
- return (React__default["default"].createElement(React__default["default"].Fragment, null,
165
- React__default["default"].createElement("select", Object.assign({}, fieldProps), children),
166
- React__default["default"].createElement(FormFieldPostFix, { variation: "select" })));
167
- case "textarea":
168
- return (React__default["default"].createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
169
- default:
170
- return (React__default["default"].createElement(React__default["default"].Fragment, null,
171
- React__default["default"].createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef })),
172
- loading && React__default["default"].createElement(FormFieldPostFix, { variation: "spinner" }),
173
- children));
174
- }
175
- }
176
- function handleChange(event) {
177
- let newValue;
178
- newValue = event.currentTarget.value;
179
- if (type === "number" && newValue.length > 0) {
180
- newValue = parseFloat(newValue);
181
- }
182
- onChange && onChange(newValue, event);
183
- onControllerChange(event);
184
- }
185
- function handleKeyDown(event) {
186
- if (!onEnter)
187
- return;
188
- if (event.key !== "Enter")
189
- return;
190
- if (event.shiftKey || event.ctrlKey)
191
- return;
192
- event.preventDefault();
193
- onEnter && onEnter(event);
194
- }
195
- function handleFocus(event) {
196
- const target = event.currentTarget;
197
- if (target.select) {
198
- setTimeout(() => readonly && target.select());
199
- }
200
- onFocus && onFocus();
201
- }
202
- function handleBlur() {
203
- onBlur && onBlur();
204
- onControllerBlur();
205
- }
206
- } }));
207
- function getErrorMessage() {
208
- if (typeof message === "string") {
209
- return message;
210
- }
211
- return "";
212
- }
213
- function handleValidation() {
214
- onValidation && onValidation(error);
215
- }
216
- }
217
- function setAutocomplete(autocompleteSetting) {
218
- if (autocompleteSetting === true) {
219
- return undefined;
220
- }
221
- else if (autocompleteSetting === false) {
222
- return "off";
223
- }
224
- return autocompleteSetting;
225
- }
226
-
227
- exports.FormField = FormField;
@@ -1,121 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var classnames = require('classnames');
5
- var getHumanReadableFileSize = require('filesize');
6
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
7
- var Button = require('./Button-163a0641.js');
8
- var ConfirmationModal = require('./ConfirmationModal-0f85d96c.js');
9
- var Glimmer = require('./Glimmer-cfa92a88.js');
10
- var Icon = require('./Icon-405a216c.js');
11
- var Typography = require('./Typography-973b122e.js');
12
- var Text = require('./Text-4a2bc89f.js');
13
- var ProgressBar = require('./ProgressBar-b68edc8f.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 classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
19
- var getHumanReadableFileSize__default = /*#__PURE__*/_interopDefaultLegacy(getHumanReadableFileSize);
20
-
21
- var css_248z$2 = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n.cx4iQqlNNvc- {\n display: grid;\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding-right: calc(16px / 2);\n padding-right: var(--space-small);\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--file-card--border-color);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--file-card--background-color);\n}\n\n.nSaog7-7Jn0-,\n.cx4iQqlNNvc- {\n position: relative;\n}\n\n._9jVt97W52JY- {\n display: grid;\n grid-template-columns: -webkit-max-content auto;\n grid-template-columns: max-content auto;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n text-align: left;\n background-color: var(--color-transparent);\n}\n\n.z-kUGMs0Yfg- {\n width: 168px;\n height: 168px;\n}\n\n.x1Ql0enaIxY- {\n width: 56px;\n height: 56px;\n}\n\n.il9-MCeoBts- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY- {\n outline: none;\n}\n\n.nSaog7-7Jn0- ._9jVt97W52JY-:focus {\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.nSaog7-7Jn0- .il9-MCeoBts- {\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.cx4iQqlNNvc- ._9jVt97W52JY-:focus::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\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}\n\n.cx4iQqlNNvc- .il9-MCeoBts- {\n border-right: none;\n border-bottom-left-radius: calc(16px / 8);\n border-bottom-left-radius: var(--radius-base);\n border-top-left-radius: calc(16px / 8);\n border-top-left-radius: var(--radius-base);\n}\n\n.O9EG-xJYVco- {\n cursor: pointer;\n}\n\n.QmrRp5CTpGU- .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n opacity: 0;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.QmrRp5CTpGU-:hover .il9-MCeoBts-::after,\n.QmrRp5CTpGU-:focus .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n opacity: 1;\n}\n\n.N5qVYfi1Pgo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n box-sizing: border-box;\n padding: calc(16px / 2);\n padding: var(--file-card--base-padding);\n}\n\n.TyXXZnJuVwo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 0;\n}\n\n.TyXXZnJuVwo- p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.nSaog7-7Jn0- ._7wDO6nPXy-g- {\n position: absolute;\n top: calc(16px / 4);\n top: var(--space-smaller);\n right: calc(16px / 4);\n right: var(--space-smaller);\n}\n\n.sgUJuNv0rUE- ~ ._7wDO6nPXy-g- {\n visibility: hidden;\n}\n\n._7wDO6nPXy-g-:focus-within,\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n visibility: visible;\n}\n";
22
- var styles$2 = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
23
- styleInject_es.styleInject(css_248z$2);
24
-
25
- function FormatFileDeleteButton({ size, onDelete }) {
26
- const buttonSize = size === "base" ? "small" : "base";
27
- const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
28
- return (React__default["default"].createElement(React__default["default"].Fragment, null,
29
- React__default["default"].createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
30
- React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
31
- }
32
-
33
- var css_248z$1 = ".M9Y7sOk6lTc- {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto -webkit-max-content;\n grid-template-rows: auto max-content;\n width: inherit;\n height: inherit;\n -ms-flex-align: center;\n align-items: center;\n justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n -ms-flex-align: end;\n align-items: end;\n}\n\n.YXN92rsh2eU- {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n padding: calc(16px / 4);\n padding: var(--space-smaller);\n font-size: calc(\n (16px * 1) * 0.625\n );\n font-size: calc(\n calc(16px * 1) * 0.625\n );\n font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n position: absolute;\n bottom: 0;\n left: 0;\n padding: calc(16px / 2);\n padding: var(--space-small);\n font-size: calc((16px * 1) * 0.75);\n font-size: calc(calc(16px * 1) * 0.75);\n font-size: var(--typography--fontSize-small);\n}\n";
34
- var styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
35
- styleInject_es.styleInject(css_248z$1);
36
-
37
- var css_248z = "._62D0xyydQwo- {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -webkit-animation: _5GIEBejwNJc- 200ms ease;\n animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
38
- var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
39
- styleInject_es.styleInject(css_248z);
40
-
41
- function InternalThumbnailImage({ file }) {
42
- const { name, src } = file;
43
- const [imageSource, setImageSource] = React.useState();
44
- const [imageLoaded, setImageLoaded] = React.useState(false);
45
- if (!imageSource) {
46
- src().then(url => setImageSource(url));
47
- }
48
- return (React__default["default"].createElement(React__default["default"].Fragment, null,
49
- !imageLoaded && React__default["default"].createElement(Glimmer.Glimmer, { size: "auto" }),
50
- React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames__default["default"](styles.image, { [styles.hidden]: !imageLoaded }) })));
51
- function handleImageLoad() {
52
- setImageLoaded(true);
53
- }
54
- }
55
-
56
- function InternalThumbnail({ compact = false, size, file, }) {
57
- const { name, type } = file;
58
- const iconName = getIconNameFromType(type);
59
- const hasName = Boolean(name) && compact;
60
- if (type.startsWith("image/")) {
61
- return React__default["default"].createElement(InternalThumbnailImage, { file: file });
62
- }
63
- return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
64
- [styles$1.hasName]: hasName,
65
- }) },
66
- React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
67
- hasName && (React__default["default"].createElement("div", { className: styles$1.fileName },
68
- React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
69
- }
70
- function getIconNameFromType(mimeType) {
71
- if (mimeType.startsWith("image/"))
72
- return "camera";
73
- if (mimeType.startsWith("video/"))
74
- return "video";
75
- switch (mimeType) {
76
- case "application/pdf":
77
- return "pdf";
78
- case "application/vnd.ms-excel":
79
- return "excel";
80
- default:
81
- return "file";
82
- }
83
- }
84
-
85
- function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
86
- const isComplete = file.progress >= 1;
87
- const fileSize = getHumanReadableFileSize__default["default"](file.size);
88
- const wrapperClassNames = classnames__default["default"](styles$2[display], {
89
- [styles$2[displaySize]]: display === "compact",
90
- });
91
- const DetailsContainer = isComplete && onClick ? "button" : "div";
92
- const detailsClassNames = classnames__default["default"](styles$2.wrapper, {
93
- [styles$2[displaySize]]: display === "compact",
94
- [styles$2.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
95
- [styles$2.clickable]: onClick,
96
- [styles$2.deleteable]: display === "compact",
97
- });
98
- const thumbnailContainerClassNames = classnames__default["default"](styles$2.thumbnail, styles$2[displaySize]);
99
- return (React__default["default"].createElement("div", { className: wrapperClassNames },
100
- React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
101
- React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
102
- React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
103
- !isComplete && (React__default["default"].createElement("div", { className: styles$2.progress },
104
- React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
105
- display === "expanded" && (React__default["default"].createElement("div", { className: styles$2.contentBlock },
106
- React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
107
- React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
108
- isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$2.deleteButton },
109
- React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
110
- }
111
- function isHoverable({ display, isComplete, onClick, onDelete, }) {
112
- if (display === "compact") {
113
- return Boolean(isComplete && (onClick || onDelete));
114
- }
115
- else if (display === "expanded") {
116
- return Boolean(isComplete && onClick);
117
- }
118
- return false;
119
- }
120
-
121
- exports.FormatFile = FormatFile;
@@ -1,77 +0,0 @@
1
- 'use strict';
2
-
3
- var tslib_es6 = require('./tslib.es6-5b8768b7.js');
4
- var React = require('react');
5
- var classnames = require('classnames');
6
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
7
- var Content = require('./Content-2ca1ffe1.js');
8
-
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
-
11
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
13
-
14
- var css_248z$3 = ".FXzzrJAf890- {\n --glimmer-background: rgba(var(--color-black--rgb) 5%);\n --glimmer-shine: rgba(var(--color-white--rgb), var(--glimmer-shine-opacity));\n --glimmer-shine-opacity: 80%;\n --duration-base: calc(var(--timing-slowest) * 4); /* 2s */\n --duration-fast: calc(var(--duration-base) / 2); /* 1s */\n\n width: 100%;\n height: 100%;\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n background-color: rgba(0 0 0 5%);\n background-color: rgba(0, 0, 0 5%);\n background-color: var(--glimmer-background);\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n rgba(255, 255, 255, 0.8) calc(16px * 2),\n transparent calc(16px * 4)\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n rgba(255, 255, 255, 80%) calc(16px * 2),\n transparent calc(16px * 4)\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n var(--glimmer-shine) var(--space-larger),\n transparent var(--space-extravagant)\n );\n background-repeat: no-repeat;\n background-size: calc(16px * 4) 100%;\n background-size: var(--space-extravagant) 100%;\n -webkit-animation: FXzzrJAf890- 2s infinite linear;\n animation: FXzzrJAf890- 2s infinite linear;\n}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {.FXzzrJAf890- {\n --glimmer-background: rgba(var(--color-black--rgb), 5%);\n}\n}\n\n.s9bG0yRJR3A- {\n --glimmer-background: rgba(var(--color-white--rgb) 10%);\n --glimmer-shine-opacity: 25%;\n}\n\n@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {\n\n.s9bG0yRJR3A- {\n --glimmer-background: rgba(var(--color-white--rgb), 10%);\n}\n}\n\n@-webkit-keyframes FXzzrJAf890- {\n 0%,\n 20% {\n background-position-x: calc((16px * 4) * -1);\n background-position-x: calc(calc(16px * 4) * -1);\n background-position-x: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position-x: calc(100% + (16px * 4));\n background-position-x: calc(100% + calc(16px * 4));\n background-position-x: calc(100% + var(--space-extravagant));\n }\n}\n\n@keyframes FXzzrJAf890- {\n 0%,\n 20% {\n background-position-x: calc((16px * 4) * -1);\n background-position-x: calc(calc(16px * 4) * -1);\n background-position-x: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position-x: calc(100% + (16px * 4));\n background-position-x: calc(100% + calc(16px * 4));\n background-position-x: calc(100% + var(--space-extravagant));\n }\n}\n\n.M0X0dxjIyv4- {\n width: 30%;\n max-width: 180px;\n min-width: 120px;\n}\n\n.v2Q1amzd7Ac- {\n display: inline-block;\n width: 100px;\n height: 36px;\n}\n\n._8va--lBgr38- {\n display: block;\n width: 100%;\n min-width: 100px;\n}\n";
15
- var styles = {"glimmer":"FXzzrJAf890-","reverseTheme":"s9bG0yRJR3A-","header":"M0X0dxjIyv4-","button":"v2Q1amzd7Ac-","buttonFill":"_8va--lBgr38-"};
16
- styleInject_es.styleInject(css_248z$3);
17
-
18
- var css_248z$2 = ".siUUG4rZNSk- {\n height: calc(16px / 2);\n height: var(--space-small);\n}\n\n.nFuBXyrhG2Q- {\n height: calc(16px * 1);\n height: var(--space-base);\n}\n\n.oiVEoAqI-fU- {\n height: calc(16px * 1.5);\n height: var(--space-large);\n}\n\n.Tkmo6mSMI9Y- {\n height: calc(16px * 2);\n height: var(--space-larger);\n}\n\n.uVeaD3IhD6o- {\n height: calc(16px * 3);\n height: var(--space-largest);\n}\n\n._6Wak9NLJ3VQ- {\n height: 100%;\n min-width: calc(16px * 1);\n min-width: var(--space-base);\n min-height: calc(16px * 1);\n min-height: var(--space-base);\n}\n";
19
- var sizes = {"small":"siUUG4rZNSk-","base":"nFuBXyrhG2Q-","large":"oiVEoAqI-fU-","larger":"Tkmo6mSMI9Y-","largest":"uVeaD3IhD6o-","auto":"_6Wak9NLJ3VQ-"};
20
- styleInject_es.styleInject(css_248z$2);
21
-
22
- var css_248z$1 = ".enoWbteryXg- {\n width: 100%;\n}\n\n._9qkwCdedX1M- {\n width: 85%;\n}\n\n.XtyJxvcJDFs- {\n width: 70%;\n}\n\n._8unQ0TS1He4-,\n.ameRMYEKfss- {\n width: auto;\n aspect-ratio: 1;\n}\n\n.ameRMYEKfss- {\n border-radius: 100%;\n border-radius: var(--radius-circle);\n}\n";
23
- var shapes = {"rectangle":"enoWbteryXg-","rectangleShort":"_9qkwCdedX1M-","rectangleShorter":"XtyJxvcJDFs-","square":"_8unQ0TS1He4-","circle":"ameRMYEKfss-"};
24
- styleInject_es.styleInject(css_248z$1);
25
-
26
- var css_248z = ".hO0mZ6TeVko- {\n -webkit-animation-duration: var(--duration-base);\n animation-duration: var(--duration-base);\n}\n\n.WXi5-zF8Ll4- {\n -webkit-animation-duration: calc(var(--duration-fast));\n animation-duration: calc(var(--duration-fast));\n}\n";
27
- var timings = {"base":"hO0mZ6TeVko-","fast":"WXi5-zF8Ll4-"};
28
- styleInject_es.styleInject(css_248z);
29
-
30
- const GLIMMER_TEST_ID = "ATL-Glimmer";
31
- const GLIMMER_HEADER_TEST_ID = "ATL-GlimmerHeader";
32
- const GLIMMER_TEXT_TEST_ID = "ATL-GlimmerText";
33
- const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
34
- /**
35
- * **Experimental component! Use at your own risk.**
36
- *
37
- * Foundational component used to build loading states such as Skeleton UI
38
- *
39
- * @experimental
40
- */
41
- function Glimmer({ size = "base", shape = "rectangle", timing = "base", reverseTheme = false, width, }) {
42
- const className = classnames__default["default"](styles.glimmer, sizes[size], shapes[shape], timings[timing], { [styles.reverseTheme]: reverseTheme });
43
- return (React__default["default"].createElement("div", { "aria-busy": "true", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
44
- }
45
- Glimmer.Header = function GlimmerHeader(_a) {
46
- var { level = 3 } = _a, props = tslib_es6.__rest(_a, ["level"]);
47
- const headerSize = {
48
- 1: "largest",
49
- 2: "larger",
50
- 3: "large",
51
- 4: "base",
52
- 5: "small",
53
- };
54
- return (React__default["default"].createElement("div", { className: styles.header, "data-testid": GLIMMER_HEADER_TEST_ID },
55
- React__default["default"].createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
56
- };
57
- Glimmer.Text = function GlimmerText(_a) {
58
- var { width, lines = 3 } = _a, props = tslib_es6.__rest(_a, ["width", "lines"]);
59
- const children = [
60
- React__default["default"].createElement(Glimmer, Object.assign({ key: "1", size: "small", shape: "rectangleShort" }, props)),
61
- React__default["default"].createElement(Glimmer, Object.assign({ key: "2", size: "small" }, props)),
62
- React__default["default"].createElement(Glimmer, Object.assign({ key: "3", size: "small", shape: "rectangleShorter" }, props)),
63
- ].slice(0, lines);
64
- return (React__default["default"].createElement("div", { style: { width }, "data-testid": GLIMMER_TEXT_TEST_ID },
65
- React__default["default"].createElement(Content.Content, { spacing: "small" }, children)));
66
- };
67
- Glimmer.Button = function GlimmerButton(_a) {
68
- var { fullWidth = false } = _a, props = tslib_es6.__rest(_a, ["fullWidth"]);
69
- const buttonClassNames = classnames__default["default"](styles.button, {
70
- [styles.buttonFill]: fullWidth,
71
- });
72
- return (React__default["default"].createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
73
- React__default["default"].createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
74
- };
75
-
76
- exports.GLIMMER_TEST_ID = GLIMMER_TEST_ID;
77
- exports.Glimmer = Glimmer;
@@ -1,28 +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
- var Typography = require('./Typography-973b122e.js');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
12
-
13
- var css_248z = ".S72WkdRbhc0- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n border-radius: calc(16px / 4);\n border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n color: rgb(66, 78, 86);\n color: var(--color-greyBlue--dark);\n background-color: rgb(238, 240, 242);\n background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n color: rgb(128, 25, 0);\n color: var(--color-red--dark);\n background-color: rgb(255, 226, 219);\n background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n color: rgb(158, 98, 23);\n color: var(--color-orange--dark);\n background-color: rgb(253, 239, 222);\n background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n color: rgb(81, 114, 9);\n color: var(--color-green--dark);\n background-color: rgb(236, 243, 219);\n background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n color: rgb(1, 27, 37);\n color: var(--color-blue--dark);\n background-color: rgb(217, 223, 225);\n background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n color: rgb(49, 69, 98);\n color: var(--color-navy--dark);\n background-color: rgb(228, 233, 239);\n background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n color: rgb(144, 127, 10);\n color: var(--color-yellow--dark);\n background-color: rgb(250, 246, 219);\n background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n color: rgb(99, 125, 46);\n color: var(--color-lime--dark);\n background-color: rgb(240, 246, 227);\n background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n color: rgb(88, 73, 127);\n color: var(--color-purple--dark);\n background-color: rgb(237, 234, 246);\n background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n color: rgb(116, 62, 98);\n color: var(--color-pink--dark);\n background-color: rgb(244, 231, 239);\n background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n color: rgb(40, 112, 95);\n color: var(--color-teal--dark);\n background-color: rgb(226, 243, 239);\n background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n color: rgb(122, 128, 21);\n color: var(--color-yellowGreen--dark);\n background-color: rgb(245, 246, 222);\n background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n color: rgba(255, 255, 255, 1);\n color: var(--color-white);\n background-color: rgb(77, 105, 116);\n background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n color: rgb(39, 105, 146);\n color: var(--color-lightBlue--dark);\n background-color: rgb(226, 241, 250);\n background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n color: rgb(55, 69, 132);\n color: var(--color-indigo--dark);\n background-color: rgb(230, 233, 247);\n background-color: var(--color-indigo--lightest);\n}\n";
14
- var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
15
- styleInject_es.styleInject(css_248z);
16
-
17
- function InlineLabel({ size = "base", color = "greyBlue", children, }) {
18
- const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
19
- const sizeMapper = {
20
- base: "small",
21
- large: "large",
22
- larger: "large",
23
- };
24
- return (React__default["default"].createElement("span", { className: className },
25
- React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
26
- }
27
-
28
- exports.InlineLabel = InlineLabel;
@@ -1,33 +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 = "._4bvHwa3-qBA- > *:not(:last-child) {\n margin-bottom: -1px !important;\n}\n\n.bHm4WuX8ToY- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.bHm4WuX8ToY- > *:not(:last-child) {\n margin-bottom: auto;\n margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group */\n\n.nmDPgrXofeE- {\n --public-field--top-left-radius: 0;\n --public-field--top-right-radius: 0;\n --public-field--bottom-left-radius: 0;\n --public-field--bottom-right-radius: 0;\n}\n\n._4bvHwa3-qBA- > :first-child:not(.bHm4WuX8ToY-) {\n --public-field--top-left-radius: var(--radius-base);\n --public-field--top-right-radius: var(--radius-base);\n}\n\n._4bvHwa3-qBA- > :last-child:not(.bHm4WuX8ToY-) {\n --public-field--bottom-left-radius: var(--radius-base);\n --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.bHm4WuX8ToY-:first-child > :first-child {\n --public-field--top-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:first-child > :last-child {\n --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.bHm4WuX8ToY-:last-child > :first-child {\n --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:last-child > :last-child {\n --public-field--bottom-right-radius: var(--radius-base);\n}\n";
13
- var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
14
- styleInject_es.styleInject(css_248z);
15
-
16
- function InputGroup({ children, flowDirection = "vertical", }) {
17
- if (isInvalidGroupNesting(children))
18
- return React__default["default"].createElement(React__default["default"].Fragment, null);
19
- const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
20
- return React__default["default"].createElement("div", { className: className }, children);
21
- }
22
- function isInvalidGroupNesting(childs) {
23
- return React__default["default"].Children.toArray(childs).some(child => {
24
- if (child.type === InputGroup &&
25
- child.props.flowDirection != "horizontal") {
26
- console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
27
- return true;
28
- }
29
- return false;
30
- });
31
- }
32
-
33
- exports.InputGroup = InputGroup;
@@ -1,62 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var ReactMarkdown = require('react-markdown');
5
- var Text = require('./Text-4a2bc89f.js');
6
- var Emphasis = require('./Emphasis-b2d1b3aa.js');
7
- var Heading = require('./Heading-0f4ecb0c.js');
8
- var Content = require('./Content-2ca1ffe1.js');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
- var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
14
-
15
- function Markdown({ content, externalLink, basicUsage }) {
16
- const props = Object.assign({}, (basicUsage && {
17
- disallowedElements: [
18
- "p",
19
- "h1",
20
- "h2",
21
- "h3",
22
- "h4",
23
- "h5",
24
- "h6",
25
- "table",
26
- "ul",
27
- "li",
28
- "code",
29
- "image",
30
- ],
31
- unwrapDisallowed: true,
32
- }));
33
- const Tag = basicUsage ? React__default["default"].Fragment : Content.Content;
34
- return (React__default["default"].createElement(Tag, null,
35
- React__default["default"].createElement(ReactMarkdown__default["default"], Object.assign({}, props, { linkTarget: externalLink ? "_blank" : undefined, components: {
36
- p: renderParagraph,
37
- strong: renderStrong,
38
- em: renderEmphasis,
39
- h1: renderHeading(1),
40
- h2: renderHeading(2),
41
- h3: renderHeading(3),
42
- h4: renderHeading(4),
43
- h5: renderHeading(5),
44
- } }), content)));
45
- }
46
- function renderParagraph({ children }) {
47
- return React__default["default"].createElement(Text.Text, null, children);
48
- }
49
- function renderStrong({ children }) {
50
- return React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" }, children);
51
- }
52
- function renderEmphasis({ children }) {
53
- return React__default["default"].createElement(Emphasis.Emphasis, { variation: "italic" }, children);
54
- }
55
- function renderHeading(level) {
56
- function buildHeading({ children }) {
57
- return React__default["default"].createElement(Heading.Heading, { level: level }, children);
58
- }
59
- return buildHeading;
60
- }
61
-
62
- exports.Markdown = Markdown;